prompts.txt

==========Text: User==========
A hello world app.

==========Text: System==========
You are an expert at writing React components.
Your task is to refine one or more existing React components, according to the user's request.
You should only make use of pre-made library components to use in the task. Please make sure to only use the ones that are part of Fluent UI React version 9.
You will write the full React component code, which should include all imports. Your generated code will be directly written to a .tsx React component file and used in production.

==========Text: User==========
Multiple library components can be used while refining the existing examples in order to help you do a better design job, faster.

AVAILABLE LIBRARY COMPONENTS:

```
Accordion : An accordion allows users to toggle the display of content by expanding or collapsing sections;

Avatar : An Avatar is a graphical representation of a user, team, or entity.Avatar can display an image, icon, or initials, and supports various sizes and shapes;

AvatarGroup : An AvatarGroup is a graphical representation of multiple people associated with a given entity. AvatarGroup leverages the Avatar component, with each Avatar representing a person and containing their image, initials, or an icon. An AvatarGroup can be represented
in a spread, stack, or pie layout.Best Practices
DoUse partitionAvatarGroupItems when possible.Display all items, including inline AvatarGroupItems, inside AvatarGroupPopover when using a pie layout.Use the last AvatarGroupItems in the AvatarGroup as the inline items when using a spread or stack layout.Don'tUse more than 3 AvatarGroupItems inside an AvatarGroup with pie layout;

Badge : A badge is a visual decoration for UI elements.Different badges can display different content.Badge displays text and/or an iconCounterBadge displays numerical valuesPresenceBadge displays statusBest Practices
Badges should not receive focusBadge information should be surfaced as part of the control that it is associated with, because, badges themselves do not receive focus meaning they are not directly accessible by screen readers.
If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.Screen ReadersBadge content is exposed as text, and is treated by screen readers as if it were inline content of the control it is associated with. This should provide a reasonable default for most badges that contain plain text, such as the CounterBadge.There are two actions authors should consider taking when using Badge to improve this experience:If the badge contains a custom icon, that icon must be given alternative text with aria-label, unless it is purely presentational:[object Object]If the text of the badge itself is not sufficient to convey its meaning, it can either be given additional hidden text, or the parent element given an explicit label:<button>
  Inbox
  <Badge>6<span class=\"visuallyHidden\"> unread messages</span></Badge>
</button>

<button aria-label=\"Inbox, 6 unread messages\">
  Inbox
  <Badge>6</Badge>
</button>CopyBadge shouldn't rely only on color informationInclude meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included in the parent's label or description. Alternatively, mark up the Badge as an image with a label:[object Object],[object Object],[object Object],[object Object],[object Object]Text on BadgeBadges are intented to have short text, small numerical values or status information. Long text is not supported and should not be used within a Badge;

Counter Badge : A counter badge is a badge that displays a numerical count;

PresenceBadge : A presence badge is a badge that displays a status indicator such as available, away, or busy;

Button : A button triggers an action or event when activated.Best Practices
LayoutFor dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the
container.For single-page forms and focused tasks, left-align buttons with the container.Always place the primary button on the left, the secondary button just to the right of it.Show only one primary button that inherits theme color at rest state. If there are more than two buttons with
equal priority, all buttons should have neutral backgrounds.Don't use a button to navigate to another place; use a link instead. The exception is in a wizard where \"Back\" and
\"Next\" buttons may be used.Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that
performs the \"safe act\" and retains the content (such as \"Save\") or cancels the action (such as \"Cancel\").ContentUse sentence-style capitalization—only capitalize the first word. For more info, see
Capitalization in the Microsoft Writing Style Guide.Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb
is best. Include a noun if there is any room for interpretation about what the verb means.
For example, \"Delete folder\" or \"Create account\";

CompoundButton : A compound button is a button with an additional slot for secondary textual content.Since both primary and secondary textual contents are part of a compound button's name they should be kept concise.Best Practices
LayoutFor dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the
container.For single-page forms and focused tasks, left-align buttons with the container.Always place the primary button on the left, the secondary button just to the right of it.Show only one primary button that inherits theme color at rest state. If there are more than two buttons with
equal priority, all buttons should have neutral backgrounds.Don't use a button to navigate to another place; use a link instead. The exception is in a wizard where \"Back\" and
\"Next\" buttons may be used.Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that
performs the \"safe act\" and retains the content (such as \"Save\") or cancels the action (such as \"Cancel\").ContentUse sentence-style capitalization—only capitalize the first word. For more info, see
Capitalization in the Microsoft Writing Style Guide.Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb
is best. Include a noun if there is any room for interpretation about what the verb means.
For example, \"Delete folder\" or \"Create account\";

MenuButton : A menu button is a button with a chevron icon after the text typically used to trigger a menu.Best Practices
LayoutFor dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the
container.For single-page forms and focused tasks, left-align buttons with the container.Always place the primary button on the left, the secondary button just to the right of it.Show only one primary button that inherits theme color at rest state. If there are more than two buttons with
equal priority, all buttons should have neutral backgrounds.Don't use a button to navigate to another place; use a link instead. The exception is in a wizard where \"Back\" and
\"Next\" buttons may be used.Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that
performs the \"safe act\" and retains the content (such as \"Save\") or cancels the action (such as \"Cancel\").ContentUse sentence-style capitalization—only capitalize the first word. For more info, see
Capitalization in the Microsoft Writing Style Guide.Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb
is best. Include a noun if there is any room for interpretation about what the verb means.
For example, \"Delete folder\" or \"Create account\";

SplitButton : A split button is a button with a primary action and a secondary action primarily used for opening a menu.Best Practices
LayoutFor dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the
container.For single-page forms and focused tasks, left-align buttons with the container.Always place the primary button on the left, the secondary button just to the right of it.Show only one primary button that inherits theme color at rest state. If there are more than two buttons with
equal priority, all buttons should have neutral backgrounds.Don't use a button to navigate to another place; use a link instead. The exception is in a wizard where \"Back\" and
\"Next\" buttons may be used.Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that
performs the \"safe act\" and retains the content (such as \"Save\") or cancels the action (such as \"Cancel\").ContentUse sentence-style capitalization—only capitalize the first word. For more info, see
Capitalization in the Microsoft Writing Style Guide.Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb
is best. Include a noun if there is any room for interpretation about what the verb means.
For example, \"Delete folder\" or \"Create account\";

ToggleButton : A toggle button is a button that can be checked on and off.Best Practices
LayoutFor dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the
container.For single-page forms and focused tasks, left-align buttons with the container.Always place the primary button on the left, the secondary button just to the right of it.Show only one primary button that inherits theme color at rest state. If there are more than two buttons with
equal priority, all buttons should have neutral backgrounds.Don't use a button to navigate to another place; use a link instead. The exception is in a wizard where \"Back\" and
\"Next\" buttons may be used.Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that
performs the \"safe act\" and retains the content (such as \"Save\") or cancels the action (such as \"Cancel\").ContentUse sentence-style capitalization—only capitalize the first word. For more info, see
Capitalization in the Microsoft Writing Style Guide.Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb
is best. Include a noun if there is any room for interpretation about what the verb means.
For example, \"Delete folder\" or \"Create account\";

Card : A card is a container that holds information and actions related to a single concept or object, like a document or a contact.Cards can give information prominence and create predictable patterns. While they're very flexible, it's important to use them consistently for particular use cases across experiences.Best Practices
AccessibilityBy default, each card is of role=\"group\".Provide meaningful aria-label, aria-describedby and aria-labelledby whenever needed, specially for selectable cards;

CardFooter : The CardFooter component, used inside of a Card, uses a flex layout to organize actions the user can take with a Card, like sharing the contents or replying to a message;

CardHeader : The CardHeader component, used inside of a Card, represents a Fluent UI compliant card header;

CardPreview : The CardPreview component, used inside of a Card, allows the user to better visualize what the card's contents are;

Checkbox : Checkboxes give people a way to select one or more items from a group,
or switch between two mutually exclusive options (checked or unchecked);

Combobox : A combobox (Combobox) combines a text field and a dropdown giving people a way to select an option from a list or enter their own choice.Best Practices
DoConsider using Combobox with outline or underline appearances. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding color.Don'tDon’t place input on a surface which doesn’t have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements;

DataGrid : 💡 This component is a higher level extension of the Table primitive components and the useTableFeatures hook.
DataGrid is a feature-rich component that uses useTableFeatures internally,
so there should always be full feature parity with what can be
achieved with primitives. This component is opinionated and this is intentional. If the desired scenario can
be achieved easily and does not vary too much from documented examples, it can be very convenient. If the desired
scenario varies a lot from the documented examples please use the Table components with useTableFeatures (or
another state management solution of choice).⚠️ Feature requests will be accepted, but the team will prioritize overall API scalability and extensibility over
uncommon features and scenarios;

Dialog : Dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.Best Practices
DoDialog boxes consist of a header (DialogTitle), content (DialogContent), and footer (DialogActions), which should all be included inside a body (DialogBody).Validate that people’s entries are acceptable before closing the dialog. Show an inline validation error near the field they must correct.Modal dialogs should be used very sparingly—only when it’s critical that people make a choice or provide information before they can proceed. Thee dialogs are generally used for irreversible or potentially destructive tasks. They’re typically paired with an backdrop without a light dismiss.Add a aria-describedby attribute on DialogSurface pointing to the dialog content on short confirmation like dialogs.Add a aria-label or aria-labelledby attribute on DialogSurface if there is no DialogTitleDon'tDon't use more than three buttons between DialogActions.Don't open a Dialog from a DialogDon't use a Dialog with no focusable elementsAccessibility edge cases scenarios
Here are some accessibility edge cases scenarios we identified and users should keep in mind while using the Dialog components.NVDA reads dialog information twiceTalkback doesn't support dialog name/descriptionTalkback doesn't support alertdialogWhenever including a Menu, Combobox, Dropdown or Popover inside a dialog the property aria-modal should be false otherwise VoiceOver on IOS will not be able to access the popup.DialogSurface by default has aria-describedby=\"dialog-content-id\", which might not be ideal with complex DialogContent, on those scenarios (for example on with form), it is recommended to set aria-describedby={undefined;

Divider : A divider visually separates two pieces of content;

Dropdown : A Dropdown is a selection component composed of a button and a list of options. The button displays the current selected item or a placeholder, and the list is visible on demand by clicking the button. Dropdowns are typically used in forms.Best Practices
DoProvide a label for the Dropdown.Set the Option's value prop if the content contains JSX. The Option value is used for keyboard accessibility to enable users to type a letter or string and jump to the matching option. The value is calculated from the children by default, but if the Option contains JSX, the value prop should be used to directly provide a string value.Consider using Dropdown with outline or underline appearances. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding color.Don'tUse placeholder for label text. Placeholder text has lower contrast than label text, and disappears once an option is selected. If used, it should only contain temporary filler text.Accessibility
DoProvide a label for the Dropdown. This can be done either by using the DropdownField component with a label prop, or by using a custom labeling technique.Use Dropdown when you need JSX or styled options, otherwise use Select. For simple single-select use cases, consider using Select for better accessibility and mobile support.Use multi-select Dropdown when you have 10+ options, otherwise use a Checkbox group. For simple multiselect use cases with less than 10 options, consider using a group of Checkbox components.Set inlinePopup={true} when possible for better VoiceOver support. The inlinePopup prop will cause the listbox popup to be rendered immediately after the button in the DOM. Safari does not support aria-owns, so this enables iOS VoiceOver swipe navigation between the button and options.Review known accessiblity issues.Don'tDon't nest interactive controls in Dropdown slots or children. The Dropdown's button slot and children of <Option> components will not expose nested interactive elements to screen reader users, and additional non-Option children in the listbox slot will not be keyboard accessible.Don’t place the Dropdown button on a surface which doesn’t have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements. When using underline or outline styles, ensure the color of bottom border stroke has a sufficient contrast of greater than 3 to 1 against the immediate surrounding color.Read the Dropdown accessibility spec for more detailed information, as well as full descriptions of semantics and keyboard behavior.;

Field : Field adds a label, validation message, and hint text to a control.Best Practices
DoUse Field to add a label and validation message to form controls.Use Field to label other unlabeled controls like ProgressBar.Don'tAvoid including both a validationMessage and hint text.Don't add multiple controls as a child of a single Field. The label is only associated with one control.Don't use the Field's label with Checkbox. Use the Checkbox's label instead (the Field can still be used to add a validationMessage or hint);

FluentProvider : The FluentProvider transforms a passed theme to CSS variables and passes other settings to Fluent UI components;

Image : An image displays graphical content such as a photo or illustration.Best Practices
DoProvide descriptive, accurate and concise description for alt attribute in order to be accessible to screen readers.The alt description should also include and consider the context where the image fits in.Decorative images should be excluded for assistive tools, thus adding role=\"presentation\" or aria-hidden=\"true\".Don'tDon't include \"image of\", \"picture of\" etc. in the alt attribute since it is redundant.Don't repeat the same information that is already on the page on the alt attribute;

InfoLabel : An InfoLabel is a Label with an InfoButton at the end, properly handling layout and accessibility properties.
It can be used as a drop-in replacement for Label when an InfoButton is also needed.Best Practices
Don'tBecause the Popover isn't always visible, don't include information in the info prop that people must know in order to complete the field.InfoButton/InfoLabel Pattern decision
What is an InfoLabel?An InfoLabel is composed of two components and a wrapper. The main component is a Label and the secondary component is an InfoButton.
We packaged both components to be able to achieve the correct accessibility out of the box. We automatically link the label to the
button from the InfoButton component and apply aria-owns to the wrapper when the InfoButton's Popover is open. In addition, InfoLabel
allows you to render only the InfoButton if that's desired. The reason why we don't export InfoButton separately is to avoid having
issues with aria-owns. The PopoverSurface must be linked to the wrapper of the InfoButton when open, not doing so results in a
violation.What is the InfoButton pattern?The InfoButton pattern is a button that exposes additional information about a field or a concept. To trigger the Popover, the user may
activate the button by clicking on it and focusing on it and pressing enter or space. When the Popover is open, the focus is programmatically moved
to the PopoverSurface. To close the Popover, the user may click the button again, click outside the popover, press the escape key, or tab out of
the PopoverSurface.Why is focus moved to the PopoverSurface?The reason why we move focus to the PopoverSurface is to allow the user to navigate the Popover with the keyboard. This allows screen reader and keyboard
users to read the content and interact with it without having to use the mouse and not have unreachable content. We move the focus specifically to the
PopoverSurface and not the first focusable element because there might be a case where there's a paragraph of text and the first focusable element is at the
bottom of the Surface. In this case, a screen reader user might not know there's more content above and therefore miss it.Can the InfoButton be opened on focus and not move focus to the PopoverSurface?InfoButtons can not be opened on focus. The pattern where you have an icon and a tooltip that appears on focus is not the InfoButton pattern. The tooltip
pattern is meant to have short text and no interaction with the content. We believe that if the content is short or even a few words, it should be included
in the label or a secondary label. If the content is longer and/or has interaction, then it must be an InfoButton.If the tooltip + icon pattern is still needed, refer to the Icon example in tooltip on how to correctly achieve this pattern. Note that when using a
tooltip, the content must be short and not have interaction.;

Input : Input allows the user to enter and edit text.Best Practices
DoConsider using Input with underline or outline appearances. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.Don'tDon't place input on a surface which doesn't have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements;

Label : A label provides a name or title for an input;

Link : Links allow users to navigate between different locations. They can be used as standalone controls or inline with text;

Menu : A menu displays a list of actions. The Menu component handles the
state management of the passed in list of actions.See also MenuButtonBest Practices
DoUse MenuTrigger as the first child of Menu.Use MenuList as the only child of MenuPopover.Create nested menus as separate components.Use the hasIcons prop for alignment if only some menu items have icons.Use the hasCheckmarks prop for alignment if only some menu items are selectable.Use MenuItemLink if the menu item should navigate to a new pageDon'tDon't render focusable or clickable items inside menu items.Don't use more than 2 levels of nested menus.Don't use verbose secondary content for menuitems.Don't mix checkboxes and radio items without MenuGroup;

MenuList : A menu list displays a list of actions. It is usually rendered inside of the Menu component;

MessageBar : Communicates important information about the state of the entire application or surface.
For example, the status of a page, panel, dialog or card. The information shouldn't require someone
to take immediate action, but should persist until the user performs one of the required actions.Best Practices
DoUse MessageBar components inside MesssageBarGroupInclude a dismiss button as the container actionReduce number of actions in the MessageBarUse preset intentsDon'tUse enter animations on page loadUse manual layout if possible - this is a built-in featureUse long messages for content - keep content to under 100 charactersCustomize announcement politeness - check with your a11y cham;

Overflow : The Overflow and OverflowItem components, are low level utilities that enable users to create overflow
experiences with any component. The components will detect and hide overflowing elements in DOM and manage
the overflow state. Additional overflow hooks can be used to handle overflowing items. In the reference
examples below the overflowing items are handled using a Menu.Additional hooks will be needed to create your specific overflow scenario. Please refer to the reference implementations
below, which will use the additional utilities:useOverflowMenu- returns a ref that registers and overflow menu element.useIsOverflowItemVisible- returns whether an overflow item is visible.useOverflowCount- returns the number of overflowing items.useOverflowGroupVisible- return the visibility of an overflow group;

Persona : A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, or an Avatar with a PresenceBadge;

Popover : A popover displays content on top of other content.Best Practices
Best practicesDoUse the trapFocus prop when focusable elements are in the Popover.Create nested Popovers as separate components.Use Popover to reduce screen clutter to host non-essential information.Don'tDon't use more than 2 levels of nested Popovers.Don't use Popovers to display too much content, consider if that content should be on the main page;

Portal : A portal renders content outside of a DOM tree, at the end of the document.This allows content to escape traditional boundaries caused by \"overflow: hidden\" CSS rules and keeps it on the top without using z-index rules.
This is useful for example in Menu and Tooltip scenarios, where the content should always overlay everything else.Portal component is a thin wrapper around React's ReactDOM.createPortal();

ProgressBar : A Progress provides a visual representation of content being loaded or processed.import { ProgressBar } from '@fluentui/react-components';Best practicesDoUse an indeterminate ProgressBar when the total units to completion is unknownProvide a clear description of the progress operationShow text above and/or below the barCombine steps of a single operation into one barUse Field to add a validationMessage and hint message for the indeterminate ProgressBar when reduced-motion is activeDon'tUse only a single word descriptionShow text to the right or left of the bar'Rewind' progress to show new step;

RadioGroup : RadioGroup lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space. For more than 5 choices, consider using a different component such as Dropdown.Best Practices
DoGive people a choice.
Make sure to give people the option to not make a choice. For example, include a \"None\" option if no answer is required.Choose a default.
Select the safest, most secure, and private option as the default. If safety and security aren't factors, select the most likely or convenient option.Keep labels short and action-oriented.
Use a phrase for the label, rather than a full sentence.Use sentence case.
Capitalize only the first word as you would in a sentence.Place most likely choices first.
List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Listing options in alphabetical order isn't recommended because the order will change when the text is localized.Don'tInclude more than 5 options.
Use RadioGroup when there are 2-5 options, and you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use Dropdown;

Select : A Select allows one option to be selected from multiple options. The Select component is a wrapper around the native <select> element.Best Practices
DoConsider using Select with underline or outline appearances. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.Don'tDon’t place Select on a surface which doesn’t have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements;

Skeleton : The Skeleton component is a temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI.Best practicesDoUse Skeleton to help ease a UI transition when we know the service will potentially take a longer amount of time to retrieve the data.Provide widths for each of the Skeleton elements you used to build a skeleton layout looking as close as possible to real content it is replacing.Add aria-busy to the top-level node of the loading container.Use Skeleton if you know the UI loading time is longer than 1 second.Don'tBuild Skeleton UI with a lot of details. Circles and rectangles are really as detailed as you want to get. Adding more detail will result in confusion once the UI loads.Use Skeleton if you are confident that the UI will take less than a second to load;

Slider : A Slider represents an input that allows user to choose a value from within a specific range.Best Practices
LayoutDon't use a slider for binary settings.Don't use a continuous slider if the range of values is large.Don't use for a range with fewer than three values.Sliders are typically horizontal but can be vertical, when needed.ContentUse step points if you don't want the slider to allow arbitrary values between minimum and maximum;

SpinButton : SpinButtons are used to allow numerical and non-numerical input bounded between minimum and maximum values with buttons to increment and decrement the input value.
Values can also be manipulated via the keyboard.Best practices
DoConsider using SpinButton with underline or outline appearances. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.Don'tDon’t place SpinButton on a surface which doesn’t have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements;

Spinner : A spinner alerts a user that content is being loaded or processed and they should wait for the activity to complete.Best Practices
DoIf your Spinner is the only element on the page, set tabIndex={0} on it to allow it to be picked up by screen readers.Use a Spinner when a task is not immediate.Use one Spinner at a time.Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating.Use a Spinner when confirming a change has been made or a task is being processed.Add a description to a Spinner when reduced-motion is activeDon'tDon’t use a Spinner when performing immediate tasks.Don't show multiple Spinners at the same time.Don't include more than a few words when paired with a Spinner;

Switch : A switch represents a physical switch that allows someone to choose between two mutually exclusive options. For example, \"On/Off\" and \"Show/Hide\". Choosing an option should produce an immediate result.Best Practices
LayoutWhen people need to perform extra steps for changes to take effect, use a check box instead. For example, if they must click a \"Submit\", \"Next\", or \"OK\" button to apply changes, use a check box.ContentOnly replace the On/Off labels if there are more specific labels for the setting. For example, you might use Show/Hide if the setting is \"Show images\".Keep descriptive text short and concise—two to four words; preferably nouns. For example, \"Focused inbox\" or \"WiFi\";

Table : 💡 This component is considered low-level and should be used when there is a need for more customization and
support for non-standard features. Please check out the DataGrid component
if you don't need lots of customization and rely on common features. There is less work involved and you will benefit
from first class Microsoft design and accessibility support.A Table displays sets of two-dimensional data. The primitive components can be fully customized to support different
feature sets. The library provides a default useTableFeatures hook that handles the business logic and state management of common
features. There is no obligation to use our hook with these components, we've created it for convenience.The useTableFeatures hook was designed with feature composition in mind. This means that they are composed using
plugins hooks such as useTableSort and useTableSelection as a part of useTableFeatures. This means
that as the feature set expands, users will not need to pay the bundle size price for features that they do not intend
to use. Please consult the usage examples below for more details.⚠️ Once there is any kind of keyboard navigation on the component it must follow the
aria role=\"grid\" patter;

TabList : A tab list provides single selection from tabs. When a tab is selected, the application displays content associated with the selected tab and hides other content.Each tab typically contains a text header and often includes an icon.Best Practices
DoUse on content-heavy pages that require a significant amount of scrolling to access the various sections.Be concise on the tab names, ideally one or two words rather than a phrase.When tabs have icons but not text labels, use aria-label to describe the tab.Don'tUse a tab to open a new page or take other actions than showing content.Use a tab list for routed navigation in an application;

InteractionTag : A InteractionTag follows the same characteristics as a Tag, but with the added functionality of having a primary and secondary action. This is mostly used in scenarios where gaining more context for a InteractionTag is available for the user, an example would be clicking into a persona to expand their profile page.Best practicesDoTo group multiple tags together, use TagGroup. TagGroup can handle dismiss of multiple InteractionTag.InteractionTagSecondary should provide information to screen readers about the secondary action using aria-label or aria-labelledby.Recommended: use a brief aria-label, such as 'remove'. By default, the InteractionTagSecondary component includes an aria-labelledby attribute. This attribute combines the id values from both the InteractionTagPrimary and InteractionTagSecondary components, allowing for a complete accessible name for InteractionTagSecondary.⚠️ If you assign a custom id to InteractionTagPrimary, you'll need to also specify a custom aria-labelledby for InteractionTagSecondary.Another option: If you want to provide a custom accessible name on InteractionTagSecondary that already contains the necessary information from InteractionTagPrimary, you can use the aria-label attribute and set aria-labelledby to null.Don'tDon't use InteractionTag for tags without a primary action. Use Tag in such cases.Don't use media together with icon on one InteractionTag;

Tag : A Tag provides a visual representation of an attribute, person, or asset.Best practicesDoTo group multiple tags together, use TagGroup. TagGroup can handle dismiss of multiple Tag.Dismissible Tag should provide information to screen readers about the dismiss action. There are two ways to label the tag:option 1 - add aria-label on dismiss icon, for example dismissIcon={{ 'aria-label': 'remove' }}. The accessible name of the Tag will be computed.option 2 - add aria-label with the information about dismiss on Tag itself, and the dismiss icon should be hidden from accessibility tree using dismissIcon={{ role: 'presentation' }}Don'tDon't change the interaction on a Tag because it should only be dismissible. Instead, use InteractionTag if you need a different type of interaction.Don't use media together with icon on one Tag;

TagGroup : A TagGroup is a container for multiple controls that are Tag or InteractionTag.Best practicesDoA Picker component is planned for displaying multiple selected values using TagGroup with Combobox, and will be the recommended approach once it's available. But for now, when using TagGroup with Combobox:Set the listbox role for TagGroup and the option role for each Tag.If using InteractionTag, set the option role for the content and make the dismiss button not focusable. When content is focused, Enter/Space should invoke the primary action, and Backspace/Delete remove the tag.When using TagGroup with non-actionable Tag (i.e. Tag without dismiss icon), set the list role for TagGroup and the listitem role for each Tag;

Text : Typography and styling abstraction component used to ensure consistency and standardize text throughout your application.Best Practices
DoUse Text whenever you need to display stylized textUse Text to display read-only textUse the as prop to give the text a semantic meaning. By default, the Text component will result in a span element;

Textarea : Textarea allows the user to enter and edit multiline text.Best Practices
DoConsider using Textarea with outline appearance. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.Prefer using <Field> instead of <Label> to handle accessibility automatically.When changing height related styles, apply them directly to the textarea slot like this: <Textarea textarea={{ className: yourClassName }} />. This is needed due to the structure of the Textarea being a span wrapping the textarea native element and resizing based on the textarea element. It is also important to note that we add a default maxHeight so when typing text, a scrollbar will appear when the text becomes too long for the size of the Textarea. To remove this constraint, resetting the maxHeight prevents this issue as well as letting the textarea wrapper fully resize based on the textarea's size.Don'tDon’t place Textarea on a surface which doesn't have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements;

Toast : A Toasts displays temporary content to the user. Toasts are rendered as a separate surface that can be dismissed by
user action or a application timeout. Toasts are typically used in the following situations:Update the user on the status of a taskDisplay the progress of a taskNotify the user to take an actionNotify the user of an application updateWarn the user of an errorThe Fluent UI Toast component uses an imperative API. Once a Toaster has been rendered, you can use the
useToastController hook to get access to imperative methods to dispatch a Toast. The Toast component itself
is simply a layout component.⚠️ In order for notifications that use toast to be fully accessible, developers should include make the notifications
available on a permanent surface too. One of the ways to do this in an application is to implement a notification
centre.Best practicesDoConfigure defaults on the ToasterUse the toast for non-critical messagesLet the user view the toast content in the application after the toast dismissedCreate a keyboard shortcut to move focus to actionable toastsUse politeness setting to differentiate urgent and non-urgent messagesDon'tRender too many toasts at onceUse different positions for toastsUse more than one Toaster in an applicationMake every toast have assertive politenes;

Toolbar : A toolbar is a container for grouping a set of controls, such as buttons, menu buttons, or checkboxes.Best Practices
Use toolbar as a grouping element only if the group contains 3 or more controls. Refer to 'toolbar aria practices' for details.Label each toolbar when the application contains more than one toolbar (using aria-label or aria-labelledby props). Refer to toolbar(role) for details;

Tooltip : A tooltip displays additional information about another component.
The information is displayed above and near the target component.
Tooltip is not expected to handle interactive content.
If this is necessary behavior, an expand/collapse button + popover should be used instead.
Hover or focus the buttons in the examples to see their tooltips;

Tree : A hierarchical list structure component for displaying data in a collapsible and expandable way.Use this component when you need to present your users with a clear visual structure of content or data, allowing them to efficiently interact and navigate through the information. If the information is less hierarchical or node-based, consider using a list or table instead.Best Practices
DoDo use the Tree component to create a nested tree structure: When your data naturally follows a hierarchical parent-child relationship, the Tree component provides a clean and intuitive way to represent this structure. If a more complex interaction with a Tree is required, use FlatTree component instead: In scenarios where you need to efficiently manipulate or handle large amounts of hierarchical data, the FlatTree component can offer performance benefits.Use custom styles if the tree needs to support more than 10 levels of nesting: Depending on your design and data requirements, you may need to adjust the styling of the tree elements to accommodate deeper nesting levels. See inline styling tree item level for more information.Use the aria-label attribute on the root of the Tree component to provide an accessible name for the tree: This attribute helps screen readers to understand the purpose of the tree, making it more accessible and inclusive.Ensure continuity of keyboard navigation when manipulating tree items: When adding or removing items, take necessary measures to prevent unexpected focus loss. The user's active focus should remain logical and intuitive throughout interactions.If you provide additional functionality within tree items actions slot, make them accessible with a context menu:Make actions or additional functionality in tree items accessible with a context menu:⚠️ actions slot do not adhere to keyboard navigation standards! Use aria-description or aria-describedby on tree items to indicate this interaction, you should explain your user how to interact with actions slot.the actions slot will have role=\"toolbar\" and are accessible with horizontal keyboard navigation using `useArrowNavigationGroup` by default.Use aria-selected=true once a treeitem is selected in custom behaviors Some tree utilization might use the selection feature for navigation purposes, in this case, the aria-selected attribute should be set to true once the treeitem is the current active item to indicate that it is selected for the navigation.Accessibility edge cases scenarios
Here are some accessibility edge cases scenarios we identified and users should keep in mind while using the Tree components.NVDASingle select tree - narration of grouping #15290Single select tree - narration aria-selected makes verbosity with redundant \"selected\" #15289VoiceOver/ChromiumIssue 1273540: Tree as table in Mac > VoiceOver narrates \" 0 items enclosed \" when user navigates to expaded treeitemIssue 1273544: Tree as table in Mac > VoiceOver doesn't narrate aria-labelledby element on treeitemIssue 1377818: Tree - Treeitem - Accessibility name received from content includes the aria-hidden button nameVoiceOverBug 8223307: VoiceOver doesn't narrate level of treeBug 8223375: VoiceOver doesn't list tree/table in the rotor
iOSBug 8232232: iOS : VoiceOver - Select tree with checkboxes - no narration of ticket/unticked stateJAWSTreeview - JAWS doesn't narrate position for each tree item #338JAWS doesn't narrated \"toolbar\" keyword in navigable treeitem with actions buttons #747
NarratorBug 45975192: Single select tree - narration aria-selected makes verbosity with redundant \"selected\"Bug 46020629: Select tree with checkboxes - no narration of checked stateBug 46020726: Select tree with checkboxes - no able to toggle check state with space in scan mod;

Breadcrumb : Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page's location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy.Navigational breadcrumbs can also provide one-click access to higher levels of that hierarchy.Best Practices
DoPlace Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.Provide label to the Breadcrumb component using aria-label or aria-labelledby prop.Set the current prop on the last item.If long items are truncated, add a Tooltip to display the full text.Don'tDon't use Breadcrumbs as a primary way to navigate an app or site.Avoid using custom dividers.Do not wrap breadcrumb items;

Drawer : The Drawer gives users a quick entry point to configuration and information. It should be used when retaining context is beneficial to users.There are three main components to represent a Drawer:OverlayDrawer: An overlay Drawer renders on top of the whole page. By default blocks the screen and will require the user's full attention. Uses Dialog component under the hood.InlineDrawer: An inline Drawer renders within a container and can be placed next to any content.Drawer: A combination of OverlayDrawer and InlineDrawer. Used when toggling between the two modes is necessary. Often used for responsiveness.Best practices
OverlayDrawer vs InlineDrawer vs DrawerOverlayDrawer: Should be used only when the full user attention is required. Uses Dialog component under the hood.InlineDrawer: Should be used when its content do not require full attention or for navigational elements on a page.Drawer: Should only be used when there is a strict need to toggle between overlay and inline modes. This is often useful for responsive design, so depending on the page viewport an inline drawer could become overlay to save screen space. Drawer is a component that combines both OverlayDrawer and InlineDrawer. Although it is technically possible to use Drawer for either inline or overlay modes, it is far better to import and use its adequate component. As an example, in case there is the need to only use the inline mode, it is better to use <InlineDrawer /> instead of a <Drawer mode=\"inline\" />. Drawer would use InlineDrawer internally, but also include OverlayDrawer in the mix. And as the OverlayDrawer has a strong dependency on Dialog component, more code would be included in the final build bundle.AccessibilityOverlayDrawer: Please refer to the Dialog component to understand the accessibility recommendations and implications.InlineDrawer: Renders a plain div and do not imply any A11y tags or attributes by default. It accepts all aria attributes and it should be customized depending on its context within a page

⚠️ Preview components are considered unstable:import { Drawer } from '@fluentui/react-components/unstable';CopyFeatures and APIs may change before final releasePlease contact us if you intend to use this in your produc;

SearchBox :

⚠️ Preview components are considered unstable:import { SearchBox } from '@fluentui/react-search-preview';CopyFeatures and APIs may change before final releasePlease contact us if you intend to use this in your productThe SearchBox component allows the users to access information with ease, providing flexibility and the ability to clear and filter the search.Best practicesDoConsider wrapping SearchBox in a role=\"search\" container for top-level site or app search fields. This role exposes the search field as a landmark, and makes it easier to find for screen reader users. It should not be used unless the SearchBox is the primary search area for the entire site or app.Consider using SearchBox with underline or outline appearances. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.Don'tDon't place SearchBox on a surface which doesn't have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements;

TimePicker : TimePicker offers a control that’s optimized for selecting a time from a drop-down list or using free-form input to enter a custom time.Note: TimePicker is a compat component - its internal architecture does not follow all the principles regular Fluent UI v9 components follow - it is not composed of atomic hooks and it might be more difficult to tweak its appearance and behavior. It however follows Fluent 2 design and uses design tokens, it is production ready and it is stable.Best practicesDoDon';

Virtualizer :

⚠️ Preview components are considered unstable:import { Virtualizer } from '@fluentui/react-components/unstable';CopyFeatures and APIs may change before final releasePlease contact us if you intend to use this in your produc;

VirtualizerScrollView :

⚠️ Preview components are considered unstable:import { VirtualizerScrollView } from '@fluentui/react-components/unstable';CopyFeatures and APIs may change before final releasePlease contact us if you intend to use this in your produc;

VirtualizerScrollViewDynamic :

⚠️ Preview components are considered unstable:import { VirtualizerScrollViewDynamic } from '@fluentui/react-components/unstable';CopyFeatures and APIs may change before final releasePlease contact us if you intend to use this in your produc;
```

==========Text: User==========
USER QUERY :

```
A hello world app.
```

Design the new React web component task for the user as the creative genius you are

==========Text: Function==========
{"new_component_name":"HelloWorld","new_component_description":"A simple Hello World component that displays a greeting message to the user.","use_library_components":[{"library_component_name":"Text","library_component_usage_reason":"To display the greeting message."}]}{"new_component_name":"HelloWorld","new_component_description":"A simple Hello World component that displays a greeting message to the user.","use_library_components":[{"library_component_name":"Text","library_component_usage_reason":"To display the greeting message."}]}
{
name: "HelloWorld",
description: {
by_user: "A hello world app.",
by_llm: "A simple Hello World component that displays a greeting message to the user."
},
library_components: [
{
name: "Text",
usage: "To display the greeting message."
}
]
}

==========Text: Human==========
Please try refining the following example instead of coming up with a solution of your own:

```tsx
import React from \"react\";
import { Text, makeStyles, shorthands } from \"@fluentui/react-components\";

const useStyles = makeStyles({
  container: {
    display: \"grid\",
    justifyContent: \"center\",
    alignItems: \"center\",
    ...shorthands.gap(\"16px\"),
    ...shorthands.margin(\"50px\"),
  },
  text: {
    textAlign: \"center\",
  },
});

const HelloWorldApp = () => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <Text className={classes.text}>Hello, World!</Text>
      <Text className={classes.text}>Using Fluent UI React v9!</Text>
    </div>
  );
};

export default HelloWorldApp;

```

==========Text: Human==========

- COMPONENT NAME: HelloWorld

- COMPONENT DESCRIPTION:

```
A hello world app.
```

- additional component suggestions:

```
A simple Hello World component that displays a greeting message to the user.
```

Write the full code for the new React web component, which uses makeStyles for styling, and optionally, library components, based on the provided design task.
The full code of the new React component that you write will be written directly to a .tsx file inside the React project. Make sure all necessary imports are done, and that your full code is enclosed with tsx``` blocks. Answer with generated code only, DO NOT ADD ANY EXTRA TEXT DESCRIPTION OR COMMENTS BESIDES THE CODE. YOUR ANSWER CONTAINS CODE ONLY ! COMPONENT CODE ONLY !
Important:

- DO NOT USE LIBRARIES OR IMPORTS OUTSIDE OF WHAT IS PROVIDED IN THIS TASK; otherwise it would crash the component because not installed. DO NOT IMPORT EXTRA LIBRARIES BESIDES WHAT IS PROVIDED ABOVE!
- DO NOT HAVE ANY DYNAMIC DATA! Components are meant to be working as is without supplying any variable to them when importing them ! ONLY WRITE A COMPONENT THAT RENDER DIRECTLY WITH PLACEHOLDERS AS DATA, COMPONENT NOT SUPPLIED WITH ANY DYNAMIC DATA.
- Only write the code for the component; Do not write extra code to import it! The code will directly be stored in an individual React .tsx file, so make sure to provide a default export!!
  Write the React component code as the creative genius and React component genius you are - with good ui formatting.
  Make sure to use makeStyles shorthands correctly for styling purposes.