{"v":0,"components":{"packages-accordion-accordionsection":{"id":"packages-accordion-accordionsection","name":"AccordionSection","path":"./__docs__/wonder-blocks-accordion/accordion-section.stories.tsx","stories":[{"id":"packages-accordion-accordionsection--default","name":"Default","snippet":"const Default = () => This is the information present in this standalone section;","description":"By default, an AccordionSection is an uncontrolled component. To make it a controlled component, pass in BOTH the `expanded` prop and the `onToggle` prop. See more in the [Controlled](#controlled) and [Uncontrolled](#uncontrolled) examples below. Visually by default, an AccordionSection has a caret at the end of the header block and rounded corners. Passing in a string into the header prop will automatically style the header and add spacing between the header and the caret. Passing in a string into the children prop will automatically give the children Body typography from Wonder Blocks Typography."},{"id":"packages-accordion-accordionsection--controlled","name":"Controlled","snippet":"const Controlled = function Render() {\n const [expanded, setExpanded] = React.useState(false);\n\n const handleToggle = () => {\n // eslint-disable-next-line no-console\n console.log(\"Click! This function is being called!\");\n setExpanded(!expanded);\n };\n\n return (\n \n setExpanded(!expanded)}\n style={styles.button}\n >\n Click me to toggle the accordion section\n \n \n {`Expanded state: ${expanded}`}\n \n \n This is the information present in this controlled section\n \n \n );\n};","description":"AccordionSection is a controlled component if the `expanded` and `onToggle` props are passed in. The `expanded` prop determines whether the section is expanded or closed, and the `onToggle` prop function is called when the section header is clicked, and is generally used to set the `expanded` state outside where this section is used. Here is an example of how to set this up. The `expanded` prop is initially set to `false` and is toggled by the `handleToggle` function. The `handleToggle` function is passed into the `onToggle` prop of the AccordionSection. The `handleToggle` function is also called when the button is clicked."},{"id":"packages-accordion-accordionsection--uncontrolled","name":"Uncontrolled","snippet":"const Uncontrolled = function Render() {\n return (\n \n // eslint-disable-next-line no-console\n console.log(\"Click! This function is being called!\")\n }\n >\n This is the information present in this uncontrolled section\n \n );\n};","description":"AccordionSection is an uncontrolled component when the `expanded` prop is not passed in or the `onToggle` prop is not passed in. In this case, the AccordionSection will manage its own state. If the `onToggle` prop is passed in (and `expanded` is not), the `onToggle` function will be called; this is to ensure that any functions depending on the title click will still work (e.g. analytics). If the `expanded` prop is passed in (and `onToggle` is not), this `expanded` prop will be used to determine whether the section is expanded at first. In this example, you can see that there is no explicit state management (as opposed to the [Controlled](#controlled) example above). The AccordionSection manages its own state, but the `onToggle` prop function is still called when the section header is clicked."},{"id":"packages-accordion-accordionsection--react-element-in-header","name":"React Element In Header","snippet":"const ReactElementInHeader = function Render() {\n return (\n \n \n }\n horizontalRule=\"none\"\n />\n }\n >\n This is the information present in the first section\n \n \n {/* The following AccordionSection is implemented\n the same way as the CourseAccordion in the LearnableNodeSidebar\n that can be found on Khan Academy. It should truncate the\n text with ellipses when the window size is small.*/}\n \n \n \n \n \n World History Project - Origins to the Present\n (Example of a long title)\n \n \n }\n >\n This is the information present in the second section\n \n \n );\n};","description":"An AccordionSection can have either a string or a React Element passed in as its header. Passing in a React Element means no built in styling will be applied to the header. The first example here shows how a DetailCell can be used as the header. The second example shows how a custom header can be created - note that in this example, a smaller window size will cause the header text to truncate with ellipses."},{"id":"packages-accordion-accordionsection--react-element-in-children","name":"React Element In Children","snippet":"const ReactElementInChildren = function Render() {\n const [expanded, setExpanded] = React.useState(true);\n\n return (\n \n \n }\n horizontalRule=\"none\"\n styles={{\n root: {\n borderTop: `1px solid ${semanticColor.core.border.neutral.subtle}`,\n },\n }}\n />\n \n );\n};","description":"An AccordionSection can have either a string or a React Element passed in as its children. Passing in a React Element means no built in styling will be applied to the children. In this example, all the children styles are coming from the DetailCell component, including the horizontal line between the header and the content (added as a borderTop on the DetailCell). Note that if the AccordionSection has a `cornerKind` of `\"rounded\"` or `\"rounded-per-section\"`, the child React Element will have its corners cut off."},{"id":"packages-accordion-accordionsection--caret-positions","name":"Caret Positions","snippet":"const CaretPositions = function Render() {\n const [expanded, setExpanded] = React.useState(Array(4).fill(false));\n\n const handleToggle = (index: number) => {\n const newExpanded = [...expanded];\n newExpanded[index] = !newExpanded[index];\n setExpanded(newExpanded);\n };\n\n return (\n \n {/* Left-to-right */}\n \n \n \n Caret position: end, language direction: left to\n right\n \n handleToggle(0)}\n >\n Something\n \n \n \n \n \n Caret position: start, language direction: left to\n right\n \n handleToggle(1)}\n >\n Something\n \n \n \n \n {/* Right-to-left */}\n \n \n \n Caret position: end, language direction: right to\n left\n \n handleToggle(2)}\n >\n کچھ\n \n \n \n \n \n Caret position: start, language direction: right to\n left\n \n handleToggle(3)}\n >\n کچھ\n \n \n \n \n );\n};","description":"An AccordionSection can have the caret at the start or the end of the header block. \"start\" means it’s on the left of a left-to-right language (and on the right of a right-to-left language), and \"end\" means it’s on the right of a left-to-right language (and on the left of a right-to-left language). If the `caretPosition` prop is specified both here in the AccordionSection and within the parent Accordion component, the AccordionSection's `caretPosition` value is prioritized."},{"id":"packages-accordion-accordionsection--corner-kinds","name":"Corner Kinds","snippet":"const CornerKinds = function Render() {\n const [expanded, setExpanded] = React.useState(Array(4).fill(false));\n\n const handleToggle = (index: number) => {\n const newExpanded = [...expanded];\n newExpanded[index] = !newExpanded[index];\n setExpanded(newExpanded);\n };\n\n return (\n \n \n \n Corner kind: square\n \n handleToggle(0)}\n >\n Something\n \n \n \n \n Corner kind: rounded\n \n handleToggle(1)}\n >\n Something\n \n \n \n \n Corner kind: rounded-per-section\n \n handleToggle(2)}\n >\n Something\n \n \n \n );\n};","description":"An AccordionSection can have different corner kinds. If `cornerKind` is `square`, the corners have no border radius. If `cornerKind` is `rounded`, the corners are rounded. If `cornerKind` is `rounded-per-section`, the corners are rounded and there is a bottom margin. If `cornerKind` is specified both here in the AccordionSection and within a parent Accordion component, the AccordionSection’s `cornerKind value is prioritized."},{"id":"packages-accordion-accordionsection--not-collapsible","name":"Not Collapsible","snippet":"const NotCollapsible = () => (\n \n Something\n \n);","description":"An AccordionSection can have its `collapsible` prop set to false. This means that the section's header will not be clickable, and the section will always be expanded. NOTE: It is recommended to only use this prop when the AccordionSection is used on its own, not within an Accordion."},{"id":"packages-accordion-accordionsection--with-animation","name":"With Animation","snippet":"const WithAnimation = () => {\n return (\n \n Something\n \n );\n};","description":"An AccordionSection can be animated using the `animated` prop. This animation includes the caret, the expansion/collapse, and the border radius. If the user has `prefers-reduced-motion` opted in, this animation should be disabled. This can be done by passing `animated={false}` to the AccordionSection. If `animated` is specified both here in the AccordionSection and within a parent Accordion component, the AccordionSection's `animated` value is prioritized. **NOTE: HEIGHT ANIMATIONS ARE INHERENTLY NOT PERFORMANT.** USING ANIMATIONS *WILL* DECREASE PERFORMANCE. It is recommended that animations be used sparingly for this reason, and only on lighter accordions."},{"id":"packages-accordion-accordionsection--with-style","name":"With Style","snippet":"const WithStyle = function Render() {\n const [expanded, setExpanded] = React.useState(true);\n\n const customStyles = {\n backgroundColor: semanticColor.core.background.neutral.subtle,\n margin: sizing.size_240,\n outline: `2px solid ${semanticColor.core.border.neutral.subtle}`,\n };\n\n return (\n \n I have a gray background!\n \n );\n};","description":"An AccordionSection can have custom styles passed in. In this example, the AccordionSection has a gray background and a border, as well as extra margin."},{"id":"packages-accordion-accordionsection--with-header-style","name":"With Header Style","snippet":"const WithHeaderStyle = function Render() {\n const [expanded, setExpanded] = React.useState(false);\n\n const headerStyle = {\n backgroundColor: semanticColor.core.background.neutral.subtle,\n };\n\n return (\n \n I have a gray background!\n \n );\n};","description":"An AccordionSection can have custom styles passed in for the header. In this example, the header has a gray background."},{"id":"packages-accordion-accordionsection--with-tag","name":"With Tag","snippet":"const WithTag = function Render() {\n const [expanded, setExpanded] = React.useState(false);\n\n return (\n \n I am an h3!\n \n );\n};","description":"An AccordionSection can be given a semantic tag to apply to its header. This is h2 by default, but it should be changed to match the hierarchy of the page for accessibility!!! In this example, the AccordionSection has an h3 tag, so the header will show up as an h3 in the DOM."}],"import":"import { AccordionSection, ComponentInfo, Strut } from \"@khanacademy/wonder-blocks-accordion\";\nimport { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport { DetailCell } from \"@khanacademy/wonder-blocks-cell\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"An AccordionSection displays a section of content that can be shown or hidden by clicking its header. This is generally used within the Accordion component, but it can also be used on its own if you need only one collapsible section. ### Usage ```jsx import { Accordion, AccordionSection } from \"@khanacademy/wonder-blocks-accordion\"; // Within an Accordion This is the information present in the first section This is the information present in the second section This is the information present in the third section // On its own, controlled const [expanded, setExpanded] = React.useState(false); This is the information present in the standalone section // On its own, uncontrolled This is the information present in the standalone section ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-accordion/src/index.ts","description":"An AccordionSection displays a section of content that can be shown or\nhidden by clicking its header. This is generally used within the Accordion\ncomponent, but it can also be used on its own if you need only one\ncollapsible section.\n\n### Usage\n\n```jsx\nimport {\n Accordion,\n AccordionSection\n} from \"@khanacademy/wonder-blocks-accordion\";\n\n// Within an Accordion\n\n \n This is the information present in the first section\n \n \n This is the information present in the second section\n \n \n This is the information present in the third section\n \n\n\n// On its own, controlled\nconst [expanded, setExpanded] = React.useState(false);\n\n This is the information present in the standalone section\n\n\n// On its own, uncontrolled\n\n This is the information present in the standalone section\n\n```","displayName":"AccordionSection","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The unique identifier for the accordion section.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"The content to display when this section is shown. If a string is\npassed in, it will automatically be given Body typography from\nWonder Blocks Typography.","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string | ReactElement>"}},"header":{"defaultValue":null,"description":"The header for this section. If a string is passed in, it will\nautomatically be given Body typography from Wonder Blocks Typography.","name":"header","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string | ReactElement>"}},"caretPosition":{"defaultValue":null,"description":"Whether to put the caret at the start or end of the header block\nin this section. \"start\" means it’s on the left of a left-to-right\nlanguage (and on the right of a right-to-left language), and \"end\"\nmeans it’s on the right of a left-to-right language\n(and on the left of a right-to-left language).\nDefaults to \"end\".\n\nIf this prop is specified both here in the AccordionSection and\nwithin a parent Accordion component, the AccordionSection’s caretPosition\nvalue is prioritized.","name":"caretPosition","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"start\" | \"end\"","value":[{"value":"\"start\""},{"value":"\"end\""}]}},"cornerKind":{"defaultValue":null,"description":"The preset styles for the corners of this accordion.\n`square` - corners have no border radius.\n`rounded` - the overall container's corners are rounded.\n`rounded-per-section` - each section's corners are rounded, and there\nis white space between each section.\n\nIf this prop is specified both here in the AccordionSection and\nwithin a parent Accordion component, the AccordionSection’s cornerKind\nvalue is prioritized.","name":"cornerKind","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AccordionCornerKindType","value":[{"value":"\"square\""},{"value":"\"rounded\""},{"value":"\"rounded-per-section\""}]}},"collapsible":{"defaultValue":null,"description":"Whether this section is collapsible. If false, the header will not be\nclickable, and the section will stay expanded at all times.","name":"collapsible","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Whether this section is expanded or closed.\n\nNOTE: This prop is NOT used when this AccordionSection is rendered\nwithin an Accordion component. In that case, the Accordion component\nmanages the expanded state of the AccordionSection.","name":"expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"animated":{"defaultValue":null,"description":"Whether to include animation on the header. This should be false\nif the user has `prefers-reduced-motion` opted in. Defaults to false.\n\nIf this prop is specified both here in the AccordionSection and\nwithin a parent Accordion component, the AccordionSection’s animated\nvalue is prioritized.","name":"animated","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"onToggle":{"defaultValue":null,"description":"Called when the header is clicked.\nTakes the new expanded state as an argument. This way, the function\nreturned from React.useState can be passed in directly.","name":"onToggle","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"((newExpandedState: boolean) => unknown)"}},"style":{"defaultValue":null,"description":"Custom styles for the overall accordion section container.","name":"style","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"headerStyle":{"defaultValue":null,"description":"Custom styles for the header.","name":"headerStyle","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"tag":{"defaultValue":null,"description":"The semantic tag for this clickable header (e.g. \"h1\", \"h2\", etc).\nPlease use this to ensure that the header is hierarchically correct.\nDefaults to \"h2\".","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"TagType","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""}]}},"testId":{"defaultValue":null,"description":"The test ID used to locate this component in automated tests.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"isFirstSection":{"defaultValue":null,"description":"Whether this section is the first section in the accordion.\nFor internal use only.\n@ignore","name":"isFirstSection","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"isLastSection":{"defaultValue":null,"description":"Whether this section is the last section in the accordion.\nFor internal use only.\n@ignore","name":"isLastSection","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"isRegion":{"defaultValue":null,"description":"Whether this section should have role=\"region\". True by default.\nAccording to W3, the panel container should have role region except\nwhen there are more than six panels in an accordion, in which case\nwe should set this prop to false.\nFor internal use only.\n@ignore","name":"isRegion","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion-section.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"AccordionSection"}},"packages-accordion-accordion":{"id":"packages-accordion-accordion","name":"Accordion","path":"./__docs__/wonder-blocks-accordion/accordion.stories.tsx","stories":[{"id":"packages-accordion-accordion--default","name":"Default","snippet":"const Default = () => {exampleSections};","description":"By default, an accordion has a caret at the end of the header block and rounded corners."},{"id":"packages-accordion-accordion--allow-multiple-expanded","name":"Allow Multiple Expanded","snippet":"const AllowMultipleExpanded = () => (\n \n \n \n Allow multiple expanded (default)\n \n {exampleSections}\n \n \n \n Allow only one expanded\n \n {exampleSections}\n \n \n \n Allow only one expanded\n \n {exampleSections}\n \n \n \n Allow only one expanded\n \n {exampleSections}\n \n \n \n \n);","description":"An accordion allows multiple sections to be expanded at the same time by default. However, if `allowMultipleExpanded` is set to `false`, only one section can be expanded at a time."},{"id":"packages-accordion-accordion--caret-positions","name":"Caret Positions","snippet":"const CaretPositions = () => {\n return (\n \n {/* Left-to-right */}\n \n \n \n Caret position: end, language direction: left to\n right\n \n \n {exampleSections}\n \n \n \n \n \n Caret position: start, language direction: left to\n right\n \n \n {exampleSections}\n \n \n \n {/* Right-to-left */}\n \n \n \n Caret position: end, language direction: right to\n left\n \n \n \n یہ کچھ معلومات ہے۔\n \n\n \n یہ کچھ معلومات ہے۔\n \n\n \n یہ کچھ معلومات ہے۔\n \n \n \n \n \n \n Caret position: start, language direction: right to\n left\n \n \n \n یہ کچھ معلومات ہے۔\n \n\n \n یہ کچھ معلومات ہے۔\n \n\n \n یہ کچھ معلومات ہے۔\n \n \n \n \n \n );\n};","description":"An accordion can have the caret at the start or the end of the header block. \"start\" means it’s on the left of a left-to-right language (and on the right of a right-to-left language), and \"end\" means it’s on the right of a left-to-right language (and on the left of a right-to-left language). If the `caretPosition` prop is specified both here in the Accordion and within a child AccordionSection component, the AccordionSection's `caretPosition` value is prioritized."},{"id":"packages-accordion-accordion--corner-kinds","name":"Corner Kinds","snippet":"const CornerKinds = () => {\n return (\n \n \n Corner kind: square\n {exampleSections}\n \n \n Corner kind: rounded\n \n {exampleSections}\n \n \n \n \n Corner kind: rounded-per-section\n \n \n {exampleSections}\n \n \n \n );\n};","description":"An accordion can have different corner kinds. If `cornerKind` is `square`, the corners have no border radius. If `cornerKind` is `rounded`, the overall container's corners are rounded. If `cornerKind` is `rounded-per-section`, each section's corners are rounded, and there is vertical white space between each section. If `cornerKind` is specified both here in the Accordion and within a child AccordionSection component, the AccordionSection’s `cornerKind` value is prioritized."},{"id":"packages-accordion-accordion--with-initial-expanded-index","name":"With Initial Expanded Index","snippet":"const WithInitialExpandedIndex = () => {\n return (\n {exampleSections}\n );\n};","description":"An Accordion can have an initial expanded index. If this prop is specified, the AccordionSection at that index will be expanded when the Accordion is first rendered. If this prop is not specified, no AccordionSections will be expanded when the Accordion is first rendered. In this example, the AccordionSection at index 1 (the second section) is expanded by default."},{"id":"packages-accordion-accordion--with-animation","name":"With Animation","snippet":"const WithAnimation = () => {\n return (\n \n \n \n cornerKind: square\n \n {exampleSections}\n \n \n \n cornerKind: rounded\n \n {exampleSections}\n \n \n \n \n cornerKind: rounded-per-section\n \n \n {exampleSections}\n \n \n \n \n \n \n cornerKind: square, allowMultipleExpanded: false\n \n \n {exampleSections}\n \n \n \n \n cornerKind: rounded, allowMultipleExpanded: false\n \n \n {exampleSections}\n \n \n \n \n cornerKind: rounded-per-section,\n allowMultipleExpanded: false\n \n \n {exampleSections}\n \n \n \n \n \n With unevenly sided sections, allowMultipleExpanded:\n false\n \n \n \n \n This is the information present in the first\n section\n \n \n \n \n This is the information present in the second\n section\n \n \n \n \n This is the information present in the third\n section\n \n \n \n \n \n );\n};","description":"An Accordion can be animated using the `animated` prop. This animation includes the caret, the expansion/collapse, and the last section's border radius. In this example, animated accordions with different corner kinds are shown to demonstrate the border radius transition, as well as accordions with `allowMultipleExpanded` set to `false`, and an accordion with sections of different heights. If the user has `prefers-reduced-motion` opted in, this animation should be disabled. This can be done by passing `animated={false}` to the Accordion. If `animated` is specified both here in the Accordion and within a child AccordionSection component, the AccordionSection's `animated` value is prioritized. **NOTE: HEIGHT ANIMATIONS ARE INHERENTLY NOT PERFORMANT.** USING ANIMATIONS *WILL* DECREASE PERFORMANCE. It is recommended that animations be used sparingly for this reason, and only on lighter accordions."},{"id":"packages-accordion-accordion--with-style","name":"With Style","snippet":"const WithStyle = () => {\n const customStyles = {\n border: `2px solid ${semanticColor.mastery.primary}`,\n padding: sizing.size_320,\n };\n\n return (\n \n \n Something\n \n \n Something\n \n \n );\n};","description":"An Accordion with custom styles. The custom styles in this example include a purple border and extra padding. Note that the Accordion's border is different than the AccordionSection border styles. Passing custom styles here will not affect the sections' styles. If you want to change the corner kind of a single section, that can be done using the `cornerKind` prop (as demonstrated here). Passing in a custom border radius to the section is NOT recommended, as it would cause the header's focus outline to no longer match the section."},{"id":"packages-accordion-accordion--single-section","name":"Single Section","snippet":"const SingleSection = () => {\n return (\n \n {[\n \n This is the information present in the first section\n ,\n ]}\n \n );\n};","description":"To use an Accordion with only one section, you must pass in an array of one element. Another approach to displaying a single AccordionSection can be to use the AccordionSection component directly (not as a child of an Accordion)."},{"id":"packages-accordion-accordion--long-sections","name":"Long sections (performance check)","snippet":"const LongSections = function Render() {\n const [shown, setShown] = React.useState(false);\n\n return (\n \n \n {shown && (\n \n {Array(20).fill(\n \n \n \n \n \n \n ,\n )}\n \n )}\n \n );\n};","description":"This is an example of an Accordion with many sections, as well as a lot of content within each section."},{"id":"packages-accordion-accordion--with-dropdown","name":"With Dropdown","snippet":"const WithDropdown = function Render() {\n const [value, setValue] = React.useState(null);\n const [singleOpened, setSingleOpened] = React.useState(false);\n\n const [values, setValues] = React.useState([]);\n const [multiOpened, setMultiOpened] = React.useState(false);\n\n const items = [\n ,\n ,\n ,\n ];\n\n return (\n \n \n {/* Adding height because overflow hidden in sections. */}\n \n \n {items}\n \n \n \n \n \n \n {items}\n \n \n \n \n );\n};","description":"This is an example of an Accordion with a dropdown within each section. This demonstrates how the accordion keyboard interactions do not interfere with the dropdown's keyboard interactions."},{"id":"packages-accordion-accordion--background-color-example","name":"Background Color Example","snippet":"const BackgroundColorExample = () => {\n const accordionSectionStyle = {\n backgroundColor: semanticColor.core.background.instructive.subtle,\n // NOTE: This border color uses the opacity token to match the\n // background color. By default, the border color is\n // `fadedOffBlack16`, which is the HEX value of `offBlack16`.\n borderColor: semanticColor.core.border.neutral.subtle,\n };\n\n const sections = [\n \n This is the information present in the first section\n ,\n \n This is the information present in the second section\n ,\n \n This is the information present in the third section\n ,\n ];\n\n return (\n <>\n {sections}\n \n {sections}\n \n \n {sections}\n \n \n );\n};","description":"Accordion has a white background color by default. If you want to change the background color, you can pass in a custom style with the desired background color into each individual AccordionSection. NOTE: Passing in a background color to the Accordion itself is NOT recommended, because it will cause the color to overflow into the corners of a rounded Accordion and between the individual sections of a rounded-per-section Accordion."}],"import":"import { Accordion, AccordionSection, ComponentInfo, Strut } from \"@khanacademy/wonder-blocks-accordion\";\nimport { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport { MultiSelect, OptionItem, SingleSelect } from \"@khanacademy/wonder-blocks-dropdown\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"An accordion displays a vertically stacked list of sections, each of which contains content that can be shown or hidden by clicking its header. The Wonder Blocks Accordion component is a styled wrapper for a list of AccordionSection components. It also wraps the AccordionSection components in list items. ### Usage ```jsx import { Accordion, AccordionSection } from \"@khanacademy/wonder-blocks-accordion\"; This is the information present in the first section This is the information present in the second section This is the information present in the third section ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-accordion/src/index.ts","description":"An accordion displays a vertically stacked list of sections, each of which\ncontains content that can be shown or hidden by clicking its header.\n\nThe Wonder Blocks Accordion component is a styled wrapper for a list of\nAccordionSection components. It also wraps the AccordionSection\ncomponents in list items.\n\n### Usage\n\n```jsx\nimport {\n Accordion,\n AccordionSection\n} from \"@khanacademy/wonder-blocks-accordion\";\n\n\n \n This is the information present in the first section\n \n \n This is the information present in the second section\n \n \n This is the information present in the third section\n \n\n```","displayName":"Accordion","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The unique identifier for the accordion.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"The AccordionSection components to display within this Accordion.","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"ReactElement & Readonly<{ role?: AriaRole | undefined; }> & { id?: string | undefined; children: string | ReactElement>; header: string | ReactElement>; caretPosition?: \"start\" | \"end\" | undefined; cornerKind?: AccordionCornerKindType | undefined; collapsible?: boolean | undefined; expanded?: boolean | undefined; animated?: boolean | undefined; onToggle?: ((newExpandedState: boolean) => unknown) | undefined; style?: StyleType; headerStyle?: StyleType; tag?: TagType | undefined; testId?: string | undefined; isFirstSection?: boolean | undefined; isLastSection?: boolean | undefined; isRegion?: boolean | undefined; } & RefAttributes, string | JSXElementConstructor>[]"}},"initialExpandedIndex":{"defaultValue":null,"description":"The index of the AccordionSection that should be expanded when the\nAccordion is first rendered. If not specified, no AccordionSections\nwill be expanded when the Accordion is first rendered.","name":"initialExpandedIndex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"allowMultipleExpanded":{"defaultValue":null,"description":"Whether multiple AccordionSections can be expanded at the same time.\nIf not specified, multiple AccordionSections can be expanded at a time.","name":"allowMultipleExpanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"caretPosition":{"defaultValue":null,"description":"Whether to put the caret at the start or end of the header block\nin this section. \"start\" means it’s on the left of a left-to-right\nlanguage (and on the right of a right-to-left language), and \"end\"\nmeans it’s on the right of a left-to-right language\n(and on the left of a right-to-left language).\nDefaults to \"end\".\n\nIf this prop is specified both here in the Accordion and within\na child AccordionSection component, the AccordionSection’s caretPosition\nvalue is prioritized.","name":"caretPosition","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"start\" | \"end\"","value":[{"value":"\"start\""},{"value":"\"end\""}]}},"cornerKind":{"defaultValue":null,"description":"The preset styles for the corners of this accordion.\n`square` - corners have no border radius.\n`rounded` - the overall container's corners are rounded.\n`rounded-per-section` - each section's corners are rounded,\nand there is vertical white space between each section.\n\nIf this prop is specified both here in the Accordion and within\na child AccordionSection component, the AccordionSection’s cornerKind\nvalue is prioritized.","name":"cornerKind","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AccordionCornerKindType","value":[{"value":"\"square\""},{"value":"\"rounded\""},{"value":"\"rounded-per-section\""}]}},"animated":{"defaultValue":null,"description":"Whether to include animation on the header. This should be false\nif the user has `prefers-reduced-motion` opted in. Defaults to false.\n\nIf this prop is specified both here in the Accordion and within\na child AccordionSection component, the AccordionSection’s animated\nvalue is prioritized.","name":"animated","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"style":{"defaultValue":null,"description":"Custom styles for the overall accordion container.","name":"style","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-accordion/src/components/accordion.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"Accordion"}},"packages-announcer":{"id":"packages-announcer","name":"AnnouncerExample","path":"./__docs__/wonder-blocks-announcer/announcer.stories.tsx","stories":[{"id":"packages-announcer--announce-message","name":"Announce Message","error":{"name":"Error","message":"Could not generate snippet without component name."}},{"id":"packages-announcer--announcer-in-modal","name":"Announcer In Modal","snippet":"const AnnouncerInModal = () => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [isOpen, setIsOpen] = React.useState(false);\n\n const handleClose = () => {\n setIsOpen(false);\n };\n\n const handleOpen = () => {\n setIsOpen(true);\n };\n\n const ModalContent = ({closeModal}: {closeModal: () => void}) => (\n Announcer Test Modal}\n styles={{root: {maxWidth: \"80rem\"}}}\n content={\n \n \n This modal contains an announcer.
\n Click the CTA button below to test screen reader\n announcements in a modal context.\n \n \n \n \n \n \n }\n />\n );\n\n return (\n \n Click “Announce on page” to test the document\n layer, then open the modal and click “Announce in\n modal” to test the modal layer.\n \n \n {!isOpen && (\n \n )}\n \n \n );\n};","description":"Test that screen reader announcements work correctly when a modal is open. When a WB modal dialog (any variant) is active with `aria-modal=\"true\"`, browsers hide everything outside it from the accessibility tree — including a live region at the body level. To work around this, Announcer injects a second set of live regions directly inside the `aria-modal` element when the modal mounts. - **\"Announce on page\"** fires into the document-level `wbAnnounce` node at `body`. - **\"Announce in modal\"** fires into the `wbAnnounce-modal` node inside the dialog. With a screen reader active, only the in-modal button should be audible while the modal is open."}],"import":"import { BodyText, Heading } from \"@khanacademy/wonder-blocks-typography\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport { ComponentInfo } from \"wonder-blocks\";\nimport { FlexibleDialog, ModalLauncher } from \"@khanacademy/wonder-blocks-modal\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"AnnouncerExample\" component.\n 110 | * ```\n 111 | **/\n> 112 | export default {\n | ^\n 113 | title: \"Packages / Announcer\",\n 114 | component: AnnouncerExample,\n 115 | decorators: [\n\n./__docs__/wonder-blocks-announcer/announcer.stories.tsx:\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\nimport type {Meta, StoryObj} from \"@storybook/react-vite\";\n\nimport {\n announceMessage,\n type AnnounceMessageProps,\n} from \"@khanacademy/wonder-blocks-announcer\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport {View} from \"@khanacademy/wonder-blocks-core\";\nimport {ModalLauncher, FlexibleDialog} from \"@khanacademy/wonder-blocks-modal\";\nimport {Heading, BodyText} from \"@khanacademy/wonder-blocks-typography\";\n\nimport ComponentInfo from \"../components/component-info\";\nimport packageConfig from \"../../packages/wonder-blocks-announcer/package.json\";\nimport {sizing} from \"@khanacademy/wonder-blocks-tokens\";\n\nconst AnnouncerExample = ({\n message = \"Clicked!\",\n level,\n debounceThreshold,\n label = \"Announce\",\n}: AnnounceMessageProps & {label?: string}) => {\n return (\n {\n const idRef = await announceMessage({\n message,\n level,\n debounceThreshold,\n });\n /* eslint-disable-next-line */\n console.log(idRef);\n }}\n >\n {label}\n \n );\n};\ntype StoryComponentType = StoryObj;\n\n/**\n * Announcer sends messages to screen readers using [ARIA Live Regions](https://www.w3.org/TR/wai-aria/#attrs_liveregions),\n * without moving keyboard focus. Useful for combobox filtering, toast\n * notifications, client-side routing, and similar patterns.\n *\n * It is a singleton — one instance is shared across the page. Live regions are\n * created automatically on first use and are visually hidden by default.\n *\n * Messages alternate between two regions per politeness level to prevent\n * assistive technology from swallowing repeated announcements. They are\n * removed from the DOM after 5000 ms.\n *\n * **Modal support:** When a Wonder Blocks modal is open, announcements are\n * automatically routed to a separate live region injected inside the\n * `aria-modal` element. This ensures screen readers inside the modal hear the\n * announcement — browsers hide content outside `aria-modal` from the\n * accessibility tree.\n *\n * > In Storybook, live regions are shown visually on the right side of the\n * screen (red outlined boxes) for debugging. Controlled via the\n * `addBodyClass: \"showAnnouncer\"` story parameter.\n *\n * ## API\n *\n * ### `announceMessage(options)`\n *\n * The main function. Creates the Announcer instance if one doesn't exist yet.\n *\n * **Options:**\n * - `message` `string` — The text to announce. Required.\n * - `level` `\"polite\" | \"assertive\"` — Default `\"polite\"`. Use `\"assertive\"` to interrupt.\n * - `debounceThreshold` `number` — ms to wait before sending (default `250`). Trailing-edge: last call wins.\n * - `initialTimeout` `number` — ms to delay the first announcement (default `150`). Helps with Safari/VoiceOver timing.\n *\n * **Returns:** `Promise` — resolves with the ID of the targeted live region, e.g. `\"wbARegion-polite1\"`.\n *\n * ```jsx\n * import { announceMessage } from \"@khanacademy/wonder-blocks-announcer\";\n *\n * // In an event handler:\n * \n *\n * // In a useEffect:\n * React.useEffect(() => {\n * announceMessage({ message: `${results.length} results found` });\n * }, [results]);\n * ```\n *\n * ### `initAnnouncer(options)`\n *\n * Optional. Call once on page load to pre-create live regions before the first\n * announcement. Improves reliability with VoiceOver/Safari, which works best\n * when regions are registered before use.\n *\n * Without this, regions are created on the first `announceMessage` call, which\n * is fine for most cases.\n *\n * **Options:**\n * - `targetElement` `HTMLElement` — Where to mount the live regions (default `document.body`).\n * - `debounceThreshold` `number` — Sets the global debounce default.\n *\n * ```jsx\n * import { initAnnouncer } from \"@khanacademy/wonder-blocks-announcer\";\n *\n * // In a top-level component:\n * React.useEffect(() => {\n * initAnnouncer();\n * }, []);\n * ```\n **/\nexport default {\n title: \"Packages / Announcer\",\n component: AnnouncerExample,\n decorators: [\n (Story): React.ReactElement> => (\n \n \n \n ),\n ],\n parameters: {\n addBodyClass: \"showAnnouncer\",\n componentSubtitle: (\n \n ),\n docs: {\n source: {\n // See https://github.com/storybookjs/storybook/issues/12596\n excludeDecorators: true,\n },\n },\n chromatic: {disableSnapshot: true},\n },\n argTypes: {\n level: {\n control: \"radio\",\n options: [\"polite\", \"assertive\"],\n },\n debounceThreshold: {\n control: \"number\",\n type: \"number\",\n description: \"(milliseconds)\",\n },\n },\n} as Meta;\n\n/**\n * Click the button to send a polite announcement. The live region that receives\n * it is logged to the console and shown in the debug boxes on the right.\n *\n * Use the controls below to change the message text, politeness level, and\n * debounce threshold.\n */\nexport const AnnounceMessage: StoryComponentType = {\n args: {\n message: \"Here is some example text.\",\n level: \"polite\",\n },\n};\n\n/**\n * Test that screen reader announcements work correctly when a modal is open.\n *\n * When a WB modal dialog (any variant) is active with `aria-modal=\"true\"`,\n * browsers hide everything outside it from the accessibility tree — including a\n * live region at the body level. To work around this, Announcer injects a second\n * set of live regions directly inside the `aria-modal` element when the modal mounts.\n *\n * - **\"Announce on page\"** fires into the document-level `wbAnnounce` node at `body`.\n * - **\"Announce in modal\"** fires into the `wbAnnounce-modal` node inside the dialog.\n *\n * With a screen reader active, only the in-modal button should be audible while\n * the modal is open.\n */\nexport const AnnouncerInModal: StoryComponentType = {\n render: (args) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [isOpen, setIsOpen] = React.useState(false);\n\n const handleClose = () => {\n setIsOpen(false);\n };\n\n const handleOpen = () => {\n setIsOpen(true);\n };\n\n const ModalContent = ({closeModal}: {closeModal: () => void}) => (\n Announcer Test Modal}\n styles={{root: {maxWidth: \"80rem\"}}}\n content={\n \n \n This modal contains an announcer.
\n Click the CTA button below to test screen reader\n announcements in a modal context.\n \n \n \n \n \n \n }\n />\n );\n\n return (\n \n \n Click “Announce on page” to test the document\n layer, then open the modal and click “Announce in\n modal” to test the modal layer.\n \n \n {!isOpen && (\n \n )}\n \n \n );\n },\n args: {\n message: \"Message announced from inside modal!\",\n level: \"polite\",\n },\n};\n\nconst styles = StyleSheet.create({\n example: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n});\n"}},"packages-badge-badge":{"id":"packages-badge-badge","name":"Badge","path":"./__docs__/wonder-blocks-badge/badge.stories.tsx","stories":[{"id":"packages-badge-badge--default","name":"Default","snippet":"const Default = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"The badge takes an icon and/or a label: - `icon`: The icon to display in the badge. It can be a `PhosphorIcon` or a `Icon` for custom icons (see Custom Icons docs for more details). If the icon conveys meaning, set the alt text on the icon being used - `label`: The label to display in the badge."},{"id":"packages-badge-badge--no-border","name":"No Border","snippet":"const NoBorder = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"A badge can be used without a border."},{"id":"packages-badge-badge--label-only","name":"Label Only","snippet":"const LabelOnly = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"A badge can be used with only a label."},{"id":"packages-badge-badge--icon-only","name":"Icon Only","snippet":"const IconOnly = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"A badge can be used with only an icon."},{"id":"packages-badge-badge--custom-icons","name":"Custom Icons","snippet":"const CustomIcons = () => {\n return (\n \n \n Custom single colored svg icon using PhosphorIcon\n \n \n }\n label=\"Custom Icon\"\n />\n \n Custom single colored svg icon using PhosphorIcon and color\n prop\n \n \n }\n label=\"Custom Icon\"\n />\n \n Custom multi-colored inline svg using the Icon component\n \n {multiColoredIcon}}\n label=\"Custom Icon\"\n />\n \n Custom img element using the Icon component with a svg src\n \n \n \"Wonder\n \n }\n label=\"Custom Icon\"\n />\n \n Custom img element using the Icon component with a png src\n \n \n \"Example\n \n }\n label=\"Custom Icon\"\n />\n \n );\n};","description":"A badge can be used with a custom icon using the `PhosphorIcon` or `Icon` components. Here are some examples with custom icons: - A custom single colored svg icon - Use with the `PhosphorIcon` component - If the svg has `fill=\"currentColor\"` and the `color` prop for `PhosphorIcon` is not set, then the icon will use the color specified by the `Badge` component. - A multi-colored inline svg - Use with the `Icon` component - The `Icon` component supports svg assets that define their own fill - An `img` element - Use with the `Icon` component - The `Icon` component supports `img` elements - For icons that are from the Phosphor library, continue using the `PhosphorIcon` component. If the icon conveys meaning, it should have alt text."},{"id":"packages-badge-badge--custom-styles","name":"Custom Styles","snippet":"const CustomStyles = () => {\n return (\n \n ) : undefined\n }\n styles={{\n root: {\n backgroundColor:\n semanticColor.core.background.neutral.strong,\n borderColor: semanticColor.core.border.knockout.default,\n color: semanticColor.core.foreground.knockout.default,\n },\n icon: {\n color: semanticColor.core.foreground.knockout.default,\n },\n label: {\n fontWeight: font.weight.medium,\n },\n }} />\n );\n};","description":"A badge can be used with custom styles. The following parts can be styled: - `root`: Styles the root element - `icon`: Styles the icon element - `label`: Styles the text in the element Here is an example of custom styles using semantic tokens."},{"id":"packages-badge-badge--tag","name":"Tag","snippet":"const Tag = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"When the `tag` prop is provided, the badge will render as the specified tag. For example, if a badge should have emphasis, use a `strong` tag."},{"id":"packages-badge-badge--badge-with-tooltip","name":"Badge With Tooltip","snippet":"const BadgeWithTooltip = () => {\n return (\n \n \n ) : undefined\n }\n role=\"button\" />\n \n );\n};","description":"When using a `Badge` with a `Tooltip`, make sure to add `role=\"button\"` on the `Badge`. This is so that it is interactive and the tooltip contents can be read out properly via the `aria-describedby` attribute on the `Badge` added by the Tooltip component. Note: The `Tooltip` component also sets the `tabIndex` of the `Badge` so that it is focusable."},{"id":"packages-badge-badge--badge-truncation","name":"Badge Truncation","snippet":"const BadgeTruncation = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"By default, the label is truncated after `30ch` (approximately 30 characters). If you have long lines of text to communicate information, this badge pattern is not the right component for that purpose."}],"import":"import { Badge, ComponentInfo } from \"@khanacademy/wonder-blocks-badge\";\nimport { Heading } from \"@khanacademy/wonder-blocks-typography\";\nimport { Icon, PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport Tooltip from \"@khanacademy/wonder-blocks-tooltip\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"Badges are visual indicators used to display concise information, such as a status, label, or count.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-badge/src/index.ts","description":"Badges are visual indicators used to display concise information, such as\na status, label, or count.","displayName":"Badge","methods":[],"props":{"icon":{"defaultValue":null,"description":"The icon to display in the badge. It should be a `PhosphorIcon` or `Icon`\ncomponent.","name":"icon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"}},"label":{"defaultValue":null,"description":"The label to display in the badge.","name":"label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The id for the badge.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"The test id for the badge.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the Badge component.\n- `root`: Styles the root element\n- `icon`: Styles the icon element\n- `label`: Styles the text in the badge","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; icon?: StyleType; label?: StyleType; }"}},"tag":{"defaultValue":null,"description":"The HTML tag to render. Defaults to `div`.","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"button\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"showBorder":{"defaultValue":null,"description":"Whether to show the border. Defaults to `true`.","name":"showBorder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/components/badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"Badge"}},"packages-badge-duebadge":{"id":"packages-badge-duebadge","name":"DueBadge","path":"./__docs__/wonder-blocks-badge/due-badge.stories.tsx","stories":[{"id":"packages-badge-duebadge--default","name":"Default","snippet":"const Default = () => {\n return ;\n};"},{"id":"packages-badge-duebadge--kinds","name":"Kinds","snippet":"const Kinds = () => {\n return (\n \n \n \n \n );\n};","description":"The `DueBadge` supports two kinds: `due` and `overdue`. By default, the `due` kind is used."},{"id":"packages-badge-duebadge--label-only","name":"Label Only","snippet":"const LabelOnly = () => {\n return (\n \n \n \n \n );\n};","description":"A badge can be used with only a label."},{"id":"packages-badge-duebadge--icon-only","name":"Icon Only","snippet":"const IconOnly = (args: PropsFor) => {\n return (\n \n \n \n \n );\n};","description":"Set `showIcon` to `true` to show the icon only. Alt text for the icon can be set using the `iconAriaLabel` prop."}],"import":"import { ComponentInfo, DueBadge } from \"@khanacademy/wonder-blocks-badge\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"A badge that communicates when a task is due. `DueBadge` uses the `Badge` component and applies the appropriate styles for the kinds. Note: The `iconAriaLabel` prop can be used to set an `aria-label` on the icon if `showIcon` is `true`. This is helpful for providing context to screen readers about what the badge is communicating. For more details, see the `Badge` docs.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-badge/src/index.ts","description":"A badge that communicates when a task is due.\n\n`DueBadge` uses the `Badge` component and applies the appropriate styles\nfor the kinds.\n\nNote: The `iconAriaLabel` prop can be used to set an `aria-label` on the icon\nif `showIcon` is `true`. This is helpful for providing context to screen\nreaders about what the badge is communicating.\n\nFor more details, see the `Badge` docs.","displayName":"DueBadge","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The id for the badge.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"The test id for the badge.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the Badge component.\n- `root`: Styles the root element\n- `icon`: Styles the icon element\n- `label`: Styles the text in the badge","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; icon?: StyleType; label?: StyleType; }"}},"tag":{"defaultValue":null,"description":"The HTML tag to render. Defaults to `div`.","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"button\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"showIcon":{"defaultValue":null,"description":"Whether to show the icon. Defaults to `false`.","name":"showIcon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"label":{"defaultValue":null,"description":"The label to display in the badge.","name":"label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"iconAriaLabel":{"defaultValue":null,"description":"Aria label for the icon.","name":"iconAriaLabel","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"kind":{"defaultValue":null,"description":"The kind of due badge. Defaults to `due`.","name":"kind","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/components/due-badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"due\" | \"overdue\"","value":[{"value":"\"due\""},{"value":"\"overdue\""}]}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"DueBadge"}},"packages-badge-gembadge":{"id":"packages-badge-gembadge","name":"GemBadge","path":"./__docs__/wonder-blocks-badge/gem-badge.stories.tsx","stories":[{"id":"packages-badge-gembadge--default","name":"Default","snippet":"const Default = () => ;"},{"id":"packages-badge-gembadge--no-icon","name":"No Icon","snippet":"const NoIcon = () => ;","description":"Set `showIcon` to `false` to hide the gem icon."},{"id":"packages-badge-gembadge--icon-only","name":"Icon Only","snippet":"const IconOnly = () => ;","description":"Set `showIcon` to `true` to show the gem icon. Alt text for the gem icon can be set using the `iconAriaLabel` prop."}],"import":"import { ComponentInfo, GemBadge } from \"@khanacademy/wonder-blocks-badge\";","jsDocTags":{},"description":"A badge that represents gem rewards. `GemBadge` uses the `Badge` component and applies the appropriate styles and icon. For more details, see the `Badge` docs.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-badge/src/index.ts","description":"A badge that represents gem rewards.\n\n`GemBadge` uses the `Badge` component and applies the appropriate styles\nand icon. For more details, see the `Badge` docs.","displayName":"GemBadge","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The id for the badge.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"The test id for the badge.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the Badge component.\n- `root`: Styles the root element\n- `icon`: Styles the icon element\n- `label`: Styles the text in the badge","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; icon?: StyleType; label?: StyleType; }"}},"tag":{"defaultValue":null,"description":"The HTML tag to render. Defaults to `div`.","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"button\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"showIcon":{"defaultValue":null,"description":"Whether to show the icon. Defaults to `false`.","name":"showIcon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"label":{"defaultValue":null,"description":"The label to display in the badge.","name":"label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"iconAriaLabel":{"defaultValue":null,"description":"Aria label for the icon.","name":"iconAriaLabel","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"GemBadge"}},"packages-badge-neutral-badge":{"id":"packages-badge-neutral-badge","name":"NeutralBadge","path":"./__docs__/wonder-blocks-badge/neutral-badge.stories.tsx","stories":[{"id":"packages-badge-neutral-badge--default","name":"Default","snippet":"const Default = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"The badge takes an icon and/or a label: - `icon`: The icon to display in the badge. It can be a `PhosphorIcon` or a `Icon` for custom icons (see Custom Icons docs for more details). If the icon conveys meaning, set the alt text on the icon being used - `label`: The label to display in the badge."},{"id":"packages-badge-neutral-badge--no-border","name":"No Border","snippet":"const NoBorder = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"A badge can be used without a border."},{"id":"packages-badge-neutral-badge--label-only","name":"Label Only","snippet":"const LabelOnly = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"A badge can be used with only a label."},{"id":"packages-badge-neutral-badge--icon-only","name":"Icon Only","snippet":"const IconOnly = () => {\n return (\n \n ) : undefined\n } />\n );\n};","description":"A badge can be used with only an icon."},{"id":"packages-badge-neutral-badge--custom-icons","name":"Custom Icons","snippet":"const CustomIcons = () => {\n return (\n \n \n Custom single colored svg icon using PhosphorIcon\n \n \n }\n label=\"Custom Icon\"\n />\n \n Custom single colored svg icon using PhosphorIcon and color\n prop\n \n \n }\n label=\"Custom Icon\"\n />\n \n Custom multi-colored inline svg using the Icon component\n \n {multiColoredIcon}}\n label=\"Custom Icon\"\n />\n \n Custom img element using the Icon component with a svg src\n \n \n \"Wonder\n \n }\n label=\"Custom Icon\"\n />\n \n Custom img element using the Icon component with a png src\n \n \n \"Example\n \n }\n label=\"Custom Icon\"\n />\n \n );\n};","description":"A badge can be used with a custom icon using the `PhosphorIcon` or `Icon` components. Here are some examples with custom icons: - A custom single colored svg icon - Use with the `PhosphorIcon` component - If the svg has `fill=\"currentColor\"` and the `color` prop for `PhosphorIcon` is not set, then the icon will use the color specified by the `Badge` component. - A multi-colored inline svg - Use with the `Icon` component - The `Icon` component supports svg assets that define their own fill - An `img` element - Use with the `Icon` component - The `Icon` component supports `img` elements - For icons that are from the Phosphor library, continue using the `PhosphorIcon` component. If the icon conveys meaning, it should have alt text."},{"id":"packages-badge-neutral-badge--custom-styles","name":"Custom Styles","snippet":"const CustomStyles = () => {\n return (\n \n ) : undefined\n }\n styles={{\n root: {\n backgroundColor:\n semanticColor.core.background.neutral.strong,\n borderColor: semanticColor.core.border.knockout.default,\n color: semanticColor.core.foreground.knockout.default,\n },\n icon: {\n color: semanticColor.core.foreground.knockout.default,\n },\n label: {\n fontWeight: font.weight.medium,\n },\n }} />\n );\n};","description":"A badge can be used with custom styles. The following parts can be styled: - `root`: Styles the root element - `icon`: Styles the icon element - `label`: Styles the text in the element Here is an example of custom styles using semantic tokens."}],"import":"import { ComponentInfo, NeutralBadge } from \"@khanacademy/wonder-blocks-badge\";\nimport { Heading } from \"@khanacademy/wonder-blocks-typography\";\nimport { Icon, PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"A badge that represents information without conveying additional meaning through its visual presentation `NeutralBadge` uses the `Badge` component and applies the appropriate styles for the neutral styling. For more details, see the `Badge` docs.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-badge/src/index.ts","description":"A badge that represents information without conveying additional meaning\nthrough its visual presentation\n\n`NeutralBadge` uses the `Badge` component and applies the appropriate styles\nfor the neutral styling. For more details, see the `Badge` docs.","displayName":"NeutralBadge","methods":[],"props":{"showBorder":{"defaultValue":null,"description":"Whether to show the border. Defaults to `true`.","name":"showBorder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/components/neutral-badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The id for the badge.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"The test id for the badge.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the Badge component.\n- `root`: Styles the root element\n- `icon`: Styles the icon element\n- `label`: Styles the text in the badge","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; icon?: StyleType; label?: StyleType; }"}},"tag":{"defaultValue":null,"description":"The HTML tag to render. Defaults to `div`.","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"button\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"icon":{"defaultValue":null,"description":"The icon to display in the badge. It should be a `PhosphorIcon` or `Icon`\ncomponent.","name":"icon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"}},"label":{"defaultValue":null,"description":"The label to display in the badge.","name":"label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"NeutralBadge"}},"packages-badge-statusbadge":{"id":"packages-badge-statusbadge","name":"StatusBadge","path":"./__docs__/wonder-blocks-badge/status-badge.stories.tsx","stories":[{"id":"packages-badge-statusbadge--default","name":"Default","snippet":"const Default = () => \n ) : undefined\n } />;"},{"id":"packages-badge-statusbadge--kinds","name":"Kinds","snippet":"const Kinds = (\n args: Omit, \"icon\"> & {icon: string},\n) => {\n return (\n \n {kinds.map((kind) => {\n return (\n \n ) : undefined\n }\n />\n );\n })}\n \n );\n};","description":"The different kinds of status badges."},{"id":"packages-badge-statusbadge--no-border","name":"No Border","snippet":"const NoBorder = (\n args: Omit, \"icon\"> & {icon: string},\n) => {\n return (\n \n {kinds.map((kind) => {\n return (\n \n ) : undefined\n }\n />\n );\n })}\n \n );\n};","description":"A status badge can be used without a border."},{"id":"packages-badge-statusbadge--label-only","name":"Label Only","snippet":"const LabelOnly = (\n args: Omit, \"icon\"> & {icon: string},\n) => {\n return (\n \n {kinds.map((kind) => {\n return (\n \n ) : undefined\n }\n />\n );\n })}\n \n );\n};","description":"A badge can be used with only a label."},{"id":"packages-badge-statusbadge--icon-only","name":"Icon Only","snippet":"const IconOnly = (\n args: Omit, \"icon\"> & {icon: string},\n) => {\n return (\n \n {kinds.map((kind) => {\n return (\n \n ) : undefined\n }\n />\n );\n })}\n \n );\n};","description":"A badge can be used with only an icon."},{"id":"packages-badge-statusbadge--custom-icons","name":"Custom Icons","snippet":"const CustomIcons = () => {\n return (\n \n \n Custom single colored svg icon using PhosphorIcon\n \n \n {kinds.map((kind) => {\n return (\n \n }\n label=\"Custom Icon\"\n />\n );\n })}\n \n \n Custom single colored svg icon using PhosphorIcon and color\n prop\n \n \n {kinds.map((kind) => {\n return (\n \n }\n label=\"Custom Icon\"\n />\n );\n })}\n \n \n Custom multi-colored inline svg using the Icon component\n \n \n {kinds.map((kind) => {\n return (\n {multiColoredIcon}}\n label=\"Custom Icon\"\n />\n );\n })}\n \n \n Custom img element using the Icon component with a svg src\n \n \n {kinds.map((kind) => {\n return (\n \n \n \n }\n label=\"Custom Icon\"\n />\n );\n })}\n \n \n Custom img element using the Icon component with a png src\n \n \n {kinds.map((kind) => {\n return (\n \n \n \n }\n label=\"Custom Icon\"\n />\n );\n })}\n \n \n );\n};","description":"For more details about using custom icons, see the Badge docs for custom icons."}],"import":"import { ComponentInfo, StatusBadge } from \"@khanacademy/wonder-blocks-badge\";\nimport { Heading } from \"@khanacademy/wonder-blocks-typography\";\nimport { Icon, PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"A badge that represents a status. `StatusBadge` uses the `Badge` component and applies the appropriate styles for the status kinds. For more details, see the `Badge` docs.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-badge/src/index.ts","description":"A badge that represents a status.\n\n`StatusBadge` uses the `Badge` component and applies the appropriate styles\nfor the status kinds. For more details, see the `Badge` docs.","displayName":"StatusBadge","methods":[],"props":{"kind":{"defaultValue":null,"description":"The kind of badge to display. Defaults to `info`.","name":"kind","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/components/status-badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"info\" | \"success\" | \"warning\" | \"critical\"","value":[{"value":"\"info\""},{"value":"\"success\""},{"value":"\"warning\""},{"value":"\"critical\""}]}},"showBorder":{"defaultValue":null,"description":"Whether to show the border. Defaults to `true`.","name":"showBorder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/components/status-badge.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The id for the badge.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"The test id for the badge.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the Badge component.\n- `root`: Styles the root element\n- `icon`: Styles the icon element\n- `label`: Styles the text in the badge","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; icon?: StyleType; label?: StyleType; }"}},"tag":{"defaultValue":null,"description":"The HTML tag to render. Defaults to `div`.","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"button\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"icon":{"defaultValue":null,"description":"The icon to display in the badge. It should be a `PhosphorIcon` or `Icon`\ncomponent.","name":"icon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement>"}},"label":{"defaultValue":null,"description":"The label to display in the badge.","name":"label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"StatusBadge"}},"packages-badge-streakbadge":{"id":"packages-badge-streakbadge","name":"StreakBadge","path":"./__docs__/wonder-blocks-badge/streak-badge.stories.tsx","stories":[{"id":"packages-badge-streakbadge--default","name":"Default","snippet":"const Default = () => ;"},{"id":"packages-badge-streakbadge--no-icon","name":"No Icon","snippet":"const NoIcon = () => ;","description":"Set `showIcon` to `false` to hide the streak icon."},{"id":"packages-badge-streakbadge--icon-only","name":"Icon Only","snippet":"const IconOnly = () => ;","description":"Set `showIcon` to `true` to show the streak icon. Alt text for the streak icon can be set using the `iconAriaLabel` prop."}],"import":"import { ComponentInfo, StreakBadge } from \"@khanacademy/wonder-blocks-badge\";","jsDocTags":{},"description":"A badge that represents streaks. `StreakBadge` uses the `Badge` component and applies the appropriate styles and icon. For more details, see the `Badge` docs.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-badge/src/index.ts","description":"A badge that represents streaks.\n\n`StreakBadge` uses the `Badge` component and applies the appropriate styles\nand icon. For more details, see the `Badge` docs.","displayName":"StreakBadge","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"id":{"defaultValue":null,"description":"The id for the badge.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"The test id for the badge.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the Badge component.\n- `root`: Styles the root element\n- `icon`: Styles the icon element\n- `label`: Styles the text in the badge","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; icon?: StyleType; label?: StyleType; }"}},"tag":{"defaultValue":null,"description":"The HTML tag to render. Defaults to `div`.","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"button\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"showIcon":{"defaultValue":null,"description":"Whether to show the icon. Defaults to `false`.","name":"showIcon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"label":{"defaultValue":null,"description":"The label to display in the badge.","name":"label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"iconAriaLabel":{"defaultValue":null,"description":"Aria label for the icon.","name":"iconAriaLabel","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-badge/src/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"StreakBadge"}},"packages-banner":{"id":"packages-banner","name":"Banner","path":"./__docs__/wonder-blocks-banner/banner.stories.tsx","stories":[{"id":"packages-banner--default","name":"Default","snippet":"const Default = () => ;","description":"This is an example of a banner with all the props set to their default values and the `text` prop set to some example text."},{"id":"packages-banner--kinds","name":"Kinds","snippet":"const Kinds = () => (\n \n \n \n \n \n \n);","description":"Banners have four possible kinds (`kind` prop) - info (default), success, warning, and critical. Info is blue with an info \"i\" icon, success is green with a smiling icon, warning is yellow with a triangular \"!\" icon, and critical is red with a round \"!\" icon."},{"id":"packages-banner--long-text","name":"Long Text","snippet":"const LongText = () => {}}\n actions={[\n {\n type: \"button\",\n title: \"Change your email\",\n onClick: () => {},\n },\n ]} />;","description":"Here is an example of a banner with long text. In this case, the email address is one giant word. Notice that the `overflow-wrap` property here is set to `break-word` so that the email address will wrap to the next line."},{"id":"packages-banner--dark-background","name":"Dark Background","snippet":"const DarkBackground = () => (\n \n \n \n \n \n \n);","description":"This is how banners look on a dark background."},{"id":"packages-banner--with-buttons","name":"With Buttons","snippet":"const WithButtons = () => {}},\n {type: \"button\", title: \"Button 2\", onClick: () => {}},\n ]} />;","description":"This is a banner with buttons. An action, passed into the `actions` prop, becomes a button when it has an `onClick` value and does not have an `href` value."},{"id":"packages-banner--with-links","name":"With Links","snippet":"const WithLinks = () => {}},\n ]} />;","description":"This is a banner with links. An action, passed into the `actions` prop, becomes a link when it has an `href` value. It can also have an `onClick` value, but it will be a link regardless if it navigates to a URL via `href`."},{"id":"packages-banner--with-inline-links","name":"With Inline Links","snippet":"const WithInlineLinks = () => (\n \n {}},\n ]}\n />\n \n Use inline links in the body of the text instead. Click{\" \"}\n {\n \n link example\n \n }{\" \"}\n to go to some other page.\n \n }\n kind=\"success\"\n actions={[{type: \"button\", title: \"Button\", onClick: () => {}}]}\n />\n \n);","description":"A banner can have inline links passed into the `text` prop. Here, the Wonder Blocks `` component is inline with the text that is in a span. One place to use this is in the case that a banner needs to have a link action _and_ a button action. That is to say, one action navigates to a URL and the other doesn't. This may be unfavorable because buttons and links look different. One workaround is to make the link inline and only have buttons as actions."},{"id":"packages-banner--multiline","name":"Multiline","snippet":"const Multiline = () => (\n \n \n \n);","description":"This is an example of a banner with multiple lines of text."},{"id":"packages-banner--multiline-with-buttons","name":"Multiline With Buttons","snippet":"const MultilineWithButtons = () => (\n \n {}},\n {type: \"button\", title: \"Button 2\", onClick: () => {}},\n ]}\n />\n \n);","description":"When a banner has long text, the actions move from the right of the text to the bottom. Here, the actions are buttons."},{"id":"packages-banner--multiline-with-links","name":"Multiline With Links","snippet":"const MultilineWithLinks = () => (\n \n \n \n);","description":"When a banner has long text, the actions move from the right of the text to the bottom. Here, the actions are links."},{"id":"packages-banner--with-dismissal","name":"With Dismissal","snippet":"const WithDismissal = () => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [dismissed, setDismissed] = React.useState(false);\n\n const handleDismiss = () => {\n // eslint-disable-next-line no-console\n console.log(\"Dismiss!\");\n setDismissed(true);\n };\n\n const handleReset = () => {\n // eslint-disable-next-line no-console\n console.log(\"Reset!\");\n setDismissed(false);\n };\n\n return dismissed ? (\n \n ) : (\n \n );\n};","description":"This is a banner that can be dismissed. For the \"X\" dismiss button to show up, a function must be passed into the `onDismiss` prop. Here, pressing the \"X\" button or the \"Also dismiss\" button will dismiss the banner. Pressing either button sets the `dismissed` state to true, which causes the banner not to render due to a conditional. Instead, there is a button whose `onClick` function sets the `dismissed` state to false. This causes the banner to reappear and the button to disappear."},{"id":"packages-banner--with-custom-action","name":"With Custom Action","snippet":"const WithCustomAction = () => (\n {}}\n spinner={true}\n >\n Spinner Button\n \n ),\n },\n ]}\n />\n);","description":"**NOTE: Custom actions are discouraged and should only be used as a last resort!**. There are a number of other props that Buttons and Links may have that are not currently supported by the `actions` prop in Banner. These would require the use of custom actions. If it absolutely necessary to have a custom action, it can be done by passing in an object into the `actions` prop array that has `type:\"custom\"`, and your desired element in the `node` field. Here is an example of a case where the built in actions may not be enough - a button with a `spinner` prop would need a custom implementation here."},{"id":"packages-banner--with-custom-action-primary","name":"With Custom Action Primary","snippet":"const WithCustomActionPrimary = () => (\n {}}>\n Custom Action\n \n ),\n },\n ]}\n />\n);","description":"**NOTE: Custom actions are discouraged and should only be used as a last resort!**. Another example with a custom action using a primary button. See **With Custom Action** story for more details."},{"id":"packages-banner--with-mixed-actions","name":"With Mixed Actions","snippet":"const WithMixedActions = () => (\n {},\n },\n {\n type: \"custom\",\n node: (\n \n ),\n },\n {\n type: \"custom\",\n node: (\n \n ),\n },\n {\n type: \"custom\",\n node: (\n {}}\n spinner={true}\n aria-label=\"Loading\"\n >\n Spinner Button\n \n ),\n },\n ]}\n />\n);","description":"Here is an example that includes both a normal action and a custom action."},{"id":"packages-banner--with-phosphor-icon","name":"With Phosphor Icon","snippet":"const WithPhosphorIcon = () => ;","description":"Use the `icon` prop to show a specific Phosphor icon in the banner instead. If the `icon` prop is not set, a default icon will be used in the banner depending on the `kind` prop. __NOTE:__ Icons are available from the [Phosphor Icons](https://phosphoricons.com/) library. To use a Phosphor icon, you can use the following syntax: ```jsx import magnifyingGlass from \"@phosphor-icons/core/regular/magnifying-glass.svg\"; ``` __Accessibility__: The icon chosen for the banner is decorative and will always have an `aria-label` that communicates the kind of banner (e.g. \"info\")."},{"id":"packages-banner--with-custom-solid-icon","name":"With Custom Solid Icon","snippet":"const WithCustomSolidIcon = () => ;","description":"Use the `icon` prop to show a custom icon in the banner instead. If the `icon` prop is not set, a default icon will be used in the banner depending on the `kind` prop. To use a custom icon that has a solid fill, you can use the following syntax: ```jsx // This SVG should have the following attributes: // - viewBox=\"0 0 256 256\" // - fill=\"currentColor\" // - A path (or paths) scaled up to fit in the 256x256 viewport. import crownIcon from \"./icons/crown.svg\"; ``` __Accessibility__: The icon chosen for the banner is decorative and will always have an `aria-label` that communicates the kind of banner (e.g. \"info\")."},{"id":"packages-banner--with-custom-icon","name":"With Custom Icon","snippet":"const WithCustomIcon = () => \n \"Wonder\n \n }\n kind=\"success\"\n text=\"Success! Here is an example with a custom icon\" />;","description":"For non-Phosphor icons, you can use the Wonder Blocks Icon component to wrap a custom icon. The Banner component will handle the sizing for the icon. Accessibility: When customizing the icon, make sure to: - Provide alt text for the icon - Make sure important information about the banner kind is still communicated to the user so that color alone isn't used to convey meaning."},{"id":"packages-banner--with-no-icon","name":"With No Icon","snippet":"const WithNoIcon = () => ;","description":"When `icon=\"none\"`, no icon is displayed. For accessibility, make sure important information about the kind is still conveyed to the user so that color alone isn't used to convey meaning."},{"id":"packages-banner--right-to-left","name":"Right To Left","snippet":"const RightToLeft = () => (\n \n {}},\n {type: \"button\", title: \"دوسرا بٹن\", onClick: () => {}},\n ]}\n />\n {}},\n {type: \"button\", title: \"دوسرا بٹن\", onClick: () => {}},\n ]}\n />\n \n);","description":"When in the right-to-left direction, the banner is mirrored. This example has text in Urdu, which is a right-to-left language."},{"id":"packages-banner--right-to-left-multiline","name":"Right To Left Multiline","snippet":"const RightToLeftMultiline = () => (\n \n {}},\n {type: \"button\", title: \"دوسرا بٹن\", onClick: () => {}},\n ]}\n />\n \n);","description":"When in the right-to-left direction, the banner is mirrored. This example has text in Urdu, which is a right-to-left language. This example also has multiple lines with the butotns on the bottom of the text."},{"id":"packages-banner--with-custom-styles","name":"With Custom Styles","snippet":"const WithCustomStyles = () => (\n \n \n \n \n {reallyLongText}\n {reallyLongText}\n \n \n \n);","description":"There are times where custom styles need to be applied to the Banner component, especially for layout purposes. Custom styles can be applied by using the `styles` prop. The following parts can be styled: - `root`: Styles the root element If there are other parts you need to customize, please reach out to the Wonder Blocks team!"}],"import":"import Banner, { ComponentInfo } from \"@khanacademy/wonder-blocks-banner\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport { Icon } from \"@khanacademy/wonder-blocks-icon\";\nimport Link from \"@khanacademy/wonder-blocks-link\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"Banner. A banner displays a prominent message and related optional actions. It can be used as a way of informing the user of important changes. Typically, it is displayed toward the top of the screen. ### Usage ```jsx import Banner from \"@khanacademy/wonder-blocks-banner\"; {}}, {title: \"Button 2\", onClick: () => {}}, ]} onDismiss={() => {console.log(\"Has been dismissed.\")}} /> ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-banner/src/index.ts","description":"Banner. A banner displays a prominent message and related optional actions.\nIt can be used as a way of informing the user of important changes.\nTypically, it is displayed toward the top of the screen.\n\n### Usage\n```jsx\nimport Banner from \"@khanacademy/wonder-blocks-banner\";\n\n {}},\n {title: \"Button 2\", onClick: () => {}},\n ]}\n onDismiss={() => {console.log(\"Has been dismissed.\")}}\n/>\n```","displayName":"src","methods":[],"props":{"aria-label":{"defaultValue":null,"description":"Accessible label for the banner.\nThis is read out before the other contents of the banner.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"kind":{"defaultValue":null,"description":"Determines the color and icon of the banner.","name":"kind","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"BannerKind","value":[{"value":"\"info\""},{"value":"\"success\""},{"value":"\"warning\""},{"value":"\"critical\""}]}},"text":{"defaultValue":null,"description":"Text on the banner or a node if you want something different. For the\nbest results, use the default styles provided by the Banner component and\navoid using typography components for the `text` prop.","name":"text","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"ReactNode"}},"actions":{"defaultValue":null,"description":"Links or tertiary Buttons that appear to the right of the text.\n\nThe ActionTrigger must have either an onClick or an href field, or both.","name":"actions","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"readonly ActionTrigger[]"}},"onDismiss":{"defaultValue":null,"description":"If present, dismiss button is on right side. If not, no button appears.","name":"onDismiss","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"(() => void | null)"}},"dismissAriaLabel":{"defaultValue":null,"description":"The accessible label for the dismiss button.\nPlease pass in a translated string.","name":"dismissAriaLabel","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Test ID used for e2e testing.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"icon":{"defaultValue":null,"description":"An optional icon to display. This is a reference to the icon asset (imported as a\nstatic SVG file). If not provided, a default icon will be used based on\nthe \"kind\" prop.\n\nIt supports the following types:\n- `PhosphorIconAsset`: a reference to a Phosphor SVG asset.\n- `string`: an import referencing an arbitrary SVG file.\n- `\"none\"`: no icon is displayed.\n\nNote: When using `icon=\"none\"`, make sure important information is\nconveyed in the text of the banner, since color should not be the only\nway to convey status information.","name":"icon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string | ReactElement> | PhosphorIconAsset"}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the Banner component.\n- `root`: Styles the root element","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-banner/src/components/banner.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; }"}}},"exportName":"src"}},"packages-birthdaypicker":{"id":"packages-birthdaypicker","name":"BirthdayPicker","path":"./__docs__/wonder-blocks-birthday-picker/birthday-picker.stories.tsx","stories":[{"id":"packages-birthdaypicker--birthday-picker-default","name":"Birthday Picker Default","snippet":"const BirthdayPickerDefault = () => {}} defaultValue=\"\" />;","description":"Default BirthdayPicker example. It will be rendered as the first/default story and it can be interacted with the controls panel in the Browser."},{"id":"packages-birthdaypicker--birthday-picker-with-default-value","name":"Birthday Picker With Default Value","snippet":"const BirthdayPickerWithDefaultValue = () => {}} defaultValue=\"2021-07-19\" />;"},{"id":"packages-birthdaypicker--invalid-birthday-picker","name":"Invalid Birthday Picker","snippet":"const InvalidBirthdayPicker = () => {}} defaultValue=\"2030-07-19\" />;"},{"id":"packages-birthdaypicker--birthday-picker-with-custom-labels","name":"Birthday Picker With Custom Labels","snippet":"const BirthdayPickerWithCustomLabels = () => {}}\n defaultValue=\"\"\n labels={{\n day: \"Día\",\n month: \"Mes\",\n year: \"Año\",\n errorMessage: \"Por favor seleccione una fecha válida.\",\n }} />;"},{"id":"packages-birthdaypicker--disabled-birthday-picker","name":"Disabled Birthday Picker","snippet":"const DisabledBirthdayPicker = () => {}} disabled />;","description":"A BirthdayPicker can be disabled by passing the `disabled` prop. This will disable all the dropdown controls and prevent them from being interacted with. Note: The `disabled` prop sets the `aria-disabled` attribute to `true` instead of setting the `disabled` attribute. This is so that the component remains focusable while communicating to screen readers that it is disabled."},{"id":"packages-birthdaypicker--birthday-picker-with-year-and-month-only","name":"Birthday Picker With Year And Month Only","snippet":"const BirthdayPickerWithYearAndMonthOnly = () => {\n // eslint-disable-next-line no-console\n console.log(\"Date selected: \", date);\n }} />;"},{"id":"packages-birthdaypicker--birthday-picker-vertical","name":"Birthday Picker Vertical","snippet":"const BirthdayPickerVertical = () => {\n // eslint-disable-next-line no-console\n console.log(\"Date selected: \", date);\n }} />;"},{"id":"packages-birthdaypicker--birthday-picker-vertical-with-error","name":"Birthday Picker Vertical With Error","snippet":"const BirthdayPickerVerticalWithError = () => {\n // eslint-disable-next-line no-console\n console.log(\"Date selected: \", date);\n }}\n defaultValue=\"2030-07-19\" />;"},{"id":"packages-birthdaypicker--birthday-picker-mobile","name":"Birthday Picker Mobile","snippet":"const BirthdayPickerMobile = () => {\n // eslint-disable-next-line no-console\n console.log(\"Date selected: \", date);\n }} />;"},{"id":"packages-birthdaypicker--locale","name":"Locale","snippet":"const Locale = () => ;","description":"A BirthdayPicker can be configured to render the month names in a different locale. This can be useful when we want to display the component in a different language. If no locale is provided, the browser's `navigator.language` value will be used."}],"import":"import BirthdayPicker, { ComponentInfo } from \"@khanacademy/wonder-blocks-birthday-picker\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-birthday-picker/src/index.ts","description":"","displayName":"src","methods":[],"props":{"defaultValue":{"defaultValue":null,"description":"The default value to populate the birthdate with. Should be in the\nformat: YYYY-MM-DD (e.g. 2021-05-26). It's only used to populate the\ninitial value as this is an uncontrolled component.","name":"defaultValue","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"Whether the birthdate fields are disabled.\n\nInternally, the `aria-disabled` attribute will be set so that the\nelement remains focusable and will be included in the tab order.","name":"disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"labels":{"defaultValue":null,"description":"The object containing the custom labels used inside this component.","name":"labels","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Labels"}},"monthYearOnly":{"defaultValue":null,"description":"Whether we want to hide the day field.\n\n**NOTE:** We will set the day to the _last_ day of the _selected_ month\nif the day field is hidden. Please make sure to modify the passed date\nvalue to fit different needs (e.g. if you want to set the _last_ day of\nthe _following_ month instead).","name":"monthYearOnly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"onChange":{"defaultValue":null,"description":"Listen for changes to the birthdate. Could be a string in the YYYY-MM-DD\nformat or `null`.","name":"onChange","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(date?: string | null | undefined) => unknown"}},"style":{"defaultValue":null,"description":"Additional styles applied to the root element of the component.","name":"style","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"dropdownStyle":{"defaultValue":null,"description":"Additional styles applied to the dropdowns.","name":"dropdownStyle","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"locale":{"defaultValue":null,"description":"The locale to use for the month names. If not provided, the browser's\n`navigator.language` value will be used.","name":"locale","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}}},"exportName":"src"}},"packages-breadcrumbs":{"id":"packages-breadcrumbs","name":"Breadcrumbs","path":"./__docs__/wonder-blocks-breadcrumbs/breadcrumbs.stories.tsx","stories":[{"id":"packages-breadcrumbs--default","name":"Default","snippet":"const Default = () => {[\n \n Course\n ,\n \n Unit\n ,\n Lesson,\n ]};","description":"Default Breadcrumbs example. It will be rendered as the first/default story and it can be interacted with the controls panel in the Browser."}],"import":"import { Breadcrumbs, BreadcrumbsItem, ComponentInfo } from \"@khanacademy/wonder-blocks-breadcrumbs\";\nimport Link from \"@khanacademy/wonder-blocks-link\";","jsDocTags":{},"description":"A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content. The Breadcrumbs component will have the following structure: 1. Breadcrumbs Item: Represents a section within the page. 2. Separator: Adds a separator between each item. NOTE: `` only accepts two element types: 1. `string` 2. `` ## Usage ```jsx import { Breadcrumbs, BreadcrumbsItem } from \"@khanacademy/wonder-blocks-breadcrumbs\"; Course Unit Lesson ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-breadcrumbs/src/index.ts","description":"A breadcrumb trail consists of a list of links to the parent pages\nof the current page in hierarchical order. It helps users find their\nplace within a website or web application.\nBreadcrumbs are often placed horizontally before a page's main content.\n\nThe Breadcrumbs component will have the following structure:\n\n1. Breadcrumbs Item: Represents a section within the page.\n2. Separator: Adds a separator between each item.\n\nNOTE: `` only accepts two element types:\n\n1. `string`\n2. ``\n\n## Usage\n\n```jsx\nimport {\n Breadcrumbs,\n BreadcrumbsItem\n} from \"@khanacademy/wonder-blocks-breadcrumbs\";\n\n\n \n Course\n \n \n Unit\n \n \n Lesson\n \n\n```","displayName":"Breadcrumbs","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\nAccessible label for the breadcrumbs.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"children":{"defaultValue":null,"description":"This is the content for the collection of Breadcrumbs","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"ReactElement & Readonly<{ role?: AriaRole | undefined; }> & { children: string | ReactElement>>, string | JSXElementConstructor>; showSeparator?: boolean | undefined; testId?: string | undefined; } & RefAttributes, string | JSXElementConstructor> | ReactElement & Readonly<{ role?: AriaRole | undefined; }> & { children: string | ReactElement>>, string | JSXElementConstructor>; showSeparator?: boolean | undefined; testId?: string | undefined; } & RefAttributes, string | JSXElementConstructor>[]"}},"testId":{"defaultValue":null,"description":"Test ID used for e2e testing.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-breadcrumbs/src/components/breadcrumbs.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"Breadcrumbs"},"docs":{"packages-breadcrumbs--accessibility":{"id":"packages-breadcrumbs--accessibility","name":"accessibility","path":"./__docs__/wonder-blocks-breadcrumbs/accessibility.mdx","title":"Packages / Breadcrumbs","content":"import {Meta, Canvas} from \"@storybook/addon-docs/blocks\";\n\nimport * as BreadcrumbsStories from \"./breadcrumbs.stories\";\n\n\n\n## Accessibility\n\n### Labeling\n\n`Breadcrumbs` has an `aria-label` prop that sets the accessible name on the\nthe component. By default, this is \"Breadcrumbs\" as per recommended guidelines.\n\nThis is an example of a component with an accessible label:\n\n\n\n### Nav Role\n\nBreadcrumbs are `nav` elements. They show up as navigation landmarks to\nscreen readers.\n\n### Current Page\n\nGuidelines state that the last link in a list of breadcrumbs (the last\n`BreadcrumbsItem`) should have the attribute `aria-current=\"page\"` to\nindicate that it represents the current page. The implementation already\nsets `aria-current=\"page` to the last element, so developers do not need\nto add it themeselves.\n\n### References\n\n[W3C Breadcrumbs Guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html)\n"}}},"packages-button-guides-accessibility":{"id":"packages-button-guides-accessibility","name":"Button","path":"./__docs__/wonder-blocks-button/accessibility.stories.tsx","stories":[{"id":"packages-button-guides-accessibility--labeling","name":"Labeling","snippet":"const Labeling = () => (\n \n \n \n);"},{"id":"packages-button-guides-accessibility--disabled-state","name":"Disabled state","snippet":"const DisabledState = () => (\n \n console.log(\"Hello, world!\")}\n disabled={true}\n >\n Primary\n \n \n Secondary\n \n console.log(\"Hello, world!\")}\n kind=\"tertiary\"\n disabled={true}\n >\n Tertiary\n \n \n);"}],"import":"import Button from \"@khanacademy/wonder-blocks-button\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Button\" component.\n 11 | });\n 12 |\n> 13 | export default {\n | ^\n 14 | title: \"Packages / Button / Guides / Accessibility\",\n 15 | component: Button,\n 16 |\n\n./__docs__/wonder-blocks-button/accessibility.stories.tsx:\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\n\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport {View} from \"@khanacademy/wonder-blocks-core\";\n\nconst styles = StyleSheet.create({\n button: {\n marginInlineEnd: 10,\n },\n});\n\nexport default {\n title: \"Packages / Button / Guides / Accessibility\",\n component: Button,\n\n // Disables chromatic testing for these stories.\n parameters: {\n previewTabs: {\n canvas: {\n hidden: true,\n },\n },\n\n viewMode: \"docs\",\n\n chromatic: {\n disableSnapshot: true,\n },\n },\n};\n\nexport const Labeling = {\n render: () => (\n \n \n \n ),\n};\n\nexport const DisabledState = {\n render: () => (\n \n console.log(\"Hello, world!\")}\n disabled={true}\n >\n Primary\n \n \n Secondary\n \n console.log(\"Hello, world!\")}\n kind=\"tertiary\"\n disabled={true}\n >\n Tertiary\n \n \n ),\n\n name: \"Disabled state\",\n};\n"},"docs":{"packages-button-guides-accessibility--docs":{"id":"packages-button-guides-accessibility--docs","name":"Docs","path":"./__docs__/wonder-blocks-button/accessibility.mdx","title":"Packages / Button / Guides / Accessibility","content":"import {Meta, Story, Canvas} from \"@storybook/addon-docs/blocks\";\nimport * as AccessibilityStories from './accessibility.stories';\n\n\n\n## Accessibility\n\n### Labeling\n\n`Button` has an accessible label by default. The accessible name is computed from\nthe `children` prop. However, `aria-label` should be used when `spinner={true}`\nto let people using screen readers that the action taken by clicking the button\nwill take some time to complete.\n\nThis is an example of a component with an accessible label:\n\n\n\n### Disabled state\n\nWhen the `disabled` prop is set, the `aria-disabled` attribute will be set.\nBy using `aria-disabled` instead of the `disabled` attribute, the element\nwill remain focusable and will be included in the tab order.\n\nWhen it is in a disabled state, the component will have disabled styling and\ncannot be pressed.\n\n\n\n### References\n\n* [Implicit ARIA semantics](https://www.w3.org/TR/wai-aria-1.1/#implicit_semantics)\n* [Document conformance requirements](https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html)\n\nFor more details, see the [Accessibility section](https://www.w3.org/TR/wai-aria-practices-1.1/#button) in w3.org.\n"}}},"packages-button-activitybutton":{"id":"packages-button-activitybutton","name":"ActivityButton","path":"./__docs__/wonder-blocks-button/activity-button.stories.tsx","stories":[{"id":"packages-button-activitybutton--default","name":"Default","snippet":"const Default = () => {\n action(\"clicked\")(e);\n }}\n disabled={false}>Search;","description":"Minimal activity button which only includes a label and an `onClick` handler. The `kind` prop is set to `primary` by default."},{"id":"packages-button-activitybutton--with-start-icon","name":"With Start Icon","snippet":"const WithStartIcon = () => {\n action(\"clicked\")(e);\n }}\n startIcon={magnifyingGlass}\n disabled={false}>Search;","description":"This example includes a start icon, which is specified using the `startIcon` prop. The `endIcon` prop can also be used to specify an icon that appears at the end of the button."},{"id":"packages-button-activitybutton--with-custom-icons","name":"With Custom Icons","snippet":"const WithCustomIcons = () => {\n action(\"clicked\")(e);\n }}\n startIcon={(\n \"\"\n )}\n endIcon={(\n \"\"\n )}>Action;","description":"For non-Phosphor icons, you can use the Wonder Blocks Icon component for the `startIcon` and `endIcon` props. ```tsx import {Icon} from \"@khanacademy/wonder-blocks-icon\"; \"\"} endIcon={\"\"} > Action ``` Note: The ActivityButton component will handle the sizing for the icons."},{"id":"packages-button-activitybutton--kinds","name":"Kinds","snippet":"const Kinds = () => {\n return (\n \n {\n action(\"clicked\")(e);\n }}>Search\n {\n action(\"clicked\")(e);\n }}\n kind=\"secondary\">Search\n {\n action(\"clicked\")(e);\n }}\n kind=\"tertiary\">Search\n {\n action(\"clicked\")(e);\n }}\n disabled={true}>Search\n \n );\n};","description":"In this example, we have `primary (default)`, `secondary`, `tertiary` and `disabled` `ActivityButton`'s from left to right."},{"id":"packages-button-activitybutton--action-type","name":"ActionType","snippet":"const ActionType = (args) => (\n \n {actionTypes.map((actionType, index) => (\n \n {kinds.map((kind, index) => (\n {}}\n actionType={actionType}\n kind={kind}\n key={`${kind}-${actionType}-${index}`}\n />\n ))}\n action(\"clicked\")(e)}\n actionType={actionType}\n key={`disabled-${actionType}-${index}`}\n />\n \n ))}\n \n);","description":"ActivityButton has an `actionType` prop that is either `progressive` (the default) or `neutral`:"},{"id":"packages-button-activitybutton--with-custom-styles","name":"With Custom Styles","snippet":"const WithCustomStyles = () => {\n action(\"clicked\")(e);\n }}\n startIcon={magnifyingGlass}\n endIcon={caretRight}\n styles={{\n root: {\n gap: sizing.size_200,\n },\n box: {\n gap: sizing.size_320,\n },\n startIcon: {\n alignSelf: \"flex-start\",\n },\n endIcon: {\n alignSelf: \"flex-end\",\n },\n label: {\n border: `${border.width.thin} solid ${semanticColor.core.border.instructive.subtle}`,\n padding: sizing.size_120,\n },\n }}>Search;","description":"Sometimes you may want to apply custom styles to the button. In this example, we apply this by passing a `style` prop to the button. Note that we recommend using the default styles, but if you need to customize the button, we encourage to use it for layout purposes only. The following parts can be styled: - `root`: Styles the root element (button) - `box`: Styles the \"chonky\" box element - `startIcon`: Styles the start icon element - `endIcon`: Styles the end icon element - `label`: Styles the text in the button"},{"id":"packages-button-activitybutton--receiving-focus-programmatically","name":"Receiving Focus Programmatically","snippet":"const ReceivingFocusProgrammatically = () => {\n // This story is used to test the focus ring when the button receives\n // focus programmatically. The button is focused when the story is\n // rendered.\n const buttonRef = React.useRef(null);\n\n return (\n \n action(\"clicked\")(e)}>Search\n {\n // Focus the button when the button is clicked.\n if (buttonRef.current) {\n buttonRef.current.focus();\n }\n }}\n kind=\"secondary\">Focus on the Activity Button (left)\n \n \n );\n};","description":"This button can receive focus programmatically. This is useful for cases where you want to focus the button when the user interacts with another component, such as a form field or another button. To do this, we use a `ref` to the button and call the `focus()` method on it, so the `ActivityButton` receives focus."},{"id":"packages-button-activitybutton--press-duration-tracking","name":"Press Duration Tracking","snippet":"const PressDurationTracking = () => {\n const [pressStartTime, setPressStartTime] = React.useState<\n number | null\n >(null);\n const [pressDuration, setPressDuration] = React.useState(\n null,\n );\n const [lastEvent, setLastEvent] = React.useState(\"none\");\n const [interactionHistory, setInteractionHistory] = React.useState<\n string[]\n >([]);\n\n const logEvent = (eventName: string, duration?: number) => {\n const timestamp = new Date().toLocaleTimeString();\n const message =\n duration !== undefined\n ? `${timestamp}: ${eventName} (${duration}ms)`\n : `${timestamp}: ${eventName}`;\n\n setInteractionHistory((prev) => [message, ...prev.slice(0, 4)]); // Keep last 5 events\n setLastEvent(eventName);\n };\n\n const baseActions = {\n onMouseDown: action(\"onMouseDown\"),\n onMouseUp: action(\"onMouseUp\"),\n onMouseLeave: action(\"onMouseLeave\"),\n onClick: action(\"onClick\"),\n onMouseEnter: action(\"onMouseEnter\"),\n };\n\n const handleMouseDown = (e: React.MouseEvent) => {\n const startTime = Date.now();\n setPressStartTime(startTime);\n setPressDuration(null);\n logEvent(\"Mouse Down - Press Started\");\n baseActions.onMouseDown?.(e);\n };\n\n const handleMouseUp = (e: React.MouseEvent) => {\n if (pressStartTime) {\n const duration = Date.now() - pressStartTime;\n setPressDuration(duration);\n logEvent(\"Mouse Up - Press Completed\", duration);\n }\n baseActions.onMouseUp?.(e);\n };\n\n const handleMouseEnter = (e: React.MouseEvent) => {\n logEvent(\"Mouse Enter\");\n baseActions.onMouseEnter?.(e);\n };\n\n const handleMouseLeave = (e: React.MouseEvent) => {\n if (pressStartTime) {\n const duration = Date.now() - pressStartTime;\n setPressDuration(duration);\n logEvent(\"Mouse Leave - Press Abandoned\", duration);\n }\n setPressStartTime(null);\n baseActions.onMouseLeave?.(e);\n };\n\n const handleClick = (e: React.SyntheticEvent) => {\n logEvent(\"Click - Action Executed\");\n baseActions.onClick?.(e);\n };\n\n const resetTracking = () => {\n setPressStartTime(null);\n setPressDuration(null);\n setLastEvent(\"none\");\n setInteractionHistory([]);\n };\n\n const isCurrentlyPressed =\n pressStartTime !== null &&\n lastEvent === \"Mouse Down - Press Started\";\n\n return (\n \n \n \n {isCurrentlyPressed\n ? \"Pressed!\"\n : \"Track Press Duration\"}\n \n \n \n \n Press Tracking Information\n \n \n \n Current State:{\" \"}\n {isCurrentlyPressed\n ? `Pressed (${pressStartTime ? Math.round((Date.now() - pressStartTime) / 10) * 10 : 0}ms+)`\n : \"Released\"}\n \n {pressDuration !== null && (\n \n Last Press Duration:{\" \"}\n {pressDuration}ms\n \n )}\n \n Last Event: {lastEvent}\n \n \n {interactionHistory.length > 0 && (\n \n Recent Events:\n {interactionHistory.map((event, index) => (\n \n {event}\n \n ))}\n \n )}\n \n \n );\n};","description":"This story demonstrates how to use the mouse event handlers (`onMouseDown`, `onMouseUp`, and `onMouseLeave`) to track the duration of button presses. This is useful for analytics, accessibility features, or UI feedback that depends on how long a user interacts with a button. **Use cases:** - Measuring engagement time before click completion - Detecting accidental clicks vs intentional presses - Providing haptic feedback based on press duration - Analytics tracking for user interaction patterns **Try it:** Press and hold the button for different lengths of time, or press and drag away from the button to see how the events are tracked."}],"import":"import Button, { ActivityButton, ComponentInfo } from \"@khanacademy/wonder-blocks-button\";\nimport { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport { Icon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"`ActivityButton` is a button that is used for actions in the context of learner activities. It uses a \"chonky\" design, which is a more playful and engaging design that is suitable for learner activities. ```tsx import magnifyingGlassIcon from \"@phosphor-icons/core/regular/magnifying-glass.svg\"; import {ActivityButton} from \"@khanacademy/wonder-blocks-button\"; console.log(\"Hello, world!\")} > Hello, world! ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button/src/index.ts","description":"`ActivityButton` is a button that is used for actions in the context of\nlearner activities. It uses a \"chonky\" design, which is a more playful and\nengaging design that is suitable for learner activities.\n\n```tsx\nimport magnifyingGlassIcon from\n\"@phosphor-icons/core/regular/magnifying-glass.svg\";\nimport {ActivityButton} from \"@khanacademy/wonder-blocks-button\";\n\n console.log(\"Hello, world!\")}\n>\n Hello, world!\n\n```","displayName":"ActivityButton","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"children":{"defaultValue":null,"description":"Text to appear on the button.","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"string"}},"startIcon":{"defaultValue":null,"description":"A Phosphor icon asset (imported as a static SVG file) that\nwill appear at the start of the button (left for LTR, right for RTL).\n\nFor non-Phosphor icons, pass in a WB Icon component that wraps\nthe custom icon.","name":"startIcon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement> | PhosphorIconAsset"}},"endIcon":{"defaultValue":null,"description":"A Phosphor icon asset (imported as a static SVG file) that\nwill appear at the end of the button (right for LTR, left for RTL).\n\nFor non-Phosphor icons, pass in a WB Icon component that wraps\nthe custom icon.","name":"endIcon","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactElement> | PhosphorIconAsset"}},"kind":{"defaultValue":null,"description":"The kind of the button, either primary, secondary, or tertiary.\n\nIn default state:\n\n- Primary buttons have background colors\n- Secondary buttons have a border and no background color\n- Tertiary buttons have no background or border","name":"kind","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ButtonKind","value":[{"value":"\"primary\""},{"value":"\"secondary\""},{"value":"\"tertiary\""}]}},"disabled":{"defaultValue":null,"description":"Whether the button is disabled.\n\nInternally, the `aria-disabled` attribute will be set so that the\nelement remains focusable and will be included in the tab order.","name":"disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"id":{"defaultValue":null,"description":"An optional id attribute.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Test ID used for e2e testing.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"rel":{"defaultValue":null,"description":"Specifies the type of relationship between the current document and the\nlinked document. Should only be used when `href` is specified. This\ndefaults to \"noopener noreferrer\" when `target=\"_blank\"`, but can be\noverridden by setting this prop to something else.","name":"rel","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"A target destination window for a link to open in. Should only be used\nwhen `href` is specified.\n\nTODO(WB-1262): only allow this prop when `href` is also set.t","name":"target","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"_blank\"","value":[{"value":"\"_blank\""}]}},"tabIndex":{"defaultValue":null,"description":"Set the tabindex attribute on the rendered element.","name":"tabIndex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"skipClientNav":{"defaultValue":null,"description":"Whether to avoid using client-side navigation.\n\nIf the URL passed to href is local to the client-side, e.g.\n/math/algebra/eval-exprs, then it tries to use react-router-dom's Link\ncomponent which handles the client-side navigation. You can set\n`skipClientNav` to true avoid using client-side nav entirely.\n\nNOTE: All URLs containing a protocol are considered external, e.g.\nhttps://khanacademy.org/math/algebra/eval-exprs will trigger a full\npage reload.","name":"skipClientNav","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"href":{"defaultValue":null,"description":"URL to navigate to.","name":"href","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"type":{"defaultValue":null,"description":"Used for buttons within forms.","name":"type","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"submit\"","value":[{"value":"\"submit\""}]}},"className":{"defaultValue":null,"description":"Adds CSS classes to the Button.","name":"className","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"Function to call when button is clicked.\n\nThis callback should be used for running synchronous code, like\ndispatching a Redux action. For asynchronous code see the\nbeforeNav and safeWithNav props. It should NOT be used to redirect\nto a different URL.\n\nNote: onClick is optional if href is present, but must be defined if\nhref is not","name":"onClick","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: SyntheticEvent) => unknown)"}},"onMouseDown":{"defaultValue":null,"description":"Respond to a raw \"mousedown\" event.","name":"onMouseDown","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseUp":{"defaultValue":null,"description":"Respond to a raw \"mouseup\" event.","name":"onMouseUp","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseEnter":{"defaultValue":null,"description":"Respond to a raw \"mouseenter\" event.","name":"onMouseEnter","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseLeave":{"defaultValue":null,"description":"Respond to a raw \"mouseleave\" event.","name":"onMouseLeave","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onBlur":{"defaultValue":null,"description":"Respond to a raw \"blur\" event.","name":"onBlur","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: FocusEvent) => unknown)"}},"onFocus":{"defaultValue":null,"description":"Respond to a raw \"focus\" event.","name":"onFocus","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: FocusEvent) => unknown)"}},"beforeNav":{"defaultValue":null,"description":"Run async code before navigating. If the promise returned rejects then\nnavigation will not occur.\n\nIf both safeWithNav and beforeNav are provided, beforeNav will be run\nfirst and safeWithNav will only be run if beforeNav does not reject.\n\nWARNING: Do not use with `type=\"submit\"`.","name":"beforeNav","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"(() => Promise)"}},"safeWithNav":{"defaultValue":null,"description":"Run async code in the background while client-side navigating. If the\nbrowser does a full page load navigation, the callback promise must be\nsettled before the navigation will occur. Errors are ignored so that\nnavigation is guaranteed to succeed.\n\nWARNING: Do not use with `type=\"submit\"`.","name":"safeWithNav","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"(() => Promise)"}},"actionType":{"defaultValue":null,"description":"The action type of the button. This determines the visual style of the\nbutton.\n\n- `progressive` is used for actions that move the user forward in a flow.\n- `neutral` is used for buttons that indicate a neutral action.","name":"actionType","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ActivityButtonActionType","value":[{"value":"\"progressive\""},{"value":"\"neutral\""}]}},"styles":{"defaultValue":null,"description":"Custom styles for the elements in the ActivityButton component.\n- `root`: Styles the root element (button)\n- `box`: Styles the \"chonky\" box element\n- `startIcon`: Styles the start icon element\n- `endIcon`: Styles the end icon element\n- `label`: Styles the text in the button","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-button/src/util/button.types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; box?: StyleType; startIcon?: StyleType; endIcon?: StyleType; label?: StyleType; }"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"ActivityButton"}},"packages-button-guides-best-practices":{"id":"packages-button-guides-best-practices","name":"Button","path":"./__docs__/wonder-blocks-button/best-practices.stories.tsx","stories":[{"id":"packages-button-guides-best-practices--full-bleed-button","name":"Full-bleed button","snippet":"const FullBleedButton = () => (\n \n \n \n);"},{"id":"packages-button-guides-best-practices--buttons-in-rows","name":"Buttons in rows","snippet":"const ButtonsInRows = () => (\n \n \n \n \n \n \n \n \n \n);"},{"id":"packages-button-guides-best-practices--using-min-width","name":"Using minWidth","snippet":"const UsingMinWidth = () => (\n \n \n \n \n);"},{"id":"packages-button-guides-best-practices--truncating-text","name":"Truncating text","snippet":"const TruncatingText = () => (\n \n \n \n \n);"}],"import":"import Button from \"@khanacademy/wonder-blocks-button\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Button\" component.\n 24 | });\n 25 |\n> 26 | export default {\n | ^\n 27 | title: \"Packages / Button / Guides / Best practices\",\n 28 | component: Button,\n 29 |\n\n./__docs__/wonder-blocks-button/best-practices.stories.tsx:\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\n\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport {View} from \"@khanacademy/wonder-blocks-core\";\n\nconst styles = StyleSheet.create({\n column: {\n alignItems: \"flex-start\",\n },\n row: {\n flexDirection: \"row\",\n },\n gap: {\n height: 16,\n },\n button: {\n marginInlineEnd: 10,\n },\n buttonMinWidth: {\n marginInlineEnd: 10,\n minInlineSize: 144,\n },\n});\n\nexport default {\n title: \"Packages / Button / Guides / Best practices\",\n component: Button,\n\n // Disables chromatic testing for these stories.\n parameters: {\n previewTabs: {\n canvas: {\n hidden: true,\n },\n },\n\n viewMode: \"docs\",\n\n chromatic: {\n disableSnapshot: true,\n },\n },\n};\n\nexport const FullBleedButton = {\n render: () => (\n \n \n \n ),\n\n name: \"Full-bleed button\",\n};\n\nexport const ButtonsInRows = {\n render: () => (\n \n \n \n \n \n \n \n \n \n ),\n\n name: \"Buttons in rows\",\n};\n\nexport const UsingMinWidth = {\n render: () => (\n \n \n \n \n ),\n\n name: \"Using minWidth\",\n};\n\nexport const TruncatingText = {\n render: () => (\n \n \n \n \n ),\n\n name: \"Truncating text\",\n};\n"},"docs":{"packages-button-guides-best-practices--docs":{"id":"packages-button-guides-best-practices--docs","name":"Docs","path":"./__docs__/wonder-blocks-button/best-practices.mdx","title":"Packages / Button / Guides / Best practices","content":"import {Meta, Story, Canvas} from \"@storybook/addon-docs/blocks\";\nimport {StyleSheet} from \"aphrodite\";\nimport * as BestPracticesStories from './best-practices.stories';\n\n\n\n## Best Practices\n\n### Layout\n\nIn vertical layouts, buttons will stretch horizontally to fill the available\nspace. This is probably not what you want unless you're on a very narrow\nscreen.\n\n\n\nThis can be corrected by applying appropriate flex styles to the container.\n\n\n\n### Usign minWidth for internationalization\n\nLayouts often specify a specific width of button. When implementing such designs\nuse `minWidth` instead of `width`. `minWidth` allows the button to resize to fit\nthe content whereas `width` does not. This is important for international sites\nsince sometimes strings for UI elements can be much longer in other languages.\nBoth of the buttons below have a \"natural\" width of `144px`. The one on the\nright is wider but it accommodates the full string instead of wrapping it.\n\n\n\n### Truncating text\n\nIf the parent container of the button doesn't have enough room to accommodate\nthe width of the button, the text will truncate. This should ideally never\nhappen, but it's sometimes a necessary fallback.\n\n\n"}}},"packages-button-button":{"id":"packages-button-button","name":"Button","path":"./__docs__/wonder-blocks-button/button.stories.tsx","stories":[{"id":"packages-button-button--default","name":"Default","snippet":"const Default = () => {\n // eslint-disable-next-line no-alert\n alert(\"Click!\");\n }}>Hello, world!;"},{"id":"packages-button-button--kinds","name":"Kinds","snippet":"const Kinds = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n {}}\n kind=\"secondary\"\n actionType=\"destructive\"\n >\n Hello, world!\n \n {}}\n kind=\"tertiary\"\n actionType=\"destructive\"\n >\n Hello, world!\n \n \n \n \n {}}\n kind=\"secondary\"\n actionType=\"neutral\"\n >\n Hello, world!\n \n \n \n \n);","description":"There are three kinds of buttons: `primary` (default), `secondary`, and `tertiary`."},{"id":"packages-button-button--action-type","name":"ActionType","snippet":"const ActionType = () => (\n \n \n {}}\n actionType=\"destructive\"\n >\n Primary\n \n {}}\n kind=\"secondary\"\n actionType=\"destructive\"\n >\n Secondary\n \n {}}\n kind=\"tertiary\"\n actionType=\"destructive\"\n >\n Tertiary\n \n \n \n {}}\n actionType=\"neutral\"\n >\n Primary\n \n {}}\n kind=\"secondary\"\n actionType=\"neutral\"\n >\n Secondary\n \n {}}\n kind=\"tertiary\"\n actionType=\"neutral\"\n >\n Tertiary\n \n \n \n);","description":"Buttons have an `actionType` prop that is either `progressive` (the default, as shown above), `destructive` or `neutral` (as can seen below):"},{"id":"packages-button-button--with-icon","name":"Icon","snippet":"const WithIcon = () => ;","description":"Buttons can have a start icon or an end icon. The `startIcon` prop results in the icon appearing before the label (left for LTR, right for RTL) and the `endIcon` prop results in the icon appearing after the label (right for LTR, left for RTL). __NOTE:__ Icons are available from the [Phosphor Icons](https://phosphoricons.com/) library. To use a Phosphor icon, you can use the following syntax: ```tsx import pencilSimple from \"@phosphor-icons/core/regular/pencil-simple.svg\"; export const ButtonExample = () => ( ); ``` For custom icons, you can use the Wonder Blocks Icon component: ```tsx import {Icon} from \"@khanacademy/wonder-blocks-icon\"; export const ButtonExample = () => ( ); ``` Note: The Button component will handle the sizing for the icons"},{"id":"packages-button-button--icons-with-accessible-names","name":"Icons With Accessible Names","snippet":"const IconsWithAccessibleNames = () => {\n return (\n \n \n }\n endIcon={\n \n }\n >\n With PhosphorIcon aria-label\n \n \n \n \n }\n endIcon={\n \n \n \n }\n >\n With Icon and img alt\n \n \n );\n};","description":"If the `startIcon` or `endIcon` provide meaning, you can provide an accessible name for the icons so that it is included in the accessible name of the button. For example, when using a `PhosphorIcon`, you can use the `aria-label` prop to provide an accessible name. When using a `Icon` component, you can provide the accessible name to the `children` element (ie the `alt` attribute on the `img` element)."},{"id":"packages-button-button--size","name":"Size","snippet":"const Size = () => (\n \n \n small\n \n \n {}}\n kind=\"secondary\"\n size=\"small\"\n >\n Label\n \n {}}\n kind=\"tertiary\"\n size=\"small\"\n >\n Label\n \n \n \n \n medium (default)\n\n \n \n {}}\n kind=\"secondary\"\n size=\"medium\"\n >\n Label\n \n {}}\n kind=\"tertiary\"\n size=\"medium\"\n >\n Label\n \n \n \n \n large\n \n \n {}}\n kind=\"secondary\"\n size=\"large\"\n >\n Label\n \n {}}\n kind=\"tertiary\"\n size=\"large\"\n >\n Label\n \n \n \n \n);"},{"id":"packages-button-button--spinner","name":"Spinner","snippet":"const Spinner = () => (\n \n {}}\n spinner={true}\n size=\"large\"\n aria-label={\"waiting\"}\n >\n Hello, world\n \n \n \n \n {}}\n spinner={true}\n size=\"small\"\n aria-label={\"waiting\"}\n >\n Hello, world\n \n \n);"},{"id":"packages-button-button--truncating-labels","name":"Truncating labels","snippet":"const TruncatingLabels = () => (\n \n \n \n {}}\n style={styles.truncatedButton}\n startIcon={plus}\n >\n label too long for the parent container\n \n \n {}}\n style={styles.truncatedButton}\n >\n label too long for the parent container\n \n \n {}}\n style={styles.truncatedButton}\n startIcon={plus}\n >\n label too long for the parent container\n \n \n);"},{"id":"packages-button-button--custom-styles","name":"Custom Styles","snippet":"const CustomStyles = () => \n \n {}}\n style={{\n maxWidth: 200,\n minHeight: 32,\n height: \"auto\",\n }}\n labelStyle={{\n textOverflow: \"initial\",\n whiteSpace: \"normal\",\n }}\n kind=\"primary\">{`This button does not truncate its label and can appear in multiple lines`}\n {}}\n style={{\n maxWidth: 200,\n minHeight: 32,\n height: \"auto\",\n }}\n labelStyle={{\n textOverflow: \"initial\",\n whiteSpace: \"normal\",\n }}\n kind=\"secondary\">{`This button does not truncate its label and can appear in multiple lines`}\n {}}\n style={{\n maxWidth: 200,\n minHeight: 32,\n height: \"auto\",\n }}\n labelStyle={{\n textOverflow: \"initial\",\n whiteSpace: \"normal\",\n }}\n kind=\"tertiary\">{`This button does not truncate its label and can appear in multiple lines`}\n \n;","description":"Buttons can be styled with custom styles. This story shows a button with a custom width and height (using the `style` prop), and also a custom label style that prevents the label from being truncated (`labelStyle`). __NOTE:__ Please use this feature sparingly. This could be useful for simple cases like the one shown below, but it could cause some issues if used in more complex cases."},{"id":"packages-button-button--custom-icon-size","name":"Custom Icon Size","snippet":"const CustomIconSize = () => Custom icon size;","description":"The `styles` prop allows overriding styles for specific sub-elements within the Button. In this example, the start icon is rendered at 24x24 instead of the default theme size. **Note:** Use this prop sparingly and only when the default theme styling does not meet your needs (e.g. a custom trigger button that requires a non-standard icon size)."},{"id":"packages-button-button--submitting-forms","name":"Submitting forms","snippet":"const SubmittingForms = () => (\n {\n e.preventDefault();\n window.alert(\"form submitted\"); // eslint-disable-line no-alert\n }}\n >\n \n {}} />\n }\n />\n \n \n \n);"},{"id":"packages-button-button--prevent-navigation","name":"Preventing navigation","snippet":"const PreventNavigation = () => (\n \n \n \n {\n e.preventDefault();\n }}\n >\n This button prevents navigation.\n \n \n Hello, world!}\n />\n \n \n \n \n);"},{"id":"packages-button-button--with-router","name":"Navigation with React Router","snippet":"const WithRouter = () => (\n \n \n \n \n \n \n Hello, world!}\n />\n \n \n \n \n);"},{"id":"packages-button-button--receiving-focus-programmatically","name":"Receiving Focus Programmatically","snippet":"const ReceivingFocusProgrammatically = () => {\n // This story is used to test the focus ring when the button receives\n // focus programmatically. The button is focused when the story is\n // rendered.\n const buttonRef = React.useRef(null);\n\n return (\n \n action(\"clicked\")(e)}>Search\n {\n // Focus the button when the button is clicked.\n if (buttonRef.current) {\n buttonRef.current.focus();\n }\n }}\n kind=\"secondary\">Focus on the Button (left)\n \n \n );\n};","description":"This button can receive focus programmatically. This is useful for cases where you want to focus the button when the user interacts with another component, such as a form field or another button. To do this, we use a `ref` to the button and call the `focus()` method on it, so the `ActivityButton` receives focus."},{"id":"packages-button-button--press-duration-tracking","name":"Press Duration Tracking","snippet":"const PressDurationTracking = () => {\n const [pressStartTime, setPressStartTime] = React.useState<\n number | null\n >(null);\n const [pressDuration, setPressDuration] = React.useState(\n null,\n );\n const [lastEvent, setLastEvent] = React.useState(\"none\");\n const [interactionHistory, setInteractionHistory] = React.useState<\n string[]\n >([]);\n\n const logEvent = (eventName: string, duration?: number) => {\n const timestamp = new Date().toLocaleTimeString();\n const logEntry = duration\n ? `${eventName} (${duration}ms) - ${timestamp}`\n : `${eventName} - ${timestamp}`;\n setInteractionHistory((prev) => [...prev.slice(-4), logEntry]);\n setLastEvent(eventName);\n };\n\n // Create base actions for Storybook logging\n const baseActions = {\n onMouseDown: action(\"onMouseDown\"),\n onMouseUp: action(\"onMouseUp\"),\n onMouseLeave: action(\"onMouseLeave\"),\n onClick: action(\"onClick\"),\n onMouseEnter: action(\"onMouseEnter\"),\n };\n\n const handleMouseDown = (e: React.MouseEvent) => {\n const startTime = Date.now();\n setPressStartTime(startTime);\n setPressDuration(null);\n logEvent(\"onMouseDown\");\n baseActions.onMouseDown(e);\n };\n\n const handleMouseUp = (e: React.MouseEvent) => {\n if (pressStartTime) {\n const duration = Date.now() - pressStartTime;\n setPressDuration(duration);\n logEvent(\"onMouseUp\", duration);\n } else {\n logEvent(\"onMouseUp\");\n }\n setPressStartTime(null);\n baseActions.onMouseUp(e);\n };\n\n const handleMouseLeave = (e: React.MouseEvent) => {\n if (pressStartTime) {\n const duration = Date.now() - pressStartTime;\n setPressDuration(duration);\n logEvent(\"onMouseLeave\", duration);\n setPressStartTime(null);\n } else {\n logEvent(\"onMouseLeave\");\n }\n baseActions.onMouseLeave(e);\n };\n\n const handleMouseEnter = (e: React.MouseEvent) => {\n logEvent(\"onMouseEnter\");\n baseActions.onMouseEnter(e);\n };\n\n const handleClick = (e: React.SyntheticEvent) => {\n logEvent(\"onClick\");\n baseActions.onClick(e);\n };\n\n return (\n \n Track Press Duration\n \n \n \n Press Duration Tracker\n \n \n Last Event: {lastEvent}\n \n Press Duration:{\" \"}\n \n {pressDuration !== null\n ? `${pressDuration}ms`\n : \"N/A\"}\n \n \n Currently Pressing:{\" \"}\n {pressStartTime ? \"Yes\" : \"No\"}\n \n \n Interaction History:\n \n {interactionHistory.length > 0 ? (\n \n {interactionHistory.map((entry, index) => (\n \n {entry}\n \n ))}\n \n ) : (\n \n No interactions yet\n \n )}\n \n \n );\n};","description":"This story demonstrates tracking press duration from `onMouseDown` to `onMouseUp`, useful for measuring how long a user holds down on a button. The tracking also handles cases where the mouse leaves the button area during the press."}],"import":"import { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport Button, { ComponentInfo, Strut } from \"@khanacademy/wonder-blocks-button\";\nimport { CompatRouter, Route, Routes } from \"react-router-dom-v5-compat\";\nimport { Icon, PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { LabeledField } from \"@khanacademy/wonder-blocks-labeled-field\";\nimport { MemoryRouter } from \"react-router-dom\";\nimport { TextField } from \"@khanacademy/wonder-blocks-form\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Button\" component.\n 32 | import {IconMappings} from \"../wonder-blocks-icon/phosphor-icon.argtypes\";\n 33 |\n> 34 | export default {\n | ^\n 35 | title: \"Packages / Button / Button\",\n 36 | component: Button,\n 37 | parameters: {\n\n./__docs__/wonder-blocks-button/button.stories.tsx:\n/* eslint-disable max-lines */\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\nimport {action} from \"storybook/actions\";\nimport type {Meta, StoryObj} from \"@storybook/react-vite\";\n\nimport {MemoryRouter} from \"react-router-dom\";\nimport {CompatRouter, Route, Routes} from \"react-router-dom-v5-compat\";\n\nimport type {StyleDeclaration} from \"aphrodite\";\n\nimport pencilSimple from \"@phosphor-icons/core/regular/pencil-simple.svg\";\nimport pencilSimpleBold from \"@phosphor-icons/core/bold/pencil-simple-bold.svg\";\nimport plus from \"@phosphor-icons/core/regular/plus.svg\";\nimport magnifyingGlass from \"@phosphor-icons/core/regular/magnifying-glass.svg\";\nimport caretRight from \"@phosphor-icons/core/regular/caret-right.svg\";\nimport clock from \"@phosphor-icons/core/regular/clock.svg\";\n\nimport {View} from \"@khanacademy/wonder-blocks-core\";\nimport {Strut} from \"@khanacademy/wonder-blocks-layout\";\nimport {semanticColor, sizing} from \"@khanacademy/wonder-blocks-tokens\";\nimport {BodyText} from \"@khanacademy/wonder-blocks-typography\";\n\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport packageConfig from \"../../packages/wonder-blocks-button/package.json\";\nimport ComponentInfo from \"../components/component-info\";\n\nimport ButtonArgTypes from \"./button.argtypes\";\nimport {LabeledField} from \"@khanacademy/wonder-blocks-labeled-field\";\nimport {Icon, PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\";\nimport {TextField} from \"@khanacademy/wonder-blocks-form\";\nimport {IconMappings} from \"../wonder-blocks-icon/phosphor-icon.argtypes\";\n\nexport default {\n title: \"Packages / Button / Button\",\n component: Button,\n parameters: {\n componentSubtitle: (\n \n ),\n },\n argTypes: ButtonArgTypes,\n excludeStories: [\"styles\"],\n} as Meta;\n\ntype StoryComponentType = StoryObj;\n\nexport const Default: StoryComponentType = {\n args: {\n children: \"Hello, world!\",\n kind: \"primary\",\n actionType: \"progressive\",\n size: \"medium\",\n disabled: false,\n style: {maxWidth: 200},\n labelStyle: {},\n onClick: () => {\n // eslint-disable-next-line no-alert\n alert(\"Click!\");\n },\n },\n parameters: {\n chromatic: {\n // We already have screenshots of other stories that cover more of\n // the button states\n disableSnapshot: true,\n },\n },\n};\n\nexport const styles: StyleDeclaration = StyleSheet.create({\n row: {\n flexDirection: \"row\",\n alignItems: \"center\",\n marginBlockEnd: sizing.size_080,\n },\n rowWithGap: {\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: sizing.size_160,\n },\n button: {\n marginInlineEnd: sizing.size_080,\n },\n truncatedButton: {\n maxInlineSize: 200,\n marginBlockEnd: sizing.size_160,\n },\n fillSpace: {\n minInlineSize: 140,\n },\n example: {\n background: semanticColor.core.background.base.subtle,\n padding: sizing.size_160,\n },\n label: {\n marginBlockStart: sizing.size_240,\n marginBlockEnd: sizing.size_080,\n },\n});\n\n/**\n * There are three kinds of buttons: `primary` (default), `secondary`, and\n * `tertiary`.\n */\nexport const Kinds: StoryComponentType = {\n render: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n {}}\n kind=\"secondary\"\n actionType=\"destructive\"\n >\n Hello, world!\n \n {}}\n kind=\"tertiary\"\n actionType=\"destructive\"\n >\n Hello, world!\n \n \n \n \n {}}\n kind=\"secondary\"\n actionType=\"neutral\"\n >\n Hello, world!\n \n \n \n \n ),\n parameters: {\n chromatic: {\n // We already have screenshots of other stories that cover more of\n // the button states\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * Buttons have an `actionType` prop that is either `progressive` (the default,\n * as shown above), `destructive` or `neutral` (as can seen below):\n */\nexport const ActionType: StoryComponentType = {\n name: \"ActionType\",\n render: () => (\n \n \n {}}\n actionType=\"destructive\"\n >\n Primary\n \n {}}\n kind=\"secondary\"\n actionType=\"destructive\"\n >\n Secondary\n \n {}}\n kind=\"tertiary\"\n actionType=\"destructive\"\n >\n Tertiary\n \n \n \n {}}\n actionType=\"neutral\"\n >\n Primary\n \n {}}\n kind=\"secondary\"\n actionType=\"neutral\"\n >\n Secondary\n \n {}}\n kind=\"tertiary\"\n actionType=\"neutral\"\n >\n Tertiary\n \n \n \n ),\n parameters: {\n chromatic: {\n // NOTE: We already have screenshots of other stories that cover more of\n // the button states (see Variants).\n disableSnapshot: true,\n },\n },\n};\n\nconst kinds = [\"primary\", \"secondary\", \"tertiary\"] as const;\n\nconst IconExample = () => (\n \n \n Using `startIcon` prop\n \n \n {kinds.map((kind, idx) => (\n \n {kind}\n \n ))}\n \n \n {kinds.map((kind, idx) => (\n \n {`${kind} small`}\n \n ))}\n \n \n Using `endIcon` prop\n \n \n {kinds.map((kind, idx) => (\n \n {kind}\n \n ))}\n \n \n {kinds.map((kind, idx) => (\n \n {`${kind} small`}\n \n ))}\n \n \n Using both `startIcon` and `endIcon` props\n \n \n {kinds.map((kind, idx) => (\n \n {kind}\n \n ))}\n \n \n {kinds.map((kind, idx) => (\n \n {`${kind} small`}\n \n ))}\n \n \n Using Icon component for custom icons\n \n \n {kinds.map((kind, idx) => (\n \n \"\"\n \n }\n endIcon={\n \n \"\"\n \n }\n style={styles.button}\n key={idx}\n >\n {kind}\n \n ))}\n \n \n {kinds.map((kind, idx) => (\n \n \"\"\n \n }\n endIcon={\n \n \"\"\n \n }\n style={styles.button}\n key={idx}\n size=\"small\"\n >\n {`${kind} small`}\n \n ))}\n \n \n);\n\n/**\n * Buttons can have a start icon or an end icon. The `startIcon` prop\n * results in the icon appearing before the label (left for LTR, right for RTL)\n * and the `endIcon` prop results in the icon appearing after the label (right\n * for LTR, left for RTL).\n *\n * __NOTE:__ Icons are available from the [Phosphor\n * Icons](https://phosphoricons.com/) library.\n *\n * To use a Phosphor icon, you can use the following syntax:\n *\n * ```tsx\n * import pencilSimple from \"@phosphor-icons/core/regular/pencil-simple.svg\";\n *\n * export const ButtonExample = () => (\n * \n * );\n * ```\n *\n * For custom icons, you can use the Wonder Blocks Icon component:\n *\n * ```tsx\n * import {Icon} from \"@khanacademy/wonder-blocks-icon\";\n *\n * export const ButtonExample = () => (\n * \n * );\n * ```\n *\n * Note: The Button component will handle the sizing for the icons\n */\nexport const WithIcon: StoryComponentType = {\n name: \"Icon\",\n render: () => ,\n};\n\n/**\n * If the `startIcon` or `endIcon` provide meaning, you can provide an accessible\n * name for the icons so that it is included in the accessible name of the button.\n *\n * For example, when using a `PhosphorIcon`, you can use the `aria-label` prop\n * to provide an accessible name. When using a `Icon` component, you can provide\n * the accessible name to the `children` element (ie the `alt` attribute on the\n * `img` element).\n */\nexport const IconsWithAccessibleNames: StoryComponentType = {\n render: () => {\n return (\n \n \n }\n endIcon={\n \n }\n >\n With PhosphorIcon aria-label\n \n \n \n \n }\n endIcon={\n \n \n \n }\n >\n With Icon and img alt\n \n \n );\n },\n parameters: {\n chromatic: {\n disableSnapshot: true,\n },\n },\n};\n\nexport const Size: StoryComponentType = () => (\n \n \n small\n \n \n {}}\n kind=\"secondary\"\n size=\"small\"\n >\n Label\n \n {}}\n kind=\"tertiary\"\n size=\"small\"\n >\n Label\n \n \n \n \n medium (default)\n\n \n \n {}}\n kind=\"secondary\"\n size=\"medium\"\n >\n Label\n \n {}}\n kind=\"tertiary\"\n size=\"medium\"\n >\n Label\n \n \n \n \n large\n \n \n {}}\n kind=\"secondary\"\n size=\"large\"\n >\n Label\n \n {}}\n kind=\"tertiary\"\n size=\"large\"\n >\n Label\n \n \n \n \n);\n\nSize.parameters = {\n docs: {\n description: {\n story: \"Buttons have a size that's either `medium` (default), `small`, or `large`.\",\n },\n },\n chromatic: {\n // We already have screenshots of other stories that cover more of\n // the button states\n disableSnapshot: true,\n },\n};\n\nexport const Spinner: StoryComponentType = () => (\n \n {}}\n spinner={true}\n size=\"large\"\n aria-label={\"waiting\"}\n >\n Hello, world\n \n \n \n \n {}}\n spinner={true}\n size=\"small\"\n aria-label={\"waiting\"}\n >\n Hello, world\n \n \n);\n\nSpinner.parameters = {\n docs: {\n description: {\n story: \"Buttons can show a spinner. This is useful when indicating to a user that their input has been recognized but that the operation will take some time. While the spinner property is set to true the button is disabled.\",\n },\n },\n};\n\nexport const TruncatingLabels: StoryComponentType = {\n name: \"Truncating labels\",\n render: () => (\n \n \n \n {}}\n style={styles.truncatedButton}\n startIcon={plus}\n >\n label too long for the parent container\n \n \n {}}\n style={styles.truncatedButton}\n >\n label too long for the parent container\n \n \n {}}\n style={styles.truncatedButton}\n startIcon={plus}\n >\n label too long for the parent container\n \n \n ),\n};\n\nTruncatingLabels.parameters = {\n docs: {\n description: {\n story: \"If the label is too long for the button width, the text will be truncated.\",\n },\n },\n};\n\n/**\n * Buttons can be styled with custom styles. This story shows a button with a\n * custom width and height (using the `style` prop), and also a custom label\n * style that prevents the label from being truncated (`labelStyle`).\n *\n * __NOTE:__ Please use this feature sparingly. This could be useful for simple\n * cases like the one shown below, but it could cause some issues if used in\n * more complex cases.\n */\nexport const CustomStyles = {\n args: {\n children: `This button does not truncate its label and can appear in multiple lines`,\n disabled: false,\n kind: \"secondary\",\n onClick: () => {},\n style: {\n maxWidth: 200,\n minHeight: 32,\n height: \"auto\",\n },\n labelStyle: {\n textOverflow: \"initial\",\n whiteSpace: \"normal\",\n },\n },\n render: (args: any) => (\n \n \n \n \n \n ),\n};\n\nSubmittingForms.parameters = {\n docs: {\n description: {\n story: 'If the button is inside a form, you can use the `type=\"submit\"` variant, so the form will be submitted on click.',\n },\n },\n options: {\n showAddonPanel: true,\n },\n chromatic: {\n // We already have screenshots of other stories that cover more of the\n // button states.\n disableSnapshot: true,\n },\n};\n\nexport const PreventNavigation: StoryComponentType = {\n name: \"Preventing navigation\",\n render: () => (\n \n \n \n {\n e.preventDefault();\n }}\n >\n This button prevents navigation.\n \n \n Hello, world!}\n />\n \n \n \n \n ),\n};\n\nPreventNavigation.parameters = {\n docs: {\n description: {\n story: \"Sometimes you may need to perform an async action either before or during navigation. This can be accomplished with `beforeNav` and `safeWithNav` respectively.\",\n },\n },\n chromatic: {\n disableSnapshot: true,\n },\n};\n\nexport const WithRouter: StoryComponentType = {\n name: \"Navigation with React Router\",\n render: () => (\n \n \n \n \n \n \n Hello, world!}\n />\n \n \n \n \n ),\n};\n\nWithRouter.parameters = {\n docs: {\n description: {\n story: \"Buttons do client-side navigation by default, if React Router exists:\",\n },\n },\n chromatic: {\n disableSnapshot: true,\n },\n};\n\n/**\n * This button can receive focus programmatically. This is useful for cases where\n * you want to focus the button when the user interacts with another\n * component, such as a form field or another button.\n *\n * To do this, we use a `ref` to the button and call the `focus()` method\n * on it, so the `ActivityButton` receives focus.\n */\nexport const ReceivingFocusProgrammatically: StoryComponentType = {\n render: function Render(args) {\n // This story is used to test the focus ring when the button receives\n // focus programmatically. The button is focused when the story is\n // rendered.\n const buttonRef = React.useRef(null);\n\n return (\n \n action(\"clicked\")(e)}\n />\n {\n // Focus the button when the button is clicked.\n if (buttonRef.current) {\n buttonRef.current.focus();\n }\n }}\n kind=\"secondary\"\n >\n Focus on the Button (left)\n \n \n );\n },\n args: {\n children: \"Search\",\n startIcon: magnifyingGlass,\n endIcon: caretRight,\n },\n parameters: {\n chromatic: {\n // Disable since it requires user interaction to see the focus ring.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * This story demonstrates tracking press duration from `onMouseDown` to `onMouseUp`,\n * useful for measuring how long a user holds down on a button. The tracking also\n * handles cases where the mouse leaves the button area during the press.\n */\nexport const PressDurationTracking: StoryComponentType = {\n render: function Render(args) {\n const [pressStartTime, setPressStartTime] = React.useState<\n number | null\n >(null);\n const [pressDuration, setPressDuration] = React.useState(\n null,\n );\n const [lastEvent, setLastEvent] = React.useState(\"none\");\n const [interactionHistory, setInteractionHistory] = React.useState<\n string[]\n >([]);\n\n const logEvent = (eventName: string, duration?: number) => {\n const timestamp = new Date().toLocaleTimeString();\n const logEntry = duration\n ? `${eventName} (${duration}ms) - ${timestamp}`\n : `${eventName} - ${timestamp}`;\n setInteractionHistory((prev) => [...prev.slice(-4), logEntry]);\n setLastEvent(eventName);\n };\n\n // Create base actions for Storybook logging\n const baseActions = {\n onMouseDown: action(\"onMouseDown\"),\n onMouseUp: action(\"onMouseUp\"),\n onMouseLeave: action(\"onMouseLeave\"),\n onClick: action(\"onClick\"),\n onMouseEnter: action(\"onMouseEnter\"),\n };\n\n const handleMouseDown = (e: React.MouseEvent) => {\n const startTime = Date.now();\n setPressStartTime(startTime);\n setPressDuration(null);\n logEvent(\"onMouseDown\");\n baseActions.onMouseDown(e);\n };\n\n const handleMouseUp = (e: React.MouseEvent) => {\n if (pressStartTime) {\n const duration = Date.now() - pressStartTime;\n setPressDuration(duration);\n logEvent(\"onMouseUp\", duration);\n } else {\n logEvent(\"onMouseUp\");\n }\n setPressStartTime(null);\n baseActions.onMouseUp(e);\n };\n\n const handleMouseLeave = (e: React.MouseEvent) => {\n if (pressStartTime) {\n const duration = Date.now() - pressStartTime;\n setPressDuration(duration);\n logEvent(\"onMouseLeave\", duration);\n setPressStartTime(null);\n } else {\n logEvent(\"onMouseLeave\");\n }\n baseActions.onMouseLeave(e);\n };\n\n const handleMouseEnter = (e: React.MouseEvent) => {\n logEvent(\"onMouseEnter\");\n baseActions.onMouseEnter(e);\n };\n\n const handleClick = (e: React.SyntheticEvent) => {\n logEvent(\"onClick\");\n baseActions.onClick(e);\n };\n\n return (\n \n \n Track Press Duration\n \n \n \n \n Press Duration Tracker\n \n \n \n Last Event: {lastEvent}\n \n \n Press Duration:{\" \"}\n \n {pressDuration !== null\n ? `${pressDuration}ms`\n : \"N/A\"}\n \n \n \n Currently Pressing:{\" \"}\n {pressStartTime ? \"Yes\" : \"No\"}\n \n \n \n Interaction History:\n \n {interactionHistory.length > 0 ? (\n \n {interactionHistory.map((entry, index) => (\n \n {entry}\n \n ))}\n \n ) : (\n \n No interactions yet\n \n )}\n \n \n );\n },\n args: {\n kind: \"primary\",\n style: {maxWidth: 240},\n },\n parameters: {\n chromatic: {\n disableSnapshot: true,\n },\n },\n};\n"}},"packages-button-guides-navigation-callbacks":{"id":"packages-button-guides-navigation-callbacks","name":"Button","path":"./__docs__/wonder-blocks-button/navigation-callbacks.stories.tsx","stories":[{"id":"packages-button-guides-navigation-callbacks--before-nav-callbacks","name":"beforeNav Callbacks","snippet":"const BeforeNavCallbacks_ = () => ;"},{"id":"packages-button-guides-navigation-callbacks--safe-with-nav-callbacks","name":"safeWithNav Callbacks","snippet":"const SafeWithNavCallbacks_ = () => ;"}],"import":"import Button from \"@khanacademy/wonder-blocks-button\";\nimport { CompatRouter, Route, Routes } from \"react-router-dom-v5-compat\";\nimport { MemoryRouter } from \"react-router-dom\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Button\" component.\n 108 | );\n 109 |\n> 110 | export default {\n | ^\n 111 | title: \"Packages / Button / Guides / Navigation Callbacks\",\n 112 | component: Button,\n 113 |\n\n./__docs__/wonder-blocks-button/navigation-callbacks.stories.tsx:\nimport * as React from \"react\";\nimport {MemoryRouter} from \"react-router-dom\";\nimport {CompatRouter, Route, Routes} from \"react-router-dom-v5-compat\";\n\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport {View} from \"@khanacademy/wonder-blocks-core\";\n\nimport {styles} from \"./button.stories\";\n\nconst BeforeNavCallbacks = () => (\n \n \n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n beforeNav, client-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n beforeNav, server-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n beforeNav, open URL in new tab\n \n \n Hello, world!}\n />\n \n \n \n \n);\n\nconst SafeWithNavCallbacks = () => (\n \n \n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n safeWithNav, client-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n safeWithNav, server-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n safeWithNav, open URL in new tab\n \n \n Hello, world!}\n />\n \n \n \n \n);\n\nexport default {\n title: \"Packages / Button / Guides / Navigation Callbacks\",\n component: Button,\n\n // Disables chromatic testing for these stories.\n parameters: {\n previewTabs: {\n canvas: {\n hidden: true,\n },\n },\n\n viewMode: \"docs\",\n\n chromatic: {\n disableSnapshot: true,\n },\n },\n};\n\nexport const BeforeNavCallbacks_ = {\n render: () => ,\n name: \"beforeNav Callbacks\",\n};\n\nexport const SafeWithNavCallbacks_ = {\n render: () => ,\n name: \"safeWithNav Callbacks\",\n};\n"},"docs":{"packages-button-guides-navigation-callbacks--docs":{"id":"packages-button-guides-navigation-callbacks--docs","name":"Docs","path":"./__docs__/wonder-blocks-button/navigation-callbacks.mdx","title":"Packages / Button / Guides / Navigation Callbacks","content":"import {Meta, Story, Canvas} from \"@storybook/addon-docs/blocks\";\nimport {MemoryRouter} from \"react-router-dom\";\nimport {CompatRouter, Route, Routes} from \"react-router-dom-v5-compat\";\nimport * as NavigationCallbacksStories from \"./navigation-callbacks.stories\";\n\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport {View} from \"@khanacademy/wonder-blocks-core\";\n\nimport {styles} from \"./button.stories\";\n\n\n\n# Running Callbacks on Navigation\n\nSometimes you may need to run some code and also navigate when the user\nclicks the button. For example, you might want to send a request to the\nserver and also send the user to a different page. You can do this by\npassing in a URL to the `href` prop and also passing in a callback\nfunction to either the `onClick`, `beforeNav`, or `safeWithNav` prop.\nWhich prop you choose depends on your use case.\n\n- `onClick` is guaranteed to run to completion before navigation starts,\n but it is not async aware, so it should only be used if all of the code\n in your callback function executes synchronously.\n\n- `beforeNav` is guaranteed to run async operations before navigation\n starts. You must return a promise from the callback function passed in\n to this prop, and the navigation will happen after the promise\n resolves. If the promise rejects, the navigation will not occur.\n This prop should be used if it's important that the async code\n completely finishes before the next URL starts loading.\n\n- `safeWithNav` runs async code concurrently with navigation when safe,\n but delays navigation until the async code is finished when\n concurrent execution is not safe. You must return a promise from the\n callback function passed in to this prop, and Wonder Blocks will run\n the async code in parallel with client-side navigation or while opening\n a new tab, but will wait until the async code finishes to start a\n server-side navigation. If the promise rejects the navigation will\n happen anyway. This prop should be used when it's okay to load\n the next URL while the async callback code is running.\n\nThis table gives an overview of the options:\n\n| Prop | Async safe? | Completes before navigation? |\n| ----------- | ----------- | ---------------------------- |\n| onClick | no | yes |\n| beforeNav | yes | yes |\n| safeWithNav | yes | no |\n\nIt is possible to use more than one of these props on the same element.\nIf multiple props are used, they will run in this order: first `onClick`,\nthen `beforeNav`, then `safeWithNav`. If both `beforeNav` and `safeWithNav`\nare used, the `safeWithNav` callback will not be called until the\n`beforeNav` promise resolves successfully. If the `beforeNav` promise\nrejects, `safeWithNav` will not be run.\n\nIf the `onClick` handler calls `preventDefault()`, then `beforeNav`\nand `safeWithNav` will still run, but navigation will not occur.\n\nexport const BeforeNavCallbacks = () => (\n \n \n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n beforeNav, client-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n beforeNav, server-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n beforeNav, open URL in new tab\n \n \n Hello, world!}\n />\n \n \n \n \n);\n\nexport const SafeWithNavCallbacks = () => (\n \n \n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n safeWithNav, client-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n safeWithNav, server-side nav\n \n \n new Promise((resolve, reject) => {\n setTimeout(resolve, 1000);\n })\n }\n >\n safeWithNav, open URL in new tab\n \n \n Hello, world!}\n />\n \n \n \n \n);\n\n## Stories\n\n### beforeNav Callbacks\n\nThese buttons always wait until the async callback code completes before\nstarting navigation.\n\n\n\n### safeWithNav Callbacks\n\nIf the `onClick` callback calls `preventDefault()`, then navigation will not occur.\n\n\n"}}},"packages-card":{"id":"packages-card","name":"Card","path":"./__docs__/wonder-blocks-card/card.stories.tsx","stories":[{"id":"packages-card--default-card","name":"Default Card","snippet":"const DefaultCard = () => \n Some Contents\n This is a basic card.\n;","description":"The most basic Card has simple contents as `children`."},{"id":"packages-card--gem-card","name":"Gem Card","snippet":"const GemCard = () => (\n \n \n \n \n \n Gem challenge\n \n \n \n \n \n \n \n \n \n \n \n \n {/* progress bar here */}\n \n \n Class gems\n \n \n 0 of 1500\n \n \n \n \n Remaining\n \n \n 1500\n \n \n \n \n Reward\n \n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n \n Set Reward\n \n \n \n \n \n \n);","description":"The Gem Challenge Card has more complex content structure including icons, badges, tabular data, and multiple buttons."},{"id":"packages-card--with-dismiss-button","name":"With Dismiss Button","snippet":"const WithDismissButton = () => {\n const CardWithRef = () => {\n const wrapperRef = React.useRef(null);\n const cardRef = React.useRef(null);\n const onDismiss = () => {\n // Remove the card from the DOM\n cardRef.current?.remove();\n\n // Ensure focus is handled gracefully across browsers\n wrapperRef.current?.focus();\n };\n\n return (\n \n \n Dismissable Card\n \n This is a card with a close button. Click the button\n to dismiss.\n \n \n \n );\n };\n\n return ;\n};","description":"Cards also have the option to display a \"close\" button that can dismiss the card from the DOM. If a Card is removed onDismiss, focus should be moved to a wrapper or neighoring interactive element."},{"id":"packages-card--with-tag","name":"With Tag","snippet":"const WithTag = () => (\n \n \n Card 1\n \n \n Card 2\n \n \n);","description":"Cards can be marked up with different HTML tags via the `tag` prop. Any HTML tag is allowed except for `button` and `a` tags, which should use Wonder Blocks Button and Link components as children instead. When using `section` or `figure` tags, a label must be provided for accessibility via the `labels.cardAriaLabel` prop. See the \"In a Stack\" story for an example of using listitems with Cards."},{"id":"packages-card--with-background-image","name":"With Background Image","snippet":"const WithBackgroundImage = () => (\n \n \n \n \n Practice\n \n \n \n Proficient\n \n \n 100%\n \n \n \n);","description":"Avoid using a CSS background image with text placed on top. In dark mode the image stays the same while the text color inverts, which can make the text illegible. Instead, paint the card with a semantic background color and layer the background pattern on top with a CSS `mask-image` filled with a semantic color token. This way both the background color and the pattern adapt across themes, keeping the text legible. See the [Dark Mode best practices](./?path=/docs/best-practices-dark-mode--docs) for more details."},{"id":"packages-card--with-split-background-image","name":"With Split Background Image","snippet":"const WithSplitBackgroundImage = () => (\n \n \n \n \n \n Khanmigo and Blooket\n \n Gamify learning without adding more work to your plate!\n \n \n \n \n \n \n);","description":"When a card has a decorative header illustration, avoid painting it with a CSS background image: it stays the same in dark mode while the rest of the card adapts, so the header can look out of place. Instead, paint the header with a semantic background color and place the illustration on top as a decorative (`aria-hidden`) graphic. The illustration has its baked-in background removed so the semantic color shows through and adapts across themes. See the [Dark Mode best practices](./?path=/docs/best-practices-dark-mode--docs) for more details."},{"id":"packages-card--in-a-stack","name":"In A Stack","snippet":"const InAStack = () => (\n <>\n Cards in a stack\n \n \n \n Active Card\n \n \n \n \n \n Inactive Card\n \n \n \n \n \n);"},{"id":"packages-card--in-a-grid","name":"In A Grid","snippet":"const InAGrid = () => (\n <>\n Cards in a grid\n \n \n Card 1\n This is a basic card.\n \n \n Card 2\n This is a basic card.\n \n \n Card 3\n This is a basic card.\n \n \n Card 4\n This is a basic card.\n \n \n \n);"},{"id":"packages-card--with-style-props","name":"With Style Props","snippet":"const WithStyleProps = () => (\n <>\n Style props\n \n \n borderRadius=small\n \n \n paddingSize=medium\n \n \n background=base-subtle\n \n \n elevation=low\n \n \n \n);"}],"import":"import { BodyText, Heading } from \"@khanacademy/wonder-blocks-typography\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport { Card, ComponentInfo } from \"@khanacademy/wonder-blocks-card\";\nimport { GemBadge } from \"@khanacademy/wonder-blocks-badge\";\nimport { GemIcon, Icon, PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport Link from \"@khanacademy/wonder-blocks-link\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"The Card component is a flexible, reusable UI building block designed to encapsulate content within a structured, visually distinct container. Its primary goal is to present grouped or related information in a way that is visually consistent, easily scannable, and modular across different parts of the application. Cards provide a defined surface area with clear visual boundaries (via border-radius and box-shadow elevation tokens), making them ideal for use cases that involve displaying comparable content items side-by-side or in structured layouts such as grids, lists, or dashboards. Note: cards do not set a default width. Width styles should be set by the consumer with the `styles.root` prop, or a parent flex or grid container. ### Usage ```jsx import {Card} from \"@khanacademy/wonder-blocks-card\"; This is a basic card. ``` ### Accessibility When the `onDismiss` prop is provided, a dismiss button will be rendered. In this case, the `labels.dismissButtonAriaLabel` prop is required to provide a translatable screen reader label for the dismiss button. See additional Accessibility docs.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-card/src/index.ts","description":"The Card component is a flexible, reusable UI building block designed to\nencapsulate content within a structured, visually distinct container.\nIts primary goal is to present grouped or related information in a way that\nis visually consistent, easily scannable, and modular across different\nparts of the application.\n\nCards provide a defined surface area with clear visual boundaries\n(via border-radius and box-shadow elevation tokens), making them ideal for\nuse cases that involve displaying comparable content items side-by-side or\nin structured layouts such as grids, lists, or dashboards.\n\nNote: cards do not set a default width. Width styles should be set by the consumer\nwith the `styles.root` prop, or a parent flex or grid container.\n\n### Usage\n\n```jsx\nimport {Card} from \"@khanacademy/wonder-blocks-card\";\n\n\n This is a basic card.\n\n```\n\n### Accessibility\n\nWhen the `onDismiss` prop is provided, a dismiss button will be rendered.\nIn this case, the `labels.dismissButtonAriaLabel` prop is required to provide\na translatable screen reader label for the dismiss button.\n\nSee additional Accessibility docs.","displayName":"Card","methods":[],"props":{"aria-busy":{"defaultValue":null,"description":"","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-labelledby":{"defaultValue":null,"description":"ID reference for aria-labelledby","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-roledescription":{"defaultValue":null,"description":"","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"children":{"defaultValue":null,"description":"The content for the card.","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"ReactNode"}},"tag":{"defaultValue":null,"description":"","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"symbol\" | \"object\" | \"search\" | \"big\" | \"link\" | \"small\" | \"sub\" | \"sup\" | \"style\" | \"time\" | \"menu\" | \"dialog\" | \"text\" | \"article\" | \"figure\" | \"form\" | \"img\" | \"main\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"header\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"title\" | \"p\" | \"map\" | \"filter\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"div\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"footer\" | \"head\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"li\" | \"mark\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"output\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"slot\" | \"script\" | \"section\" | \"select\" | \"source\" | \"strong\" | \"summary\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"tr\" | \"track\" | \"u\" | \"ul\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"foreignObject\" | \"g\" | \"image\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"textPath\" | \"tspan\" | \"use\" | \"view\"","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"testId":{"defaultValue":null,"description":"The test ID used to locate this component in automated tests.\n\nThe test ID will also be passed to the dismiss button as\n`{testId}-dismiss-button` if the `onDismiss` prop is provided.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"styles":{"defaultValue":null,"description":"Optional styles to be applied to the root element and the dismiss button.","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; dismissButton?: StyleType; }"}},"inert":{"defaultValue":null,"description":"An optional attribute to remove this component from the accessibility tree\nand keyboard tab order, such as for inactive cards in a stack.","name":"inert","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"labels":{"defaultValue":null,"description":"Translatable label string for aria-label","name":"labels","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"({ cardAriaLabel?: string; dismissButtonAriaLabel?: string; } & { dismissButtonAriaLabel: string; dismissButtonAriaDescribedBy?: string | undefined; } & Record) | ({ cardAriaLabel?: string | undefined; dismissButtonAriaLabel?: string | undefined; } & Record) | ({ cardAriaLabel?: undefined; dismissButtonAriaLabel?: string | undefined; } & { dismissButtonAriaLabel: string; dismissButtonAriaDescribedBy?: string | undefined; } & Record) | ({ cardAriaLabel?: undefined; dismissButtonAriaLabel?: string | undefined; } & Record) | undefined"}},"background":{"defaultValue":{"value":"base-default"},"description":"The background style of the card, as a string identifier that matches a semanticColor token.\nThis can be one of:\n- `\"base-subtle\"` (color), `semanticColor.core.background.base.subtle`: a light gray background.\n- `\"base-default\"` (color), `semanticColor.core.background.base.default`: a white background.\n- `Image` (image), a URL string for a background image. Can be an imported image file or a URL string.\n\nFor additional background styling such as repeat or size, use the `styles.root` prop to pass in custom styles.\n\nDefault: `\"base-default\"`","name":"background","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"base-subtle\" | \"base-default\" | (new (width?: number, height?: number) => HTMLImageElement) | null | undefined"}},"borderRadius":{"defaultValue":{"value":"small"},"description":"The border radius of the card, as a string identifier that matches a border.radius token.\nThis can be one of:\n- `\"radius_080\"`, matching `border.radius.radius_080`.\n- `\"radius_120\"`, matching `border.radius.radius_120`.\n\nDefault: `\"radius_080\"`","name":"borderRadius","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"small\" | \"medium\"","value":[{"value":"\"small\""},{"value":"\"medium\""}]}},"paddingSize":{"defaultValue":{"value":"small"},"description":"The padding inside the card, as a string identifier that matches a sizing token.\nThis can be one of:\n- `\"none\"`: no padding.\n- `\"small\"`, matching `sizing.size_160`.\n- `\"medium\"`, matching `sizing.size_240`.\n\nDefault: `\"size_160\"`","name":"paddingSize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"small\" | \"none\" | \"medium\"","value":[{"value":"\"small\""},{"value":"\"none\""},{"value":"\"medium\""}]}},"elevation":{"defaultValue":{"value":"none"},"description":"The box-shadow for the card, as a string identifier that matches a sizing token.\nThis can be one of:\n- `\"none\"`: no elevation.\n- `\"low\"`, matching `boxShadow.low`.\n\nDefault: `\"none\"`","name":"elevation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"low\"","value":[{"value":"\"none\""},{"value":"\"low\""}]}},"onDismiss":{"defaultValue":null,"description":"","name":"onDismiss","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"},{"fileName":"wonder-blocks/packages/wonder-blocks-card/src/components/card.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"((e?: SyntheticEvent) => void)"}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"Card"}},"packages-cell-compactcell":{"id":"packages-cell-compactcell","name":"CompactCell","path":"./__docs__/wonder-blocks-cell/compact-cell.stories.tsx","stories":[{"id":"packages-cell-compactcell--default-compact-cell","name":"Default Compact Cell","snippet":"const DefaultCompactCell = () => } />;","description":"Default CompactCell example. It will be rendered as the first/default story and it can be interacted with the controls panel in the Browser."},{"id":"packages-cell-compactcell--compact-cell-left","name":"Compact Cell Left","snippet":"const CompactCellLeft = () => (\n \n }\n />\n);","description":"You can create a minimal cell that only uses a title and an PhosphorIcon that can be placed on the left or right (or both). In this case, we will place the icon on the left to show you how cell is flexible. Note that you can pass any of the existing WB components such as `PhosphorIcon`, `IconButton`, `Tooltip`, etc."},{"id":"packages-cell-compactcell--compact-cell-right","name":"Compact Cell Right","snippet":"const CompactCellRight = () => (\n \n }\n />\n);","description":"You can also create a cell with an accessory placed on the right. Note that you can pass any of the existing WB components such as `PhosphorIcon`."},{"id":"packages-cell-compactcell--compact-cell-with-different-heights","name":"Compact Cell With Different Heights","snippet":"const CompactCellWithDifferentHeights = () => (\n <>\n \n \n \n \n \n \n);","description":"Cells should keep a consistent height no matter the content passed in the title prop. It should also respect a `minHeight` of 48px."},{"id":"packages-cell-compactcell--compact-cell-both","name":"CompactCell with both accessories","snippet":"const CompactCellBoth = () => (\n \n }\n rightAccessory={\n \n }\n />\n);","description":"You can also create a more complex cell with accessories placed on both sides. Note that you can extend the PhosphorIcon component with custom paths such as the following example."},{"id":"packages-cell-compactcell--compact-cell-accessory-styles","name":"CompactCell accessories with custom styles","snippet":"const CompactCellAccessoryStyles = () => (\n \n }\n rightAccessory={\n \n }\n styles={{\n leftAccessory: {\n minWidth: sizing.size_480,\n alignSelf: \"flex-start\",\n alignItems: \"flex-start\",\n },\n rightAccessory: {\n minWidth: sizing.size_240,\n alignSelf: \"flex-end\",\n alignItems: \"flex-end\",\n },\n }}\n />\n);","description":"Accessories can also be customized to adapt to different sizes and alignments. In this example, we can see how a cell can be customized for both accessories."},{"id":"packages-cell-compactcell--compact-cell-horizontal-rules","name":"Defining horizontal rule variants","snippet":"const CompactCellHorizontalRules = () => (\n <>\n \n }\n horizontalRule=\"inset\"\n />\n \n }\n horizontalRule=\"full-width\"\n />\n \n }\n horizontalRule=\"none\"\n />\n \n);","description":"Cell components can use the `horizontalRule` prop to use a set of predefined variants that we can use to match our needs."},{"id":"packages-cell-compactcell--compact-cell-with-custom-styles","name":"Compact Cell With Custom Styles","snippet":"const CompactCellWithCustomStyles = () => (\n \n }\n rightAccessory={}\n styles={{\n root: {\n background: semanticColor.core.background.neutral.subtle,\n },\n }}\n onClick={() => {}}\n />\n);","description":"`CompactCell` can be used with custom styles. The following parts can be styled: - `root`: Styles the root element - `content`: Styles the content area (between the accessories) - `leftAccessory`: Styles the left accessory element - `rightAccessory`: Styles the right accessory element"},{"id":"packages-cell-compactcell--clickable-compact-cell","name":"Clickable Compact Cell","snippet":"const ClickableCompactCell = () => (\n }\n onClick={() => {}}\n aria-label=\"Press to navigate to the article\"\n />\n);"},{"id":"packages-cell-compactcell--compact-cell-active","name":"Compact Cell Active","snippet":"const CompactCellActive = () => (\n \n }\n rightAccessory={\n \n }\n active={true}\n onClick={() => {}}\n />\n);","description":"The cell also supports different states within itself. The different styles are defined internally (e.g hover, focused, pressed, active, disabled) and we allow passing some props to use the `active` or `disabled` state."},{"id":"packages-cell-compactcell--compact-cell-disabled","name":"Compact Cell Disabled","snippet":"const CompactCellDisabled = () => (\n \n }\n disabled={true}\n onClick={() => {}}\n />\n);","description":"In the following example we can see how the `disabled` state works. Note that we apply an opacity to all the elements to make it more apparent that the cell is disabled. This includes text, SVG icons, images, etc."},{"id":"packages-cell-compactcell--compact-cells-as-list-items","name":"Compact Cells As List Items","snippet":"const CompactCellsAsListItems = () => (\n \n \n \n }\n active={true}\n href=\"https://khanacademy.org\"\n horizontalRule=\"full-width\"\n />\n \n \n \n }\n href=\"https://khanacademy.org\"\n horizontalRule=\"full-width\"\n />\n \n \n \n }\n href=\"https://khanacademy.org\"\n horizontalRule=\"full-width\"\n styles={{\n root: {\n background:\n semanticColor.core.background.overlay.default,\n },\n }}\n />\n \n \n \n }\n onClick={() => {}}\n styles={{\n root: {\n background:\n semanticColor.core.background.warning.subtle,\n },\n }}\n horizontalRule=\"full-width\"\n />\n \n \n);","description":"These are `CompactCell` instances with custom background colors. Note that we use the `style` prop to pass a custom style object to the cell. We recommend using a faded background color (third cell) to make the cell look as expected with different states (e.g. hover, focus, active). If you use a solid background color (last cell), the cell states will not change the background color. _NOTE:_ We use custom roles here to make sure that the cell focus ring is displayed correctly while using `View` elements as parent containers. We encourage using semantic HTML elements (e.g. `ul`, `li`) when possible (via `addStyle(\"ul\")` if you need to add Aphrodite Styles)."}],"import":"import { CompactCell, ComponentInfo, Strut } from \"@khanacademy/wonder-blocks-cell\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"`CompactCell` is the simplest form of the Cell. It is a compacted-height Cell with limited subviews and accessories. Typically they represent additional info or selection lists. It has a minimum height of 48px and a non-bold title. It does not have subtitles or a progress bar, and in general it has less vertical space around text and accessories. ### Usage ```jsx import {CompactCell} from \"@khanacademy/wonder-blocks-cell\"; import {PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\"; import caretRightIcon from \"@phosphor-icons/core/regular/caret-right.svg\"; } /> ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell/src/index.ts","description":"`CompactCell` is the simplest form of the Cell. It is a compacted-height Cell\nwith limited subviews and accessories. Typically they represent additional\ninfo or selection lists. It has a minimum height of 48px and a non-bold\ntitle. It does not have subtitles or a progress bar, and in general it has\nless vertical space around text and accessories.\n\n### Usage\n\n```jsx\nimport {CompactCell} from \"@khanacademy/wonder-blocks-cell\";\nimport {PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\";\nimport caretRightIcon from \"@phosphor-icons/core/regular/caret-right.svg\";\n\n}\n/>\n```","displayName":"CompactCell","methods":[],"props":{"title":{"defaultValue":null,"description":"The title / main content of the cell. You can either provide a string or\na Typography component. If a string is provided, typography defaults to\n`BodyText` with a `medium` size.","name":"title","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"TypographyText"}},"leftAccessory":{"defaultValue":null,"description":"If provided, this adds a left accessory to the cell. Left\nAccessories can be defined using WB components such as Icon,\nIconButton, or it can even be used for a custom node/component if\nneeded. What ever is passed in will occupy the \"LeftAccessory” area\nof the Cell.","name":"leftAccessory","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"rightAccessory":{"defaultValue":null,"description":"If provided, this adds a right accessory to the cell. Right\nAccessories can be defined using WB components such as Icon,\nIconButton, or it can even be used for a custom node/component if\nneeded. What ever is passed in will occupy the “RightAccessory”\narea of the Cell.","name":"rightAccessory","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"horizontalRule":{"defaultValue":null,"description":"Adds a horizontal rule at the bottom of the cell that can be used to\nseparate cells within groups such as lists. Defaults to `inset`.","name":"horizontalRule","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"HorizontalRuleVariant","value":[{"value":"\"none\""},{"value":"\"full-width\""},{"value":"\"inset\""}]}},"role":{"defaultValue":null,"description":"A custom role for the cell.","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ClickableRole","value":[{"value":"\"link\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"button\""},{"value":"\"checkbox\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"option\""},{"value":"\"radio\""},{"value":"\"switch\""},{"value":"\"tab\""}]}},"styles":{"defaultValue":null,"description":"Custom styles for the elements of Cell. Useful if there are\nspecific cases where spacing between elements needs to be customized.","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; content?: StyleType; leftAccessory?: StyleType; rightAccessory?: StyleType; }"}},"id":{"defaultValue":null,"description":"The unique identifier of the cell.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Optional test ID for e2e testing.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"Called when the cell is clicked.\n\nIf not provided, the Cell can’t be hovered and/or pressed (highlighted on\nhover).","name":"onClick","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: SyntheticEvent) => unknown)"}},"active":{"defaultValue":null,"description":"Whether the cell is active (or currently selected).","name":"active","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"Whether the cell is disabled.\n\nInternally, the `aria-disabled` attribute will be set so that the\nelement remains focusable and will be included in the tab order.","name":"disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"aria-label":{"defaultValue":null,"description":"Used to announce the cell's content to screen readers.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-selected":{"defaultValue":null,"description":"Used to indicate the current element is selected.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Used to indicate the current item is checked.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"href":{"defaultValue":null,"description":"Optinal href which Cell should direct to, uses client-side routing\nby default if react-router is present.","name":"href","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"A target destination window for a link to open in. Should only be used\nwhen `href` is specified.\n\nTODO(WB-1262): only allow this prop when `href` is also set.t","name":"target","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"_blank\"","value":[{"value":"\"_blank\""}]}},"tabIndex":{"defaultValue":null,"description":"Set the tabindex attribute on the rendered element.","name":"tabIndex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}}},"exportName":"CompactCell"}},"packages-cell-detailcell":{"id":"packages-cell-detailcell","name":"DetailCell","path":"./__docs__/wonder-blocks-cell/detail-cell.stories.tsx","stories":[{"id":"packages-cell-detailcell--default-detail-cell","name":"Default Detail Cell","snippet":"const DefaultDetailCell = () => )}\n rightAccessory={} />;"},{"id":"packages-cell-detailcell--detail-cell-active","name":"Detail Cell Active","snippet":"const DetailCellActive = () => (\n \n }\n rightAccessory={\n \n }\n active={true}\n />\n);","description":"For more complex scenarios where we need to use more content such as subtitles, we provide a DetailCell component that can be used to cover these cases. The following example shows how to include a subtitle and use the active state."},{"id":"packages-cell-detailcell--detail-cell-disabled","name":"Detail Cell Disabled","snippet":"const DetailCellDisabled = () => (\n \n }\n rightAccessory={\n \n }\n onClick={() => {}} // To show the disabled state, the cell needs to be clickable\n disabled={true}\n />\n);","description":"For more complex scenarios where we need to use more content such as subtitles, we provide a DetailCell component that can be used to cover these cases. The following example shows how to include a subtitle and use the active state."},{"id":"packages-cell-detailcell--detail-cell-with-custom-styles","name":"Detail Cell With Custom Styles","snippet":"const DetailCellWithCustomStyles = () => (\n \n }\n rightAccessory={\n \n }\n styles={{\n root: {\n textAlign: \"center\",\n minHeight: 88,\n },\n content: {\n alignSelf: \"flex-start\",\n },\n leftAccessory: {\n alignSelf: \"flex-start\",\n },\n rightAccessory: {\n alignSelf: \"flex-start\",\n },\n }}\n />\n);","description":"`DetailCell` can be used with custom styles. The following parts can be styled: - `root`: Styles the root element - `content`: Styles the content area (between the accessories) - `leftAccessory`: Styles the left accessory element - `rightAccessory`: Styles the right accessory element"},{"id":"packages-cell-detailcell--clickable-detail-cell","name":"Clickable Detail Cell","snippet":"const ClickableDetailCell = () => (\n \n }\n rightAccessory={}\n onClick={() => {}}\n aria-label=\"Press to navigate to the article\"\n />\n);","description":"Cell components can also also be clickable. This is done by passing a `onClick` prop to the component."},{"id":"packages-cell-detailcell--detail-cell-navigation","name":"Client-side navigation with DetailCell","snippet":"const DetailCellNavigation = () => (\n \n \n \n \n }\n rightAccessory={\n \n }\n href=\"/math/algebra\"\n aria-label=\"Press to navigate to the article\"\n />\n \n }\n rightAccessory={\n \n }\n href=\"/math/geometry\"\n aria-label=\"Press to navigate to the article\"\n horizontalRule=\"none\"\n />\n \n\n \n \n Navigates to /math/algebra}\n />\n Navigates to /math/geometry}\n />\n See navigation changes here}\n />\n \n \n \n \n);","description":"Cells accept an `href` prop to be able to navigate to a different URL. Note that this will use client-side navigation if the Cell component is within a React-Router environment."},{"id":"packages-cell-detailcell--detail-cells-as-list-items","name":"Detail Cells As List Items","snippet":"const DetailCellsAsListItems = () => (\n \n \n \n }\n active={true}\n href=\"https://khanacademy.org\"\n horizontalRule=\"full-width\"\n />\n \n \n \n }\n href=\"https://khanacademy.org\"\n horizontalRule=\"full-width\"\n />\n \n \n \n }\n disabled={true}\n href=\"https://khanacademy.org\"\n horizontalRule=\"full-width\"\n />\n \n \n \n }\n href=\"https://khanacademy.org\"\n horizontalRule=\"full-width\"\n styles={{\n root: {\n background:\n semanticColor.core.background.overlay.default,\n },\n }}\n />\n \n \n \n }\n onClick={() => {}}\n styles={{\n root: {\n background:\n semanticColor.core.background.warning.subtle,\n },\n }}\n horizontalRule=\"full-width\"\n />\n \n \n);","description":"These are `DetailCell` instances with custom background colors. Note that we use the `style` prop to pass a custom style object to the cell. We recommend using a faded background color (third cell) to make the cell look as expected with different states (e.g. hover, focus, active). If you use a solid background color (last cell), the cell states will not change the background color. _NOTE:_ We use custom roles here to make sure that the cell focus ring is displayed correctly while using `View` elements as parent containers. We encourage using semantic HTML elements (e.g. `ul`, `li`) when possible (via `addStyle(\"ul\")` if you need to add Aphrodite Styles)."},{"id":"packages-cell-detailcell--custom-styles","name":"Custom Styles","snippet":"const CustomStyles = () => )}\n rightAccessory={()} />;","description":"Custom styling can be applied to the component using the `styles` prop."}],"import":"import { CompatRouter, Route, Routes } from \"react-router-dom-v5-compat\";\nimport { ComponentInfo, DetailCell } from \"@khanacademy/wonder-blocks-cell\";\nimport { MemoryRouter } from \"react-router-dom\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"This is a variant of CompactCell that allows adding subtitles, before and after the cell title. They typically represent an item that can be clicked/tapped to view more complex details. They vary in height depending on the presence or absence of subtitles, and they allow for a wide range of functionality depending on which accessories are active. ### Usage ```jsx import {DetailCell} from \"@khanacademy/wonder-blocks-cell\"; import {PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\"; } subtitle1=\"Subtitle 1\" title=\"Detail cell\" subtitle1=\"Subtitle 2\" rightAccessory={} /> ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell/src/index.ts","description":"This is a variant of CompactCell that allows adding subtitles, before and\nafter the cell title. They typically represent an item that can be\nclicked/tapped to view more complex details. They vary in height depending on\nthe presence or absence of subtitles, and they allow for a wide range of\nfunctionality depending on which accessories are active.\n\n### Usage\n\n```jsx\nimport {DetailCell} from \"@khanacademy/wonder-blocks-cell\";\nimport {PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\";\n\n}\n subtitle1=\"Subtitle 1\"\n title=\"Detail cell\"\n subtitle1=\"Subtitle 2\"\n rightAccessory={}\n/>\n```","displayName":"DetailCell","methods":[],"props":{"title":{"defaultValue":null,"description":"The title / main content of the cell. You can either provide a string or\na Typography component. If a string is provided, typography defaults to\n`BodyText` with a `medium` size.","name":"title","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"TypographyText"}},"leftAccessory":{"defaultValue":null,"description":"If provided, this adds a left accessory to the cell. Left\nAccessories can be defined using WB components such as Icon,\nIconButton, or it can even be used for a custom node/component if\nneeded. What ever is passed in will occupy the \"LeftAccessory” area\nof the Cell.","name":"leftAccessory","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"rightAccessory":{"defaultValue":null,"description":"If provided, this adds a right accessory to the cell. Right\nAccessories can be defined using WB components such as Icon,\nIconButton, or it can even be used for a custom node/component if\nneeded. What ever is passed in will occupy the “RightAccessory”\narea of the Cell.","name":"rightAccessory","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"horizontalRule":{"defaultValue":null,"description":"Adds a horizontal rule at the bottom of the cell that can be used to\nseparate cells within groups such as lists. Defaults to `inset`.","name":"horizontalRule","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"HorizontalRuleVariant","value":[{"value":"\"none\""},{"value":"\"full-width\""},{"value":"\"inset\""}]}},"role":{"defaultValue":null,"description":"A custom role for the cell.","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ClickableRole","value":[{"value":"\"link\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"button\""},{"value":"\"checkbox\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"option\""},{"value":"\"radio\""},{"value":"\"switch\""},{"value":"\"tab\""}]}},"styles":{"defaultValue":null,"description":"Custom styles for the elements of Cell. Useful if there are\nspecific cases where spacing between elements needs to be customized.","name":"styles","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"{ root?: StyleType; content?: StyleType; leftAccessory?: StyleType; rightAccessory?: StyleType; }"}},"id":{"defaultValue":null,"description":"The unique identifier of the cell.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Optional test ID for e2e testing.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"Called when the cell is clicked.\n\nIf not provided, the Cell can’t be hovered and/or pressed (highlighted on\nhover).","name":"onClick","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: SyntheticEvent) => unknown)"}},"active":{"defaultValue":null,"description":"Whether the cell is active (or currently selected).","name":"active","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"Whether the cell is disabled.\n\nInternally, the `aria-disabled` attribute will be set so that the\nelement remains focusable and will be included in the tab order.","name":"disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"aria-label":{"defaultValue":null,"description":"Used to announce the cell's content to screen readers.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-selected":{"defaultValue":null,"description":"Used to indicate the current element is selected.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Used to indicate the current item is checked.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"href":{"defaultValue":null,"description":"Optinal href which Cell should direct to, uses client-side routing\nby default if react-router is present.","name":"href","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"A target destination window for a link to open in. Should only be used\nwhen `href` is specified.\n\nTODO(WB-1262): only allow this prop when `href` is also set.t","name":"target","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"_blank\"","value":[{"value":"\"_blank\""}]}},"tabIndex":{"defaultValue":null,"description":"Set the tabindex attribute on the rendered element.","name":"tabIndex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"subtitle1":{"defaultValue":null,"description":"You can either provide a string or a custom node Typography element (or\nnothing at all). Both a string or a custom node Typography element will\noccupy the “Subtitle1” area of the Cell.","name":"subtitle1","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/components/detail-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"TypographyText"}},"subtitle2":{"defaultValue":null,"description":"You can either provide a string or a custom node Typography element (or\nnothing at all). Both a string or a custom node Typography element will\noccupy the “Subtitle2” area of the Cell.","name":"subtitle2","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-cell/src/components/detail-cell.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"TypographyText"}}},"exportName":"DetailCell"}},"packages-clickable-clickable-accessibility":{"id":"packages-clickable-clickable-accessibility","name":"Clickable","path":"./__docs__/wonder-blocks-clickable/accessibility.stories.tsx","stories":[{"id":"packages-clickable-clickable-accessibility--labeling","name":"Labeling","snippet":"const Labeling = () => (\n \n {}}\n aria-label=\"More information about this subject\"\n >\n {() => }\n \n \n);"},{"id":"packages-clickable-clickable-accessibility--disabled-state","name":"Disabled state","snippet":"const DisabledState = () => (\n console.log(\"Hello, world!\")}\n disabled={true}\n >\n {() => \"This is a disabled clickable element\"}\n \n);"},{"id":"packages-clickable-clickable-accessibility--keyboard-navigation","name":"Keyboard navigation","snippet":"const KeyboardNavigation = () => (\n \n \n {({hovered, focused, pressed}) => (\n \n School Info\n \n )}\n \n \n);"}],"import":"import { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport Clickable from \"@khanacademy/wonder-blocks-clickable\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Clickable\" component.\n 45 | });\n 46 |\n> 47 | export default {\n | ^\n 48 | title: \"Packages / Clickable / Clickable / Accessibility\",\n 49 | component: Clickable,\n 50 | parameters: {\n\n./__docs__/wonder-blocks-clickable/accessibility.stories.tsx:\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\n\nimport Clickable from \"@khanacademy/wonder-blocks-clickable\";\nimport {View} from \"@khanacademy/wonder-blocks-core\";\nimport {PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\";\nimport {\n boxShadow,\n semanticColor,\n sizing,\n} from \"@khanacademy/wonder-blocks-tokens\";\nimport {BodyText} from \"@khanacademy/wonder-blocks-typography\";\n\nimport {IconMappings} from \"../wonder-blocks-icon/phosphor-icon.argtypes\";\n\nconst actionCategory = semanticColor.action.secondary.progressive;\n\nconst styles = StyleSheet.create({\n rest: {\n border: `1px solid ${actionCategory.default.border}`,\n padding: sizing.size_080,\n },\n hover: {\n textDecoration: \"underline\",\n borderColor: actionCategory.hover.border,\n backgroundColor: actionCategory.hover.background,\n color: actionCategory.hover.foreground,\n },\n press: {\n background: actionCategory.press.background,\n borderColor: actionCategory.press.border,\n color: actionCategory.press.foreground,\n },\n focus: {\n outline: `solid 1px ${semanticColor.focus.outer}`,\n outlineOffset: sizing.size_020,\n },\n panel: {\n padding: sizing.size_160,\n boxShadow: boxShadow.mid,\n },\n tabButton: {\n width: \"100%\",\n },\n});\n\nexport default {\n title: \"Packages / Clickable / Clickable / Accessibility\",\n component: Clickable,\n parameters: {\n // Disables chromatic testing for these stories.\n chromatic: {\n disableSnapshot: true,\n },\n },\n // Include these stories in the Docs tab, but hide them from the sidebar.\n tags: [\"autodocs\", \"!dev\"],\n};\n\nexport const Labeling = {\n render: () => (\n \n {}}\n aria-label=\"More information about this subject\"\n >\n {() => }\n \n \n ),\n};\n\nexport const DisabledState = {\n render: () => (\n console.log(\"Hello, world!\")}\n disabled={true}\n >\n {() => \"This is a disabled clickable element\"}\n \n ),\n\n name: \"Disabled state\",\n};\n\nexport const KeyboardNavigation = {\n render: () => (\n \n \n {({hovered, focused, pressed}) => (\n \n School Info\n \n )}\n \n \n ),\n\n name: \"Keyboard navigation\",\n};\n"},"docs":{"packages-clickable-clickable-accessibility--docs":{"id":"packages-clickable-clickable-accessibility--docs","name":"Docs","path":"./__docs__/wonder-blocks-clickable/accessibility.mdx","title":"Packages / Clickable / Clickable / Accessibility","content":"import {Meta, Story, Canvas} from \"@storybook/addon-docs/blocks\";\nimport * as AccessibilityStories from './accessibility.stories';\n\n\n\n# Accessibility\n\n## Keyboard interactions\n\n| Key | Action |\n| -------------- | ------------------------------- |\n| Enter or Space | Activates the clickable element |\n\n## Roles\n\n| Component | Role | Usage |\n| ------------------------------------------------- | ------ | -------------------------------------------------------- |\n| `` | button | A clickable button element |\n| `` | link | A clickable anchor element |\n| `` | link | A clickable anchor element (using `react-router`'s Link) |\n\n## Attributes\n\n| Attribute | Usage |\n| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| tabindex=\"0\" | Includes the clickable element in the tab sequence. |\n| aria-disabled=\"true\" | Indicates that the element is perceivable but disabled. |\n| aria-label=\"value\" | Defines a string value that labels the clickable element. Use it in case the clickable element doesn't include any descriptive text (e.g. Icons, images) |\n\n## Examples\n\n### Labeling\n\n`Clickable` has an `ariaLabel` prop that sets the component's accessible name.\nariaLabel should be passed when using graphical elements to let screen reader\nusers know the purpose of the clickable element.\n\n*NOTE:* If the clickable element is not graphical, it's best to avoid using `ariaLabel` as the text content of the element itself, which is read by default, should ideally be descriptive enough to not need to manually pass in the label.\n\nThis is an example of a component with an accessible label:\n\n\n\n### Disabled state\n\nClickable does not need an `aria-disabled` attribute, if it also has a\n`disabled` component prop. We internally take care of defining the behavior so\nusers can use these type of controls (including Screen Readers). By defining the\ninternal behavior we can ensure that the component is accessible via Keyboard\nbut not interactable/operatable.\n\n\n\n### Keyboard navigation\n\nClickable adds support to keyboard navigation and setting ARIA attributes. This\nway, your components are accessible and emulate better the browser's behavior.\n\n**NOTE:** If you want to navigate to an external URL and/or reload the window,\nmake sure to use `href` and `skipClientNav={true}`.\n\n\n"}}},"packages-clickable-clickablebehavior":{"id":"packages-clickable-clickablebehavior","name":"ClickableBehavior as unknown","path":"./__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx","stories":[{"id":"packages-clickable-clickablebehavior--default","name":"Default","snippet":"const Default = () => {\n const ClickableBehavior = getClickableBehavior();\n\n return (\n \n {(state, childrenProps) => {\n const {pressed, hovered, focused} = state;\n return (\n \n This is an element wrapped with ClickableBehavior\n \n );\n }}\n \n );\n};"},{"id":"packages-clickable-clickablebehavior--with-tab-index","name":"With Tab Index","snippet":"const WithTabIndex = () => {\n const ClickableBehavior = getClickableBehavior();\n\n return (\n \n {(state, childrenProps) => {\n const {pressed, hovered, focused} = state;\n return (\n \n This is an element wrapped with ClickableBehavior\n \n );\n }}\n \n );\n};"}],"import":"import { ComponentInfo } from \"wonder-blocks\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"ClickableBehavior as unknown\" component.\n 14 | const ClickableBehavior = getClickableBehavior();\n 15 |\n> 16 | export default {\n | ^\n 17 | title: \"Packages / Clickable / ClickableBehavior\",\n 18 | component: ClickableBehavior as unknown,\n 19 | argTypes: argTypes,\n\n./__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx:\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\nimport type {Meta, StoryObj} from \"@storybook/react-vite\";\n\nimport {View} from \"@khanacademy/wonder-blocks-core\";\nimport {semanticColor, sizing} from \"@khanacademy/wonder-blocks-tokens\";\n\nimport {getClickableBehavior} from \"@khanacademy/wonder-blocks-clickable\";\nimport packageConfig from \"../../packages/wonder-blocks-clickable/package.json\";\n\nimport ComponentInfo from \"../components/component-info\";\nimport argTypes from \"./clickable-behavior.argtypes\";\n\nconst ClickableBehavior = getClickableBehavior();\n\nexport default {\n title: \"Packages / Clickable / ClickableBehavior\",\n component: ClickableBehavior as unknown,\n argTypes: argTypes,\n args: {\n disabled: false,\n },\n parameters: {\n componentSubtitle: (\n \n ),\n docs: {\n description: {\n component: null,\n },\n source: {\n // See https://github.com/storybookjs/storybook/issues/12596\n excludeDecorators: true,\n },\n },\n },\n} as Meta;\n\ntype StoryComponentType = StoryObj;\n\nexport const Default: StoryComponentType = (args: any) => {\n const ClickableBehavior = getClickableBehavior();\n\n return (\n \n {(state, childrenProps) => {\n const {pressed, hovered, focused} = state;\n return (\n \n This is an element wrapped with ClickableBehavior\n \n );\n }}\n \n );\n};\n\nDefault.parameters = {\n chromatic: {\n // we don't need screenshots because this story only displays the\n // resting/default state.\n disableSnapshot: true,\n },\n};\n\nexport const WithTabIndex: StoryComponentType = () => {\n const ClickableBehavior = getClickableBehavior();\n\n return (\n \n {(state, childrenProps) => {\n const {pressed, hovered, focused} = state;\n return (\n \n This is an element wrapped with ClickableBehavior\n \n );\n }}\n \n );\n};\n\nWithTabIndex.parameters = {\n chromatic: {\n // we don't need screenshots because this story only displays the\n // resting/default state.\n disableSnapshot: true,\n },\n docs: {\n description: {\n story: `A \\`\\` element does not have\n a tabIndex by default, as many elements it could wrap may have\n their own built in tabIndex attribute, such as buttons. If this\n is not the case, a tabIndex should be passed in using the\n \\`tabIndex\\` prop.`,\n },\n },\n};\n\nconst actionCategory = semanticColor.action.secondary.progressive;\n\nconst styles = StyleSheet.create({\n clickable: {\n cursor: \"pointer\",\n padding: sizing.size_160,\n textAlign: \"center\",\n },\n hover: {\n textDecoration: \"underline\",\n backgroundColor: actionCategory.hover.background,\n color: actionCategory.hover.foreground,\n },\n press: {\n backgroundColor: actionCategory.press.background,\n },\n focus: {\n outline: `solid 1px ${semanticColor.focus.outer}`,\n outlineOffset: sizing.size_020,\n },\n});\n"}},"packages-clickable-clickable":{"id":"packages-clickable-clickable","name":"Clickable","path":"./__docs__/wonder-blocks-clickable/clickable.stories.tsx","stories":[{"id":"packages-clickable-clickable--default","name":"Default","snippet":"const Default = () => {\n // eslint-disable-next-line no-alert\n alert(\"Click!\");\n }}>\n {({hovered, pressed, focused}) => (\n \n This text is clickable!\n \n )}\n;"},{"id":"packages-clickable-clickable--basic","name":"Basic","snippet":"const Basic = () => (\n \n \n {({hovered, pressed}) => (\n \n This text is clickable!\n \n )}\n \n \n);"},{"id":"packages-clickable-clickable--disabled","name":"Disabled","snippet":"const Disabled = () => <>\n {}} testId=\"\" disabled hideDefaultFocusRing={false}>\n {({hovered, pressed}) => (\n \n \n Disabled clickable using the default disabled style\n \n \n )}\n \n {}} testId=\"\" disabled hideDefaultFocusRing={false}>\n {({hovered, focused, pressed}) => (\n \n \n Disabled clickable passing custom disabled styles\n \n \n )}\n \n;","description":"Disabled state"},{"id":"packages-clickable-clickable--client-side-navigation","name":"Client-side Navigation","snippet":"const ClientSideNavigation = () => (\n \n \n \n \n {\n // eslint-disable-next-line no-console\n console.log(\"I'm still on the same page!\");\n }}\n >\n {(eventState) => (\n \n Uses Client-side Nav\n \n )}\n \n \n {(eventState) => (\n \n Avoids Client-side Nav\n \n )}\n \n \n \n \n \n The first clickable element does client-side\n navigation here.\n \n }\n />\n See navigation changes here}\n />\n \n \n \n \n \n);"},{"id":"packages-clickable-clickable--ref","name":"Ref","snippet":"const Ref = () => {\n const clickableRef: React.RefObject = React.createRef();\n const handleSubmit = () => {\n if (clickableRef.current) {\n clickableRef.current.focus();\n }\n };\n\n return (\n \n \n {({hovered, focused, pressed}) => (\n \n Press below to focus me!\n \n )}\n \n \n \n );\n};"}],"import":"import { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport Clickable, { ComponentInfo } from \"@khanacademy/wonder-blocks-clickable\";\nimport { CompatRouter, Route, Routes } from \"react-router-dom-v5-compat\";\nimport { MemoryRouter } from \"react-router-dom\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Clickable\" component.\n 16 | import Button from \"@khanacademy/wonder-blocks-button\";\n 17 |\n> 18 | export default {\n | ^\n 19 | title: \"Packages / Clickable / Clickable\",\n 20 | component: Clickable,\n 21 | argTypes: argTypes,\n\n./__docs__/wonder-blocks-clickable/clickable.stories.tsx:\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\nimport {MemoryRouter} from \"react-router-dom\";\nimport {CompatRouter, Route, Routes} from \"react-router-dom-v5-compat\";\nimport type {Meta, StoryObj} from \"@storybook/react-vite\";\n\nimport {View} from \"@khanacademy/wonder-blocks-core\";\nimport {semanticColor, sizing} from \"@khanacademy/wonder-blocks-tokens\";\nimport {BodyText} from \"@khanacademy/wonder-blocks-typography\";\n\nimport Clickable from \"@khanacademy/wonder-blocks-clickable\";\nimport packageConfig from \"../../packages/wonder-blocks-clickable/package.json\";\n\nimport ComponentInfo from \"../components/component-info\";\nimport argTypes from \"./clickable.argtypes\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\n\nexport default {\n title: \"Packages / Clickable / Clickable\",\n component: Clickable,\n argTypes: argTypes,\n args: {\n testId: \"\",\n disabled: false,\n hideDefaultFocusRing: false,\n },\n decorators: [\n (Story): React.ReactElement> => (\n \n \n \n ),\n ],\n parameters: {\n componentSubtitle: (\n \n ),\n docs: {\n description: {\n component: null,\n },\n source: {\n // See https://github.com/storybookjs/storybook/issues/12596\n excludeDecorators: true,\n },\n },\n },\n} as Meta;\n\ntype StoryComponentType = StoryObj;\n\nexport const Default: StoryComponentType = (args: any) => (\n \n {({hovered, pressed, focused}) => (\n \n This text is clickable!\n \n )}\n \n);\n\nDefault.args = {\n onClick: () => {\n // eslint-disable-next-line no-alert\n alert(\"Click!\");\n },\n};\n\nexport const Basic: StoryComponentType = () => (\n \n \n {({hovered, pressed}) => (\n \n This text is clickable!\n \n )}\n \n \n);\n\nBasic.parameters = {\n docs: {\n description: {\n story: \"You can make custom components Clickable by returning them in a function of the Clickable child. The eventState parameter the function takes allows access to states pressed, hovered and clicked, which you may use to create custom styles.\\n\\nClickable has a default focus ring style built-in. If you are creating your own custom focus ring it should be disabled using by setting `hideDefaultFocusRing={true}` in the props passed to `Clickable`.\",\n },\n },\n chromatic: {\n // we don't need screenshots because this story is already covered in\n // `Default`. We add this story to the `Docs` tab to present the\n // description above along with the example.\n disableSnapshot: true,\n },\n};\n\n/**\n * Disabled state\n */\nexport const Disabled: StoryComponentType = (args: any) => (\n <>\n {}} {...args}>\n {({hovered, pressed}) => (\n \n \n Disabled clickable using the default disabled style\n \n \n )}\n \n {}} {...args}>\n {({hovered, focused, pressed}) => (\n \n \n Disabled clickable passing custom disabled styles\n \n \n )}\n \n \n);\n\nDisabled.args = {\n disabled: true,\n};\n\nDisabled.parameters = {\n docs: {\n description: {\n story: \"Clickable has a `disabled` prop which prevents the element from being operable. Note that the default disabled style is applied to the element, but you can also pass custom styles to the children element by passing any `disabled` styles (see the second clickable element in the example below).\",\n },\n },\n};\n\nexport const ClientSideNavigation: StoryComponentType = () => (\n \n \n \n \n {\n // eslint-disable-next-line no-console\n console.log(\"I'm still on the same page!\");\n }}\n >\n {(eventState) => (\n \n Uses Client-side Nav\n \n )}\n \n \n {(eventState) => (\n \n Avoids Client-side Nav\n \n )}\n \n \n \n \n \n The first clickable element does client-side\n navigation here.\n \n }\n />\n See navigation changes here}\n />\n \n \n \n \n \n);\n\nClientSideNavigation.storyName = \"Client-side Navigation\";\n\nClientSideNavigation.parameters = {\n docs: {\n description: {\n story:\n \"Clickable adds support to keyboard navigation. This way, your components are accessible and emulate better the browser's behavior.\\n\\n\" +\n \"**NOTE:** If you want to navigate to an external URL and/or reload the window, make sure to use `href` and `skipClientNav={true}`\",\n },\n },\n chromatic: {\n // we don't need screenshots because this story only tests behavior.\n disableSnapshot: true,\n },\n};\n\nexport const Ref: StoryComponentType = () => {\n const clickableRef: React.RefObject = React.createRef();\n const handleSubmit = () => {\n if (clickableRef.current) {\n clickableRef.current.focus();\n }\n };\n\n return (\n \n \n {({hovered, focused, pressed}) => (\n \n Press below to focus me!\n \n )}\n \n \n \n );\n};\n\nRef.parameters = {\n docs: {\n description: {\n story: `If you need to save a reference to the \\`Clickable\\` element , you can do\n so using the \\`ref\\` prop. In this example, we want the element to receive focus when the\n button is pressed. We can do this by creating a React ref of type \\`HTMLButtonElement\\` and\n passing it into \\`Clickable\\`'s \\`ref\\` prop. Now we can use the ref variable in the\n \\`handleSubmit\\` function to shift focus to the field.`,\n },\n },\n chromatic: {\n // we don't need screenshots because this story only tests behavior.\n disableSnapshot: true,\n },\n};\n\nconst progressive = semanticColor.action.secondary.progressive;\n\nconst styles = StyleSheet.create({\n clickable: {\n borderWidth: 1,\n padding: sizing.size_160,\n },\n hovered: {\n textDecoration: \"underline\",\n backgroundColor: progressive.hover.background,\n },\n pressed: {\n color: progressive.press.foreground,\n },\n focused: {\n outline: `solid 4px ${semanticColor.focus.outer}`,\n },\n centerText: {\n gap: sizing.size_160,\n textAlign: \"center\",\n },\n dark: {\n backgroundColor: semanticColor.core.background.neutral.strong,\n color: semanticColor.core.foreground.knockout.default,\n padding: sizing.size_080,\n },\n row: {\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n heading: {\n marginInlineEnd: sizing.size_240,\n },\n navigation: {\n border: `1px dashed ${semanticColor.core.border.neutral.subtle}`,\n marginBlockStart: sizing.size_240,\n padding: sizing.size_240,\n },\n disabled: {\n color: semanticColor.action.primary.disabled.foreground,\n backgroundColor: semanticColor.action.primary.disabled.background,\n },\n button: {\n maxInlineSize: 150,\n },\n centered: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n});\n"}},"packages-core-addstyle":{"id":"packages-core-addstyle","name":"addStyle","path":"./__docs__/wonder-blocks-core/add-style.stories.tsx","stories":[{"id":"packages-core-addstyle--with-default-style","name":"With default style","snippet":"const WithDefaultStyle = () => (\n \n);"},{"id":"packages-core-addstyle--override-styles","name":"Override styles","snippet":"const OverrideStyles = () => (\n \n);"},{"id":"packages-core-addstyle--adding-styles-dynamically","name":"Adding styles dynamically","snippet":"const AddingStylesDynamically = () => ;"}],"import":"import { Checkbox } from \"@khanacademy/wonder-blocks-form\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n 41 | };\n 42 |\n> 43 | export default {\n | ^\n 44 | title: \"Packages / Core / addStyle\",\n 45 | };\n 46 |\n\n./__docs__/wonder-blocks-core/add-style.stories.tsx:\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\n\nimport {border, semanticColor, sizing} from \"@khanacademy/wonder-blocks-tokens\";\nimport {addStyle, View} from \"@khanacademy/wonder-blocks-core\";\nimport {Checkbox} from \"@khanacademy/wonder-blocks-form\";\n\nconst styles = StyleSheet.create({\n input: {\n // default style for all instances of StyledInput\n background: semanticColor.core.background.base.default,\n border: `1px solid ${semanticColor.core.border.neutral.subtle}`,\n borderRadius: border.radius.radius_040,\n fontSize: sizing.size_160,\n padding: sizing.size_080,\n },\n error: {\n background: semanticColor.core.background.critical.subtle,\n borderColor: semanticColor.core.border.critical.default,\n },\n});\n\nconst StyledInput = addStyle(\"input\", styles.input);\n\nconst DynamicStyledInput = () => {\n const [error, setError] = React.useState(false);\n return (\n \n setError(!error)}\n />\n \n \n );\n};\n\nexport default {\n title: \"Packages / Core / addStyle\",\n};\n\nexport const WithDefaultStyle = {\n render: () => (\n \n ),\n name: \"With default style\",\n};\n\nexport const OverrideStyles = {\n render: () => (\n \n ),\n name: \"Override styles\",\n};\n\nexport const AddingStylesDynamically = {\n render: () => ,\n name: \"Adding styles dynamically\",\n};\n"},"docs":{"packages-core-addstyle--docs":{"id":"packages-core-addstyle--docs","name":"Docs","path":"./__docs__/wonder-blocks-core/add-style.mdx","title":"Packages / Core / addStyle","content":"import * as React from \"react\";\nimport {Meta, Story, Canvas} from \"@storybook/addon-docs/blocks\";\nimport * as AddStyleStories from \"./add-style.stories\";\n\n\n\n# addStyle\n\nThe `addStyle` function is a HOC that accepts a **React Component** or a **DOM**\n**intrinsic** (\"div\", \"span\", etc.) as its first argument and optional default\nstyles as its second argument. This HOC returns a **React Component** with a\n`style` prop included ready to be rendered.\n\n_Note: this differs from using a bare **DOM** **intrinsic** with a `style`\nprop. The bare **DOM** **intrinsic** will generate inline styles whereas a\ncomponent that has been wrapped with `addStyle` will process the styles with\n[Aphrodite](https://github.com/Khan/aphrodite). As a result, always use\n`addStyle` if you need to style the component/element._\n\n## Usage\n\n```js\nimport {addStyle} from \"@khanacademy/wonder-blocks-core\";\n\naddStyle(\n Component: React.Element | \"string\",\n defaultStyle?: StyleType\n): React.Element;\n```\n\n## API\n\n| Argument | TypeScript Type | Default | Description |\n| -------------- | ------------------------------ | ---------- | ------------------------------------- |\n| `Component` | `React.ReactElement`, `string` | _Required_ | The component that will be decorated. |\n| `defaultStyle` | `StyleType` | null | The initial styles to be applied. |\n\n## Types\n\n### StyleType\n\n```ts\ntype NestedArray = $ReadOnlyArray>;\ntype Falsy = false | 0 | null | void;\n\nexport type StyleType =\n | CSSProperties\n | Falsy\n | NestedArray;\n```\n\n**Note:** `StyleType` can contain a combination of style rules from an Aphrodite\nStyleSheet as well inline style objects (see example 3).\n\n### CSSProperties\n\n[See source file](https://github.com/Khan/wonder-blocks/blob/main/flow-typed/aphrodite.flow.js#L13)\n\n## Examples\n\nIt's recommended to create your styled component using `addStyle` outside of the\ncomponent so we don't have to create a new instance on every render.\n\n```js\nimport {StyleSheet} from \"aphrodite\";\nimport {border, color, sizing} from \"@khanacademy/wonder-blocks-tokens\";\nimport {addStyle} from \"@khanacademy/wonder-blocks-core\";\n\nconst StyledInput = addStyle(\"input\", styles.input);\n\nconst styles = StyleSheet.create({\n // default style for all instances of StyledInput\n input: {\n background: color.white,\n borderColor: color.offBlack16,\n borderRadius: border.radius.radius_040,\n fontSize: sizing.size_160,\n padding: sizing.size_080,\n },\n error: {\n background: fade(color.red, 0.16),\n borderColor: color.red,\n },\n});\n```\n\n### 1. Adding default styles\n\nYou can create a new styled component by using the `addStyle` function. Note\nhere that you can also define default styles for this component by passing an\ninitial style object to this function.\n\n\n\n### 2. Overriding a default style\n\nAfter defining default styles, you can also customize the instance by adding\nand/or merging styles using the `style` prop in your newly created styled\ncomponent.\n\n\n\n### 3. Adding styles dynamically\n\nThis example shows that you can dynamically create styles by adding them to the\n`style` prop only when you need them.\n\n\n"}}},"packages-core-id":{"id":"packages-core-id","name":"Id","path":"./__docs__/wonder-blocks-core/id.stories.tsx","stories":[],"import":"import { BodyMonospace, BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport { Id, Strut, View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"`Id` is a component that provides an identifier to its children. It is useful for situations where the `useId` hook cannot be easily used, such as in class-based components. If an `id` prop is provided, that is passed through to the children; otherwise, a unique identifier is generated.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-core/src/index.ts","description":"`Id` is a component that provides an identifier to its children.\n\nIt is useful for situations where the `useId` hook cannot be easily used,\nsuch as in class-based components.\n\nIf an `id` prop is provided, that is passed through to the children;\notherwise, a unique identifier is generated.","displayName":"Id","methods":[],"props":{"id":{"defaultValue":null,"description":"An identifier to use.\n\nIf this is omitted, an identifier is generated.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/components/id.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"A function that to render children with the given identifier.","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/components/id.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"(id: string) => ReactNode"}}},"exportName":"Id"},"docs":{"packages-core-id--docs":{"id":"packages-core-id--docs","name":"Docs","path":"./__docs__/wonder-blocks-core/id.mdx","title":"Packages / Core / Id","content":"import * as React from \"react\";\nimport {Meta, Story, Canvas} from \"@storybook/addon-docs/blocks\";\nimport * as IdStories from \"./id.stories\";\n\n\n\n# Id\n\n`Id` is a component that provides an identifier to its children.\n\nIt is useful for situations where the `useId` hook cannot be easily used,\nsuch as in class-based components.\n\nIf an `id` prop is provided, that is passed through to the children;\notherwise, a unique identifier is generated.\n\n## Usage\n\n```tsx\nimport {Id} from \"@khanacademy/wonder-blocks-core\";\n\n{(id) =>
Hello, world!
};\n```\n\n## Examples\n\n### 1. Generating an id\n\nAn identifier will always be generated if an `id` prop is not provided, or the\nprovided `id` property is falsy.\n\n\n\n### 2. Passthrough an id\n\nIf an `id` prop is provided and it is truthy, that value will be passed through\nto the children.\n\n\n"}}},"packages-core-initialfallback":{"id":"packages-core-initialfallback","name":"InitialFallback","path":"./__docs__/wonder-blocks-core/initial-fallback.stories.tsx","stories":[{"id":"packages-core-initialfallback--default","name":"Default","snippet":"const Default = () => (\n \n This gets rendered on server, and also on the client for the\n very first render (the rehydration render)\n \n )}>{(): React.ReactElement => (\n \n This is rendered only by the client, for all renders after the\n rehydration render.\n \n )};"},{"id":"packages-core-initialfallback--without-placeholder","name":"Without Placeholder","snippet":"const WithoutPlaceholder = () => (\n \n {() => (\n \n This is rendered only by the client, while nothing was rendered\n on the server.\n \n )}\n \n);"},{"id":"packages-core-initialfallback--nested-component","name":"Nested Component","snippet":"const NestedComponent = (): React.ReactElement => {\n const trackingArray: Array = [];\n const resultsId = \"nossr-example-2-results\";\n const newLi = (text: string) => {\n const li = document.createElement(\"li\");\n li.appendChild(document.createTextNode(text));\n return li;\n };\n\n const addTrackedRender = (text: string) => {\n const el = document.getElementById(resultsId);\n if (el) {\n for (let i = 0; i < trackingArray.length; i++) {\n el.append(newLi(trackingArray[i]));\n }\n trackingArray.length = 0;\n el.append(newLi(text));\n } else {\n // We may not have rendered the results element yet, so if we haven't\n // use an array to keep track of the things until we have.\n trackingArray.push(text);\n }\n };\n\n const trackAndRender = (text: string) => {\n addTrackedRender(text);\n return text;\n };\n\n return (\n \n \n The list below should have three render entries; root\n placeholder, root children render, and child children render. If\n there are two child renders that means that the second forced\n render is still occurring for nested InitialFallback components,\n which would be a bug.\n \n
    \n \n And below this is the actual InitialFallback nesting, which\n should just show the child render.\n \n (\n {trackAndRender(\"Root: placeholder\")}\n )}\n >\n {() => {\n addTrackedRender(\"Root: render\");\n return (\n (\n \n {trackAndRender(\n \"Child: placeholder (should never see me)\",\n )}\n \n )}\n >\n {() => (\n {trackAndRender(\"Child: render\")}\n )}\n \n );\n }}\n \n \n );\n};"},{"id":"packages-core-initialfallback--side-by-side","name":"Side By Side","snippet":"const SideBySide = (): React.ReactElement => {\n const trackingArray: Array = [];\n const resultsId = \"nossr-example-3-results\";\n const newLi = (text: string) => {\n const li = document.createElement(\"li\");\n li.appendChild(document.createTextNode(text));\n return li;\n };\n\n const addTrackedRender = (text: string) => {\n const el = document.getElementById(resultsId);\n if (el) {\n for (let i = 0; i < trackingArray.length; i++) {\n el.append(newLi(trackingArray[i]));\n }\n trackingArray.length = 0;\n el.append(newLi(text));\n } else {\n // We may not have rendered the results element yet, so if we haven't\n // use an array to keep track of the things until we have.\n trackingArray.push(text);\n }\n };\n\n const trackAndRender = (text: string) => {\n addTrackedRender(text);\n return text;\n };\n\n return (\n \n \n The list below should have six render entries; 2 x root\n placeholder, 2 x root children render, and 2 x child children\n render.\n \n
      \n \n And below this are the InitialFallback component trees, which\n should just show their child renders.\n \n (\n {trackAndRender(\"Root 1: placeholder\")}\n )}\n >\n {() => {\n addTrackedRender(\"Root 1: render\");\n return (\n (\n \n {trackAndRender(\n \"Child 1: placeholder (should never see me)\",\n )}\n \n )}\n >\n {() => (\n {trackAndRender(\"Child 1: render\")}\n )}\n \n );\n }}\n \n (\n {trackAndRender(\"Root 2: placeholder\")}\n )}\n >\n {() => {\n addTrackedRender(\"Root 2: render\");\n return (\n (\n \n {trackAndRender(\n \"Child 2: placeholder (should never see me)\",\n )}\n \n )}\n >\n {() => (\n {trackAndRender(\"Child 2: render\")}\n )}\n \n );\n }}\n \n \n );\n};"}],"import":"import { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport { ComponentInfo, InitialFallback, View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"InitialFallback\" component.\n 10 | type StoryComponentType = StoryObj;\n 11 |\n> 12 | export default {\n | ^\n 13 | title: \"Packages / Core / InitialFallback\",\n 14 | component: InitialFallback,\n 15 | parameters: {\n\n./__docs__/wonder-blocks-core/initial-fallback.stories.tsx:\nimport * as React from \"react\";\nimport type {Meta, StoryObj} from \"@storybook/react-vite\";\nimport {BodyText} from \"@khanacademy/wonder-blocks-typography\";\n\nimport {View, InitialFallback} from \"@khanacademy/wonder-blocks-core\";\nimport packageConfig from \"../../packages/wonder-blocks-core/package.json\";\n\nimport ComponentInfo from \"../components/component-info\";\n\ntype StoryComponentType = StoryObj;\n\nexport default {\n title: \"Packages / Core / InitialFallback\",\n component: InitialFallback,\n parameters: {\n componentSubtitle: (\n \n ),\n docs: {\n description: {\n component: null,\n },\n source: {\n // See https://github.com/storybookjs/storybook/issues/12596\n excludeDecorators: true,\n },\n },\n chromatic: {\n disableSnapshot: true,\n },\n },\n args: {\n fallback: (): React.ReactElement => (\n \n This gets rendered on server, and also on the client for the\n very first render (the rehydration render)\n \n ),\n children: (): React.ReactElement => (\n \n This is rendered only by the client, for all renders after the\n rehydration render.\n \n ),\n },\n} as Meta;\n\nexport const Default: StoryComponentType = {};\n\nexport const WithoutPlaceholder: StoryComponentType = () => (\n \n {() => (\n \n This is rendered only by the client, while nothing was rendered\n on the server.\n \n )}\n \n);\n\nWithoutPlaceholder.parameters = {\n docs: {\n description: {\n story: \"This example shows how you can use a `null` placeholder to display nothing during server-side render.\",\n },\n },\n};\n\nexport const NestedComponent: StoryComponentType = (): React.ReactElement => {\n const trackingArray: Array = [];\n const resultsId = \"nossr-example-2-results\";\n const newLi = (text: string) => {\n const li = document.createElement(\"li\");\n li.appendChild(document.createTextNode(text));\n return li;\n };\n\n const addTrackedRender = (text: string) => {\n const el = document.getElementById(resultsId);\n if (el) {\n for (let i = 0; i < trackingArray.length; i++) {\n el.append(newLi(trackingArray[i]));\n }\n trackingArray.length = 0;\n el.append(newLi(text));\n } else {\n // We may not have rendered the results element yet, so if we haven't\n // use an array to keep track of the things until we have.\n trackingArray.push(text);\n }\n };\n\n const trackAndRender = (text: string) => {\n addTrackedRender(text);\n return text;\n };\n\n return (\n \n \n The list below should have three render entries; root\n placeholder, root children render, and child children render. If\n there are two child renders that means that the second forced\n render is still occurring for nested InitialFallback components,\n which would be a bug.\n \n
        \n \n And below this is the actual InitialFallback nesting, which\n should just show the child render.\n \n (\n {trackAndRender(\"Root: placeholder\")}\n )}\n >\n {() => {\n addTrackedRender(\"Root: render\");\n return (\n (\n \n {trackAndRender(\n \"Child: placeholder (should never see me)\",\n )}\n \n )}\n >\n {() => (\n {trackAndRender(\"Child: render\")}\n )}\n \n );\n }}\n \n \n );\n};\n\nNestedComponent.parameters = {\n docs: {\n description: {\n story: \"Here, we nest two `InitialFallback` components and use an array to track rendering, so that we can see how only the top level `InitialFallback` component skips the initial render.\",\n },\n },\n};\n\nexport const SideBySide: StoryComponentType = (): React.ReactElement => {\n const trackingArray: Array = [];\n const resultsId = \"nossr-example-3-results\";\n const newLi = (text: string) => {\n const li = document.createElement(\"li\");\n li.appendChild(document.createTextNode(text));\n return li;\n };\n\n const addTrackedRender = (text: string) => {\n const el = document.getElementById(resultsId);\n if (el) {\n for (let i = 0; i < trackingArray.length; i++) {\n el.append(newLi(trackingArray[i]));\n }\n trackingArray.length = 0;\n el.append(newLi(text));\n } else {\n // We may not have rendered the results element yet, so if we haven't\n // use an array to keep track of the things until we have.\n trackingArray.push(text);\n }\n };\n\n const trackAndRender = (text: string) => {\n addTrackedRender(text);\n return text;\n };\n\n return (\n \n \n The list below should have six render entries; 2 x root\n placeholder, 2 x root children render, and 2 x child children\n render.\n \n
          \n \n And below this are the InitialFallback component trees, which\n should just show their child renders.\n \n (\n {trackAndRender(\"Root 1: placeholder\")}\n )}\n >\n {() => {\n addTrackedRender(\"Root 1: render\");\n return (\n (\n \n {trackAndRender(\n \"Child 1: placeholder (should never see me)\",\n )}\n \n )}\n >\n {() => (\n {trackAndRender(\"Child 1: render\")}\n )}\n \n );\n }}\n \n (\n {trackAndRender(\"Root 2: placeholder\")}\n )}\n >\n {() => {\n addTrackedRender(\"Root 2: render\");\n return (\n (\n \n {trackAndRender(\n \"Child 2: placeholder (should never see me)\",\n )}\n \n )}\n >\n {() => (\n {trackAndRender(\"Child 2: render\")}\n )}\n \n );\n }}\n \n \n );\n};\n\nSideBySide.parameters = {\n docs: {\n description: {\n story: \"In this example, we have side-by-side `InitialFallback` components. This demonstrates how component non-nested `InitialFallback` components independently track the first render.\",\n },\n },\n};\n"}},"packages-core-view":{"id":"packages-core-view","name":"View","path":"./__docs__/wonder-blocks-core/view.stories.tsx","stories":[{"id":"packages-core-view--default","name":"Default","snippet":"const Default = () => This is a View!;"},{"id":"packages-core-view--inline-styles","name":"Inline Styles","snippet":"const InlineStyles = () => (\n \n Hello, world!\n \n The style prop can accept a (nested) array of Aphrodite styles\n and inline styles.\n \n \n);","description":"Styles can be applied inline to the component, or by passing an Aphrodite style object."},{"id":"packages-core-view--other-props","name":"Using other props","snippet":"const OtherProps = () => (\n \n View with custom styles!\n\n \n This text is hidden from screen readers.\n \n \n);","description":"Other props can be passed through `View`s as if they were normal tags."},{"id":"packages-core-view--defining-layout","name":"Defining Layout","snippet":"const DefiningLayout = () => (\n \n View as a column\n \n \n First item\n \n \n Second item\n \n \n\n View as a row\n \n \n First item\n \n \n Second item\n \n \n \n);","description":"`View` can also be used to wrap elements and apply different flexbox layouts. By default, `View` uses `flexDirection: \"column\"`."}],"import":"import { BodyText, Heading } from \"@khanacademy/wonder-blocks-typography\";\nimport { ComponentInfo, View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"View is a building block for constructing other components. `View` roughly maps to `div`. You can override which tag is used to render the component (for semantic purposes) by specifying the `tag` prop. These components can take styles (via the `style` prop) in a variety of manners: - An inline style object - An `aphrodite` StyleSheet style - An array combining the above `View` sets the following defaults: - `display: \"flex\"` - `flexDirection: \"column\"` - they each get their own stacking context. ### Usage ```jsx import {View} from \"@khanacademy/wonder-blocks-core\"; This is a View! ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-core/src/index.ts","description":"View is a building block for constructing other components. `View` roughly\nmaps to `div`. You can override which tag is used to render the component\n(for semantic purposes) by specifying the `tag` prop.\n\nThese components can take styles (via the `style` prop) in a variety of\nmanners:\n\n- An inline style object\n- An `aphrodite` StyleSheet style\n- An array combining the above\n\n`View` sets the following defaults:\n\n- `display: \"flex\"`\n- `flexDirection: \"column\"`\n- they each get their own stacking context.\n\n### Usage\n\n```jsx\nimport {View} from \"@khanacademy/wonder-blocks-core\";\n\nThis is a View!\n```","displayName":"View","methods":[],"props":{"children":{"defaultValue":null,"description":"Text to appear on the button.","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"style":{"defaultValue":null,"description":"Optional custom styles.","name":"style","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"testId":{"defaultValue":null,"description":"Test ID used for e2e testing.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"lang":{"defaultValue":null,"description":"Optional attribute to indicate to the Screen Reader which language the\nitem text is in.","name":"lang","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Optional CSS classes for the entire dropdown component.","name":"className","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"dir":{"defaultValue":null,"description":"The text direction for the element.","name":"dir","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"auto\" | \"ltr\" | \"rtl\"","value":[{"value":"\"auto\""},{"value":"\"ltr\""},{"value":"\"rtl\""}]}},"htmlFor":{"defaultValue":null,"description":"","name":"htmlFor","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"tabIndex":{"defaultValue":null,"description":"","name":"tabIndex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"id":{"defaultValue":null,"description":"","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"title":{"defaultValue":null,"description":"","name":"title","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"data-modal-launcher-portal":{"defaultValue":null,"description":"Should be ignored\n@ignore","name":"data-modal-launcher-portal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"data-placement":{"defaultValue":null,"description":"Should be ignored\n@ignore","name":"data-placement","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"onMouseDown":{"defaultValue":null,"description":"","name":"onMouseDown","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseUp":{"defaultValue":null,"description":"","name":"onMouseUp","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseMove":{"defaultValue":null,"description":"","name":"onMouseMove","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onClick":{"defaultValue":null,"description":"","name":"onClick","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDoubleClick":{"defaultValue":null,"description":"","name":"onDoubleClick","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseEnter":{"defaultValue":null,"description":"","name":"onMouseEnter","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseLeave":{"defaultValue":null,"description":"","name":"onMouseLeave","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseOut":{"defaultValue":null,"description":"","name":"onMouseOut","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onMouseOver":{"defaultValue":null,"description":"","name":"onMouseOver","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDrag":{"defaultValue":null,"description":"","name":"onDrag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDragEnd":{"defaultValue":null,"description":"","name":"onDragEnd","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDragEnter":{"defaultValue":null,"description":"","name":"onDragEnter","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDragExit":{"defaultValue":null,"description":"","name":"onDragExit","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDragLeave":{"defaultValue":null,"description":"","name":"onDragLeave","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDragOver":{"defaultValue":null,"description":"","name":"onDragOver","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDragStart":{"defaultValue":null,"description":"","name":"onDragStart","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onDrop":{"defaultValue":null,"description":"","name":"onDrop","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: MouseEvent) => unknown)"}},"onKeyDown":{"defaultValue":null,"description":"","name":"onKeyDown","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: KeyboardEvent) => unknown)"}},"onKeyPress":{"defaultValue":null,"description":"","name":"onKeyPress","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: KeyboardEvent) => unknown)"}},"onKeyUp":{"defaultValue":null,"description":"","name":"onKeyUp","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: KeyboardEvent) => unknown)"}},"onChange":{"defaultValue":null,"description":"","name":"onChange","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: ChangeEvent) => unknown)"}},"onInput":{"defaultValue":null,"description":"","name":"onInput","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: ChangeEvent) => unknown)"}},"onInvalid":{"defaultValue":null,"description":"","name":"onInvalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: ChangeEvent) => unknown)"}},"onSubmit":{"defaultValue":null,"description":"","name":"onSubmit","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: ChangeEvent) => unknown)"}},"onTouchCancel":{"defaultValue":null,"description":"","name":"onTouchCancel","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: TouchEvent) => unknown)"}},"onTouchEnd":{"defaultValue":null,"description":"","name":"onTouchEnd","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: TouchEvent) => unknown)"}},"onTouchMove":{"defaultValue":null,"description":"","name":"onTouchMove","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: TouchEvent) => unknown)"}},"onTouchStart":{"defaultValue":null,"description":"","name":"onTouchStart","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: TouchEvent) => unknown)"}},"onFocus":{"defaultValue":null,"description":"","name":"onFocus","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: FocusEvent) => unknown)"}},"onBlur":{"defaultValue":null,"description":"","name":"onBlur","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"((e: FocusEvent) => unknown)"}},"tag":{"defaultValue":null,"description":"The HTML tag to render.","name":"tag","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/components/view.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements","value":[{"value":"\"symbol\""},{"value":"\"object\""},{"value":"\"search\""},{"value":"\"big\""},{"value":"\"link\""},{"value":"\"small\""},{"value":"\"sub\""},{"value":"\"sup\""},{"value":"\"style\""},{"value":"\"time\""},{"value":"\"menu\""},{"value":"\"dialog\""},{"value":"\"text\""},{"value":"\"article\""},{"value":"\"button\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"img\""},{"value":"\"main\""},{"value":"\"menuitem\""},{"value":"\"option\""},{"value":"\"switch\""},{"value":"\"table\""},{"value":"\"header\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"h6\""},{"value":"\"span\""},{"value":"\"title\""},{"value":"\"p\""},{"value":"\"map\""},{"value":"\"filter\""},{"value":"\"a\""},{"value":"\"abbr\""},{"value":"\"address\""},{"value":"\"area\""},{"value":"\"aside\""},{"value":"\"audio\""},{"value":"\"b\""},{"value":"\"base\""},{"value":"\"bdi\""},{"value":"\"bdo\""},{"value":"\"blockquote\""},{"value":"\"body\""},{"value":"\"br\""},{"value":"\"canvas\""},{"value":"\"caption\""},{"value":"\"center\""},{"value":"\"cite\""},{"value":"\"code\""},{"value":"\"col\""},{"value":"\"colgroup\""},{"value":"\"data\""},{"value":"\"datalist\""},{"value":"\"dd\""},{"value":"\"del\""},{"value":"\"details\""},{"value":"\"dfn\""},{"value":"\"div\""},{"value":"\"dl\""},{"value":"\"dt\""},{"value":"\"em\""},{"value":"\"embed\""},{"value":"\"fieldset\""},{"value":"\"figcaption\""},{"value":"\"footer\""},{"value":"\"head\""},{"value":"\"hgroup\""},{"value":"\"hr\""},{"value":"\"html\""},{"value":"\"i\""},{"value":"\"iframe\""},{"value":"\"input\""},{"value":"\"ins\""},{"value":"\"kbd\""},{"value":"\"keygen\""},{"value":"\"label\""},{"value":"\"legend\""},{"value":"\"li\""},{"value":"\"mark\""},{"value":"\"meta\""},{"value":"\"meter\""},{"value":"\"nav\""},{"value":"\"noindex\""},{"value":"\"noscript\""},{"value":"\"ol\""},{"value":"\"optgroup\""},{"value":"\"output\""},{"value":"\"param\""},{"value":"\"picture\""},{"value":"\"pre\""},{"value":"\"progress\""},{"value":"\"q\""},{"value":"\"rp\""},{"value":"\"rt\""},{"value":"\"ruby\""},{"value":"\"s\""},{"value":"\"samp\""},{"value":"\"slot\""},{"value":"\"script\""},{"value":"\"section\""},{"value":"\"select\""},{"value":"\"source\""},{"value":"\"strong\""},{"value":"\"summary\""},{"value":"\"template\""},{"value":"\"tbody\""},{"value":"\"td\""},{"value":"\"textarea\""},{"value":"\"tfoot\""},{"value":"\"th\""},{"value":"\"thead\""},{"value":"\"tr\""},{"value":"\"track\""},{"value":"\"u\""},{"value":"\"ul\""},{"value":"\"var\""},{"value":"\"video\""},{"value":"\"wbr\""},{"value":"\"webview\""},{"value":"\"svg\""},{"value":"\"animate\""},{"value":"\"animateMotion\""},{"value":"\"animateTransform\""},{"value":"\"circle\""},{"value":"\"clipPath\""},{"value":"\"defs\""},{"value":"\"desc\""},{"value":"\"ellipse\""},{"value":"\"feBlend\""},{"value":"\"feColorMatrix\""},{"value":"\"feComponentTransfer\""},{"value":"\"feComposite\""},{"value":"\"feConvolveMatrix\""},{"value":"\"feDiffuseLighting\""},{"value":"\"feDisplacementMap\""},{"value":"\"feDistantLight\""},{"value":"\"feDropShadow\""},{"value":"\"feFlood\""},{"value":"\"feFuncA\""},{"value":"\"feFuncB\""},{"value":"\"feFuncG\""},{"value":"\"feFuncR\""},{"value":"\"feGaussianBlur\""},{"value":"\"feImage\""},{"value":"\"feMerge\""},{"value":"\"feMergeNode\""},{"value":"\"feMorphology\""},{"value":"\"feOffset\""},{"value":"\"fePointLight\""},{"value":"\"feSpecularLighting\""},{"value":"\"feSpotLight\""},{"value":"\"feTile\""},{"value":"\"feTurbulence\""},{"value":"\"foreignObject\""},{"value":"\"g\""},{"value":"\"image\""},{"value":"\"line\""},{"value":"\"linearGradient\""},{"value":"\"marker\""},{"value":"\"mask\""},{"value":"\"metadata\""},{"value":"\"mpath\""},{"value":"\"path\""},{"value":"\"pattern\""},{"value":"\"polygon\""},{"value":"\"polyline\""},{"value":"\"radialGradient\""},{"value":"\"rect\""},{"value":"\"set\""},{"value":"\"stop\""},{"value":"\"textPath\""},{"value":"\"tspan\""},{"value":"\"use\""},{"value":"\"view\""}]}},"ref":{"defaultValue":null,"description":"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}","name":"ref","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"RefAttributes"}],"required":false,"type":{"name":"LegacyRef"}},"key":{"defaultValue":null,"description":"","name":"key","parent":{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"},"declarations":[{"fileName":"wonder-blocks/node_modules/.pnpm/@types+react@18.3.18/node_modules/@types/react/index.d.ts","name":"Attributes"}],"required":false,"type":{"name":"Key | null"}}},"exportName":"View"}},"packages-datepicker-datepicker":{"id":"packages-datepicker-datepicker","name":"DatePicker","path":"./__docs__/wonder-blocks-date-picker/date-picker.stories.tsx","stories":[{"id":"packages-datepicker-datepicker--selected-date-is-now","name":"Selected Date Is Now","snippet":"const SelectedDateIsNow = () => {}} />;","description":"Selected date is now, min is 2 days ago from now"},{"id":"packages-datepicker-datepicker--disabled-state","name":"Disabled State","snippet":"const DisabledState = () => {}}\n inputAriaLabel=\"Disabled date picker\" />;","description":"Displays the disabled state"},{"id":"packages-datepicker-datepicker--with-label","name":"With Label","snippet":"const WithLabel = () => <>\n Choose or enter a date\n \n {}}\n id=\"labeled-date-picker\" />\n;","description":"Example with an explicit label and id pairing. Note: using LabeledField is preferred!"},{"id":"packages-datepicker-datepicker--with-labeled-field-and-validation","name":"With Labeled Field And Validation","snippet":"const WithLabeledFieldAndValidation = () => ;","description":"Example with validation feedback using LabeledField. Disables resetInvalidValueOnBlur to retain user input for validation. Shows an error message when the user types a date outside the allowed range. Try editing the date to be before January 10, 2026 or after January 31, 2026."},{"id":"packages-datepicker-datepicker--with-input-aria-label","name":"With Input Aria Label","snippet":"const WithInputAriaLabel = () => {}}\n inputAriaLabel=\"Super fancy input label\" />;","description":"Example using the inputAriaLabel prop"},{"id":"packages-datepicker-datepicker--with-placeholder","name":"With Placeholder","snippet":"const WithPlaceholder = () => {}} />;","description":"Example with no selected date and a placeholder"},{"id":"packages-datepicker-datepicker--dont-close-on-select","name":"Dont Close On Select","snippet":"const DontCloseOnSelect = () => {}} />;","description":"This example shows how we can preserve the date picker element open with the closeOnSelect prop."},{"id":"packages-datepicker-datepicker--open-calendar-overlay","name":"Open Calendar Overlay","snippet":"const OpenCalendarOverlay = () => {}} />;","description":"DatePicker with the calendar overlay already open. The calendar automatically opens when the story loads, showing a month view with the current date selection and available dates within the min/max range."},{"id":"packages-datepicker-datepicker--with-alternate-locale","name":"With Alternate Locale","snippet":"const WithAlternateLocale = () => {}}\n locale={fr}\n inputAriaLabel=\"Choisir ou entrer une date\" />;","description":"DatePicker with a different locale than US English. This story is useful for testing localization functionality."},{"id":"packages-datepicker-datepicker--spanish-localization-text-format","name":"Spanish Localization Text Format","snippet":"const SpanishLocalizationTextFormat = () => {}}\n locale={es}\n dateFormat=\"LL\"\n inputAriaLabel=\"Elegir o introducir una fecha\" />;","description":"DatePicker with Spanish localization showing text-based date format. For example, \"January 16, 2026\" displays as \"enero 16, 2026\" in the input field. The calendar overlay also shows Spanish month names and day abbreviations. This uses the \"LL\" dateFormat which displays the full month name in Spanish."},{"id":"packages-datepicker-datepicker--spanish-localization-numeric-format","name":"Spanish Localization Numeric Format","snippet":"const SpanishLocalizationNumericFormat = () => {}}\n locale={es}\n inputAriaLabel=\"Elegir o introducir una fecha\" />;","description":"DatePicker with Spanish localization showing numeric date format. Displays dates in \"L\"\" format for accuracy across locales. For example, January 16, 2026 displays as \"01/16/2026\" in the input field."},{"id":"packages-datepicker-datepicker--inside-modal","name":"Inside Modal","snippet":"const InsideModal = () => ;","description":"DatePicker inside a Modal to test that pressing Escape only closes the calendar overlay, not the modal itself."},{"id":"packages-datepicker-datepicker--with-custom-styles","name":"With Custom Styles","snippet":"const WithCustomStyles = () => \n \n Date with default size (225px × 40px)\n \n {}} placeholder=\"MM/DD/YYYY\" id=\"custom-example1\" />\n \n \n Date with custom width (350px)\n \n {}}\n placeholder=\"MM/DD/YYYY\"\n id=\"custom-example2\"\n style={{width: 350}} />\n \n \n Date with full width (100%)\n \n {}}\n placeholder=\"MM/DD/YYYY\"\n id=\"custom-example3\"\n style={{width: \"100%\"}} />\n \n \n Date with custom height for larger touch target (48px)\n \n {}}\n placeholder=\"MM/DD/YYYY\"\n id=\"custom-example4\"\n style={{height: sizing.size_480}} />\n \n;","description":"DatePicker with custom styling to demonstrate that the style prop works. This example shows how to override the default width (225px) and height (40px) using the style prop. **Examples shown:** - Default width (225px) and height (40px) - Custom width (350px) with default height - Full width (100%) to fill parent container - Custom height (48px) for larger touch targets"}],"import":"import { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport { ComponentInfo, DatePicker } from \"@khanacademy/wonder-blocks-date-picker\";\nimport { LabeledField } from \"@khanacademy/wonder-blocks-labeled-field\";\nimport { ModalLauncher, OnePaneDialog } from \"@khanacademy/wonder-blocks-modal\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"DatePicker component for selecting dates. It opens a calendar overlay when interacting with the input field.","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-date-picker/src/index.ts","description":"A UI component that allows the user to pick a date by using an input element\nor the calendar popup exposed by `react-day-picker`.","displayName":"DatePicker","methods":[],"props":{"locale":{"defaultValue":null,"description":"The locale to use for the dates: a string name matching a Locale object\nimported from react-day-picker.\nIf not provided, it will fall back to enUS.","name":"locale","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"Locale"}},"updateDate":{"defaultValue":null,"description":"When the selected date changes, this callback is passed a Temporal object\nfor midnight on the selected date, set to the user's local time zone.\n\nNote: This callback is called as the user types based on resetInvalidValueOnBlur:\n\nWith resetInvalidValueOnBlur={false}:\n- Called immediately for all parsed dates (valid or out-of-range)\n- Called immediately with null for invalid/unparseable text\n- Enables real-time validation feedback\n\nWith resetInvalidValueOnBlur={true} (default):\n- Called immediately only for valid in-range dates\n- Out-of-range dates and invalid text only notify on blur (will auto-reset)\n\nFor validation feedback, use resetInvalidValueOnBlur={false} and always update selectedDate\nin your callback to display invalid values with error messages.","name":"updateDate","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":true,"type":{"name":"(arg1?: PlainDate | null | undefined) => any"}},"dateFormat":{"defaultValue":null,"description":"Used to format the value as a valid Date.\nWhen nullish (undefined or omitted), defaults to locale-aware short date (same as \"L\").\n\nSupported formats:\n- **undefined** (omit or pass undefined): Locale-aware short date (same as \"L\")\n- **\"L\"**: Locale-aware short date (e.g., \"1/20/2026\" in en-US, \"20.01.2026\" in de-DE, \"20/01/2026\" in bg)\n- **\"LL\"**: Locale-aware long date (e.g., \"January 20, 2026\" in en-US, \"20 de enero de 2026\" in es)\n - Supports manual text editing using locale-specific month names\n- **\"MM/DD/YYYY\"**: Fixed US format (e.g., \"01/20/2026\") - always US order regardless of locale\n- **\"MMMM D, YYYY\"**: Text format (e.g., \"January 20, 2026\") - month name localized but US order\n- **\"dateStyle:short|medium|long|full\"**: Explicit Intl.DateTimeFormat dateStyle values","name":"dateFormat","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"Whether the DatePicker component is disabled.\n\nInternally, the `aria-disabled` attribute will be set so that the\nelement remains focusable and will be included in the tab order.","name":"disabled","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"id":{"defaultValue":null,"description":"Unique identifier attached to the input field. see DatePickerInput.id for\nmore details.","name":"id","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"maxDate":{"defaultValue":null,"description":"The maximum date to be allowed to select in the picker container.","name":"maxDate","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"PlainDate | null"}},"minDate":{"defaultValue":null,"description":"The minimum date to be allowed to select in the picker container.","name":"minDate","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"PlainDate | null"}},"inputAriaLabel":{"defaultValue":null,"description":"The aria-label to be used for the date picker. This is only needed if there\nis no visible label associated with the date picker, such as with LabeledField.","name":"inputAriaLabel","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"The placeholder assigned to the date field","name":"placeholder","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"selectedDate":{"defaultValue":null,"description":"The current valid date associated to the DatePicker component.","name":"selectedDate","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"PlainDate | null"}},"style":{"defaultValue":null,"description":"Styles for the date picker container.","name":"style","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"StyleType"}},"closeOnSelect":{"defaultValue":{"value":"true"},"description":"Whether the date picker overlay should close when a date is selected\nor when Enter key is pressed in the input.\nDefaults to true.","name":"closeOnSelect","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"resetInvalidValueOnBlur":{"defaultValue":null,"description":"Whether to reset invalid/unparseable text to the last valid value on blur.\n\nWhen true (default):\n- Invalid values (out-of-range dates and unparseable text) auto-reset to last valid value on blur\n- updateDate only called on blur for invalid values (not during typing)\n- Cleaner UX when not using external validation\n\nWhen false:\n- Invalid values stay in field and updateDate is called immediately as user types\n- Enables real-time validation feedback with LabeledField error messages\n- Parent should always update selectedDate to show errors","name":"resetInvalidValueOnBlur","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"footer":{"defaultValue":null,"description":"Allows including elements below the date selection area that can close\nthe date picker.","name":"footer","parent":{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"},"declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-date-picker/src/components/date-picker.tsx","name":"Props"}],"required":false,"type":{"name":"((arg1: { close: () => unknown; }) => ReactNode)"}}},"exportName":"DatePicker"}},"packages-dropdown-actionitem":{"id":"packages-dropdown-actionitem","name":"ActionItem","path":"./__docs__/wonder-blocks-dropdown/action-item.stories.tsx","stories":[{"id":"packages-dropdown-actionitem--default","name":"Default","snippet":"const Default = () => {}} />;","description":"The default action item with a `label` and an `onClick` handler. This is used to trigger actions, such as opening a modal."},{"id":"packages-dropdown-actionitem--with-href","name":"With Href","snippet":"const WithHref = () => ;","description":"The action item with a `label` and an `href` prop. This is used to trigger navigation to a different page."},{"id":"packages-dropdown-actionitem--disabled","name":"Disabled","snippet":"const Disabled = () => {}} disabled />;","description":"ActionItem can be `disabled`. This is used to indicate that the action is not available."},{"id":"packages-dropdown-actionitem--custom-action-item","name":"Custom Action Item","snippet":"const CustomActionItem = () => {}}\n leftAccessory={()}\n rightAccessory={()} />;","description":"ActionItem can have more complex content, such as icons and subtitles. This can be done by passing in a `subtitle1`, `subtitle2`, `leftAccessory` and/or `rightAccessory` props. These can be any React node, and internally use the WB `DetailCell` component to render."},{"id":"packages-dropdown-actionitem--custom-action-item-multi-line","name":"Custom Action Item Multi Line","snippet":"const CustomActionItemMultiLine = () => \n Title\n Subtitle\n )}\n onClick={() => {}}\n leftAccessory={()}\n rightAccessory={()} />;","description":"Another example of a custom action item with a larger label"},{"id":"packages-dropdown-actionitem--horizontal-rule","name":"Horizontal Rule","snippet":"const HorizontalRule = () => \n {}} label=\"full-width\" horizontalRule=\"full-width\" />\n {}} label=\"inset\" horizontalRule=\"inset\" />\n {}} label=\"none\" />\n {}} />\n;","description":"`horizontalRule` can be used to separate items within ActionMenu instances. It defaults to `none`, but can be set to `inset` or `full-width` to add a horizontal rule at the bottom of the cell."}],"import":"import { ActionItem, ComponentInfo } from \"@khanacademy/wonder-blocks-dropdown\";\nimport { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"ActionItem\" component.\n 52 | * ```\n 53 | */\n> 54 | export default {\n | ^\n 55 | title: \"Packages / Dropdown / ActionItem\",\n 56 | component: ActionItem,\n 57 | argTypes: actionItemArgtypes,\n\n./__docs__/wonder-blocks-dropdown/action-item.stories.tsx:\nimport {Meta} from \"@storybook/react-vite\";\nimport * as React from \"react\";\nimport {StyleSheet} from \"aphrodite\";\nimport {PropsFor, View} from \"@khanacademy/wonder-blocks-core\";\nimport {ActionItem} from \"@khanacademy/wonder-blocks-dropdown\";\nimport {PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\";\nimport {semanticColor, sizing} from \"@khanacademy/wonder-blocks-tokens\";\n\nimport ComponentInfo from \"../components/component-info\";\nimport packageConfig from \"../../packages/wonder-blocks-dropdown/package.json\";\nimport {IconMappings} from \"../wonder-blocks-icon/phosphor-icon.argtypes\";\nimport actionItemArgtypes from \"./action-item.argtypes\";\nimport {BodyText} from \"@khanacademy/wonder-blocks-typography\";\n\nconst defaultArgs = {\n label: \"Action Item\",\n onClick: () => {},\n disabled: false,\n testId: \"\",\n lang: \"\",\n role: \"menuitem\",\n style: {},\n horizontalRule: \"none\",\n leftAccessory: null,\n rightAccessory: null,\n};\n\nconst styles = StyleSheet.create({\n example: {\n background: semanticColor.core.background.base.subtle,\n padding: sizing.size_160,\n width: 300,\n },\n items: {\n background: semanticColor.core.background.base.default,\n },\n});\n\n/**\n * The action item trigger actions, such as navigating to a different page or\n * opening a modal. Supply the `href` and/or `onClick` props. This component is\n * as a child of `ActionMenu`.\n *\n * ### Usage\n *\n * ```tsx\n * import {ActionItem, ActionMenu} from \"@khanacademy/wonder-blocks-dropdown\";\n *\n * \n * {}} />\n * \n * ```\n */\nexport default {\n title: \"Packages / Dropdown / ActionItem\",\n component: ActionItem,\n argTypes: actionItemArgtypes,\n args: defaultArgs,\n decorators: [\n (Story): React.ReactElement> => (\n \n
          \n \n
          \n           \n ),\n ],\n parameters: {\n componentSubtitle: (\n \n ),\n // These stories are being tested in action-item-variants.stories.tsx\n chromatic: {\n disableSnapshot: true,\n },\n },\n} as Meta;\n\n/**\n * The default action item with a `label` and an `onClick` handler. This is used\n * to trigger actions, such as opening a modal.\n */\nexport const Default = {\n args: {\n label: \"Action Item\",\n onClick: () => {},\n },\n};\n\n/**\n * The action item with a `label` and an `href` prop. This is used to trigger\n * navigation to a different page.\n */\nexport const WithHref = {\n args: {\n label: \"Action Item\",\n href: \"https://khanacademy.org\",\n },\n parameters: {\n chromatic: {\n // Disabling because this doesn't test anything visual.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * ActionItem can be `disabled`. This is used to indicate that the action is not\n * available.\n */\nexport const Disabled = {\n args: {\n label: \"Action Item\",\n onClick: () => {},\n disabled: true,\n },\n};\n\n/**\n * ActionItem can have more complex content, such as icons and subtitles.\n *\n * This can be done by passing in a `subtitle1`, `subtitle2`, `leftAccessory`\n * and/or `rightAccessory` props. These can be any React node, and internally\n * use the WB `DetailCell` component to render.\n */\nexport const CustomActionItem = {\n args: {\n label: \"Action Item\",\n subtitle1: \"Subtitle 1\",\n subtitle2: \"Subtitle 2\",\n onClick: () => {},\n leftAccessory: (\n \n ),\n rightAccessory: (\n \n ),\n },\n};\n\n/**\n * Another example of a custom action item with a larger label\n */\nexport const CustomActionItemMultiLine = {\n args: {\n label: (\n \n Title\n Subtitle\n \n ),\n onClick: () => {},\n leftAccessory: (\n \n ),\n rightAccessory: (\n \n ),\n },\n};\n\n/**\n * `horizontalRule` can be used to separate items within ActionMenu instances.\n * It defaults to `none`, but can be set to `inset` or `full-width` to add a\n * horizontal rule at the bottom of the cell.\n */\nexport const HorizontalRule = {\n args: {\n label: \"Action Item\",\n onClick: () => {},\n },\n render: (args: PropsFor): React.ReactNode => (\n \n \n \n \n \n \n ),\n parameters: {\n chromatic: {\n // Enabling to test how the horizontal rule looks.\n disableSnapshot: false,\n },\n },\n};\n"}},"packages-dropdown-actionmenu":{"id":"packages-dropdown-actionmenu","name":"ActionMenu","path":"./__docs__/wonder-blocks-dropdown/action-menu.stories.tsx","stories":[{"id":"packages-dropdown-actionmenu--default","name":"Default","snippet":"const Default = () => ;"},{"id":"packages-dropdown-actionmenu--right-aligned","name":"Right Aligned","snippet":"const RightAligned = () => ;","description":"This menu shows different type of possible items in this type of menu: 1. leads to a different page (the profile). 2. leads to the teacher dashboard. 3. has an onClick callback, which could be used for conversion logging. 4. is a disabled item. 5. is a separator. 6. leads to the logout link. This menu is also left-aligned."},{"id":"packages-dropdown-actionmenu--truncated-opener","name":"Truncated Opener","snippet":"const TruncatedOpener = () => ;","description":"The text in the menu opener should be truncated with ellipsis at the end and the down caret should be the same size as it is for the other examples."},{"id":"packages-dropdown-actionmenu--with-option-items","name":"With Option Items","snippet":"const WithOptionItems = function Render() {\n const [selectedValues, setSelectedValues] = React.useState<\n Array\n >([]);\n const [showHiddenOption, setShowHiddenOption] = React.useState(false);\n\n const handleChange = (selectedItems: Array) => {\n setSelectedValues(selectedItems);\n setShowHiddenOption(selectedItems.includes(\"in-class\"));\n };\n\n return (\n \n console.log(\"create action\")}\n />\n console.log(\"edit action\")}\n />\n console.log(\"delete action\")}\n />\n {showHiddenOption && (\n console.log(\"hidden menu is clicked!\")}\n />\n )}\n \n \n console.log(`Show homework assignments toggled`)\n }\n />\n \n console.log(`Show in-class assignments toggled`)\n }\n />\n \n );\n};","description":"The following menu demonstrates a hybrid menu with both action items and items that can toggle to change the state of the application. The user of this menu must keep track of the state of the selected items."},{"id":"packages-dropdown-actionmenu--empty-menu","name":"Empty Menu","snippet":"const EmptyMenu = () => ;","description":"Empty menus are disabled automatically."},{"id":"packages-dropdown-actionmenu--custom-dropdown-style","name":"Custom dropdownStyle","snippet":"const CustomDropdownStyle = () => ;","description":"This example shows how we can add custom styles to the dropdown menu."},{"id":"packages-dropdown-actionmenu--controlled","name":"Controlled","snippet":"const Controlled = function Render() {\n const [opened, setOpened] = React.useState(false);\n\n return (\n \n \n \n {actionItems.map((actionItem, index) => actionItem)}\n \n \n );\n};","description":"Sometimes you'll want to trigger a dropdown programmatically. This can be done by setting a value to the opened prop (true or false). In this situation the ActionMenu is a controlled component. The parent is responsible for managing the opening/closing of the dropdown when using this prop. This means that you'll also have to update opened to the value triggered by the onToggle prop."},{"id":"packages-dropdown-actionmenu--with-custom-opener","name":"With custom opener","snippet":"const WithCustomOpener = () => {\n const [opened, setOpened] = React.useState(false);\n\n return (\n (\n \n \n {text}\n \n \n )}>\n {actionItems.map((actionItem, index) => actionItem)}\n \n );\n};","description":"When you need a fully custom-styled opener, use `CustomOpener`. It provides a blank-slate `\n \n Delete\n \n \n }\n />\n )} />\n \n );\n};","description":"This example shows how to use the ActionMenu with a modal. The modal is opened when the user presses the \"Open modal\" action item. This could be done by pressing `Enter`/`Space` when the opener is focused. Use the keyboard to navigate to the \"Open modal\" action item and press `Enter` or `Space` to open the modal. Then navigate on the modal by pressing Tab and `Shift` + `Tab`."},{"id":"packages-dropdown-actionmenu--aria-label","name":"Aria Label","snippet":"const AriaLabel = () => {\n const [selectedItem, setSelectedItem] = React.useState(\n null,\n );\n\n const classOptions = [\n {\n label: \"Math\",\n ariaLabel: \"Select Math class\",\n },\n {\n label: \"Science\",\n ariaLabel: \"Select Science class\",\n },\n {\n label: \"History\",\n ariaLabel: \"Select History class\",\n },\n ];\n\n return (\n (\n \n )}>\n {classOptions.map((opt) => (\n {\n setSelectedItem(opt.label);\n action(`Selected ${opt.label}`);\n }}\n />\n ))}\n \n );\n};","description":"This example shows how to use `aria-label` on the ActionMenu opener and `ActionItem` children. This is especially useful if you do **not** have a visible label component but want to ensure accessibility. For more details, see the [accessibility documentation](./?path=/docs/packages-dropdown-actionmenu-accessibility--docs). As you can see, the `ActionMenu` opener visually shows the selected item, but the `aria-label` attribute on the opener provides a more descriptive label for the action menu. **NOTE:** Make sure to include relevant information in `aria-label` if the ActionMenu is used to select an item from a list."}],"import":"import {\n ActionItem,\n ActionMenu,\n ComponentInfo,\n CustomOpener,\n OptionItem,\n SeparatorItem,\n} from \"@khanacademy/wonder-blocks-dropdown\";\nimport { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport Button from \"@khanacademy/wonder-blocks-button\";\nimport { Checkbox } from \"@khanacademy/wonder-blocks-form\";\nimport IconButton from \"@khanacademy/wonder-blocks-icon-button\";\nimport { ModalLauncher, OnePaneDialog } from \"@khanacademy/wonder-blocks-modal\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { StatusBadge } from \"@khanacademy/wonder-blocks-badge\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"A menu that consists of various types of items. ### Usage ```tsx import {ActionMenu, ActionItem} from \"@khanacademy/wonder-blocks-dropdown\"; {}} /> ```","reactDocgenTypescript":{"tags":{},"filePath":"/home/github/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-dropdown/src/index.ts","description":"A menu that consists of various types of items.\n\n## Usage\n\n```jsx\nimport {ActionMenu, ActionItem} from \"@khanacademy/wonder-blocks-dropdown\";\n\n\n \n {}} />\n\n```","displayName":"ActionMenu","methods":[],"props":{"aria-activedescendant":{"defaultValue":null,"description":"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.","name":"aria-activedescendant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-atomic":{"defaultValue":null,"description":"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.","name":"aria-atomic","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-autocomplete":{"defaultValue":null,"description":"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.","name":"aria-autocomplete","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"inline\" | \"list\" | \"both\"","value":[{"value":"\"none\""},{"value":"\"inline\""},{"value":"\"list\""},{"value":"\"both\""}]}},"aria-busy":{"defaultValue":null,"description":"Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.","name":"aria-busy","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-checked":{"defaultValue":null,"description":"Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.","name":"aria-checked","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-colcount":{"defaultValue":null,"description":"Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.","name":"aria-colcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colindex":{"defaultValue":null,"description":"Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.","name":"aria-colindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-colspan":{"defaultValue":null,"description":"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.","name":"aria-colspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-current":{"defaultValue":null,"description":"Indicates the element that represents the current item within a container or set of related elements.","name":"aria-current","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\""}},"aria-describedby":{"defaultValue":null,"description":"Identifies the element (or elements) that describes the object.\n@see aria-labelledby","name":"aria-describedby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-details":{"defaultValue":null,"description":"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.","name":"aria-details","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-disabled":{"defaultValue":null,"description":"Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.","name":"aria-disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-dropeffect":{"defaultValue":null,"description":"Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1","name":"aria-dropeffect","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"","value":[{"value":"\"link\""},{"value":"\"none\""},{"value":"\"copy\""},{"value":"\"execute\""},{"value":"\"move\""},{"value":"\"popup\""}]}},"aria-errormessage":{"defaultValue":null,"description":"Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.","name":"aria-errormessage","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-expanded":{"defaultValue":null,"description":"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.","name":"aria-expanded","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-flowto":{"defaultValue":null,"description":"Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.","name":"aria-flowto","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-grabbed":{"defaultValue":null,"description":"Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1","name":"aria-grabbed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-hidden":{"defaultValue":null,"description":"Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.","name":"aria-hidden","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-invalid":{"defaultValue":null,"description":"Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.","name":"aria-invalid","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\""}},"aria-keyshortcuts":{"defaultValue":null,"description":"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.","name":"aria-keyshortcuts","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-label":{"defaultValue":null,"description":"Defines a string value that labels the current element.\n@see aria-labelledby.","name":"aria-label","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-level":{"defaultValue":null,"description":"Defines the hierarchical level of an element within a structure.","name":"aria-level","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-live":{"defaultValue":null,"description":"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.","name":"aria-live","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"off\" | \"assertive\" | \"polite\"","value":[{"value":"\"off\""},{"value":"\"assertive\""},{"value":"\"polite\""}]}},"aria-modal":{"defaultValue":null,"description":"Indicates whether an element is modal when displayed.","name":"aria-modal","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiline":{"defaultValue":null,"description":"Indicates whether a text box accepts multiple lines of input or only a single line.","name":"aria-multiline","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-multiselectable":{"defaultValue":null,"description":"Indicates that the user may select more than one item from the current selectable descendants.","name":"aria-multiselectable","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-orientation":{"defaultValue":null,"description":"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.","name":"aria-orientation","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},"aria-owns":{"defaultValue":null,"description":"Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.","name":"aria-owns","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-placeholder":{"defaultValue":null,"description":"Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.","name":"aria-placeholder","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-posinset":{"defaultValue":null,"description":"Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.","name":"aria-posinset","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-pressed":{"defaultValue":null,"description":"Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected.","name":"aria-pressed","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"mixed\""}},"aria-readonly":{"defaultValue":null,"description":"Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.","name":"aria-readonly","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-relevant":{"defaultValue":null,"description":"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.","name":"aria-relevant","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"","value":[{"value":"\"additions\""},{"value":"\"additions removals\""},{"value":"\"additions text\""},{"value":"\"all\""},{"value":"\"removals\""},{"value":"\"removals additions\""},{"value":"\"removals text\""},{"value":"\"text\""},{"value":"\"text additions\""},{"value":"\"text removals\""}]}},"aria-required":{"defaultValue":null,"description":"Indicates that user input is required on the element before a form may be submitted.","name":"aria-required","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-roledescription":{"defaultValue":null,"description":"Defines a human-readable, author-localized description for the role of an element.","name":"aria-roledescription","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"aria-rowcount":{"defaultValue":null,"description":"Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.","name":"aria-rowcount","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowindex":{"defaultValue":null,"description":"Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.","name":"aria-rowindex","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-rowspan":{"defaultValue":null,"description":"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.","name":"aria-rowspan","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-selected":{"defaultValue":null,"description":"Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed.","name":"aria-selected","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\""}},"aria-setsize":{"defaultValue":null,"description":"Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.","name":"aria-setsize","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-sort":{"defaultValue":null,"description":"Indicates if items in a table or grid are sorted in ascending or descending order.","name":"aria-sort","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"none\" | \"ascending\" | \"descending\" | \"other\"","value":[{"value":"\"none\""},{"value":"\"ascending\""},{"value":"\"descending\""},{"value":"\"other\""}]}},"aria-valuemax":{"defaultValue":null,"description":"Defines the maximum allowed value for a range widget.","name":"aria-valuemax","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuemin":{"defaultValue":null,"description":"Defines the minimum allowed value for a range widget.","name":"aria-valuemin","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuenow":{"defaultValue":null,"description":"Defines the current value for a range widget.\n@see aria-valuetext.","name":"aria-valuenow","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"number"}},"aria-valuetext":{"defaultValue":null,"description":"Defines the human readable text alternative of aria-valuenow for a range widget.","name":"aria-valuetext","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/aria-types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"","name":"role","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-core/src/util/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"AriaRole","value":[{"value":"\"search\""},{"value":"\"link\""},{"value":"\"none\""},{"value":"\"list\""},{"value":"\"menu\""},{"value":"\"listbox\""},{"value":"\"tree\""},{"value":"\"grid\""},{"value":"\"dialog\""},{"value":"\"alert\""},{"value":"\"alertdialog\""},{"value":"\"application\""},{"value":"\"article\""},{"value":"\"banner\""},{"value":"\"button\""},{"value":"\"cell\""},{"value":"\"checkbox\""},{"value":"\"columnheader\""},{"value":"\"combobox\""},{"value":"\"complementary\""},{"value":"\"contentinfo\""},{"value":"\"definition\""},{"value":"\"directory\""},{"value":"\"document\""},{"value":"\"feed\""},{"value":"\"figure\""},{"value":"\"form\""},{"value":"\"gridcell\""},{"value":"\"group\""},{"value":"\"heading\""},{"value":"\"img\""},{"value":"\"listitem\""},{"value":"\"log\""},{"value":"\"main\""},{"value":"\"marquee\""},{"value":"\"math\""},{"value":"\"menubar\""},{"value":"\"menuitem\""},{"value":"\"menuitemcheckbox\""},{"value":"\"menuitemradio\""},{"value":"\"navigation\""},{"value":"\"note\""},{"value":"\"option\""},{"value":"\"presentation\""},{"value":"\"progressbar\""},{"value":"\"radio\""},{"value":"\"radiogroup\""},{"value":"\"region\""},{"value":"\"row\""},{"value":"\"rowgroup\""},{"value":"\"rowheader\""},{"value":"\"scrollbar\""},{"value":"\"searchbox\""},{"value":"\"separator\""},{"value":"\"slider\""},{"value":"\"spinbutton\""},{"value":"\"status\""},{"value":"\"switch\""},{"value":"\"tab\""},{"value":"\"table\""},{"value":"\"tablist\""},{"value":"\"tabpanel\""},{"value":"\"term\""},{"value":"\"textbox\""},{"value":"\"timer\""},{"value":"\"toolbar\""},{"value":"\"tooltip\""},{"value":"\"treegrid\""},{"value":"\"treeitem\""}]}},"children":{"defaultValue":null,"description":"The items in this dropdown.","name":"children","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Item | Item[]"}},"menuText":{"defaultValue":null,"description":"Text for the opener of this menu.","name":"menuText","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"}},"opened":{"defaultValue":null,"description":"Can be used to override the state of the ActionMenu by parent elements","name":"opened","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"onToggle":{"defaultValue":null,"description":"In controlled mode, use this prop in case the parent needs to be notified\nwhen the menu opens/closes.","name":"onToggle","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"((opened: boolean) => unknown)"}},"onChange":{"defaultValue":null,"description":"A callback that returns items that are newly selected. Use only if this\nmenu contains select items (and make sure selectedValues is defined).","name":"onChange","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"((selectedItems: string[]) => unknown)"}},"selectedValues":{"defaultValue":null,"description":"The values of the items that are currently selected. Use only if this\nmenu contains select items (and make sure onChange is defined).","name":"selectedValues","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string[]"}},"alignment":{"defaultValue":{"value":"left"},"description":"The alignment of the menu component in relation to the opener\ncomponent. Defaults to \"left\", which is below the opener and left\naligned. Any valid Popper placement is also supported.","name":"alignment","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Placement","value":[{"value":"\"auto\""},{"value":"\"left\""},{"value":"\"right\""},{"value":"\"auto-start\""},{"value":"\"auto-end\""},{"value":"\"top\""},{"value":"\"bottom\""},{"value":"\"top-start\""},{"value":"\"top-end\""},{"value":"\"bottom-start\""},{"value":"\"bottom-end\""},{"value":"\"right-start\""},{"value":"\"right-end\""},{"value":"\"left-start\""},{"value":"\"left-end\""}]}},"disabled":{"defaultValue":{"value":"false"},"description":"Whether this component is disabled. A disabled dropdown may not be opened\nand does not support interaction. Defaults to false.\n\nInternally, the `aria-disabled` attribute will be set so that the\nelement remains focusable and will be included in the tab order.","name":"disabled","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Test ID used for e2e testing.","name":"testId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"dropdownStyle":{"defaultValue":null,"description":"Styling specific to the dropdown component that isn't part of the opener,\npassed by the specific implementation of the dropdown menu,","name":"dropdownStyle","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"style":{"defaultValue":null,"description":"Optional styling for the entire dropdown component.","name":"style","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"StyleType"}},"className":{"defaultValue":null,"description":"Optional CSS classes for the entire dropdown component.","name":"className","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"opener":{"defaultValue":null,"description":"The child function that returns the anchor the ActionMenu will be\nactivated by. This function takes eventState, which allows the opener\nelement to access pointer event state.","name":"opener","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"((openerProps: OpenerProps) => ReactElement>)"}},"dropdownId":{"defaultValue":null,"description":"Unique identifier attached to the menu dropdown. If used, we need to\nguarantee that the ID is unique within everything rendered on a page.\nIf one is not provided, one is auto-generated. It is used for the\nopener's `aria-controls` attribute for screenreaders.","name":"dropdownId","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"id":{"defaultValue":null,"description":"Unique identifier attached to the field control. If this is used, we\nneed to guarantee that the ID is unique within everything rendered on\na page. If one is not provided, one is auto-generated.","name":"id","declarations":[{"fileName":"wonder-blocks/packages/wonder-blocks-dropdown/src/components/action-menu.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}}},"exportName":"ActionMenu"}},"packages-dropdown-combobox":{"id":"packages-dropdown-combobox","name":"Combobox","path":"./__docs__/wonder-blocks-dropdown/combobox.stories.tsx","stories":[{"id":"packages-dropdown-combobox--default","name":"Default","snippet":"const Default = () => {\n const [{selectionType, value}, updateArgs] = useArgs();\n const prevSelectionTypeRef = React.useRef(args.selectionType);\n\n // Allows switching between single and multiple selection types without\n // losing the selected value.\n React.useEffect(() => {\n // Try to keep the value in sync with the selection type\n if (selectionType !== prevSelectionTypeRef.current) {\n if (selectionType === \"single\") {\n updateArgs({\n value: Array.isArray(value) ? value[0] : value,\n });\n } else if (selectionType === \"multiple\") {\n updateArgs({value: Array.isArray(value) ? value : [value]});\n }\n }\n prevSelectionTypeRef.current = selectionType;\n }, [updateArgs, selectionType, value]);\n\n return (\n {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}>{items}\n );\n};","description":"The default Combobox with a list of items."},{"id":"packages-dropdown-combobox--single-select-combobox","name":"Combobox with single selection","snippet":"const SingleSelectCombobox = () => {items};","description":"Combobox supports by default single selection. This means that only one element can be selected from the listbox at a time. In this example, we show how this is done by setting a state variable in the parent component."},{"id":"packages-dropdown-combobox--single-selection","name":"Single selection (Controlled input)","snippet":"const SingleSelection = () => {\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}>{items}\n );\n};","description":"`Combobox` can also be used in controlled mode. In this example, the selected value is \"pear\". If another item is selected, the previously selected item is deselected. This is the default selection type, and it is also set by specifying value as a `string`."},{"id":"packages-dropdown-combobox--controlled-combobox","name":"Controlled Combobox (opened state)","snippet":"const ControlledCombobox = () => {\n const [opened, setOpened] = React.useState(args.opened);\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setOpened(args.opened);\n }, [args.opened]);\n\n return (\n \n \n {\n setOpened(!opened);\n action(\"onToggle\")();\n }}\n onChange={(newValue) => {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}\n value={value}>{items}\n \n );\n};","description":"`Combobox` can work as a controlled component. This can be done by setting a value to the `opened` prop (`true` or `false`). In this case, the parent is responsible for managing the opening/closing of the listbox when using this prop. This means that you'll also have to update `opened` to the value triggered by the `onToggle` prop."},{"id":"packages-dropdown-combobox--disabled","name":"Disabled","snippet":"const Disabled = () => ;","description":"A Combobox can be disabled. When disabled, the Combobox cannot be interacted with."},{"id":"packages-dropdown-combobox--multiple-selection","name":"Multiple Selection","snippet":"const MultipleSelection = () => {\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}>{items}\n );\n};","description":"Combobox supports multiple selection. This means that more than one element can be selected from the listbox at a time. In this example, we show how this is done by using an array of strings as the value and setting the `selectionType` prop to \"multiple\". To navigate using the keyboard, use: - Arrow keys (`up`, `down`) to navigate through the listbox. - `Enter` to select an item. - Arrow keys (`left`, `right`) to navigate through the selected items."},{"id":"packages-dropdown-combobox--controlled-multilple-combobox","name":"Controlled Multi-select Combobox (opened state)","snippet":"const ControlledMultilpleCombobox = () => {\n const [opened, setOpened] = React.useState(args.opened);\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setOpened(!opened);\n action(\"onToggle\")();\n }}\n onChange={(newValue) => {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}\n value={value}>{items}\n );\n};","description":"This example shows how to use the multi-select `Combobox` component in controlled mode."},{"id":"packages-dropdown-combobox--auto-complete","name":"Autocomplete","snippet":"const AutoComplete = () => {items};","description":"`Combobox` supports autocompletion. This means that the listbox will show options that match the user's input. Note that the search is case-insensitive and it will match any part of the option item's label. This is useful when using custom option items that could contain Typography components or other elements. In this example, we show how this is done by setting the `autoComplete` prop to \"list\"."},{"id":"packages-dropdown-combobox--auto-complete-multi-select","name":"Autocomplete (Multi-select)","snippet":"const AutoCompleteMultiSelect = () => {customItems};","description":"Below you can see an example of a multi-select `Combobox` with custom option items and autocompletion. This means that the listbox will show options that match the user's input. **NOTE:** If you want to use a custom Typography component in the option label, you'll need to set the `labelAsText` prop to the text you want to search for."},{"id":"packages-dropdown-combobox--error","name":"Error","snippet":"const Error = () => {\n const [error, setError] = React.useState(args.error);\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setValue(newValue);\n setError(newValue !== \"\" ? false : true);\n action(\"onChange\")(newValue);\n }}>{items}\n );\n};","description":"This `Combobox` is in an error state. Selecting any option will clear the error state by updating the `error` prop to `false`. **NOTE:** We internally apply the correct `aria-invalid` attribute based on the `error` prop."},{"id":"packages-dropdown-combobox--start-icon","name":"Start Icon","snippet":"const StartIcon = () => {\n const [_, updateArgs] = useArgs();\n\n return (\n \n With default size and color:\n }\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}>{items}\n With custom size:\n \n }\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}>{items}\n With custom color:\n \n }\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}>{items}\n Disabled (overrides color prop):\n \n }\n disabled={true}\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}>{items}\n \n );\n};","description":"With `startIcon`, you can customize the icon that appears at the beginning of the Combobox. This is useful when you want to add a custom icon to the component. **NOTE:** When `startIcon` is set, we set some default values for the icon: - `size`: \"small\" - `color`: `semanticColor.core.foreground.neutral.default` You can customize the size and color of the icon by passing the `size` and `color` props to the `PhosphorIcon` component."}],"import":"import { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport { Checkbox } from \"@khanacademy/wonder-blocks-form\";\nimport { Combobox, ComponentInfo, OptionItem } from \"@khanacademy/wonder-blocks-dropdown\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"error":{"name":"No component import found","message":"No component file found for the \"Combobox\" component.\n 69 | };\n 70 |\n> 71 | export default {\n | ^\n 72 | title: \"Packages / Dropdown / Combobox\",\n 73 | component: Combobox,\n 74 | args: defaultArgs,\n\n./__docs__/wonder-blocks-dropdown/combobox.stories.tsx:\nimport {action} from \"storybook/actions\";\nimport {useArgs} from \"storybook/preview-api\";\nimport {Meta, StoryObj} from \"@storybook/react-vite\";\nimport {expect, userEvent, within} from \"storybook/test\";\nimport {StyleSheet} from \"aphrodite\";\nimport * as React from \"react\";\nimport magnifyingGlassIcon from \"@phosphor-icons/core/bold/magnifying-glass-bold.svg\";\n\nimport {BodyText} from \"@khanacademy/wonder-blocks-typography\";\nimport {semanticColor, sizing} from \"@khanacademy/wonder-blocks-tokens\";\nimport {Checkbox} from \"@khanacademy/wonder-blocks-form\";\nimport {Combobox, OptionItem} from \"@khanacademy/wonder-blocks-dropdown\";\nimport {PhosphorIcon} from \"@khanacademy/wonder-blocks-icon\";\nimport {PropsFor, View} from \"@khanacademy/wonder-blocks-core\";\nimport {allProfilesWithPictures} from \"./option-item-examples\";\n\nimport argTypes from \"./combobox.argtypes\";\n\nimport packageConfig from \"../../packages/wonder-blocks-dropdown/package.json\";\n\nimport ComponentInfo from \"../components/component-info\";\n\nconst items = [\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n];\n\nconst customItems = allProfilesWithPictures.map((user, index) => (\n {user.name}}\n // TODO(WB-1752): Refactor API and types to enforce this prop when\n // `label` is not a string.\n labelAsText={user.name}\n leftAccessory={user.picture}\n subtitle2={user.email}\n />\n));\n\nconst styles = StyleSheet.create({\n example: {\n background: semanticColor.core.background.base.subtle,\n padding: sizing.size_160,\n width: 300,\n },\n wrapper: {\n height: 550,\n },\n});\n\nconst defaultArgs = {\n children: items,\n disabled: false,\n placeholder: \"Select an item\",\n testId: \"\",\n autoComplete: \"none\",\n loading: false,\n \"aria-label\": \"\", // Setting to empty string to avoid SB control showing as an object to represent undefined\n};\n\nexport default {\n title: \"Packages / Dropdown / Combobox\",\n component: Combobox,\n args: defaultArgs,\n argTypes,\n decorators: [\n (Story): React.ReactElement> => (\n \n \n \n ),\n ],\n parameters: {\n componentSubtitle: (\n \n ),\n },\n} as Meta;\n\ntype Story = StoryObj;\n\n/**\n * The default Combobox with a list of items.\n */\nexport const Default: Story = {\n render: function Render(args: PropsFor) {\n const [{selectionType, value}, updateArgs] = useArgs();\n const prevSelectionTypeRef = React.useRef(args.selectionType);\n\n // Allows switching between single and multiple selection types without\n // losing the selected value.\n React.useEffect(() => {\n // Try to keep the value in sync with the selection type\n if (selectionType !== prevSelectionTypeRef.current) {\n if (selectionType === \"single\") {\n updateArgs({\n value: Array.isArray(value) ? value[0] : value,\n });\n } else if (selectionType === \"multiple\") {\n updateArgs({value: Array.isArray(value) ? value : [value]});\n }\n }\n prevSelectionTypeRef.current = selectionType;\n }, [updateArgs, selectionType, value]);\n\n return (\n {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}\n />\n );\n },\n args: {\n children: items,\n selectionType: \"single\",\n },\n // Hide the story in the Docs page (useful for snapshots).\n tags: [\"!autodocs\"],\n};\n\n/**\n * Combobox supports by default single selection. This means that only one\n * element can be selected from the listbox at a time. In this example, we show\n * how this is done by setting a state variable in the parent component.\n */\nexport const SingleSelectCombobox = {\n name: \"Combobox with single selection\",\n args: {\n children: items,\n value: \"pear\",\n },\n};\n\n/**\n * `Combobox` can also be used in controlled mode. In this example, the selected\n * value is \"pear\". If another item is selected, the previously selected item is\n * deselected. This is the default selection type, and it is also set by\n * specifying value as a `string`.\n */\nexport const SingleSelection: Story = {\n name: \"Single selection (Controlled input)\",\n render: function Render(args: PropsFor) {\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}\n />\n );\n },\n args: {\n children: items,\n value: \"pear\",\n },\n parameters: {\n chromatic: {\n // we don't need screenshots because this story only tests behavior.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * `Combobox` can work as a controlled component. This can be done by setting a\n * value to the `opened` prop (`true` or `false`). In this case, the parent is\n * responsible for managing the opening/closing of the listbox when using this\n * prop.\n *\n * This means that you'll also have to update `opened` to the value triggered by\n * the `onToggle` prop.\n */\nexport const ControlledCombobox: Story = {\n name: \"Controlled Combobox (opened state)\",\n render: function Render(args: PropsFor) {\n const [opened, setOpened] = React.useState(args.opened);\n const [value, setValue] = React.useState(args.value);\n\n React.useEffect(() => {\n setOpened(args.opened);\n }, [args.opened]);\n\n return (\n \n \n {\n setOpened(!opened);\n action(\"onToggle\")();\n }}\n onChange={(newValue) => {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}\n value={value}\n />\n \n );\n },\n args: {\n children: items,\n opened: false,\n },\n decorators: [\n (Story): React.ReactElement> => (\n {Story()}\n ),\n ],\n play: async ({canvasElement}) => {\n // Arrange\n const canvas = within(canvasElement.ownerDocument.body);\n\n // Act\n // Open the combobox by clicking the checkbox\n await userEvent.click(canvas.getByRole(\"checkbox\"));\n\n // Assert\n await expect(canvas.getByRole(\"listbox\")).toBeVisible();\n },\n};\n\n/**\n * A Combobox can be disabled. When disabled, the Combobox cannot be interacted\n * with.\n */\nexport const Disabled = {\n args: {\n disabled: true,\n value: \"pear\",\n },\n};\n\n/**\n * Combobox supports multiple selection. This means that more than one element\n * can be selected from the listbox at a time. In this example, we show how this\n * is done by using an array of strings as the value and setting the\n * `selectionType` prop to \"multiple\".\n *\n * To navigate using the keyboard, use:\n * - Arrow keys (`up`, `down`) to navigate through the listbox.\n * - `Enter` to select an item.\n * - Arrow keys (`left`, `right`) to navigate through the selected items.\n */\nexport const MultipleSelection: Story = {\n render: function Render(args: PropsFor) {\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}\n />\n );\n },\n args: {\n children: items,\n value: [\"pear\", \"grape\"],\n selectionType: \"multiple\",\n },\n parameters: {\n chromatic: {\n // we don't need screenshots because this story only tests behavior.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * This example shows how to use the multi-select `Combobox` component in\n * controlled mode.\n */\nexport const ControlledMultilpleCombobox: Story = {\n name: \"Controlled Multi-select Combobox (opened state)\",\n render: function Render(args: PropsFor) {\n const [opened, setOpened] = React.useState(args.opened);\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setOpened(!opened);\n action(\"onToggle\")();\n }}\n onChange={(newValue) => {\n setValue(newValue);\n action(\"onChange\")(newValue);\n }}\n value={value}\n />\n );\n },\n args: {\n children: items,\n opened: true,\n value: [\"pear\", \"grape\"],\n selectionType: \"multiple\",\n },\n decorators: [\n (Story): React.ReactElement> => (\n {Story()}\n ),\n ],\n\n play: async ({canvasElement}) => {\n const canvas = within(canvasElement.ownerDocument.body);\n\n // Move to second option item\n await userEvent.keyboard(\"{ArrowDown}\");\n\n // Act\n // Select the second option item\n await userEvent.keyboard(\"{Enter}\");\n\n // Assert\n expect(canvas.getByTestId(\"test-combobox-status\")).toHaveTextContent(\n \"Pineapple selected, 4 of 10. 10 results available.\",\n );\n },\n // Hide the story in the Docs page (useful for snapshots).\n tags: [\"!autodocs\"],\n};\n\n/**\n * `Combobox` supports autocompletion. This means that the listbox will show\n * options that match the user's input. Note that the search is case-insensitive\n * and it will match any part of the option item's label. This is useful when\n * using custom option items that could contain Typography components or other\n * elements.\n *\n * In this example, we show how this is done by setting the `autoComplete` prop\n * to \"list\".\n */\nexport const AutoComplete: Story = {\n args: {\n children: items,\n placeholder: \"Type to search\",\n autoComplete: \"list\",\n },\n name: \"Autocomplete\",\n parameters: {\n chromatic: {\n // Disabling because this doesn't test anything visual.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * Below you can see an example of a multi-select `Combobox` with custom option\n * items and autocompletion. This means that the listbox will show options that\n * match the user's input.\n *\n * **NOTE:** If you want to use a custom Typography component in the option\n * label, you'll need to set the `labelAsText` prop to the text you want to\n * search for.\n */\nexport const AutoCompleteMultiSelect: Story = {\n args: {\n children: customItems,\n placeholder: \"Type to search\",\n autoComplete: \"list\",\n selectionType: \"multiple\",\n },\n name: \"Autocomplete (Multi-select)\",\n parameters: {\n chromatic: {\n // Disabling because this doesn't test anything visual.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * This `Combobox` is in an error state. Selecting any option will clear the\n * error state by updating the `error` prop to `false`.\n *\n * **NOTE:** We internally apply the correct `aria-invalid` attribute based on\n * the `error` prop.\n */\n\nexport const Error: Story = {\n render: function Render(args: PropsFor) {\n const [error, setError] = React.useState(args.error);\n const [value, setValue] = React.useState(args.value);\n\n return (\n {\n setValue(newValue);\n setError(newValue !== \"\" ? false : true);\n action(\"onChange\")(newValue);\n }}\n />\n );\n },\n args: {\n children: items,\n error: true,\n },\n};\n\n/**\n * With `startIcon`, you can customize the icon that appears at the beginning of\n * the Combobox. This is useful when you want to add a custom icon to the\n * component.\n *\n * **NOTE:** When `startIcon` is set, we set some default values for the icon:\n * - `size`: \"small\"\n * - `color`: `semanticColor.core.foreground.neutral.default`\n *\n * You can customize the size and color of the icon by passing the `size` and\n * `color` props to the `PhosphorIcon` component.\n */\nexport const StartIcon: Story = {\n render: function Render(args: PropsFor) {\n const [_, updateArgs] = useArgs();\n\n return (\n \n With default size and color:\n }\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}\n />\n With custom size:\n \n }\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}\n />\n With custom color:\n \n }\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}\n />\n Disabled (overrides color prop):\n \n }\n disabled={true}\n onChange={(newValue) => {\n updateArgs({value: newValue});\n action(\"onChange\")(newValue);\n }}\n />\n \n );\n },\n args: {\n children: items,\n },\n};\n"}},"packages-dropdown-customopener":{"id":"packages-dropdown-customopener","name":"CustomOpener","path":"./__docs__/wonder-blocks-dropdown/custom-opener.stories.tsx","stories":[{"id":"packages-dropdown-customopener--default","name":"Default","snippet":"const Default = function Render() {\n const [value, setValue] = React.useState(\"\");\n\n return (\n (\n \n {text}\n \n \n )}\n >\n \n \n \n \n );\n};","description":"A minimal `CustomOpener` inside a `SingleSelect`. The opener uses `hovered` and `pressed` from the render prop to adjust background color. The WB focus ring is applied automatically when the button receives keyboard focus — no extra wiring needed."},{"id":"packages-dropdown-customopener--disabled","name":"Disabled","snippet":"const Disabled = function Render() {\n return (\n {}}\n disabled\n opener={({text}) => (\n \n {text}\n \n \n )}\n >\n \n \n \n );\n};","description":"When `disabled` is set on the parent dropdown, it is forwarded to `CustomOpener` via `aria-disabled`. The opener stays focusable but non-interactive. You must supply visual disabled styles yourself via `styles.root` — `CustomOpener` only sets `cursor: not-allowed`. In this example, the text color and border are muted using `semanticColor` disabled tokens."},{"id":"packages-dropdown-customopener--all-states","name":"All States","snippet":"const AllStates = function Render() {\n const states = [\n {label: \"Rest\", hovered: false, pressed: false, disabled: false},\n {label: \"Hover\", hovered: true, pressed: false, disabled: false},\n {label: \"Pressed\", hovered: false, pressed: true, disabled: false},\n {label: \"Disabled\", hovered: false, pressed: false, disabled: true},\n ];\n\n return (\n \n {states.map(({label, hovered, pressed, disabled}) => (\n \n {label}\n \n Choose a fruit\n \n \n \n ))}\n \n \n Focus (tab to see)\n \n \n Choose a fruit\n \n \n \n \n );\n};","description":"A full state demo showing how the opener should look in rest, hover, pressed, focus, and disabled states side-by-side. Because `CustomOpener` gives you a blank slate, **all visual states except focus are your responsibility**. This story shows a reference implementation using `semanticColor` tokens."},{"id":"packages-dropdown-customopener--with-action-menu","name":"With Action Menu","snippet":"const WithActionMenu = function Render() {\n const [opened, setOpened] = React.useState(false);\n return (\n (\n \n {text}\n \n \n )}\n >\n {}} />\n {}} />\n \n );\n};","description":"A full implementation inside an `ActionMenu`, demonstrating that `CustomOpener` works with all three dropdown components (`SingleSelect`, `MultiSelect`, `ActionMenu`)."}],"import":"import {\n ActionItem,\n ActionMenu,\n ComponentInfo,\n CustomOpener,\n OptionItem,\n SingleSelect,\n} from \"@khanacademy/wonder-blocks-dropdown\";\nimport { BodyText } from \"@khanacademy/wonder-blocks-typography\";\nimport { PhosphorIcon } from \"@khanacademy/wonder-blocks-icon\";\nimport { View } from \"@khanacademy/wonder-blocks-core\";","jsDocTags":{},"description":"`CustomOpener` is a blank-slate button primitive for use inside the `opener` render prop of `SingleSelect`, `MultiSelect`, and `ActionMenu`. It provides correct semantics (`\n )}\n \n \n );\n};\n\n/**\n * Sometimes we want to include Dropdowns inside a Modal, and these controls can\n * be accessed only by scrolling down. This example help us to demonstrate that\n * `MultiSelect` components can correctly be displayed within the visible\n * scrolling area.\n */\nexport const DropdownInModal: StoryComponentType = {\n render: (args) => ,\n name: \"Dropdown in a modal\",\n parameters: {\n chromatic: {\n // We don't need screenshots because this story can be tested after\n // the modal is opened.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * `MultiSelect` can be disabled by passing `disabled={true}`. This can be\n * useful when you want to disable a control temporarily. It is also disabled\n * when:\n * - there are no items\n * - there are items and they are all disabled\n *\n *\n * Note: The `disabled` prop sets the `aria-disabled` attribute to `true`\n * instead of setting the `disabled` attribute. This is so that the component\n * remains focusable while communicating to screen readers that it is disabled.\n */\nexport const Disabled: StoryComponentType = {\n render: () => (\n \n {}}>\n \n \n \n }\n />\n {}} />}\n />\n\n {}}>\n \n \n \n }\n />\n \n ),\n};\n\n/**\n * A MultiSelect can be set to read-only by passing `readOnly` to `true`.\n * When `true`, read-only styling is applied and the aria-disabled attribute is\n * set to \"true\". A user won't be able to open the dropdown or change the\n * selected values.\n *\n * We recommend using the MultiSelect with `LabeledField`. The\n * `readOnlyMessage` prop in `LabeledField` can be set so that users know why\n * the field is marked as read only.\n *\n * Note: We set `aria-disabled` instead of `aria-readonly` due to low\n * browser + screen reader support for `aria-readonly`.\n *\n * If it is expected that the user will select multiple values, consider using\n * a custom opener to display the selected values.\n */\nexport const ReadOnly: StoryComponentType = {\n render: function ReadOnlyStory(args) {\n const [selectedValue, setSelectedValue] = React.useState([\n items[0].props.value,\n ]);\n return (\n \n {items}\n \n }\n label=\"Example Label\"\n readOnlyMessage=\"Message about why it is read only\"\n />\n );\n },\n parameters: {\n chromatic: {\n // Disabling because this is covered in testing snapshots story\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * When nothing is selected, show the menu text as \"All selected\". Note that the\n * actual selection logic doesn't change. (Only the menu text)\n */\nexport const ImplicitAllEnabled: StoryComponentType = {\n render: Template,\n args: {\n implicitAllEnabled: true,\n labels: {\n someSelected: (numSelectedValues: number) =>\n `${numSelectedValues} fruits`,\n allSelected: \"All planets selected\",\n },\n } as MultiSelectArgs,\n parameters: {\n chromatic: {\n // We don't need screenshots b/c the dropdown is initially closed.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * Virtualized with search filter\n */\nconst optionItems = allCountries.map(([code, translatedName]) => (\n \n));\n\ntype Props = {\n opened?: boolean;\n};\n\nconst VirtualizedMultiSelect = function (props: Props): React.ReactElement {\n const [selectedValues, setSelectedValues] = React.useState>(\n [],\n );\n const [opened, setOpened] = React.useState(props.opened || false);\n\n return (\n \n \n {optionItems}\n \n \n );\n};\n\n/**\n * When there are many options, you could use a search filter in the\n * `MultiSelect`. The search filter will be performed toward the labels of the\n * option items. Note that this example shows how we can add custom styles to\n * the dropdown as well.\n */\nexport const VirtualizedFilterable: StoryComponentType = {\n name: \"Virtualized (isFilterable)\",\n render: () => ,\n};\n\n/**\n * When you need a fully custom-styled opener, use `CustomOpener`. It provides\n * a blank-slate `\n )}\n \n \n );\n};","description":"Sometimes we want to include Dropdowns inside a Modal, and these controls can be accessed only by scrolling down. This example help us to demonstrate that `SingleSelect` components can correctly be displayed within the visible scrolling area."},{"id":"packages-dropdown-singleselect--with-custom-opener","name":"With custom opener","snippet":"const WithCustomOpener = () => {\n const [selectedValue, setSelectedValue] = React.useState(\n args.selectedValue ?? \"\",\n );\n\n return (\n (\n \n \n \n {text}\n \n \n )}>\n {items}\n \n );\n};","description":"When you need a fully custom-styled opener, use `CustomOpener`. It provides a blank-slate `\n )}\n \n \n );\n },\n parameters: {\n chromatic: {\n // We don't need screenshots because this story can be tested after\n // the modal is opened.\n disableSnapshot: true,\n },\n },\n};\n\n/**\n * When you need a fully custom-styled opener, use `CustomOpener`. It provides\n * a blank-slate `