@preply/ds-docs 8.0.0 → 8.1.0

package/dist/assets/NativeSelectField.stories-a3kuRP77.js

@@ -0,0 +1,295 @@
+import{r as V,g as me,j as t}from"./iframe-Bqhe7wZw.js";import{F as ce}from"./TokyoUILanguage-CKT6G-hS.js";import{I as D}from"./Icon-WyYz69YA.js";import{F as he}from"./FormControl-BLXEVBx7.js";import{F as ge}from"./TokyoUIChevronDown-DVjyTqN8.js";import{I as Ee,s as He}from"./InputContainer-kefs6DXh.js";import{w as pe}from"./componentNames-CmmTyjin.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-CPEkSAkL.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-DCiBrDQC.js";import"./index-Bs4_IdoP.js";import"./message-CIDvwUOa.js";const L=V.forwardRef(function({dataset:e,onChange:a,onValueChange:u,icon:s,children:i,placeholder:m,...o},c){const[C,S]=V.useState(!o.value&&!o.defaultValue),T=me(e),M=o.value===void 0?{defaultValue:o.defaultValue||""}:{value:o.value},I=f=>{a==null||a(f),u==null||u(f.target.value),S(!f.target.value)};return t.jsx(Ee,{icon:s,trailingIcon:t.jsx(D,{svg:ge}),children:t.jsxs("select",{...T,...o,...M,onChange:I,ref:c,className:He.input,"data-empty":C,children:[typeof m=="string"&&t.jsx("option",{value:"",disabled:o.required,children:m}),i]})})});try{L.displayName="NativeSelect",L.__docgenInfo={description:`A component to render a select with optional icon.
+For internal use only.`,displayName:"NativeSelect",props:{autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},form:{defaultValue:null,description:"",name:"form",required:!1,type:{name:"enum",value:[{value:"string"}]}},multiple:{defaultValue:null,description:"",name:"multiple",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"},{value:"number"},{value:"readonly string[]"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLSelectElement>"}]}},defaultChecked:{defaultValue:null,description:"",name:"defaultChecked",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"},{value:"number"},{value:"readonly string[]"}]}},suppressContentEditableWarning:{defaultValue:null,description:"",name:"suppressContentEditableWarning",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},suppressHydrationWarning:{defaultValue:null,description:"",name:"suppressHydrationWarning",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accessKey:{defaultValue:null,description:"",name:"accessKey",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:"string & {}"},{value:'"none"'},{value:'"off"'},{value:'"on"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'}]}},autoFocus:{defaultValue:null,description:"",name:"autoFocus",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"enum",value:[{value:"string"}]}},contentEditable:{defaultValue:null,description:"",name:"contentEditable",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"inherit"'},{value:'"false"'},{value:'"true"'},{value:'"plaintext-only"'}]}},contextMenu:{defaultValue:null,description:"",name:"contextMenu",required:!1,type:{name:"enum",value:[{value:"string"}]}},dir:{defaultValue:null,description:"",name:"dir",required:!1,type:{name:"enum",value:[{value:"string"}]}},draggable:{defaultValue:null,description:"",name:"draggable",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},enterKeyHint:{defaultValue:null,description:"",name:"enterKeyHint",required:!1,type:{name:"enum",value:[{value:'"search"'},{value:'"enter"'},{value:'"done"'},{value:'"go"'},{value:'"next"'},{value:'"previous"'},{value:'"send"'}]}},hidden:{defaultValue:null,description:"",name:"hidden",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},lang:{defaultValue:null,description:"",name:"lang",required:!1,type:{name:"enum",value:[{value:"string"}]}},nonce:{defaultValue:null,description:"",name:"nonce",required:!1,type:{name:"enum",value:[{value:"string"}]}},slot:{defaultValue:null,description:"",name:"slot",required:!1,type:{name:"enum",value:[{value:"string"}]}},spellCheck:{defaultValue:null,description:"",name:"spellCheck",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"enum",value:[{value:"CSSProperties"}]}},tabIndex:{defaultValue:null,description:"",name:"tabIndex",required:!1,type:{name:"enum",value:[{value:"number"}]}},title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"enum",value:[{value:"string"}]}},translate:{defaultValue:null,description:"",name:"translate",required:!1,type:{name:"enum",value:[{value:'"no"'},{value:'"yes"'}]}},radioGroup:{defaultValue:null,description:"",name:"radioGroup",required:!1,type:{name:"enum",value:[{value:"string"}]}},role:{defaultValue:null,description:"",name:"role",required:!1,type:{name:"enum",value:[{value:"string & {}"},{value:'"none"'},{value:'"table"'},{value:'"article"'},{value:'"button"'},{value:'"dialog"'},{value:'"figure"'},{value:'"form"'},{value:'"img"'},{value:'"link"'},{value:'"main"'},{value:'"menu"'},{value:'"menuitem"'},{value:'"option"'},{value:'"search"'},{value:'"switch"'},{value:'"list"'},{value:'"row"'},{value:'"alert"'},{value:'"alertdialog"'},{value:'"application"'},{value:'"banner"'},{value:'"cell"'},{value:'"checkbox"'},{value:'"columnheader"'},{value:'"combobox"'},{value:'"complementary"'},{value:'"contentinfo"'},{value:'"definition"'},{value:'"directory"'},{value:'"document"'},{value:'"feed"'},{value:'"grid"'},{value:'"gridcell"'},{value:'"group"'},{value:'"heading"'},{value:'"listbox"'},{value:'"listitem"'},{value:'"log"'},{value:'"marquee"'},{value:'"math"'},{value:'"menubar"'},{value:'"menuitemcheckbox"'},{value:'"menuitemradio"'},{value:'"navigation"'},{value:'"note"'},{value:'"presentation"'},{value:'"progressbar"'},{value:'"radio"'},{value:'"radiogroup"'},{value:'"region"'},{value:'"rowgroup"'},{value:'"rowheader"'},{value:'"scrollbar"'},{value:'"searchbox"'},{value:'"separator"'},{value:'"slider"'},{value:'"spinbutton"'},{value:'"status"'},{value:'"tab"'},{value:'"tablist"'},{value:'"tabpanel"'},{value:'"term"'},{value:'"textbox"'},{value:'"timer"'},{value:'"toolbar"'},{value:'"tooltip"'},{value:'"tree"'},{value:'"treegrid"'},{value:'"treeitem"'}]}},about:{defaultValue:null,description:"",name:"about",required:!1,type:{name:"enum",value:[{value:"string"}]}},content:{defaultValue:null,description:"",name:"content",required:!1,type:{name:"enum",value:[{value:"string"}]}},datatype:{defaultValue:null,description:"",name:"datatype",required:!1,type:{name:"enum",value:[{value:"string"}]}},inlist:{defaultValue:null,description:"",name:"inlist",required:!1,type:{name:"any"}},prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"enum",value:[{value:"string"}]}},property:{defaultValue:null,description:"",name:"property",required:!1,type:{name:"enum",value:[{value:"string"}]}},rel:{defaultValue:null,description:"",name:"rel",required:!1,type:{name:"enum",value:[{value:"string"}]}},resource:{defaultValue:null,description:"",name:"resource",required:!1,type:{name:"enum",value:[{value:"string"}]}},rev:{defaultValue:null,description:"",name:"rev",required:!1,type:{name:"enum",value:[{value:"string"}]}},typeof:{defaultValue:null,description:"",name:"typeof",required:!1,type:{name:"enum",value:[{value:"string"}]}},vocab:{defaultValue:null,description:"",name:"vocab",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoCorrect:{defaultValue:null,description:"",name:"autoCorrect",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoSave:{defaultValue:null,description:"",name:"autoSave",required:!1,type:{name:"enum",value:[{value:"string"}]}},color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemProp:{defaultValue:null,description:"",name:"itemProp",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemScope:{defaultValue:null,description:"",name:"itemScope",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},itemType:{defaultValue:null,description:"",name:"itemType",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemID:{defaultValue:null,description:"",name:"itemID",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemRef:{defaultValue:null,description:"",name:"itemRef",required:!1,type:{name:"enum",value:[{value:"string"}]}},results:{defaultValue:null,description:"",name:"results",required:!1,type:{name:"enum",value:[{value:"number"}]}},security:{defaultValue:null,description:"",name:"security",required:!1,type:{name:"enum",value:[{value:"string"}]}},unselectable:{defaultValue:null,description:"",name:"unselectable",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},inputMode:{defaultValue:null,description:`Hints at the type of data that might be entered by the user while editing the element or its contents
+@see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}`,name:"inputMode",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"text"'},{value:'"search"'},{value:'"email"'},{value:'"tel"'},{value:'"url"'},{value:'"numeric"'},{value:'"decimal"'}]}},is:{defaultValue:null,description:`Specify that a standard HTML element should behave like a defined custom built-in element
+@see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}`,name:"is",required:!1,type:{name:"enum",value:[{value:"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",required:!1,type:{name:"enum",value:[{value:"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",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"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
+presented if they are made.`,name:"aria-autocomplete",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"list"'},{value:'"inline"'},{value:'"both"'}]}},"aria-braillelabel":{defaultValue:null,description:`Defines a string value that labels the current element, which is intended to be converted into Braille.
+@see aria-label.`,name:"aria-braillelabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-brailleroledescription":{defaultValue:null,description:`Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
+@see aria-roledescription.`,name:"aria-brailleroledescription",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-busy":{defaultValue:null,description:"",name:"aria-busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-checked":{defaultValue:null,description:`Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+@see aria-pressed
+@see aria-selected.`,name:"aria-checked",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'},{value:'"mixed"'}]}},"aria-colcount":{defaultValue:null,description:`Defines the total number of columns in a table, grid, or treegrid.
+@see aria-colindex.`,name:"aria-colcount",required:!1,type:{name:"enum",value:[{value:"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.
+@see aria-colcount
+@see aria-colspan.`,name:"aria-colindex",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-colindextext":{defaultValue:null,description:`Defines a human readable text alternative of aria-colindex.
+@see aria-rowindextext.`,name:"aria-colindextext",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-colspan":{defaultValue:null,description:`Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+@see aria-colindex
+@see aria-rowspan.`,name:"aria-colspan",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-controls":{defaultValue:null,description:`Identifies the element (or elements) whose contents or presence are controlled by the current element.
+@see aria-owns.`,name:"aria-controls",required:!1,type:{name:"enum",value:[{value:"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",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"time"'},{value:'"step"'},{value:'"false"'},{value:'"true"'},{value:'"page"'},{value:'"location"'},{value:'"date"'}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
+@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-description":{defaultValue:null,description:`Defines a string value that describes or annotates the current element.
+@see related aria-describedby.`,name:"aria-description",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-details":{defaultValue:null,description:`Identifies the element that provides a detailed, extended description for the object.
+@see aria-describedby.`,name:"aria-details",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+@see aria-hidden
+@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-dropeffect":{defaultValue:null,description:`Indicates what functions can be performed when a dragged object is released on the drop target.
+@deprecated in ARIA 1.1`,name:"aria-dropeffect",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"link"'},{value:'"copy"'},{value:'"execute"'},{value:'"move"'},{value:'"popup"'}]}},"aria-errormessage":{defaultValue:null,description:`Identifies the element that provides an error message for the object.
+@see aria-invalid
+@see aria-describedby.`,name:"aria-errormessage",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-expanded":{defaultValue:null,description:"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",name:"aria-expanded",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"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,
+allows assistive technology to override the general default of reading in document source order.`,name:"aria-flowto",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-grabbed":{defaultValue:null,description:`Indicates an element's "grabbed" state in a drag-and-drop operation.
+@deprecated in ARIA 1.1`,name:"aria-grabbed",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"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",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"dialog"'},{value:'"menu"'},{value:'"false"'},{value:'"true"'},{value:'"grid"'},{value:'"listbox"'},{value:'"tree"'}]}},"aria-hidden":{defaultValue:null,description:`Indicates whether the element is exposed to an accessibility API.
+@see aria-disabled.`,name:"aria-hidden",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
+@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'},{value:'"grammar"'},{value:'"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",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
+@see aria-labelledby.`,name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-labelledby":{defaultValue:null,description:`Identifies the element (or elements) that labels the current element.
+@see aria-describedby.`,name:"aria-labelledby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-level":{defaultValue:null,description:"Defines the hierarchical level of an element within a structure.",name:"aria-level",required:!1,type:{name:"enum",value:[{value:"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",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"assertive"'},{value:'"polite"'}]}},"aria-modal":{defaultValue:null,description:"Indicates whether an element is modal when displayed.",name:"aria-modal",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-multiline":{defaultValue:null,description:"Indicates whether a text box accepts multiple lines of input or only a single line.",name:"aria-multiline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-multiselectable":{defaultValue:null,description:"Indicates that the user may select more than one item from the current selectable descendants.",name:"aria-multiselectable",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-orientation":{defaultValue:null,description:"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",name:"aria-orientation",required:!1,type:{name:"enum",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
+between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+@see aria-controls.`,name:"aria-owns",required:!1,type:{name:"enum",value:[{value:"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.
+A hint could be a sample value or a brief description of the expected format.`,name:"aria-placeholder",required:!1,type:{name:"enum",value:[{value:"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.
+@see aria-setsize.`,name:"aria-posinset",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-pressed":{defaultValue:null,description:`Indicates the current "pressed" state of toggle buttons.
+@see aria-checked
+@see aria-selected.`,name:"aria-pressed",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'},{value:'"mixed"'}]}},"aria-readonly":{defaultValue:null,description:`Indicates that the element is not editable, but is otherwise operable.
+@see aria-disabled.`,name:"aria-readonly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-relevant":{defaultValue:null,description:`Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+@see aria-atomic.`,name:"aria-relevant",required:!1,type:{name:"enum",value:[{value:'"text"'},{value:'"additions"'},{value:'"additions removals"'},{value:'"additions text"'},{value:'"all"'},{value:'"removals"'},{value:'"removals additions"'},{value:'"removals 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",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"true"'}]}},"aria-roledescription":{defaultValue:null,description:"Defines a human-readable, author-localized description for the role of an element.",name:"aria-roledescription",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-rowcount":{defaultValue:null,description:`Defines the total number of rows in a table, grid, or treegrid.
+@see aria-rowindex.`,name:"aria-rowcount",required:!1,type:{name:"enum",value:[{value:"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.
+@see aria-rowcount
+@see aria-rowspan.`,name:"aria-rowindex",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-rowindextext":{defaultValue:null,description:`Defines a human readable text alternative of aria-rowindex.
+@see aria-colindextext.`,name:"aria-rowindextext",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-rowspan":{defaultValue:null,description:`Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+@see aria-rowindex
+@see aria-colspan.`,name:"aria-rowspan",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-selected":{defaultValue:null,description:`Indicates the current "selected" state of various widgets.
+@see aria-checked
+@see aria-pressed.`,name:"aria-selected",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"false"'},{value:'"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.
+@see aria-posinset.`,name:"aria-setsize",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-sort":{defaultValue:null,description:"Indicates if items in a table or grid are sorted in ascending or descending order.",name:"aria-sort",required:!1,type:{name:"enum",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",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-valuemin":{defaultValue:null,description:"Defines the minimum allowed value for a range widget.",name:"aria-valuemin",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-valuenow":{defaultValue:null,description:`Defines the current value for a range widget.
+@see aria-valuetext.`,name:"aria-valuenow",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-valuetext":{defaultValue:null,description:"Defines the human readable text alternative of aria-valuenow for a range widget.",name:"aria-valuetext",required:!1,type:{name:"enum",value:[{value:"string"}]}},dangerouslySetInnerHTML:{defaultValue:null,description:"",name:"dangerouslySetInnerHTML",required:!1,type:{name:"enum",value:[{value:"{ __html: string | TrustedHTML; }"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCopyCapture:{defaultValue:null,description:"",name:"onCopyCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCutCapture:{defaultValue:null,description:"",name:"onCutCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onPasteCapture:{defaultValue:null,description:"",name:"onPasteCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionEndCapture:{defaultValue:null,description:"",name:"onCompositionEndCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionStartCapture:{defaultValue:null,description:"",name:"onCompositionStartCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionUpdateCapture:{defaultValue:null,description:"",name:"onCompositionUpdateCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onFocusCapture:{defaultValue:null,description:"",name:"onFocusCapture",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onBlurCapture:{defaultValue:null,description:"",name:"onBlurCapture",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onChangeCapture:{defaultValue:null,description:"",name:"onChangeCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onBeforeInputCapture:{defaultValue:null,description:"",name:"onBeforeInputCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInputCapture:{defaultValue:null,description:"",name:"onInputCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onReset:{defaultValue:null,description:"",name:"onReset",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onResetCapture:{defaultValue:null,description:"",name:"onResetCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onSubmit:{defaultValue:null,description:"",name:"onSubmit",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onSubmitCapture:{defaultValue:null,description:"",name:"onSubmitCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInvalid:{defaultValue:null,description:"",name:"onInvalid",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInvalidCapture:{defaultValue:null,description:"",name:"onInvalidCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onLoad:{defaultValue:null,description:"",name:"onLoad",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadCapture:{defaultValue:null,description:"",name:"onLoadCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onError:{defaultValue:null,description:"",name:"onError",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onErrorCapture:{defaultValue:null,description:"",name:"onErrorCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyDownCapture:{defaultValue:null,description:"",name:"onKeyDownCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyPress:{defaultValue:null,description:"@deprecated Use `onKeyUp` or `onKeyDown` instead",name:"onKeyPress",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyPressCapture:{defaultValue:null,description:"@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead",name:"onKeyPressCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyUpCapture:{defaultValue:null,description:"",name:"onKeyUpCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onAbort:{defaultValue:null,description:"",name:"onAbort",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onAbortCapture:{defaultValue:null,description:"",name:"onAbortCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlay:{defaultValue:null,description:"",name:"onCanPlay",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlayCapture:{defaultValue:null,description:"",name:"onCanPlayCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlayThrough:{defaultValue:null,description:"",name:"onCanPlayThrough",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlayThroughCapture:{defaultValue:null,description:"",name:"onCanPlayThroughCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onDurationChange:{defaultValue:null,description:"",name:"onDurationChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onDurationChangeCapture:{defaultValue:null,description:"",name:"onDurationChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEmptied:{defaultValue:null,description:"",name:"onEmptied",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEmptiedCapture:{defaultValue:null,description:"",name:"onEmptiedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEncrypted:{defaultValue:null,description:"",name:"onEncrypted",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEncryptedCapture:{defaultValue:null,description:"",name:"onEncryptedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEnded:{defaultValue:null,description:"",name:"onEnded",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEndedCapture:{defaultValue:null,description:"",name:"onEndedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedData:{defaultValue:null,description:"",name:"onLoadedData",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedDataCapture:{defaultValue:null,description:"",name:"onLoadedDataCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedMetadata:{defaultValue:null,description:"",name:"onLoadedMetadata",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedMetadataCapture:{defaultValue:null,description:"",name:"onLoadedMetadataCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadStart:{defaultValue:null,description:"",name:"onLoadStart",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadStartCapture:{defaultValue:null,description:"",name:"onLoadStartCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPause:{defaultValue:null,description:"",name:"onPause",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPauseCapture:{defaultValue:null,description:"",name:"onPauseCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlay:{defaultValue:null,description:"",name:"onPlay",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlayCapture:{defaultValue:null,description:"",name:"onPlayCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlaying:{defaultValue:null,description:"",name:"onPlaying",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlayingCapture:{defaultValue:null,description:"",name:"onPlayingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onProgress:{defaultValue:null,description:"",name:"onProgress",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onProgressCapture:{defaultValue:null,description:"",name:"onProgressCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onRateChange:{defaultValue:null,description:"",name:"onRateChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onRateChangeCapture:{defaultValue:null,description:"",name:"onRateChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onResize:{defaultValue:null,description:"",name:"onResize",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onResizeCapture:{defaultValue:null,description:"",name:"onResizeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeeked:{defaultValue:null,description:"",name:"onSeeked",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeekedCapture:{defaultValue:null,description:"",name:"onSeekedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeeking:{defaultValue:null,description:"",name:"onSeeking",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeekingCapture:{defaultValue:null,description:"",name:"onSeekingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onStalled:{defaultValue:null,description:"",name:"onStalled",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onStalledCapture:{defaultValue:null,description:"",name:"onStalledCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSuspend:{defaultValue:null,description:"",name:"onSuspend",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSuspendCapture:{defaultValue:null,description:"",name:"onSuspendCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onTimeUpdate:{defaultValue:null,description:"",name:"onTimeUpdate",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onTimeUpdateCapture:{defaultValue:null,description:"",name:"onTimeUpdateCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onVolumeChange:{defaultValue:null,description:"",name:"onVolumeChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onVolumeChangeCapture:{defaultValue:null,description:"",name:"onVolumeChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onWaiting:{defaultValue:null,description:"",name:"onWaiting",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onWaitingCapture:{defaultValue:null,description:"",name:"onWaitingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onAuxClick:{defaultValue:null,description:"",name:"onAuxClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onAuxClickCapture:{defaultValue:null,description:"",name:"onAuxClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onClickCapture:{defaultValue:null,description:"",name:"onClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onContextMenu:{defaultValue:null,description:"",name:"onContextMenu",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onContextMenuCapture:{defaultValue:null,description:"",name:"onContextMenuCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onDoubleClick:{defaultValue:null,description:"",name:"onDoubleClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onDoubleClickCapture:{defaultValue:null,description:"",name:"onDoubleClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onDrag:{defaultValue:null,description:"",name:"onDrag",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragCapture:{defaultValue:null,description:"",name:"onDragCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEnd:{defaultValue:null,description:"",name:"onDragEnd",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEndCapture:{defaultValue:null,description:"",name:"onDragEndCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEnter:{defaultValue:null,description:"",name:"onDragEnter",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEnterCapture:{defaultValue:null,description:"",name:"onDragEnterCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragExit:{defaultValue:null,description:"",name:"onDragExit",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragExitCapture:{defaultValue:null,description:"",name:"onDragExitCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragLeave:{defaultValue:null,description:"",name:"onDragLeave",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragLeaveCapture:{defaultValue:null,description:"",name:"onDragLeaveCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragOver:{defaultValue:null,description:"",name:"onDragOver",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragOverCapture:{defaultValue:null,description:"",name:"onDragOverCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragStart:{defaultValue:null,description:"",name:"onDragStart",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragStartCapture:{defaultValue:null,description:"",name:"onDragStartCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDrop:{defaultValue:null,description:"",name:"onDrop",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDropCapture:{defaultValue:null,description:"",name:"onDropCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseDownCapture:{defaultValue:null,description:"",name:"onMouseDownCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseLeave:{defaultValue:null,description:"",name:"onMouseLeave",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseMoveCapture:{defaultValue:null,description:"",name:"onMouseMoveCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOut:{defaultValue:null,description:"",name:"onMouseOut",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOutCapture:{defaultValue:null,description:"",name:"onMouseOutCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOver:{defaultValue:null,description:"",name:"onMouseOver",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOverCapture:{defaultValue:null,description:"",name:"onMouseOverCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseUpCapture:{defaultValue:null,description:"",name:"onMouseUpCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSelectCapture:{defaultValue:null,description:"",name:"onSelectCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onTouchCancel:{defaultValue:null,description:"",name:"onTouchCancel",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchCancelCapture:{defaultValue:null,description:"",name:"onTouchCancelCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchEnd:{defaultValue:null,description:"",name:"onTouchEnd",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchEndCapture:{defaultValue:null,description:"",name:"onTouchEndCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchMove:{defaultValue:null,description:"",name:"onTouchMove",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchMoveCapture:{defaultValue:null,description:"",name:"onTouchMoveCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchStart:{defaultValue:null,description:"",name:"onTouchStart",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchStartCapture:{defaultValue:null,description:"",name:"onTouchStartCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerDownCapture:{defaultValue:null,description:"",name:"onPointerDownCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerMove:{defaultValue:null,description:"",name:"onPointerMove",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerMoveCapture:{defaultValue:null,description:"",name:"onPointerMoveCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerUp:{defaultValue:null,description:"",name:"onPointerUp",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerUpCapture:{defaultValue:null,description:"",name:"onPointerUpCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerCancel:{defaultValue:null,description:"",name:"onPointerCancel",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerCancelCapture:{defaultValue:null,description:"",name:"onPointerCancelCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerLeave:{defaultValue:null,description:"",name:"onPointerLeave",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOver:{defaultValue:null,description:"",name:"onPointerOver",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOverCapture:{defaultValue:null,description:"",name:"onPointerOverCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOut:{defaultValue:null,description:"",name:"onPointerOut",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOutCapture:{defaultValue:null,description:"",name:"onPointerOutCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onGotPointerCapture:{defaultValue:null,description:"",name:"onGotPointerCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onGotPointerCaptureCapture:{defaultValue:null,description:"",name:"onGotPointerCaptureCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onLostPointerCapture:{defaultValue:null,description:"",name:"onLostPointerCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onLostPointerCaptureCapture:{defaultValue:null,description:"",name:"onLostPointerCaptureCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onScroll:{defaultValue:null,description:"",name:"onScroll",required:!1,type:{name:"enum",value:[{value:"UIEventHandler<HTMLSelectElement>"}]}},onScrollCapture:{defaultValue:null,description:"",name:"onScrollCapture",required:!1,type:{name:"enum",value:[{value:"UIEventHandler<HTMLSelectElement>"}]}},onWheel:{defaultValue:null,description:"",name:"onWheel",required:!1,type:{name:"enum",value:[{value:"WheelEventHandler<HTMLSelectElement>"}]}},onWheelCapture:{defaultValue:null,description:"",name:"onWheelCapture",required:!1,type:{name:"enum",value:[{value:"WheelEventHandler<HTMLSelectElement>"}]}},onAnimationStart:{defaultValue:null,description:"",name:"onAnimationStart",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationStartCapture:{defaultValue:null,description:"",name:"onAnimationStartCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationEnd:{defaultValue:null,description:"",name:"onAnimationEnd",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationEndCapture:{defaultValue:null,description:"",name:"onAnimationEndCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationIteration:{defaultValue:null,description:"",name:"onAnimationIteration",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationIterationCapture:{defaultValue:null,description:"",name:"onAnimationIterationCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onTransitionEnd:{defaultValue:null,description:"",name:"onTransitionEnd",required:!1,type:{name:"enum",value:[{value:"TransitionEventHandler<HTMLSelectElement>"}]}},onTransitionEndCapture:{defaultValue:null,description:"",name:"onTransitionEndCapture",required:!1,type:{name:"enum",value:[{value:"TransitionEventHandler<HTMLSelectElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => 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",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSelectElement | null) => void"},{value:"RefObject<HTMLSelectElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const ve=V.forwardRef(function({id:e,label:a,description:u,error:s,required:i,inputDataset:m,dataset:o,hideLabel:c,onClick:C,children:S,hasError:T,useLegacyRequiredLabel:M,className:I,style:f,...fe},ye){return t.jsx(he,{id:e,label:a,description:u,error:s,hasError:T,required:i,dataset:o,hideLabel:c,onClick:C,useLegacyRequiredLabel:M,preplyDsComponent:pe.SelectField,children:t.jsx(L,{...fe,ref:ye,dataset:m,children:S})})});ve.Option=w;const r=ve;function w(n){return t.jsx("option",{...n,...me(void 0,{preplyDsComponent:pe.SelectFieldOption})})}try{w.displayName="NativeSelectFieldOption",w.__docgenInfo={description:"",displayName:"NativeSelectFieldOption",props:{value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}try{r.displayName="NativeSelectField",r.__docgenInfo={description:"",displayName:"NativeSelectField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLSelectElement>"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
+to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
+indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+When false, adds a "Optional" indicator next to the label for the optional fields instead.
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLSelectElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSelectElement | null) => void"},{value:"RefObject<HTMLSelectElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const{expect:l,userEvent:x,within:R,fn:d}=__STORYBOOK_MODULE_TEST__,Pe={title:"components/SelectField/NativeSelectField (deprecated)",component:r,subcomponents:{NativeSelectFieldOption:r.Option},args:{name:"language",label:"Language",placeholder:"Select a language",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:d(),onValueChange:d(),onBlur:d(),onFocus:d(),onClick:d(),onCopy:d(),onKeyDown:d(),onKeyUp:d(),onPaste:d(),children:t.jsxs(t.Fragment,{children:[t.jsx(r.Option,{value:"english",children:"English"}),t.jsx(r.Option,{value:"spanish",children:"Spanish"}),t.jsx(r.Option,{value:"french",children:"French"})]})}},p={play:async({canvasElement:n,step:e,args:a})=>{const u=R(n),s=u.getByTestId("field"),i=u.getByTestId("input");await e("it should render correct label",async()=>{const m=R(s).getByTestId("label");l(m).toHaveTextContent("Language • Optional"),l(i).toHaveAccessibleName("Language")}),await e("it should call onFocus when the input is focused",async()=>{i.focus(),l(a.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await x.selectOptions(i,"spanish"),l(a.onValueChange).toHaveBeenCalledWith("spanish"),l(a.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await x.keyboard("{tab}"),l(a.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{l(s).toHaveAttribute("data-testid","field"),l(s).toHaveAttribute("data-foo","bar"),l(i).toHaveAttribute("data-testid","input"),l(i).toHaveAttribute("data-foo","bar")}),await e("it should render all options",async()=>{const m=u.getByRole("option",{name:"English"}),o=u.getByRole("option",{name:"Spanish"}),c=u.getByRole("option",{name:"French"});l(m).toBeInTheDocument(),l(o).toBeInTheDocument(),l(c).toBeInTheDocument()})}},v={render:function(e){const[a,u]=V.useState(e.value);return t.jsxs(r,{...e,value:a,onChange:s=>{var i;u(s.target.value),(i=e.onChange)==null||i.call(e,s)},children:[t.jsx(r.Option,{value:"english",children:"English"}),t.jsx(r.Option,{value:"spanish",children:"Spanish"}),t.jsx(r.Option,{value:"french",children:"French"})]})},args:{label:"Controlled SelectField",placeholder:"Select a language...",value:"spanish"},play:async({canvas:n,step:e})=>{await e("it should render the correct initial value",async()=>{const a=n.getByTestId("input");await l(a).toHaveValue("spanish")}),await e("it should update the value when the user selects",async()=>{const a=n.getByTestId("input");await x.selectOptions(a,"french"),l(a).toHaveValue("french")})}},y={args:{icon:t.jsx(D,{svg:ce,dataset:{testid:"icon"}})},play:async({canvas:n,step:e})=>{await e("it should render the icon",async()=>{const a=n.getByTestId("icon");l(a).toBeInTheDocument()})}},h={args:{description:"We will use this to get a personalized choice of tutors"},play:async({canvas:n,step:e})=>{const a=n.getByTestId("input"),u=n.getByTestId("description");await e("it should render the description",async()=>{l(a).toHaveAccessibleDescription("We will use this to get a personalized choice of tutors"),l(u).toHaveTextContent("We will use this to get a personalized choice of tutors")})}},g={args:{required:!0},play:async({canvas:n,step:e})=>{const a=n.getByTestId("input"),u=n.getByTestId("label");await e("it should render correct label",async()=>{l(a).toHaveAccessibleName("Language"),l(u).toHaveTextContent("Language")}),await e("it should render required attribute",async()=>{l(a).toHaveAttribute("required")})}},E={args:{hideLabel:!0},play:async({canvas:n,step:e})=>{await e("it should render correct a11y label",async()=>{const a=n.getByTestId("input");l(a).toHaveAccessibleName("Language")})}},H={args:{error:"This is an error message"},play:async({canvas:n,step:e})=>{const a=n.getByTestId("input"),u=n.getByTestId("error");await e("it should render the error message",async()=>{l(a).toHaveAccessibleErrorMessage("This is an error message"),l(u).toHaveTextContent("This is an error message")})}},b={args:{disabled:!0},play:async({canvas:n,step:e})=>{const a=n.getByTestId("input");await e("it should render the disabled input",async()=>{l(a).toHaveAttribute("disabled")})}},q={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Language",placeholder:"Select a subject",description:"We will use this to get a personalized choice of tutors",children:t.jsxs(t.Fragment,{children:[t.jsx(r.Option,{value:"english",children:"English"}),t.jsx(r.Option,{value:"spanish",children:"Spanish"}),t.jsx(r.Option,{value:"french",children:"French"})]})},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"text"},defaultValue:{control:"text"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":t.jsx(D,{svg:ce,label:"Student with a hat"})},control:"select"},children:{control:!1},hasError:{table:{disable:!0}}}};var P,O,F,B,A;p.parameters={...p.parameters,docs:{...(P=p.parameters)==null?void 0:P.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const field = canvas.getByTestId('field');
+    const input = canvas.getByTestId('input');
+    await step('it should render correct label', async () => {
+      const label = within(field).getByTestId('label');
+      expect(label).toHaveTextContent('Language • Optional');
+      expect(input).toHaveAccessibleName('Language');
+    });
+    await step('it should call onFocus when the input is focused', async () => {
+      input.focus();
+      expect(args.onFocus).toHaveBeenCalled();
+    });
+    await step('it should call callback when the value changes', async () => {
+      await userEvent.selectOptions(input, 'spanish');
+      expect(args.onValueChange).toHaveBeenCalledWith('spanish');
+      expect(args.onChange).toHaveBeenCalled();
+    });
+    await step('it should call onBlur when the input is blurred', async () => {
+      await userEvent.keyboard('{tab}');
+      expect(args.onBlur).toHaveBeenCalled();
+    });
+    await step('it should render the dataset props', async () => {
+      expect(field).toHaveAttribute('data-testid', 'field');
+      expect(field).toHaveAttribute('data-foo', 'bar');
+      expect(input).toHaveAttribute('data-testid', 'input');
+      expect(input).toHaveAttribute('data-foo', 'bar');
+    });
+    await step('it should render all options', async () => {
+      const englishOption = canvas.getByRole('option', {
+        name: 'English'
+      });
+      const spanishOption = canvas.getByRole('option', {
+        name: 'Spanish'
+      });
+      const frenchOption = canvas.getByRole('option', {
+        name: 'French'
+      });
+      expect(englishOption).toBeInTheDocument();
+      expect(spanishOption).toBeInTheDocument();
+      expect(frenchOption).toBeInTheDocument();
+    });
+  }
+}`,...(F=(O=p.parameters)==null?void 0:O.docs)==null?void 0:F.source},description:{story:"An empty field with a `label` and a `placeholder`.",...(A=(B=p.parameters)==null?void 0:B.docs)==null?void 0:A.description}}};var k,N,W,j,K;v.parameters={...v.parameters,docs:{...(k=v.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  render: function ControlledSelectField(args) {
+    const [value, setValue] = useState(args.value);
+    return <NativeSelectField {...args} value={value} onChange={e => {
+      setValue(e.target.value);
+      args.onChange?.(e);
+    }}>
+                <NativeSelectField.Option value="english">English</NativeSelectField.Option>
+                <NativeSelectField.Option value="spanish">Spanish</NativeSelectField.Option>
+                <NativeSelectField.Option value="french">French</NativeSelectField.Option>
+            </NativeSelectField>;
+  },
+  args: {
+    label: 'Controlled SelectField',
+    placeholder: 'Select a language...',
+    value: 'spanish'
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('it should render the correct initial value', async () => {
+      const input = canvas.getByTestId('input');
+      await expect(input).toHaveValue('spanish');
+    });
+    await step('it should update the value when the user selects', async () => {
+      const input = canvas.getByTestId('input');
+      await userEvent.selectOptions(input, 'french');
+      expect(input).toHaveValue('french');
+    });
+  }
+}`,...(W=(N=v.parameters)==null?void 0:N.docs)==null?void 0:W.source},description:{story:"A controlled component where the value is managed by React state.",...(K=(j=v.parameters)==null?void 0:j.docs)==null?void 0:K.description}}};var _,U,z;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  args: {
+    icon: <Icon svg={LanguageSvg} dataset={{
+      testid: 'icon'
+    }} />
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('it should render the icon', async () => {
+      const icon = canvas.getByTestId('icon');
+      expect(icon).toBeInTheDocument();
+    });
+  }
+}`,...(z=(U=y.parameters)==null?void 0:U.docs)==null?void 0:z.source}}};var G,J,X;h.parameters={...h.parameters,docs:{...(G=h.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  args: {
+    description: 'We will use this to get a personalized choice of tutors'
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const description = canvas.getByTestId('description');
+    await step('it should render the description', async () => {
+      expect(input).toHaveAccessibleDescription('We will use this to get a personalized choice of tutors');
+      expect(description).toHaveTextContent('We will use this to get a personalized choice of tutors');
+    });
+  }
+}`,...(X=(J=h.parameters)==null?void 0:J.docs)==null?void 0:X.source}}};var Y,$,Q;g.parameters={...g.parameters,docs:{...(Y=g.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  args: {
+    required: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const label = canvas.getByTestId('label');
+    await step('it should render correct label', async () => {
+      expect(input).toHaveAccessibleName('Language');
+      expect(label).toHaveTextContent('Language');
+    });
+    await step('it should render required attribute', async () => {
+      expect(input).toHaveAttribute('required');
+    });
+  }
+}`,...(Q=($=g.parameters)==null?void 0:$.docs)==null?void 0:Q.source}}};var Z,ee,ae;E.parameters={...E.parameters,docs:{...(Z=E.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  args: {
+    hideLabel: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('it should render correct a11y label', async () => {
+      const input = canvas.getByTestId('input');
+      expect(input).toHaveAccessibleName('Language');
+    });
+  }
+}`,...(ae=(ee=E.parameters)==null?void 0:ee.docs)==null?void 0:ae.source}}};var ne,le,te;H.parameters={...H.parameters,docs:{...(ne=H.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  args: {
+    error: 'This is an error message'
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const error = canvas.getByTestId('error');
+    await step('it should render the error message', async () => {
+      expect(input).toHaveAccessibleErrorMessage('This is an error message');
+      expect(error).toHaveTextContent('This is an error message');
+    });
+  }
+}`,...(te=(le=H.parameters)==null?void 0:le.docs)==null?void 0:te.source}}};var ue,re,ie;b.parameters={...b.parameters,docs:{...(ue=b.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  args: {
+    disabled: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    await step('it should render the disabled input', async () => {
+      expect(input).toHaveAttribute('disabled');
+    });
+  }
+}`,...(ie=(re=b.parameters)==null?void 0:re.docs)==null?void 0:ie.source}}};var oe,se,de;q.parameters={...q.parameters,docs:{...(oe=q.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  args: {
+    label: 'Language',
+    placeholder: 'Select a subject',
+    description: 'We will use this to get a personalized choice of tutors',
+    children: <>
+                <NativeSelectField.Option value="english">English</NativeSelectField.Option>
+                <NativeSelectField.Option value="spanish">Spanish</NativeSelectField.Option>
+                <NativeSelectField.Option value="french">French</NativeSelectField.Option>
+            </>
+  },
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    placeholder: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    error: {
+      control: 'text'
+    },
+    value: {
+      control: 'text'
+    },
+    defaultValue: {
+      control: 'text'
+    },
+    inputDataset: {
+      control: 'object'
+    },
+    dataset: {
+      control: 'object'
+    },
+    id: {
+      control: 'text'
+    },
+    required: {
+      control: 'boolean'
+    },
+    hideLabel: {
+      control: 'boolean'
+    },
+    name: {
+      control: 'text'
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    icon: {
+      options: ['None', 'With Icon'],
+      mapping: {
+        None: undefined,
+        'With Icon': <Icon svg={LanguageSvg} label="Student with a hat" />
+      },
+      control: 'select'
+    },
+    children: {
+      control: false
+    },
+    // Disable deprecated props
+    hasError: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}`,...(de=(se=q.parameters)==null?void 0:se.docs)==null?void 0:de.source}}};const Oe=["Basic","Controlled","WithIcon","WithDescription","Required","WithHiddenLabel","WithError","Disabled","Playground"];export{p as Basic,v as Controlled,b as Disabled,q as Playground,g as Required,h as WithDescription,H as WithError,E as WithHiddenLabel,y as WithIcon,Oe as __namedExportsOrder,Pe as default};

package/dist/assets/NumberField-838MqpbA.js

@@ -0,0 +1,6 @@
+import{r as V,j as u}from"./iframe-Bqhe7wZw.js";import{F as g}from"./FormControl-BLXEVBx7.js";import{w as H}from"./componentNames-CmmTyjin.js";import{I as L}from"./Input-BunxDHKi.js";const t=V.forwardRef(function({id:i,label:d,description:s,error:o,required:m,inputDataset:p,dataset:v,hideLabel:f,onClick:c,onValueChange:e,onChange:a,hasError:y,useLegacyRequiredLabel:b,className:I,style:R,...h},q){const E=l=>{a==null||a(l);const n=l.target.value;e==null||e(n?Number(n):void 0)};return u.jsx(g,{id:i,label:d,description:s,error:o,hasError:y,required:m,dataset:v,hideLabel:f,onClick:c,useLegacyRequiredLabel:b,preplyDsComponent:H.NumberField,children:u.jsx(L,{...h,type:"number",ref:q,dataset:p,onChange:E})})});try{t.displayName="NumberField",t.__docgenInfo={description:"",displayName:"NumberField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
+to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
+indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+When false, adds a "Optional" indicator next to the label for the optional fields instead.
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: number | undefined) => void"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},step:{defaultValue:null,description:"",name:"step",required:!1,type:{name:"enum",value:[{value:"number"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as N};

package/dist/assets/{NumberField.stories-CHm83Evu.js → NumberField.stories-CuSf_jB6.js}

@@ -1,4 +1,4 @@
-import{j as g,r as re}from"./iframe-CWgEsn_I.js";import{F as te}from"./TokyoUIPhone-B41go8ay.js";import{F as se}from"./TokyoUIAttach-DEHypfd2.js";import{I as ne}from"./Icon-BbVZ9NP7.js";import{N as ae}from"./NumberField-DachAjtc.js";import{F as ie}from"./FieldButton-CE-kxD0a.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-CvDqGyH8.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-DCa6Vadq.js";import"./componentNames-CmmTyjin.js";import"./FormControl-DI4h0Rn1.js";import"./index-BAEPs7Y-.js";import"./message-qc_MCF3J.js";import"./Input-qJLg_DQg.js";import"./InputContainer-DxTdO3rg.js";const{action:ce}=__STORYBOOK_MODULE_ACTIONS__,{expect:n,userEvent:w,within:x,fn:r}=__STORYBOOK_MODULE_TEST__,fe={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number • Optional"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ie,{svg:se,assistiveText:"Do the thing",onClick:ce("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var T,B,H,I,f;c.parameters={...c.parameters,docs:{...(T=c.parameters)==null?void 0:T.docs,source:{originalSource:`{
+import{j as g,r as re}from"./iframe-Bqhe7wZw.js";import{F as te}from"./TokyoUIPhone-C63CxeYt.js";import{F as se}from"./TokyoUIAttach-CVSc5UUC.js";import{I as ne}from"./Icon-WyYz69YA.js";import{N as ae}from"./NumberField-838MqpbA.js";import{F as ie}from"./FieldButton-DtWX-vqw.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-CPEkSAkL.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-DCiBrDQC.js";import"./componentNames-CmmTyjin.js";import"./FormControl-BLXEVBx7.js";import"./index-Bs4_IdoP.js";import"./message-CIDvwUOa.js";import"./Input-BunxDHKi.js";import"./InputContainer-kefs6DXh.js";const{action:ce}=__STORYBOOK_MODULE_ACTIONS__,{expect:n,userEvent:w,within:x,fn:r}=__STORYBOOK_MODULE_TEST__,fe={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number • Optional"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ie,{svg:se,assistiveText:"Do the thing",onClick:ce("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var T,B,H,I,f;c.parameters={...c.parameters,docs:{...(T=c.parameters)==null?void 0:T.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,

package/dist/assets/ObserveIntersection-ZBxTBXPM.js

@@ -0,0 +1,8 @@
+import{r as s,g as b,j as g,L as h}from"./iframe-Bqhe7wZw.js";import{w as y}from"./componentNames-CmmTyjin.js";const l=({onIntersect:a,once:t,threshold:n,tag:o,dataset:u,children:i})=>{const e=s.useRef(null);s.useEffect(()=>{const p=([m],f)=>{m.isIntersecting&&(a(),t&&e.current&&f.unobserve(e.current))},d={threshold:n},r=new IntersectionObserver(p,d);return e.current&&r.observe(e.current),()=>r.disconnect()},[a,t,n]);const c=o??h,v={ref:e,...b(u,{preplyDsComponent:y.ObserverIntersection})};return g.jsx(c,{...v,children:i})};try{l.displayName="ObserveIntersection",l.__docgenInfo={description:`An [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) wrapper.
+
+Triggers a callback when the wrapped component intersects with the viewport.
+
+This can be useful in several use cases. Examples:
+
+- Track an experiment, once a certain component scrolls into view.
+- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"table"'},{value:'"th"'},{value:'"td"'},{value:'"article"'},{value:'"caption"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"p"'},{value:'"section"'},{value:'"span"'},{value:'"tbody"'},{value:'"tfoot"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{l as O};

package/dist/assets/{ObserveIntersection.stories-Crg5XGQK.js → ObserveIntersection.stories-4Ckr8zaP.js}

@@ -1,4 +1,4 @@
-import{r as a,j as t}from"./iframe-CWgEsn_I.js";import{O as i}from"./ObserveIntersection-Gkcdp17D.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-CmmTyjin.js";const x={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
+import{r as a,j as t}from"./iframe-Bqhe7wZw.js";import{O as i}from"./ObserveIntersection-ZBxTBXPM.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-CmmTyjin.js";const x={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
   const [isIntersecting, setIsIntersecting] = useState(false);
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.

package/dist/assets/OnboardingTooltip-BLBHoSL1.js

@@ -0,0 +1,16 @@
+import{r as s,a8 as E,a9 as Z,j as a,aa as Q,ab as Y,ac as ee,ad as j,ae as k,af as te,ag as A,ah as y,ai as ae,aj as N,ak as oe,al as ne,am as le,G as re,I as ue,g as se}from"./iframe-Bqhe7wZw.js";import{F as ie}from"./TokyoUIClose-DRL_GMkk.js";import{I as ce}from"./Icon-WyYz69YA.js";import{T as de}from"./Text-GK7LNFMQ.js";import{B as pe}from"./Button-AikOy3Q-.js";import{H as fe}from"./Heading-D0lR4rid.js";import{u as ve}from"./index-Bs4_IdoP.js";import{g as me}from"./shared-strings-BiyYhJiL.js";import{w as he}from"./componentNames-CmmTyjin.js";import{M as ge}from"./message-CIDvwUOa.js";import{h as be,R as ye,u as Ce,F as Pe}from"./index-PcJZmKzo.js";var P="Popover",[V]=Y(P,[E]),C=E(),[Re,f]=V(P),S=e=>{const{__scopePopover:t,children:l,open:i,defaultOpen:o,onOpenChange:n,modal:u=!1}=e,r=C(t),c=s.useRef(null),[d,v]=s.useState(!1),[m,p]=Z({prop:i,defaultProp:o??!1,onChange:n,caller:P});return a.jsx(Q,{...r,children:a.jsx(Re,{scope:t,contentId:ee(),triggerRef:c,open:m,onOpenChange:p,onOpenToggle:s.useCallback(()=>p(h=>!h),[p]),hasCustomAnchor:d,onCustomAnchorAdd:s.useCallback(()=>v(!0),[]),onCustomAnchorRemove:s.useCallback(()=>v(!1),[]),modal:u,children:l})})};S.displayName=P;var T="PopoverAnchor",D=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=f(T,l),n=C(l),{onCustomAnchorAdd:u,onCustomAnchorRemove:r}=o;return s.useEffect(()=>(u(),()=>r()),[u,r]),a.jsx(j,{...n,...i,ref:t})});D.displayName=T;var q="PopoverTrigger",xe=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=f(q,l),n=C(l),u=N(t,o.triggerRef),r=a.jsx(A.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":G(o.open),...i,ref:u,onClick:y(e.onClick,o.onOpenToggle)});return o.hasCustomAnchor?r:a.jsx(j,{asChild:!0,...n,children:r})});xe.displayName=q;var O="PopoverPortal",[we,Oe]=V(O,{forceMount:void 0}),M=e=>{const{__scopePopover:t,forceMount:l,children:i,container:o}=e,n=f(O,t);return a.jsx(we,{scope:t,forceMount:l,children:a.jsx(k,{present:l||n.open,children:a.jsx(te,{asChild:!0,container:o,children:i})})})};M.displayName=O;var g="PopoverContent",F=s.forwardRef((e,t)=>{const l=Oe(g,e.__scopePopover),{forceMount:i=l.forceMount,...o}=e,n=f(g,e.__scopePopover);return a.jsx(k,{present:i||n.open,children:n.modal?a.jsx(Ie,{...o,ref:t}):a.jsx(Ee,{...o,ref:t})})});F.displayName=g;var _e=oe("PopoverContent.RemoveScroll"),Ie=s.forwardRef((e,t)=>{const l=f(g,e.__scopePopover),i=s.useRef(null),o=N(t,i),n=s.useRef(!1);return s.useEffect(()=>{const u=i.current;if(u)return be(u)},[]),a.jsx(ye,{as:_e,allowPinchZoom:!0,children:a.jsx(L,{...e,ref:o,trapFocus:l.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:y(e.onCloseAutoFocus,u=>{var r;u.preventDefault(),n.current||(r=l.triggerRef.current)==null||r.focus()}),onPointerDownOutside:y(e.onPointerDownOutside,u=>{const r=u.detail.originalEvent,c=r.button===0&&r.ctrlKey===!0,d=r.button===2||c;n.current=d},{checkForDefaultPrevented:!1}),onFocusOutside:y(e.onFocusOutside,u=>u.preventDefault(),{checkForDefaultPrevented:!1})})})}),Ee=s.forwardRef((e,t)=>{const l=f(g,e.__scopePopover),i=s.useRef(!1),o=s.useRef(!1);return a.jsx(L,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var u,r;(u=e.onCloseAutoFocus)==null||u.call(e,n),n.defaultPrevented||(i.current||(r=l.triggerRef.current)==null||r.focus(),n.preventDefault()),i.current=!1,o.current=!1},onInteractOutside:n=>{var c,d;(c=e.onInteractOutside)==null||c.call(e,n),n.defaultPrevented||(i.current=!0,n.detail.originalEvent.type==="pointerdown"&&(o.current=!0));const u=n.target;((d=l.triggerRef.current)==null?void 0:d.contains(u))&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&o.current&&n.preventDefault()}})}),L=s.forwardRef((e,t)=>{const{__scopePopover:l,trapFocus:i,onOpenAutoFocus:o,onCloseAutoFocus:n,disableOutsidePointerEvents:u,onEscapeKeyDown:r,onPointerDownOutside:c,onFocusOutside:d,onInteractOutside:v,...m}=e,p=f(g,l),h=C(l);return Ce(),a.jsx(Pe,{asChild:!0,loop:!0,trapped:i,onMountAutoFocus:o,onUnmountAutoFocus:n,children:a.jsx(ne,{asChild:!0,disableOutsidePointerEvents:u,onInteractOutside:v,onEscapeKeyDown:r,onPointerDownOutside:c,onFocusOutside:d,onDismiss:()=>p.onOpenChange(!1),children:a.jsx(le,{"data-state":G(p.open),role:"dialog",id:p.contentId,...h,...m,ref:t,style:{...m.style,"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-popover-content-available-width":"var(--radix-popper-available-width)","--radix-popover-content-available-height":"var(--radix-popper-available-height)","--radix-popover-trigger-width":"var(--radix-popper-anchor-width)","--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}})})})}),H="PopoverClose",B=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=f(H,l);return a.jsx(A.button,{type:"button",...i,ref:t,onClick:y(e.onClick,()=>o.onOpenChange(!1))})});B.displayName=H;var je="PopoverArrow",X=s.forwardRef((e,t)=>{const{__scopePopover:l,...i}=e,o=C(l);return a.jsx(ae,{...o,...i,ref:t})});X.displayName=je;function G(e){return e?"open":"closed"}var ke=S,Ae=D,Ne=M,Ve=F,Se=B,Te=X;const De="content__KHgp9",qe="header__CaLti",Me="close__3s-VD",Fe="footer__X5qXF",Le="arrow__0pg-s",b={content:De,header:qe,close:Me,footer:Fe,arrow:Le},He=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},w=s.forwardRef(function({open:t,onOpenChange:l,disabled:i,title:o,text:n,children:u,side:r,dataset:c,actionLabel:d=a.jsx(ge,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:v,actionHref:m,counter:p,autoScroll:h=!0,...J},U){const{formatMessage:$}=ve(),K=re(),_=s.useId(),z=s.useId(),R=s.useId(),x=s.useRef(null);return s.useEffect(()=>{t&&x.current&&h&&He(x.current)},[h,t]),i?u:a.jsxs(ke,{open:t,onOpenChange:l,children:[a.jsx(ue,{ref:U,...J,children:a.jsx(Ae,{ref:x,id:R,asChild:!0,children:u})}),a.jsx(Ne,{container:K,children:a.jsxs(Ve,{onInteractOutside:W=>{W.preventDefault()},side:r,className:b.content,"aria-labelledby":_,"aria-describedby":`${R} ${z}`,...se(c,{preplyDsComponent:he.OnboardingTooltip}),children:[a.jsxs("div",{className:b.header,children:[a.jsx(Se,{className:b.close,"aria-label":$(me.close),"data-testid":"close",children:a.jsx(ce,{accent:"inverted",svg:ie})}),a.jsx(fe,{tag:"h1",variant:"small",accent:"inverted",id:_,"aria-describedby":R,children:o})]}),a.jsx(de,{variant:"default-regular",accent:"inverted",children:n}),a.jsxs("div",{className:b.footer,children:[p,a.jsx(pe,{variant:"inverted",size:"small",onClick:v,href:m,dataset:{testid:"action"},wrap:!0,children:d})]}),a.jsx(Te,{"aria-hidden":!0,className:b.arrow,width:18,height:11})]})})]})}),I=s.forwardRef(function(t,l){const[i,o]=s.useState(!0),n=r=>{var c;r||(c=t.onClose)==null||c.call(t),o(r)},u=()=>{var r,c;(r=t.actionOnClick)==null||r.call(t),o(!1),(c=t.onClose)==null||c.call(t)};return a.jsx(w,{...t,open:i,onOpenChange:n,actionOnClick:u,ref:l})});try{w.displayName="InternalOnboardingTooltip",w.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
+            <FormattedMessage
+                id="preply-ds.onboardingTooltip.actionLabel"
+                defaultMessage="Got it"
+                description="Default onboarding tooltip action label. Used to acknowledge and close the tooltip."
+            />
+        )`},description:"Label of the action button",name:"actionLabel",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionHref:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionHref` to also navigate to other page when the button is clicked.",name:"actionHref",required:!1,type:{name:"enum",value:[{value:"string"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},counter:{defaultValue:null,description:"",name:"counter",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},open:{defaultValue:null,description:"",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onOpenChange:{defaultValue:null,description:"",name:"onOpenChange",required:!0,type:{name:"(open: boolean) => 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",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}try{I.displayName="OnboardingTooltip",I.__docgenInfo={description:`Informational pop-up that highlights specific UI element, e.g. to introduce new feature.
+
+The direct child of the component should be html element, DS component,
+or a component that forwards ref to the underlying DOM node.`,displayName:"OnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
+            <FormattedMessage
+                id="preply-ds.onboardingTooltip.actionLabel"
+                defaultMessage="Got it"
+                description="Default onboarding tooltip action label. Used to acknowledge and close the tooltip."
+            />
+        )`},description:"Label of the action button",name:"actionLabel",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionHref:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionHref` to also navigate to other page when the button is clicked.",name:"actionHref",required:!1,type:{name:"enum",value:[{value:"string"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{w as I,I as O};