0:["$","$L3",null,{"buildId":"IIhYmIJcebLFFDdteXHVa","assetPrefix":"","urlParts":["","components","select"],"initialTree":["",{"children":["components",{"children":[["id","select","d"],{"children":["__PAGE__?{\"id\":\"select\"}",{}]}]}]},"$undefined","$undefined",true],"initialSeedData":["",{"children":["components",{"children":[["id","select","d"],{"children":["__PAGE__",{},[["$L4",[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":["$","$L6",null,{"code":"import * as React from 'react'\n\nimport { Select, SelectProps } from 'welcome-ui/Select'\n\nexport const ITEMS = [\n { value: 'bold', label: 'Bold' },\n { value: 'italic', label: 'Italic' },\n { value: 'strikethrough', label: 'Strikethrough' },\n { value: 'underline', label: 'Underline' },\n]\n\nconst Example = () => {\n const [value, setValue] = React.useState()\n\n const handleChange = (newValue: SelectProps['value']) => {\n setValue(newValue)\n }\n\n return \n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Select","pathToFile":"/Select/docs/examples/clearable.tsx","withCodeEditor":true}],"\n",["$","$L7",null,{"as":"h3","id":"multiple-values","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#multiple-values","textDecoration":{"hover":"underline"},"children":"Multiple values"}]}],"\n",["$","$L8","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Just add the ","position":{"start":{"line":8,"column":1,"offset":106},"end":{"line":8,"column":14,"offset":119}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isMultiple","position":{"start":{"line":8,"column":14,"offset":119},"end":{"line":8,"column":26,"offset":131}}}],"position":{"start":{"line":8,"column":14,"offset":119},"end":{"line":8,"column":26,"offset":131}}},{"type":"text","value":" prop. Note: to be able to choose multiple values you must pass an array for the ","position":{"start":{"line":8,"column":26,"offset":131},"end":{"line":8,"column":107,"offset":212}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"value","position":{"start":{"line":8,"column":107,"offset":212},"end":{"line":8,"column":114,"offset":219}}}],"position":{"start":{"line":8,"column":107,"offset":212},"end":{"line":8,"column":114,"offset":219}}},{"type":"text","value":".","position":{"start":{"line":8,"column":114,"offset":219},"end":{"line":8,"column":115,"offset":220}}}],"position":{"start":{"line":8,"column":1,"offset":106},"end":{"line":8,"column":115,"offset":220}}},"children":["Just add the ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"isMultiple"}]," prop. Note: to be able to choose multiple values you must pass an array for the ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"value"}],"."]}],"\n",["$","$L6",null,{"code":"import * as React from 'react'\n\nimport { Select, SelectProps } from 'welcome-ui/Select'\n\nexport const ITEMS = [\n { value: 'bold', label: 'Bold' },\n { value: 'italic', label: 'Italic' },\n { value: 'strikethrough', label: 'Strikethrough' },\n { value: 'underline', label: 'Underline' },\n]\n\nconst Example = () => {\n const [value, setValue] = React.useState(['bold', 'italic'])\n\n const handleChange = (newValue: SelectProps['value']) => {\n setValue(newValue)\n }\n\n return \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Select","pathToFile":"/Select/docs/examples/searchable.tsx","withCodeEditor":true}],"\n",["$","$L7",null,{"as":"h3","id":"add-an-icon","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#add-an-icon","textDecoration":{"hover":"underline"},"children":"Add an icon"}]}],"\n",["$","$L8","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pass ","position":{"start":{"line":26,"column":1,"offset":662},"end":{"line":26,"column":6,"offset":667}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"icon","position":{"start":{"line":26,"column":6,"offset":667},"end":{"line":26,"column":12,"offset":673}}}],"position":{"start":{"line":26,"column":6,"offset":667},"end":{"line":26,"column":12,"offset":673}}},{"type":"text","value":" to decorate your ","position":{"start":{"line":26,"column":12,"offset":673},"end":{"line":26,"column":30,"offset":691}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Select","position":{"start":{"line":26,"column":30,"offset":691},"end":{"line":26,"column":38,"offset":699}}}],"position":{"start":{"line":26,"column":30,"offset":691},"end":{"line":26,"column":38,"offset":699}}}],"position":{"start":{"line":26,"column":1,"offset":662},"end":{"line":26,"column":38,"offset":699}}},"children":["Pass ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"icon"}]," to decorate your ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"Select"}]]}],"\n",["$","$L6",null,{"code":"import * as React from 'react'\n\nimport { Select, SelectProps } from 'welcome-ui/Select'\nimport { WttjIcon } from 'welcome-ui/Icons'\n\nexport const ITEMS = [\n { value: 'bold', label: 'Bold' },\n { value: 'italic', label: 'Italic' },\n { value: 'strikethrough', label: 'Strikethrough' },\n { value: 'underline', label: 'Underline' },\n]\n\nconst Example = () => {\n const [value, setValue] = React.useState()\n\n const handleChange = (newValue: SelectProps['value']) => {\n setValue(newValue)\n }\n\n return (\n }\n name=\"welcome\"\n onChange={handleChange}\n options={ITEMS}\n value={value}\n />\n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Select","pathToFile":"/Select/docs/examples/icon.tsx","withCodeEditor":true}],"\n",["$","$L7",null,{"as":"h3","id":"formatting-options","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#formatting-options","textDecoration":{"hover":"underline"},"children":"Formatting options"}]}],"\n",["$","$L8","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Passing a ","position":{"start":{"line":32,"column":1,"offset":789},"end":{"line":32,"column":11,"offset":799}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"renderItem","position":{"start":{"line":32,"column":11,"offset":799},"end":{"line":32,"column":23,"offset":811}}}],"position":{"start":{"line":32,"column":11,"offset":799},"end":{"line":32,"column":23,"offset":811}}},{"type":"text","value":" function allows you to format the options in the list.","position":{"start":{"line":32,"column":23,"offset":811},"end":{"line":32,"column":78,"offset":866}}}],"position":{"start":{"line":32,"column":1,"offset":789},"end":{"line":32,"column":78,"offset":866}}},"children":["Passing a ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"renderItem"}]," function allows you to format the options in the list."]}],"\n",["$","$L8","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: if you use ","position":{"start":{"line":34,"column":1,"offset":868},"end":{"line":34,"column":18,"offset":885}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"renderItem","position":{"start":{"line":34,"column":18,"offset":885},"end":{"line":34,"column":30,"offset":897}}}],"position":{"start":{"line":34,"column":18,"offset":885},"end":{"line":34,"column":30,"offset":897}}},{"type":"text","value":" with ","position":{"start":{"line":34,"column":30,"offset":897},"end":{"line":34,"column":36,"offset":903}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isSearchable","position":{"start":{"line":34,"column":36,"offset":903},"end":{"line":34,"column":50,"offset":917}}}],"position":{"start":{"line":34,"column":36,"offset":903},"end":{"line":34,"column":50,"offset":917}}},{"type":"text","value":" or ","position":{"start":{"line":34,"column":50,"offset":917},"end":{"line":34,"column":54,"offset":921}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isCreatable","position":{"start":{"line":34,"column":54,"offset":921},"end":{"line":34,"column":67,"offset":934}}}],"position":{"start":{"line":34,"column":54,"offset":921},"end":{"line":34,"column":67,"offset":934}}},{"type":"text","value":" the selected item will ","position":{"start":{"line":34,"column":67,"offset":934},"end":{"line":34,"column":91,"offset":958}}},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"not","position":{"start":{"line":34,"column":92,"offset":959},"end":{"line":34,"column":95,"offset":962}}}],"position":{"start":{"line":34,"column":91,"offset":958},"end":{"line":34,"column":96,"offset":963}}},{"type":"text","value":" be formatted","position":{"start":{"line":34,"column":96,"offset":963},"end":{"line":34,"column":109,"offset":976}}}],"position":{"start":{"line":34,"column":1,"offset":868},"end":{"line":34,"column":109,"offset":976}}},"children":["Note: if you use ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"renderItem"}]," with ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"isSearchable"}]," or ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"isCreatable"}]," the selected item will ",["$","em","em-0",{"children":"not"}]," be formatted"]}],"\n",["$","$L8","p-6",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: if you want to format the options ","position":{"start":{"line":36,"column":1,"offset":978},"end":{"line":36,"column":41,"offset":1018}}},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"and","position":{"start":{"line":36,"column":42,"offset":1019},"end":{"line":36,"column":45,"offset":1022}}}],"position":{"start":{"line":36,"column":41,"offset":1018},"end":{"line":36,"column":46,"offset":1023}}},{"type":"text","value":" the placeholder, create a dummy value as the first of your options with an empty string as the value (see code below).","position":{"start":{"line":36,"column":46,"offset":1023},"end":{"line":36,"column":165,"offset":1142}}}],"position":{"start":{"line":36,"column":1,"offset":978},"end":{"line":36,"column":165,"offset":1142}}},"children":["Note: if you want to format the options ",["$","em","em-0",{"children":"and"}]," the placeholder, create a dummy value as the first of your options with an empty string as the value (see code below)."]}],"\n",["$","$L6",null,{"code":"import * as React from 'react'\n\nimport { Select, SelectOption, SelectProps } from 'welcome-ui/Select'\nimport { WttjIcon } from 'welcome-ui/Icons'\n\nexport const ITEMS = [\n { value: 'bold', label: 'Bold' },\n { value: 'italic', label: 'Italic' },\n { value: 'strikethrough', label: 'Strikethrough' },\n { value: 'underline', label: 'Underline' },\n]\n\nconst Example = () => {\n const [value, setValue] = React.useState()\n\n const handleChange = (newValue: SelectProps['value']) => {\n setValue(newValue)\n }\n\n return (\n (\n

\n \n {item.label}\n

\n )}\n value={value}\n />\n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Select","pathToFile":"/Select/docs/examples/formatting.tsx","withCodeEditor":true}],"\n",["$","$L7",null,{"as":"h3","id":"creatable","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#creatable","textDecoration":{"hover":"underline"},"children":"Creatable"}]}],"\n",["$","$L8","p-7",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can ","position":{"start":{"line":42,"column":1,"offset":1229},"end":{"line":42,"column":9,"offset":1237}}},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"add","position":{"start":{"line":42,"column":10,"offset":1238},"end":{"line":42,"column":13,"offset":1241}}}],"position":{"start":{"line":42,"column":9,"offset":1237},"end":{"line":42,"column":14,"offset":1242}}},{"type":"text","value":" items by passing the ","position":{"start":{"line":42,"column":14,"offset":1242},"end":{"line":42,"column":36,"offset":1264}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"isCreatable","position":{"start":{"line":42,"column":36,"offset":1264},"end":{"line":42,"column":49,"offset":1277}}}],"position":{"start":{"line":42,"column":36,"offset":1264},"end":{"line":42,"column":49,"offset":1277}}},{"type":"text","value":" prop. The returned item will be of the shape:","position":{"start":{"line":42,"column":49,"offset":1277},"end":{"line":42,"column":95,"offset":1323}}}],"position":{"start":{"line":42,"column":1,"offset":1229},"end":{"line":42,"column":95,"offset":1323}}},"children":["You can ",["$","em","em-0",{"children":"add"}]," items by passing the ",["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"isCreatable"}]," prop. The returned item will be of the shape:"]}],"\n",["$","$L8","p-8",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"{ value: 'name-to-be-kebab-cased', label: 'Name to be kebab-cased' }","position":{"start":{"line":44,"column":1,"offset":1325},"end":{"line":44,"column":71,"offset":1395}}}],"position":{"start":{"line":44,"column":1,"offset":1325},"end":{"line":44,"column":71,"offset":1395}}}],"position":{"start":{"line":44,"column":1,"offset":1325},"end":{"line":44,"column":71,"offset":1395}}},"children":["$","$L5",null,{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"{ value: 'name-to-be-kebab-cased', label: 'Name to be kebab-cased' }"}]}],"\n",["$","$L6",null,{"code":"import * as React from 'react'\n\nimport { Select, SelectProps } from 'welcome-ui/Select'\n\nexport const ITEMS = [\n { value: 'bold', label: 'Bold' },\n { value: 'italic', label: 'Italic' },\n { value: 'strikethrough', label: 'Strikethrough' },\n { value: 'underline', label: 'Underline' },\n]\n\nconst Example = () => {\n const [value, setValue] = React.useState()\n\n const handleChange = (newValue: SelectProps['value']) => {\n setValue(newValue)\n }\n\n return