/
index.html
2 lines (2 loc) · 796 KB
/
index.html
1
2
<!DOCTYPE html><html lang="en-US"><head><title data-react-helmet="true">Confirm - Semantic UI React</title><link rel="preload" as="script" href="https://react.semantic-ui.com/bootstrap.988e8ff3.js"/><link rel="preload" as="script" href="https://react.semantic-ui.com/templates/src-components-ComponentDoc.116784b0.js"/><link rel="preload" as="script" href="https://react.semantic-ui.com/main.80e03568.js"/><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><link rel="shortcut icon" type="image/x-icon" href="https://react.semantic-ui.com/logo.png"/><link rel="stylesheet" href="https://react.semantic-ui.com/style.css?1.1.1"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism-tomorrow.min.css"/><script src="https://cdn.jsdelivr.net/npm/core-js-bundle/minified.js"></script><script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.10.5/babel.min.js"></script><script src="https://cdn.jsdelivr.net/faker.js/4.1.0/faker.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script><script src="https://cdn.jsdelivr.net/npm/react@16.9.0/umd/react.production.min.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@16.9.0/umd/react-dom.production.min.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@16.9.0/umd/react-dom-server.browser.production.min.js"></script></head><body><div id="root"><div data-reactroot=""><div style="position:fixed;display:flex;flex-direction:column;top:0;bottom:0;left:0;width:250px;background:#1B1C1D;overflow-x:hidden;flex:1"><div style="flex:1;overflow-y:scroll"><div class="ui borderless compact fluid inverted vertical menu"><div class="item"><img src="https://react.semantic-ui.com/logo.png" class="ui mini right spaced image"/><strong>Semantic UI React <small><em>1.1.1</em></small></strong><div class="menu"><a href="https://github.com/Semantic-Org/Semantic-UI-React" target="_blank" rel="noopener noreferrer" class="item"><i aria-hidden="true" class="github icon"></i> GitHub</a><a href="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="item"><i aria-hidden="true" class="file alternate outline icon"></i> CHANGELOG</a></div></div><div class="item"><div class="header">Getting Started</div><div class="menu"><a class="item" href="https://react.semantic-ui.com/">Introduction</a><a class="item" href="https://react.semantic-ui.com/usage">Get Started</a><a class="item" href="https://react.semantic-ui.com/augmentation">Composition</a><a class="item" href="https://react.semantic-ui.com/shorthand-props">Shorthand Props</a><a class="item" href="https://react.semantic-ui.com/theming">Theming</a><a class="item" href="https://react.semantic-ui.com/layouts">Layout examples</a><a class="item" href="https://react.semantic-ui.com/prototypes">Prototypes</a></div></div><div class="fitted item"><div class="ui fluid icon input"><input type="text" placeholder="Press "/" to filter components" value=""/><i aria-hidden="true" class="teal filter bordered inverted icon"></i></div></div><div class="item"><div class="header">Element<!-- -->s</div><div class="menu"><a class="item" href="https://react.semantic-ui.com/elements/container/">Container</a><a class="item" href="https://react.semantic-ui.com/elements/button/">Button</a><a class="item" href="https://react.semantic-ui.com/elements/divider/">Divider</a><a class="item" href="https://react.semantic-ui.com/elements/flag/">Flag</a><a class="item" href="https://react.semantic-ui.com/elements/icon/">Icon</a><a class="item" href="https://react.semantic-ui.com/elements/header/">Header</a><a class="item" href="https://react.semantic-ui.com/elements/input/">Input</a><a class="item" href="https://react.semantic-ui.com/elements/image/">Image</a><a class="item" href="https://react.semantic-ui.com/elements/label/">Label</a><a class="item" href="https://react.semantic-ui.com/elements/list/">List</a><a class="item" href="https://react.semantic-ui.com/elements/loader/">Loader</a><a class="item" href="https://react.semantic-ui.com/elements/placeholder/">Placeholder</a><a class="item" href="https://react.semantic-ui.com/elements/rail/">Rail</a><a class="item" href="https://react.semantic-ui.com/elements/reveal/">Reveal</a><a class="item" href="https://react.semantic-ui.com/elements/segment/">Segment</a><a class="item" href="https://react.semantic-ui.com/elements/step/">Step</a></div></div><div class="item"><div class="header">Collection<!-- -->s</div><div class="menu"><a class="item" href="https://react.semantic-ui.com/collections/breadcrumb/">Breadcrumb</a><a class="item" href="https://react.semantic-ui.com/collections/form/">Form</a><a class="item" href="https://react.semantic-ui.com/collections/grid/">Grid</a><a class="item" href="https://react.semantic-ui.com/collections/message/">Message</a><a class="item" href="https://react.semantic-ui.com/collections/menu/">Menu</a><a class="item" href="https://react.semantic-ui.com/collections/table/">Table</a></div></div><div class="item"><div class="header">View<!-- -->s</div><div class="menu"><a class="item" href="https://react.semantic-ui.com/views/advertisement/">Advertisement</a><a class="item" href="https://react.semantic-ui.com/views/card/">Card</a><a class="item" href="https://react.semantic-ui.com/views/comment/">Comment</a><a class="item" href="https://react.semantic-ui.com/views/feed/">Feed</a><a class="item" href="https://react.semantic-ui.com/views/statistic/">Statistic</a><a class="item" href="https://react.semantic-ui.com/views/item/">Item</a></div></div><div class="item"><div class="header">Module<!-- -->s</div><div class="menu"><a class="item" href="https://react.semantic-ui.com/modules/accordion/">Accordion</a><a class="item" href="https://react.semantic-ui.com/modules/checkbox/">Checkbox</a><a class="item" href="https://react.semantic-ui.com/modules/dimmer/">Dimmer</a><a class="item" href="https://react.semantic-ui.com/modules/embed/">Embed</a><a class="item" href="https://react.semantic-ui.com/modules/dropdown/">Dropdown</a><a class="item" href="https://react.semantic-ui.com/modules/modal/">Modal</a><a class="item" href="https://react.semantic-ui.com/modules/progress/">Progress</a><a class="item" href="https://react.semantic-ui.com/modules/popup/">Popup</a><a class="item" href="https://react.semantic-ui.com/modules/rating/">Rating</a><a class="item" href="https://react.semantic-ui.com/modules/sidebar/">Sidebar</a><a class="item" href="https://react.semantic-ui.com/modules/sticky/">Sticky</a><a class="item" href="https://react.semantic-ui.com/modules/search/">Search</a><a class="item" href="https://react.semantic-ui.com/modules/tab/">Tab</a><a class="item" href="https://react.semantic-ui.com/modules/transition/">Transition</a></div></div><div class="item"><div class="header">Behavior<!-- -->s</div><div class="menu"><a class="item" href="https://react.semantic-ui.com/behaviors/visibility/">Visibility</a></div></div><div class="item"><div class="header">Addon<!-- -->s</div><div class="menu"><a aria-current="page" class="item active" href="https://react.semantic-ui.com/addons/confirm/">Confirm</a><a class="item" href="https://react.semantic-ui.com/addons/mount-node/">Mount Node</a><a class="item" href="https://react.semantic-ui.com/addons/pagination/">Pagination</a><a class="item" href="https://react.semantic-ui.com/addons/portal/">Portal</a><a class="item" href="https://react.semantic-ui.com/addons/radio/">Radio</a><a class="item" href="https://react.semantic-ui.com/addons/responsive/">Responsive</a><a class="item" href="https://react.semantic-ui.com/addons/select/">Select</a><a class="item" href="https://react.semantic-ui.com/addons/text-area/">Text Area</a><a class="item" href="https://react.semantic-ui.com/addons/transitionable-portal/">Transitionable Portal</a></div></div></div></div><div style="flex:0 0 auto"><div id="docs-carbonads"></div></div></div><div style="margin-left:250px;min-width:550px"><div class="ui padded grid"><div class="row"><div class="column"><h1 class="ui header"><span>Confirm</span><div class="sub header">A Confirm modal gives the user a choice to confirm or cancel an action/</div></h1><div role="list" class="ui small horizontal link list" style="display:block"><div role="listitem" class="item"><div class="ui grey tiny header">See:</div></div><a class="item" role="listitem" href="https://react.semantic-ui.com/modules/modal/">Modal</a></div><div role="list" class="ui link list" style="background:#f7f7f7;box-shadow:0 0 1em 0.5em #f7f7f7;margin:0.5em;padding:0.5em;position:absolute;right:0;top:0"><div role="listitem" class="item"><i aria-hidden="true" class="github icon"></i><div class="content"><code><a href="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/addons/Confirm/Confirm.js" target="_blank" rel="noopener noreferrer">src/addons/Confirm/Confirm.js</a></code></div></div><div role="listitem" class="item"><i aria-hidden="true" class="book icon"></i><div class="content"><a href="https://semantic-ui.com/addons/confirm" target="_blank" rel="noopener noreferrer">Semantic UI <!-- -->Confirm<!-- --> Docs</a></div></div></div><div class="ui slider checkbox"><input type="checkbox" class="hidden" readonly="" tabindex="0"/><label>Props</label></div></div></div><div class="equal width row"><div class="column"><div><div><div class="ui padded grid"><div class="column"><h2 style="margin-bottom:1.5em;text-align:center;text-transform:uppercase;opacity:0.5" class="ui header no-anchor">Types</h2><div><div id="types-confirm" style="margin-top:1rem"><div class="ui vertically padded grid docs-example"><div class="equal width row"><div class="column"><div><h3 style="margin:0" class="ui header no-anchor">Confirm</h3><p>A default confirm.</p></div></div><div style="flex:0 0 auto;width:auto" class="right aligned column"><div class="ui placeholder"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div><div class="row"><div class="sixteen wide column"><div class="ui placeholder"><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div></div></div></div></div><div><div id="types-callbacks" style="margin-top:1rem"><div class="ui vertically padded grid docs-example"><div class="equal width row"><div class="column"><div><h3 style="margin:0" class="ui header no-anchor">Callbacks</h3><p>A confirm has callbacks for cancel and confirm actions.</p></div></div><div style="flex:0 0 auto;width:auto" class="right aligned column"><div class="ui placeholder"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div><div class="row"><div class="sixteen wide column"><div class="ui placeholder"><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div></div></div></div></div></div></div><div class="ui padded grid"><div class="column"><h2 style="margin-bottom:1.5em;text-align:center;text-transform:uppercase;opacity:0.5" class="ui header no-anchor">Variations</h2><div><div id="variations-header" style="margin-top:1rem"><div class="ui vertically padded grid docs-example"><div class="equal width row"><div class="column"><div><h3 style="margin:0" class="ui header no-anchor">Header</h3><p>A confirm can define a header.</p></div></div><div style="flex:0 0 auto;width:auto" class="right aligned column"><div class="ui placeholder"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div><div class="row"><div class="sixteen wide column"><div class="ui placeholder"><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div></div></div></div></div><div><div id="variations-content" style="margin-top:1rem"><div class="ui vertically padded grid docs-example"><div class="equal width row"><div class="column"><div><h3 style="margin:0" class="ui header no-anchor">Content</h3><p>A confirm can define content.</p></div></div><div style="flex:0 0 auto;width:auto" class="right aligned column"><div class="ui placeholder"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div><div class="row"><div class="sixteen wide column"><div class="ui placeholder"><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div></div></div></div></div><div><div id="variations-buttons" style="margin-top:1rem"><div class="ui vertically padded grid docs-example"><div class="equal width row"><div class="column"><div><h3 style="margin:0" class="ui header no-anchor">Button Text</h3><p>A confirm can customize button text.</p></div></div><div style="flex:0 0 auto;width:auto" class="right aligned column"><div class="ui placeholder"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div><div class="row"><div class="sixteen wide column"><div class="ui placeholder"><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div></div></div></div></div><div><div id="variations-size" style="margin-top:1rem"><div class="ui vertically padded grid docs-example"><div class="equal width row"><div class="column"><div><h3 style="margin:0" class="ui header no-anchor">Confirm Size</h3><p>A confirm can define size.</p></div></div><div style="flex:0 0 auto;width:auto" class="right aligned column"><div class="ui placeholder"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div><div class="row"><div class="sixteen wide column"><div class="ui placeholder"><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div><div class="paragraph"><div class="line"></div><div class="line"></div><div class="line"></div></div></div></div></div></div></div></div></div></div></div></div><div style="text-align:center;opacity:0.5;padding-top:50vh">This is the bottom <i aria-hidden="true" class="pointing down icon"></i></div></div><div class="five wide computer four wide large screen four wide widescreen column"><div class=""><div></div><div class="ui sticky"><div style="background:#fff;box-shadow:0 2px 2px rgba(0, 0, 0, 0.1);padding-left:1em;padding-bottom:0.1em;padding-top:0.1em" class="accordion ui ui fluid text vertical menu"><div class="item"><div class="title"><b>Types</b><i aria-hidden="true" class="dropdown icon"></i></div><div class="menu content"><a class="item">Confirm</a><a class="item">Callbacks</a></div></div><div class="item"><div class="title"><b>Variations</b><i aria-hidden="true" class="dropdown icon"></i></div><div class="menu content"><a class="item">Header</a><a class="item">Content</a><a class="item">Button Text</a><a class="item">Confirm Size</a></div></div></div></div></div></div></div></div><div class="ui grid"><div class="center aligned eleven wide computer twelve wide large screen twelve wide widescreen column">Blazing deployments by<!-- --> <a href="https://vercel.com/?utm_source=semantic-ui-react"><img height="12" width="14" src="https://react.semantic-ui.com/vercel-logo.svg"/> Vercel</a>.</div></div></div></div></div><script type="text/javascript">window.__CSS_CHUNKS__ = {}</script><script type="text/javascript">
window.__routeInfo = {"path":"addons/confirm","templateID":3,"sharedPropsHashes":{"exampleSources":"ZTzQ1Q"},"localProps":null,"allProps":{"componentsInfo":{"Confirm":{"displayName":"Confirm","props":[{"type":"custom","required":false,"description":["The cancel button text."],"defaultValue":"'Cancel'","tags":[],"name":"cancelButton"},{"type":"custom","required":false,"description":["The OK button text."],"defaultValue":"'OK'","tags":[],"name":"confirmButton"},{"type":"custom","required":false,"description":["The ModalContent text."],"defaultValue":"'Are you sure?'","tags":[],"name":"content"},{"type":"custom","required":false,"description":["The ModalHeader text."],"tags":[],"name":"header"},{"type":"func","required":false,"description":["Called when the Modal is closed without clicking confirm."],"tags":[{"title":"param","description":"React's original SyntheticEvent.","type":{"type":"NameExpression","name":"SyntheticEvent"},"name":"event"},{"title":"param","description":"All props.","type":{"type":"NameExpression","name":"object"},"name":"data"}],"name":"onCancel"},{"type":"func","required":false,"description":["Called when the OK button is clicked."],"tags":[{"title":"param","description":"React's original SyntheticEvent.","type":{"type":"NameExpression","name":"SyntheticEvent"},"name":"event"},{"title":"param","description":"All props.","type":{"type":"NameExpression","name":"object"},"name":"data"}],"name":"onConfirm"},{"type":"bool","required":false,"description":["Whether or not the modal is visible."],"tags":[],"name":"open"},{"type":"enum","required":false,"description":["A Confirm can vary in size"],"defaultValue":"'small'","tags":[],"value":["mini","tiny","small","large","fullscreen"],"name":"size"}],"constructorName":"Confirm","type":"addon","isParent":true,"isChild":false,"parentDisplayName":null,"subcomponentName":null,"subcomponents":[],"apiPath":"Confirm","componentClassName":"confirm","docblock":{"tags":[{"title":"see","description":"Modal"}],"description":["A Confirm modal gives the user a choice to confirm or cancel an action/"]},"examplesExist":true,"repoPath":"src/addons/Confirm/Confirm.js","filename":"Confirm.js","filenameWithoutExt":"Confirm"}},"exampleSources":{"behaviors/Visibility/Types/VisibilityExampleVisibility":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Divider,\n Grid,\n Image,\n Segment,\n Sticky,\n Table,\n Ref,\n Visibility,\n} from 'semantic-ui-react'\n\nexport default class VisibilityExampleVisibility extends Component {\n state = {\n calculations: {\n direction: 'none',\n height: 0,\n width: 0,\n topPassed: false,\n bottomPassed: false,\n pixelsPassed: 0,\n percentagePassed: 0,\n topVisible: false,\n bottomVisible: false,\n fits: false,\n passing: false,\n onScreen: false,\n offScreen: false,\n },\n }\n contextRef = createRef()\n\n handleUpdate = (e, { calculations }) => this.setState({ calculations })\n\n render() {\n const { calculations } = this.state\n\n return (\n <Ref innerRef={this.contextRef}>\n <Grid columns={2}>\n <Grid.Column>\n <Visibility onUpdate={this.handleUpdate}>\n <Segment>\n {_.map(\n [\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n ],\n (src, index, images) => (\n <React.Fragment key={index}>\n <Image src={src} />\n {index !== images.length - 1 && <Divider />}\n </React.Fragment>\n ),\n )}\n </Segment>\n </Visibility>\n </Grid.Column>\n\n <Grid.Column>\n <Sticky context={this.contextRef}>\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Calculation</Table.HeaderCell>\n <Table.HeaderCell>Value</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n <Table.Row>\n <Table.Cell>direction</Table.Cell>\n <Table.Cell>{calculations.direction}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>pixelsPassed</Table.Cell>\n <Table.Cell>\n {calculations.pixelsPassed.toFixed()}px\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>percentagePassed</Table.Cell>\n <Table.Cell>\n {(calculations.percentagePassed * 100).toFixed()}%\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>fits</Table.Cell>\n <Table.Cell>{calculations.fits.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>width</Table.Cell>\n <Table.Cell>{calculations.width.toFixed()}px</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>height</Table.Cell>\n <Table.Cell>{calculations.height.toFixed()}px</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>onScreen</Table.Cell>\n <Table.Cell>{calculations.onScreen.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>offScreen</Table.Cell>\n <Table.Cell>{calculations.offScreen.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>passing</Table.Cell>\n <Table.Cell>{calculations.passing.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>topVisible</Table.Cell>\n <Table.Cell>\n {calculations.topVisible.toString()}\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>bottomVisible</Table.Cell>\n <Table.Cell>\n {calculations.bottomVisible.toString()}\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>topPassed</Table.Cell>\n <Table.Cell>{calculations.topPassed.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>bottomPassed</Table.Cell>\n <Table.Cell>\n {calculations.bottomPassed.toString()}\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </Sticky>\n </Grid.Column>\n </Grid>\n </Ref>\n )\n }\n}\n","behaviors/Visibility/Settings/VisibilityExampleCallbackFrequency":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Button,\n Checkbox,\n Divider,\n Grid,\n Image,\n Label,\n Ref,\n Segment,\n Sticky,\n Visibility,\n} from 'semantic-ui-react'\n\nexport default class VisibilityExampleCallbackFrequency extends Component {\n state = {\n continuous: false,\n log: [],\n logCount: 0,\n once: true,\n }\n contextRef = createRef()\n\n updateLog = (eventName) => () =>\n this.setState((prevState) => ({\n log: [\n `${new Date().toLocaleTimeString()}: ${eventName}`,\n ...prevState.log,\n ].slice(0, 20),\n logCount: prevState.logCount + 1,\n }))\n\n clearLog = () => this.setState({ log: [], logCount: 0 })\n\n toggleOnce = () => this.setState((prevState) => ({ once: !prevState.once }))\n\n toggleContinuous = () =>\n this.setState((prevState) => ({ continuous: !prevState.continuous }))\n\n render() {\n const { continuous, log, logCount, once } = this.state\n\n return (\n <Ref innerRef={this.contextRef}>\n <Grid columns={2}>\n <Grid.Column>\n <Visibility\n continuous={continuous}\n once={once}\n onTopVisible={this.updateLog('onTopVisible')}\n onTopPassed={this.updateLog('onTopPassed')}\n onBottomVisible={this.updateLog('onBottomVisible')}\n onBottomPassed={this.updateLog('onBottomPassed')}\n onTopVisibleReverse={this.updateLog('onTopVisibleReverse')}\n onTopPassedReverse={this.updateLog('onTopPassedReverse')}\n onBottomVisibleReverse={this.updateLog('onBottomVisibleReverse')}\n onBottomPassedReverse={this.updateLog('onBottomPassedReverse')}\n onPassing={this.updateLog('onPassing')}\n onPassingReverse={this.updateLog('onPassingReverse')}\n onOnScreen={this.updateLog('onOnScreen')}\n onOffScreen={this.updateLog('onOffScreen')}\n >\n <Segment>\n {_.map(\n [\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n ],\n (src, index, images) => (\n <React.Fragment key={index}>\n <Image src={src} />\n {index !== images.length - 1 && <Divider />}\n </React.Fragment>\n ),\n )}\n </Segment>\n </Visibility>\n </Grid.Column>\n\n <Grid.Column>\n <Sticky context={this.contextRef}>\n <Segment.Group>\n <Segment>\n <Checkbox\n checked={once}\n label='Once'\n onChange={this.toggleOnce}\n toggle\n />\n <Divider />\n <Checkbox\n checked={continuous}\n label='Continuous'\n onChange={this.toggleContinuous}\n toggle\n />\n </Segment>\n <Segment>\n <Button\n compact\n size='small'\n floated='right'\n onClick={this.clearLog}\n >\n Clear\n </Button>\n Event Log <Label circular>{logCount}</Label>\n </Segment>\n <Segment secondary>\n <pre>\n {log.map((e, i) => (\n <div key={i}>{e}</div>\n ))}\n </pre>\n </Segment>\n </Segment.Group>\n </Sticky>\n </Grid.Column>\n </Grid>\n </Ref>\n )\n }\n}\n","behaviors/Visibility/Settings/VisibilityExampleFireOnMount":"import React, { Component } from 'react'\nimport {\n Divider,\n Grid,\n Image,\n Table,\n Segment,\n Visibility,\n} from 'semantic-ui-react'\n\nexport default class VisibilityExampleFireOnMount extends Component {\n state = {\n calculations: {\n direction: 'none',\n height: 0,\n width: 0,\n topPassed: false,\n bottomPassed: false,\n pixelsPassed: 0,\n percentagePassed: 0,\n topVisible: false,\n bottomVisible: false,\n fits: false,\n passing: false,\n onScreen: false,\n offScreen: false,\n },\n }\n\n handleOnScreen = (e, { calculations }) => this.setState({ calculations })\n\n handleOffScreen = (e, { calculations }) => this.setState({ calculations })\n\n render() {\n const { calculations } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Visibility\n fireOnMount\n onOnScreen={this.handleOnScreen}\n onOffScreen={this.handleOffScreen}\n >\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/centered-paragraph.png' />\n <Divider />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Divider />\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n <Divider />\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Visibility>\n </Grid.Column>\n\n <Grid.Column>\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Calculation</Table.HeaderCell>\n <Table.HeaderCell>Value</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n <Table.Row>\n <Table.Cell>direction</Table.Cell>\n <Table.Cell>{calculations.direction}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>pixelsPassed</Table.Cell>\n <Table.Cell>{calculations.pixelsPassed.toFixed()}px</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>percentagePassed</Table.Cell>\n <Table.Cell>\n {(calculations.percentagePassed * 100).toFixed()}%\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>fits</Table.Cell>\n <Table.Cell>{calculations.fits.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>width</Table.Cell>\n <Table.Cell>{calculations.width.toFixed()}px</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>height</Table.Cell>\n <Table.Cell>{calculations.height.toFixed()}px</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>onScreen</Table.Cell>\n <Table.Cell>{calculations.onScreen.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>offScreen</Table.Cell>\n <Table.Cell>{calculations.offScreen.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>passing</Table.Cell>\n <Table.Cell>{calculations.passing.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>topVisible</Table.Cell>\n <Table.Cell>{calculations.topVisible.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>bottomVisible</Table.Cell>\n <Table.Cell>{calculations.bottomVisible.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>topPassed</Table.Cell>\n <Table.Cell>{calculations.topPassed.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>bottomPassed</Table.Cell>\n <Table.Cell>{calculations.bottomPassed.toString()}</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","behaviors/Visibility/Settings/VisibilityExampleGroupedCallbacks":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Button,\n Checkbox,\n Divider,\n Grid,\n Image,\n Label,\n Ref,\n Segment,\n Sticky,\n Visibility,\n} from 'semantic-ui-react'\n\nexport default class VisibilityExampleGroupedCallbacks extends Component {\n state = {\n continuous: false,\n log: [],\n logCount: 0,\n once: true,\n }\n contextRef = createRef()\n\n updateLog = (eventName) => () =>\n this.setState((prevState) => ({\n log: [\n `${new Date().toLocaleTimeString()}: ${eventName}`,\n ...prevState.log,\n ].slice(0, 20),\n logCount: prevState.logCount + 1,\n }))\n\n clearLog = () => this.setState({ log: [], logCount: 0 })\n\n toggleOnce = () => this.setState((prevState) => ({ once: !prevState.once }))\n\n toggleContinuous = () =>\n this.setState((prevState) => ({ continuous: !prevState.continuous }))\n\n render() {\n const { continuous, log, logCount, once } = this.state\n\n return (\n <Ref innerRef={this.contextRef}>\n <Grid columns={2}>\n <Grid.Column>\n <Visibility\n continuous={continuous}\n once={once}\n onPassed={{\n 10: this.updateLog('10px'),\n 100: this.updateLog('100px'),\n 500: this.updateLog('500px'),\n '10%': this.updateLog('10%'),\n '25%': this.updateLog('25%'),\n '80%': this.updateLog('80%'),\n }}\n >\n <Segment>\n {_.map(\n [\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n ],\n (src, index, images) => (\n <React.Fragment key={index}>\n <Image src={src} />\n {index !== images.length - 1 && <Divider />}\n </React.Fragment>\n ),\n )}\n </Segment>\n </Visibility>\n </Grid.Column>\n\n <Grid.Column>\n <Sticky context={this.contextRef}>\n <Segment.Group>\n <Segment>\n <Checkbox\n checked={once}\n label='Once'\n onChange={this.toggleOnce}\n toggle\n />\n <Divider />\n <Checkbox\n checked={continuous}\n label='Continuous'\n onChange={this.toggleContinuous}\n toggle\n />\n </Segment>\n <Segment>\n <Button\n compact\n size='small'\n floated='right'\n onClick={this.clearLog}\n >\n Clear\n </Button>\n Event Log <Label circular>{logCount}</Label>\n </Segment>\n <Segment secondary>\n <pre>\n {log.map((e, i) => (\n <div key={i}>{e}</div>\n ))}\n </pre>\n </Segment>\n </Segment.Group>\n </Sticky>\n </Grid.Column>\n </Grid>\n </Ref>\n )\n }\n}\n","behaviors/Visibility/Settings/VisibilityExampleOffset":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Divider,\n Grid,\n Image,\n Segment,\n Sticky,\n Table,\n Ref,\n Visibility,\n} from 'semantic-ui-react'\n\nexport default class VisibilityExampleOffset extends Component {\n state = {\n calculations: {\n topPassed: false,\n bottomPassed: false,\n topVisible: false,\n bottomVisible: false,\n },\n }\n contextRef = createRef()\n\n handleUpdate = (e, { calculations }) => this.setState({ calculations })\n\n render() {\n const { calculations } = this.state\n\n return (\n <Ref innerRef={this.contextRef}>\n <Grid columns={2}>\n <Grid.Column>\n <Visibility offset={[10, 10]} onUpdate={this.handleUpdate}>\n <Segment>\n {_.map(\n [\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n ],\n (src, index, images) => (\n <React.Fragment key={index}>\n <Image src={src} />\n {index !== images.length - 1 && <Divider />}\n </React.Fragment>\n ),\n )}\n </Segment>\n </Visibility>\n </Grid.Column>\n\n <Grid.Column>\n <Sticky context={this.contextRef}>\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Calculation</Table.HeaderCell>\n <Table.HeaderCell>Value</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n <Table.Row>\n <Table.Cell>topVisible</Table.Cell>\n <Table.Cell>\n {calculations.topVisible.toString()}\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>bottomVisible</Table.Cell>\n <Table.Cell>\n {calculations.bottomVisible.toString()}\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>topPassed</Table.Cell>\n <Table.Cell>{calculations.topPassed.toString()}</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>bottomPassed</Table.Cell>\n <Table.Cell>\n {calculations.bottomPassed.toString()}\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </Sticky>\n </Grid.Column>\n </Grid>\n </Ref>\n )\n }\n}\n","behaviors/Visibility/Settings/VisibilityExampleUpdateOn":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Checkbox,\n Divider,\n Grid,\n Image,\n Segment,\n Sticky,\n Table,\n Ref,\n Visibility,\n} from 'semantic-ui-react'\n\nexport default class VisibilityExampleUpdateOn extends Component {\n state = {\n calculations: {\n topVisible: false,\n bottomVisible: false,\n },\n showWireframe: true,\n }\n contextRef = createRef()\n\n handleUpdate = (e, { calculations }) => this.setState({ calculations })\n\n handleWireframe = (e, { checked }) =>\n this.setState({ showWireframe: checked })\n\n render() {\n const { calculations, showWireframe } = this.state\n\n return (\n <Ref innerRef={this.contextRef}>\n <Grid columns={2}>\n <Grid.Column>\n {showWireframe ? (\n <Segment>\n {_.map(\n [\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n '/images/wireframe/centered-paragraph.png',\n '/images/wireframe/short-paragraph.png',\n '/images/wireframe/media-paragraph.png',\n '/images/wireframe/paragraph.png',\n ],\n (src, index, images) => (\n <React.Fragment key={index}>\n <Image src={src} />\n {index !== images.length - 1 && <Divider />}\n </React.Fragment>\n ),\n )}\n </Segment>\n ) : null}\n\n <Visibility\n offset={[10, 10]}\n onUpdate={this.handleUpdate}\n updateOn='repaint'\n >\n <Segment>\n It's a tricky <code>Segment</code>\n </Segment>\n </Visibility>\n </Grid.Column>\n\n <Grid.Column>\n <Sticky context={this.contextRef}>\n <Segment>\n <Checkbox\n checked={showWireframe}\n label='Show Wireframe'\n onChange={this.handleWireframe}\n toggle\n />\n\n <Table basic='very' celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Calculation</Table.HeaderCell>\n <Table.HeaderCell>Value</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n <Table.Row>\n <Table.Cell>topVisible</Table.Cell>\n <Table.Cell>\n {calculations.topVisible.toString()}\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>bottomVisible</Table.Cell>\n <Table.Cell>\n {calculations.bottomVisible.toString()}\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </Segment>\n </Sticky>\n </Grid.Column>\n </Grid>\n </Ref>\n )\n }\n}\n","addons/Confirm/Variations/ConfirmExampleButtons":"import React, { Component } from 'react'\nimport { Button, Confirm } from 'semantic-ui-react'\n\nclass ConfirmExampleHeader extends Component {\n state = { open: false }\n\n show = () => this.setState({ open: true })\n handleConfirm = () => this.setState({ open: false })\n handleCancel = () => this.setState({ open: false })\n\n render() {\n return (\n <div>\n <Button onClick={this.show}>Show</Button>\n <Confirm\n open={this.state.open}\n cancelButton='Never mind'\n confirmButton=\"Let's do it\"\n onCancel={this.handleCancel}\n onConfirm={this.handleConfirm}\n />\n </div>\n )\n }\n}\n\nexport default ConfirmExampleHeader\n","addons/Confirm/Variations/ConfirmExampleContent":"import React, { Component } from 'react'\nimport { Button, Confirm } from 'semantic-ui-react'\n\nclass ConfirmExampleContent extends Component {\n state = { open: false }\n\n show = () => this.setState({ open: true })\n handleConfirm = () => this.setState({ open: false })\n handleCancel = () => this.setState({ open: false })\n\n render() {\n return (\n <div>\n <Button onClick={this.show}>Show</Button>\n <Confirm\n open={this.state.open}\n content='This is a custom message'\n onCancel={this.handleCancel}\n onConfirm={this.handleConfirm}\n />\n </div>\n )\n }\n}\n\nexport default ConfirmExampleContent\n","addons/Confirm/Variations/ConfirmExampleHeader":"import React, { Component } from 'react'\nimport { Button, Confirm } from 'semantic-ui-react'\n\nclass ConfirmExampleHeader extends Component {\n state = { open: false }\n\n show = () => this.setState({ open: true })\n handleConfirm = () => this.setState({ open: false })\n handleCancel = () => this.setState({ open: false })\n\n render() {\n return (\n <div>\n <Button onClick={this.show}>Show</Button>\n <Confirm\n open={this.state.open}\n header='This is a custom header'\n onCancel={this.handleCancel}\n onConfirm={this.handleConfirm}\n />\n </div>\n )\n }\n}\n\nexport default ConfirmExampleHeader\n","addons/Confirm/Variations/ConfirmExampleSize":"import React, { Component } from 'react'\nimport { Button, Confirm } from 'semantic-ui-react'\n\nexport default class ConfirmExampleSize extends Component {\n state = { open: false }\n\n handleButtonClick = () => this.setState({ open: true })\n handleConfirm = () => this.setState({ open: false })\n handleCancel = () => this.setState({ open: false })\n\n render() {\n return (\n <div>\n <Button onClick={this.handleButtonClick}>Show Large</Button>\n <Confirm\n header='This is a large confirm'\n open={this.state.open}\n onCancel={this.handleCancel}\n onConfirm={this.handleConfirm}\n size='large'\n />\n </div>\n )\n }\n}\n","addons/Confirm/Types/ConfirmExampleCallbacks":"import React, { Component } from 'react'\nimport { Button, Confirm } from 'semantic-ui-react'\n\nclass ConfirmExampleCallbacks extends Component {\n state = { open: false, result: 'show the modal to capture a result' }\n\n show = () => this.setState({ open: true })\n handleConfirm = () => this.setState({ result: 'confirmed', open: false })\n handleCancel = () => this.setState({ result: 'cancelled', open: false })\n\n render() {\n const { open, result } = this.state\n\n return (\n <div>\n <p>\n Result: <em>{result}</em>\n </p>\n\n <Button onClick={this.show}>Show</Button>\n <Confirm\n open={open}\n onCancel={this.handleCancel}\n onConfirm={this.handleConfirm}\n />\n </div>\n )\n }\n}\n\nexport default ConfirmExampleCallbacks\n","addons/Confirm/Types/ConfirmExampleConfirm":"import React, { Component } from 'react'\nimport { Button, Confirm } from 'semantic-ui-react'\n\nclass ConfirmExampleConfirm extends Component {\n state = { open: false }\n\n open = () => this.setState({ open: true })\n close = () => this.setState({ open: false })\n\n render() {\n return (\n <div>\n <Button onClick={this.open}>Show</Button>\n <Confirm\n open={this.state.open}\n onCancel={this.close}\n onConfirm={this.close}\n />\n </div>\n )\n }\n}\n\nexport default ConfirmExampleConfirm\n","addons/Pagination/States/PaginationExampleDisabled":"import React from 'react'\nimport { Pagination } from 'semantic-ui-react'\n\nconst PaginationExampleDisabled = () => (\n <Pagination defaultActivePage={1} disabled totalPages={5} />\n)\n\nexport default PaginationExampleDisabled\n","addons/Pagination/Types/PaginationExampleCompact":"import React from 'react'\nimport { Pagination } from 'semantic-ui-react'\n\nconst PaginationExampleCompact = () => (\n <Pagination\n boundaryRange={0}\n defaultActivePage={1}\n ellipsisItem={null}\n firstItem={null}\n lastItem={null}\n siblingRange={1}\n totalPages={10}\n />\n)\n\nexport default PaginationExampleCompact\n","addons/Pagination/Types/PaginationExamplePagination":"import React from 'react'\nimport { Pagination } from 'semantic-ui-react'\n\nconst PaginationExamplePagination = () => (\n <Pagination defaultActivePage={5} totalPages={10} />\n)\n\nexport default PaginationExamplePagination\n","addons/Pagination/Usage/PaginationExampleControlled":"import React, { Component } from 'react'\nimport { Grid, Input, Pagination, Segment } from 'semantic-ui-react'\n\nexport default class PaginationExampleControlled extends Component {\n state = { activePage: 1 }\n\n handleInputChange = (e, { value }) => this.setState({ activePage: value })\n\n handlePaginationChange = (e, { activePage }) => this.setState({ activePage })\n\n render() {\n const { activePage } = this.state\n\n return (\n <Grid columns={2} verticalAlign='middle'>\n <Grid.Column>\n <Segment secondary>\n <div>activePage: {activePage}</div>\n <Input\n min={1}\n max={5}\n onChange={this.handleInputChange}\n type='range'\n value={activePage}\n />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Pagination\n activePage={activePage}\n onPageChange={this.handlePaginationChange}\n totalPages={5}\n />\n </Grid.Column>\n </Grid>\n )\n }\n}\n","addons/Pagination/Usage/PaginationExampleMenuProps":"import React from 'react'\nimport { Pagination } from 'semantic-ui-react'\n\nconst PaginationExampleShorthand = () => (\n <Pagination\n defaultActivePage={1}\n firstItem={null}\n lastItem={null}\n pointing\n secondary\n totalPages={3}\n />\n)\n\nexport default PaginationExampleShorthand\n","addons/Pagination/Usage/PaginationExampleOptions":"import React, { Component } from 'react'\nimport { Grid, Form, Pagination, Segment } from 'semantic-ui-react'\n\nexport default class PaginationExampleCustomization extends Component {\n state = {\n activePage: 5,\n boundaryRange: 1,\n siblingRange: 1,\n showEllipsis: true,\n showFirstAndLastNav: true,\n showPreviousAndNextNav: true,\n totalPages: 50,\n }\n\n handleCheckboxChange = (e, { checked, name }) =>\n this.setState({ [name]: checked })\n\n handleInputChange = (e, { name, value }) => this.setState({ [name]: value })\n\n handlePaginationChange = (e, { activePage }) => this.setState({ activePage })\n\n render() {\n const {\n activePage,\n boundaryRange,\n siblingRange,\n showEllipsis,\n showFirstAndLastNav,\n showPreviousAndNextNav,\n totalPages,\n } = this.state\n\n return (\n <Grid columns={1}>\n <Grid.Column>\n <Pagination\n activePage={activePage}\n boundaryRange={boundaryRange}\n onPageChange={this.handlePaginationChange}\n size='mini'\n siblingRange={siblingRange}\n totalPages={totalPages}\n // Heads up! All items are powered by shorthands, if you want to hide one of them, just pass `null` as value\n ellipsisItem={showEllipsis ? undefined : null}\n firstItem={showFirstAndLastNav ? undefined : null}\n lastItem={showFirstAndLastNav ? undefined : null}\n prevItem={showPreviousAndNextNav ? undefined : null}\n nextItem={showPreviousAndNextNav ? undefined : null}\n />\n </Grid.Column>\n\n <Grid.Column>\n <Form as={Segment}>\n <Form.Group widths={2}>\n <Form.Input\n label='Active page'\n name='activePage'\n min={1}\n onChange={this.handleInputChange}\n type='number'\n value={activePage}\n />\n <Form.Input\n label='Total pages'\n name='totalPages'\n min={1}\n onChange={this.handleInputChange}\n type='number'\n value={totalPages}\n />\n </Form.Group>\n <Form.Group widths={2}>\n <Form.Input\n label='Boundary pages range'\n name='boundaryRange'\n min={0}\n onChange={this.handleInputChange}\n type='number'\n value={boundaryRange}\n />\n <Form.Input\n label='Sibling pages range'\n name='siblingRange'\n min={0}\n onChange={this.handleInputChange}\n type='number'\n value={siblingRange}\n />\n </Form.Group>\n <Form.Group inline>\n <Form.Checkbox\n checked={showEllipsis}\n label='Show ellipsis'\n name='showEllipsis'\n onChange={this.handleCheckboxChange}\n />\n <Form.Checkbox\n checked={showFirstAndLastNav}\n label='Show first and last nav pages'\n name='showFirstAndLastNav'\n onChange={this.handleCheckboxChange}\n />\n <Form.Checkbox\n checked={showPreviousAndNextNav}\n label='Show previous and next nav pages'\n name='showPreviousAndNextNav'\n onChange={this.handleCheckboxChange}\n />\n </Form.Group>\n </Form>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","addons/Pagination/Usage/PaginationExampleShorthand":"import React from 'react'\nimport { Icon, Pagination } from 'semantic-ui-react'\n\nconst PaginationExampleShorthand = () => (\n <Pagination\n defaultActivePage={5}\n ellipsisItem={{ content: <Icon name='ellipsis horizontal' />, icon: true }}\n firstItem={{ content: <Icon name='angle double left' />, icon: true }}\n lastItem={{ content: <Icon name='angle double right' />, icon: true }}\n prevItem={{ content: <Icon name='angle left' />, icon: true }}\n nextItem={{ content: <Icon name='angle right' />, icon: true }}\n totalPages={10}\n />\n)\n\nexport default PaginationExampleShorthand\n","addons/Portal/Types/PortalExampleControlled":"import React, { Component } from 'react'\nimport { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react'\n\nexport default class PortalExampleControlled extends Component {\n state = { open: false }\n\n handleClose = () => this.setState({ open: false })\n handleOpen = () => this.setState({ open: true })\n\n render() {\n const { open } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Button\n content='Open Portal'\n disabled={open}\n positive\n onClick={this.handleOpen}\n />\n\n <Portal onClose={this.handleClose} open={open}>\n <Segment\n style={{\n left: '40%',\n position: 'fixed',\n top: '50%',\n zIndex: 1000,\n }}\n >\n <Header>This is a controlled portal</Header>\n <p>Portals have tons of great callback functions to hook into.</p>\n <p>To close, simply click the close button or click away</p>\n\n <Button\n content='Close Portal'\n negative\n onClick={this.handleClose}\n />\n </Segment>\n </Portal>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","addons/Portal/Types/PortalExamplePortal":"import React, { Component } from 'react'\nimport { Button, Grid, Header, Label, Segment, Portal } from 'semantic-ui-react'\n\nexport default class PortalExamplePortal extends Component {\n state = {\n log: [],\n logCount: 0,\n open: false,\n }\n\n handleOpen = () => {\n this.setState({ open: true })\n this.writeLog('onOpen()')\n }\n\n handleClose = () => {\n this.setState({ open: false })\n this.writeLog('onClose()')\n }\n\n clearLog = () => this.setState({ log: [], logCount: 0 })\n\n writeLog = (eventName) =>\n this.setState((prevState) => ({\n log: [\n `${new Date().toLocaleTimeString()}: ${eventName}`,\n ...prevState.log,\n ].slice(0, 20),\n logCount: prevState.logCount + 1,\n }))\n\n render() {\n const { log, logCount, open } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Portal\n closeOnTriggerClick\n openOnTriggerClick\n trigger={\n <Button\n content={open ? 'Close Portal' : 'Open Portal'}\n negative={open}\n positive={!open}\n />\n }\n onOpen={this.handleOpen}\n onClose={this.handleClose}\n >\n <Segment\n style={{\n left: '40%',\n position: 'fixed',\n top: '50%',\n zIndex: 1000,\n }}\n >\n <Header>This is an example portal</Header>\n <p>Portals have tons of great callback functions to hook into.</p>\n <p>To close, simply click the close button or click away</p>\n </Segment>\n </Portal>\n </Grid.Column>\n <Grid.Column>\n <Segment.Group>\n <Segment>\n <Button\n compact\n size='small'\n floated='right'\n onClick={this.clearLog}\n >\n Clear\n </Button>\n Event Log <Label circular>{logCount}</Label>\n </Segment>\n <Segment secondary>\n <pre>\n {log.map((e, i) => (\n <div key={i}>{e}</div>\n ))}\n </pre>\n </Segment>\n </Segment.Group>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","addons/MountNode/Types/MountNodeExampleMountNode":"import React, { Component, createRef } from 'react'\nimport { Form, Grid, MountNode, Segment } from 'semantic-ui-react'\n\nexport default class MountNodeExampleMountNode extends Component {\n state = { className: '' }\n nodeRef = createRef()\n\n handleChange = (e, { value }) => this.setState({ className: value })\n\n render() {\n const { className } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Form>\n <Form.Input\n placeholder='Enter any className to apply...'\n onChange={this.handleChange}\n value={className}\n />\n </Form>\n </Grid.Column>\n <Grid.Column>\n <Segment>\n <div ref={this.nodeRef}>An example node</div>\n </Segment>\n <MountNode className={className} node={this.nodeRef} />\n </Grid.Column>\n </Grid>\n )\n }\n}\n","addons/Radio/States/RadioExampleChecked":"import React from 'react'\nimport { Radio } from 'semantic-ui-react'\n\nconst RadioExampleChecked = () => (\n <Radio label='This radio comes pre-checked' defaultChecked />\n)\n\nexport default RadioExampleChecked\n","addons/Radio/States/RadioExampleDisabled":"import React from 'react'\nimport { Form, Radio } from 'semantic-ui-react'\n\nconst RadioExampleDisabled = () => (\n <Form>\n <Form.Field>\n <Radio label='Disabled' disabled />\n </Form.Field>\n <Form.Field>\n <Radio toggle label='Disabled' disabled />\n </Form.Field>\n </Form>\n)\n\nexport default RadioExampleDisabled\n","addons/Radio/States/RadioExampleReadOnly":"import React from 'react'\nimport { Radio } from 'semantic-ui-react'\n\nconst RadioExampleReadOnly = () => (\n <Radio label='This radio is read-only' readOnly />\n)\n\nexport default RadioExampleReadOnly\n","addons/Radio/States/RadioExampleRemoteControl":"import React, { Component } from 'react'\nimport { Button, Radio } from 'semantic-ui-react'\n\nexport default class RadioExampleRemoteControl extends Component {\n state = { checked: false }\n toggle = () => this.setState((prevState) => ({ checked: !prevState.checked }))\n\n render() {\n return (\n <div>\n <Button onClick={this.toggle}>Toggle it</Button>\n <Radio\n label='Check this radio'\n onChange={this.toggle}\n checked={this.state.checked}\n />\n </div>\n )\n }\n}\n","addons/Radio/Types/RadioExampleRadio":"import React from 'react'\nimport { Radio } from 'semantic-ui-react'\n\nconst RadioExampleRadio = () => <Radio label='Make my profile visible' />\n\nexport default RadioExampleRadio\n","addons/Radio/Types/RadioExampleRadioGroup":"import React, { Component } from 'react'\nimport { Form, Radio } from 'semantic-ui-react'\n\nexport default class RadioExampleRadioGroup extends Component {\n state = {}\n handleChange = (e, { value }) => this.setState({ value })\n\n render() {\n return (\n <Form>\n <Form.Field>\n Selected value: <b>{this.state.value}</b>\n </Form.Field>\n <Form.Field>\n <Radio\n label='Choose this'\n name='radioGroup'\n value='this'\n checked={this.state.value === 'this'}\n onChange={this.handleChange}\n />\n </Form.Field>\n <Form.Field>\n <Radio\n label='Or that'\n name='radioGroup'\n value='that'\n checked={this.state.value === 'that'}\n onChange={this.handleChange}\n />\n </Form.Field>\n </Form>\n )\n }\n}\n","addons/Radio/Types/RadioExampleSlider":"import React from 'react'\nimport { Radio } from 'semantic-ui-react'\n\nconst RadioExampleSlider = () => <Radio slider />\n\nexport default RadioExampleSlider\n","addons/Radio/Types/RadioExampleToggle":"import React from 'react'\nimport { Radio } from 'semantic-ui-react'\n\nconst RadioExampleToggle = () => <Radio toggle />\n\nexport default RadioExampleToggle\n","addons/Radio/Variations/RadioExampleFitted":"import React from 'react'\nimport { Radio, Segment } from 'semantic-ui-react'\n\nconst RadioExampleFitted = () => (\n <div>\n <Segment compact>\n <Radio />\n </Segment>\n <Segment compact>\n <Radio slider />\n </Segment>\n <Segment compact>\n <Radio toggle />\n </Segment>\n </div>\n)\n\nexport default RadioExampleFitted\n","addons/Responsive/Types/ResponsiveExampleContent":"import React, { Component } from 'react'\nimport { Responsive, Button, Menu } from 'semantic-ui-react'\n\nexport default class ResponsiveExampleContent extends Component {\n state = { active: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ active: name })\n\n render() {\n const { active } = this.state\n\n return (\n <Menu>\n <Menu.Item\n active={active === 'home'}\n content='Home'\n name='home'\n onClick={this.handleItemClick}\n />\n <Menu.Item\n active={active === 'messages'}\n content='Messages'\n name='messages'\n onClick={this.handleItemClick}\n />\n\n <Menu.Menu position='right'>\n <Menu.Item>\n <Responsive\n {...Responsive.onlyMobile}\n as={Button}\n content='Switch to desktop version'\n icon='desktop'\n labelPosition='left'\n />\n <Responsive\n as={Button}\n content='Switch to mobile version'\n icon='mobile'\n labelPosition='left'\n minWidth={Responsive.onlyTablet.minWidth}\n />\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","addons/Responsive/Types/ResponsiveExampleMaxWidth":"import React from 'react'\nimport { Responsive, Segment } from 'semantic-ui-react'\n\nconst ResponsiveExampleMaxWidth = () => (\n <Segment.Group>\n <Responsive as={Segment} maxWidth={767}>\n Visible only if display has <code>767px</code> width and lower\n </Responsive>\n <Responsive as={Segment} maxWidth={2569}>\n Visible only if display has <code>2569px</code> width and lower\n </Responsive>\n </Segment.Group>\n)\n\nexport default ResponsiveExampleMaxWidth\n","addons/Responsive/Types/ResponsiveExampleMinWidth":"import React from 'react'\nimport { Responsive, Segment } from 'semantic-ui-react'\n\nconst ResponsiveExampleMinWidth = () => (\n <Segment.Group>\n <Responsive as={Segment} minWidth={768}>\n Visible only if display has <code>768px</code> width and higher\n </Responsive>\n <Responsive as={Segment} minWidth={992}>\n Visible only if display has <code>992px</code> width and higher\n </Responsive>\n </Segment.Group>\n)\n\nexport default ResponsiveExampleMinWidth\n","addons/Responsive/Types/ResponsiveExampleMixed":"import React from 'react'\nimport { Responsive, Segment } from 'semantic-ui-react'\n\nconst ResponsiveExampleMixed = () => (\n <Responsive as={Segment} minWidth={320} maxWidth={2559}>\n Visible only if display has width between <code>320px</code> and{' '}\n <code>2559px</code>\n </Responsive>\n)\n\nexport default ResponsiveExampleMixed\n","addons/Responsive/Types/ResponsiveExampleResponsive":"import React from 'react'\nimport { Responsive, Segment } from 'semantic-ui-react'\n\nconst ResponsiveExampleResponsive = () => (\n <Segment.Group>\n <Responsive as={Segment}>I'm always visible by default</Responsive>\n </Segment.Group>\n)\n\nexport default ResponsiveExampleResponsive\n","addons/Responsive/Usage/ResponsiveExampleBreakpoints":"import React from 'react'\nimport { Responsive, Segment } from 'semantic-ui-react'\n\nconst ResponsiveExampleBreakpoints = () => (\n <Segment.Group>\n <Responsive as={Segment} {...Responsive.onlyMobile}>\n Mobile\n </Responsive>\n <Responsive as={Segment} {...Responsive.onlyTablet}>\n Tablet\n </Responsive>\n <Responsive as={Segment} {...Responsive.onlyComputer}>\n Computer\n </Responsive>\n <Responsive as={Segment} {...Responsive.onlyLargeScreen}>\n Large Screen\n </Responsive>\n <Responsive as={Segment} {...Responsive.onlyWidescreen}>\n Widescreen\n </Responsive>\n </Segment.Group>\n)\n\nexport default ResponsiveExampleBreakpoints\n","addons/Responsive/Usage/ResponsiveExampleFireOnMount":"import React, { Component } from 'react'\nimport { Grid, Responsive, Segment } from 'semantic-ui-react'\n\nexport default class ResponsiveExampleFireOnMount extends Component {\n state = {}\n\n handleOnUpdate = (e, { width }) => this.setState({ width })\n\n render() {\n const { width } = this.state\n const textAlign =\n width >= Responsive.onlyComputer.minWidth ? 'right' : 'left'\n\n return (\n <Responsive\n as={Grid}\n columns={1}\n fireOnMount\n onUpdate={this.handleOnUpdate}\n >\n <Grid.Column textAlign={textAlign}>\n <Segment>\n This grid has responsive align of the text. It will be right aligned\n on computer and left aligned on other breakpoints.\n </Segment>\n </Grid.Column>\n </Responsive>\n )\n }\n}\n","addons/Responsive/Usage/ResponsiveExampleOnUpdate":"import React, { Component } from 'react'\nimport { Button, Grid, Label, Responsive, Segment } from 'semantic-ui-react'\n\nexport default class ResponsiveExampleOnUpdate extends Component {\n state = {\n log: [],\n logCount: 0,\n }\n\n handleOnUpdate = () =>\n this.setState((prevState) => ({\n log: [\n `${new Date().toLocaleTimeString()}: onUpdate()`,\n ...prevState.log,\n ].slice(0, 20),\n logCount: prevState.logCount + 1,\n }))\n\n clearLog = () => this.setState({ log: [], logCount: 0 })\n\n render() {\n const { log, logCount } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Responsive as={Segment} onUpdate={this.handleOnUpdate}>\n Responsive Segment\n </Responsive>\n </Grid.Column>\n\n <Grid.Column>\n <Segment.Group>\n <Segment>\n <Button\n compact\n content='Clear'\n floated='right'\n onClick={this.clearLog}\n size='small'\n />\n Event Log <Label circular>{logCount}</Label>\n </Segment>\n {log.length > 0 && (\n <Segment secondary>\n <pre>\n {log.map((e, i) => (\n <div key={i}>{e}</div>\n ))}\n </pre>\n </Segment>\n )}\n </Segment.Group>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","addons/Select/Types/SelectExample":"import React from 'react'\nimport { Select } from 'semantic-ui-react'\n\nconst countryOptions = [\n { key: 'af', value: 'af', text: 'Afghanistan' },\n { key: 'ax', value: 'ax', text: 'Aland Islands' },\n { key: 'al', value: 'al', text: 'Albania' },\n { key: 'dz', value: 'dz', text: 'Algeria' },\n { key: 'as', value: 'as', text: 'American Samoa' },\n { key: 'ad', value: 'ad', text: 'Andorra' },\n { key: 'ao', value: 'ao', text: 'Angola' },\n { key: 'ai', value: 'ai', text: 'Anguilla' },\n { key: 'ag', value: 'ag', text: 'Antigua' },\n { key: 'ar', value: 'ar', text: 'Argentina' },\n { key: 'am', value: 'am', text: 'Armenia' },\n { key: 'aw', value: 'aw', text: 'Aruba' },\n { key: 'au', value: 'au', text: 'Australia' },\n { key: 'at', value: 'at', text: 'Austria' },\n { key: 'az', value: 'az', text: 'Azerbaijan' },\n { key: 'bs', value: 'bs', text: 'Bahamas' },\n { key: 'bh', value: 'bh', text: 'Bahrain' },\n { key: 'bd', value: 'bd', text: 'Bangladesh' },\n { key: 'bb', value: 'bb', text: 'Barbados' },\n { key: 'by', value: 'by', text: 'Belarus' },\n { key: 'be', value: 'be', text: 'Belgium' },\n { key: 'bz', value: 'bz', text: 'Belize' },\n { key: 'bj', value: 'bj', text: 'Benin' },\n]\n\nconst SelectExample = () => (\n <Select placeholder='Select your country' options={countryOptions} />\n)\n\nexport default SelectExample\n","addons/TextArea/Types/TextAreaExampleTextArea":"import React from 'react'\nimport { Form, TextArea } from 'semantic-ui-react'\n\nconst TextAreaExampleTextArea = () => (\n <Form>\n <TextArea placeholder='Tell us more' />\n </Form>\n)\n\nexport default TextAreaExampleTextArea\n","addons/TextArea/Usage/TextAreaExampleMinHeight":"import React from 'react'\nimport { Form, TextArea } from 'semantic-ui-react'\n\nconst TextAreaExampleMinHeight = () => (\n <Form>\n <TextArea placeholder='Tell us more' style={{ minHeight: 100 }} />\n </Form>\n)\n\nexport default TextAreaExampleMinHeight\n","addons/TextArea/Usage/TextAreaExampleRows":"import React from 'react'\nimport { Form, TextArea } from 'semantic-ui-react'\n\nconst TextAreaExampleRows = () => (\n <Form>\n <TextArea rows={2} placeholder='Tell us more' />\n </Form>\n)\n\nexport default TextAreaExampleRows\n","addons/TransitionablePortal/Types/TransitionablePortalExampleControlled":"import React, { Component } from 'react'\nimport {\n Button,\n Header,\n Segment,\n TransitionablePortal,\n} from 'semantic-ui-react'\n\nexport default class TransitionablePortalExampleControlled extends Component {\n state = { open: false }\n\n handleClick = () => this.setState((prevState) => ({ open: !prevState.open }))\n handleClose = () => this.setState({ open: false })\n\n render() {\n const { open } = this.state\n\n return (\n <div>\n <Button\n content={open ? 'Close Portal' : 'Open Portal'}\n negative={open}\n positive={!open}\n onClick={this.handleClick}\n />\n\n <TransitionablePortal onClose={this.handleClose} open={open}>\n <Segment\n style={{ left: '40%', position: 'fixed', top: '50%', zIndex: 1000 }}\n >\n <Header>This is a controlled portal</Header>\n <p>Portals have tons of great callback functions to hook into.</p>\n <p>To close, simply click the close button or click away</p>\n </Segment>\n </TransitionablePortal>\n </div>\n )\n }\n}\n","addons/TransitionablePortal/Types/TransitionablePortalExamplePortal":"import React, { Component } from 'react'\nimport {\n Button,\n Header,\n Segment,\n TransitionablePortal,\n} from 'semantic-ui-react'\n\nexport default class TransitionablePortalExamplePortal extends Component {\n state = { open: false }\n\n handleOpen = () => this.setState({ open: true })\n\n handleClose = () => this.setState({ open: false })\n\n render() {\n const { open } = this.state\n\n return (\n <TransitionablePortal\n closeOnTriggerClick\n onOpen={this.handleOpen}\n onClose={this.handleClose}\n openOnTriggerClick\n trigger={\n <Button\n content={open ? 'Close Portal' : 'Open Portal'}\n negative={open}\n positive={!open}\n />\n }\n >\n <Segment\n style={{ left: '40%', position: 'fixed', top: '50%', zIndex: 1000 }}\n >\n <Header>This is an example portal</Header>\n <p>Portals have tons of great callback functions to hook into.</p>\n <p>To close, simply click the close button or click away</p>\n </Segment>\n </TransitionablePortal>\n )\n }\n}\n","addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition":"import React, { Component } from 'react'\nimport {\n Form,\n Grid,\n Header,\n Segment,\n TransitionablePortal,\n} from 'semantic-ui-react'\n\nconst transitions = [\n 'browse',\n 'browse right',\n 'drop',\n 'fade',\n 'fade up',\n 'fade down',\n 'fade left',\n 'fade right',\n 'fly up',\n 'fly down',\n 'fly left',\n 'fly right',\n 'horizontal flip',\n 'vertical flip',\n 'scale',\n 'slide up',\n 'slide down',\n 'slide left',\n 'slide right',\n 'swing up',\n 'swing down',\n 'swing left',\n 'swing right',\n 'zoom',\n]\nconst options = transitions.map((name) => ({\n key: name,\n text: name,\n value: name,\n}))\n\nexport default class TransitionablePortalExampleTransition extends Component {\n state = { animation: transitions[0], duration: 500, open: false }\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value })\n handleClick = () => this.setState((prevState) => ({ open: !prevState.open }))\n\n render() {\n const { animation, duration, open } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Form>\n <Form.Select\n label='Choose transition'\n name='animation'\n onChange={this.handleChange}\n options={options}\n value={animation}\n />\n <Form.Input\n label={`Duration: ${duration}ms `}\n min={100}\n max={2000}\n name='duration'\n onChange={this.handleChange}\n step={100}\n type='range'\n value={duration}\n />\n <Form.Button\n content={open ? 'Close Portal' : 'Open Portal'}\n negative={open}\n positive={!open}\n onClick={this.handleClick}\n />\n </Form>\n\n <TransitionablePortal\n open={open}\n transition={{ animation, duration }}\n >\n <Segment\n style={{\n left: '40%',\n position: 'fixed',\n top: '50%',\n zIndex: 1000,\n }}\n >\n <Header>This is a controlled portal</Header>\n <p>Portals have tons of great callback functions to hook into.</p>\n <p>To close, simply click the close button or click away</p>\n </Segment>\n </TransitionablePortal>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","collections/Breadcrumb/Content/BreadcrumbExampleDivider":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst BreadcrumbExampleDivider = () => (\n <Breadcrumb>\n <Breadcrumb.Section link>Home</Breadcrumb.Section>\n <Breadcrumb.Divider>/</Breadcrumb.Divider>\n <Breadcrumb.Section link>Registration</Breadcrumb.Section>\n <Breadcrumb.Divider>/</Breadcrumb.Divider>\n <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>\n </Breadcrumb>\n)\n\nexport default BreadcrumbExampleDivider\n","collections/Breadcrumb/Content/BreadcrumbExampleDividerShorthand":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst sections = [\n { key: 'home', content: 'Home', link: true },\n { key: 'registration', content: 'Registration', link: true },\n { key: 'info', content: 'Personal Information', active: true },\n]\n\nconst BreadcrumbExampleDividerShorthand = () => (\n <Breadcrumb divider='/' sections={sections} />\n)\n\nexport default BreadcrumbExampleDividerShorthand\n","collections/Breadcrumb/Content/BreadcrumbExampleIconDivider":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst BreadcrumbExampleIconDivider = () => (\n <Breadcrumb>\n <Breadcrumb.Section link>Home</Breadcrumb.Section>\n <Breadcrumb.Divider icon='right chevron' />\n <Breadcrumb.Section link>Registration</Breadcrumb.Section>\n <Breadcrumb.Divider icon='right arrow' />\n <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>\n </Breadcrumb>\n)\n\nexport default BreadcrumbExampleIconDivider\n","collections/Breadcrumb/Content/BreadcrumbExampleLink":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst BreadcrumbExampleLink = () => (\n <Breadcrumb>\n <Breadcrumb.Section link>Home</Breadcrumb.Section>\n <Breadcrumb.Divider />\n <Breadcrumb.Section link>Store</Breadcrumb.Section>\n <Breadcrumb.Divider icon='right angle' />\n <Breadcrumb.Section active>\n Search for: <a href='#'>paper towels</a>\n </Breadcrumb.Section>\n </Breadcrumb>\n)\n\nexport default BreadcrumbExampleLink\n","collections/Breadcrumb/Content/BreadcrumbExampleSection":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst BreadcrumbExampleSection = () => (\n <Breadcrumb>\n <Breadcrumb.Section link>Home</Breadcrumb.Section>\n <Breadcrumb.Divider />\n <Breadcrumb.Section active>Search</Breadcrumb.Section>\n </Breadcrumb>\n)\n\nexport default BreadcrumbExampleSection\n","collections/Breadcrumb/Content/BreadcrumbExampleSectionShorthand":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst sections = [\n { key: 'home', content: 'Home', link: true },\n { key: 'search', content: 'Search', active: true },\n]\n\nconst BreadcrumbExampleSectionShorthand = () => (\n <Breadcrumb sections={sections} />\n)\n\nexport default BreadcrumbExampleSectionShorthand\n","collections/Breadcrumb/Types/BreadcrumbExample":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst BreadcrumbExample = () => (\n <Breadcrumb>\n <Breadcrumb.Section link>Home</Breadcrumb.Section>\n <Breadcrumb.Divider />\n <Breadcrumb.Section link>Store</Breadcrumb.Section>\n <Breadcrumb.Divider />\n <Breadcrumb.Section active>T-Shirt</Breadcrumb.Section>\n </Breadcrumb>\n)\n\nexport default BreadcrumbExample\n","collections/Breadcrumb/Types/BreadcrumbExampleShorthand":"import React from 'react'\nimport { Breadcrumb } from 'semantic-ui-react'\n\nconst sections = [\n { key: 'Home', content: 'Home', link: true },\n { key: 'Store', content: 'Store', link: true },\n { key: 'Shirt', content: 'T-Shirt', active: true },\n]\n\nconst BreadcrumbExampleShorthand = () => (\n <Breadcrumb icon='right angle' sections={sections} />\n)\n\nexport default BreadcrumbExampleShorthand\n","collections/Breadcrumb/Variations/BreadcrumbExampleSize":"import React from 'react'\nimport { Breadcrumb, Divider } from 'semantic-ui-react'\n\nconst sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']\n\nconst BreadcrumbExampleSize = () => (\n <>\n {sizes.map((size) => (\n <React.Fragment key={size}>\n <Breadcrumb size={size}>\n <Breadcrumb.Section link>Home</Breadcrumb.Section>\n <Breadcrumb.Divider icon='right chevron' />\n <Breadcrumb.Section link>Registration</Breadcrumb.Section>\n <Breadcrumb.Divider icon='right chevron' />\n <Breadcrumb.Section active>Personal Information</Breadcrumb.Section>\n </Breadcrumb>\n <Divider hidden />\n </React.Fragment>\n ))}\n </>\n)\n\nexport default BreadcrumbExampleSize\n","collections/Form/Content/FormExampleField":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleField = () => (\n <Form>\n <Form.Field>\n <label>User Input</label>\n <input />\n </Form.Field>\n </Form>\n)\n\nexport default FormExampleField\n","collections/Form/GroupVariations/FormExampleEvenlyDividedGroup":"import React from 'react'\nimport { Form, Input } from 'semantic-ui-react'\n\nconst FormExampleEvenlyDividedGroup = () => (\n <Form>\n <Form.Group widths='equal'>\n <Form.Field>\n <label>First name</label>\n <Input fluid placeholder='First name' />\n </Form.Field>\n <Form.Field>\n <label>Middle name</label>\n <Input fluid placeholder='Middle name' />\n </Form.Field>\n <Form.Field>\n <label>Last name</label>\n <Input fluid placeholder='Last name' />\n </Form.Field>\n </Form.Group>\n </Form>\n)\n\nexport default FormExampleEvenlyDividedGroup\n","collections/Form/GroupVariations/FormExampleInlineGroupedFields":"import React from 'react'\nimport { Form, Input } from 'semantic-ui-react'\n\nconst FormExampleInlineGroupedFields = () => (\n <Form>\n <Form.Group inline>\n <Form.Field>\n <label>Phone Number</label>\n <Input placeholder='(xxx)' />\n </Form.Field>\n <Form.Field>\n <Input placeholder='xxx' />\n </Form.Field>\n <Form.Field>\n <Input placeholder='xxxx' />\n </Form.Field>\n </Form.Group>\n </Form>\n)\n\nexport default FormExampleInlineGroupedFields\n","collections/Form/GroupVariations/FormExampleUnstackableGroup":"import React from 'react'\nimport { Button, Form } from 'semantic-ui-react'\n\nconst FormExampleUnstackableGroup = () => (\n <Form>\n <Form.Group unstackable widths={2}>\n <Form.Input label='First name' placeholder='First name' />\n <Form.Input label='Last name' placeholder='Last name' />\n </Form.Group>\n <Form.Group widths={2}>\n <Form.Input label='Address' placeholder='Address' />\n <Form.Input label='Phone' placeholder='Phone' />\n </Form.Group>\n <Form.Checkbox label='I agree to the Terms and Conditions' />\n <Button type='submit'>Submit</Button>\n </Form>\n)\n\nexport default FormExampleUnstackableGroup\n","collections/Form/FieldVariations/FormExampleInlineField":"import React from 'react'\nimport { Form, Input } from 'semantic-ui-react'\n\nconst FormExampleInlineField = () => (\n <Form>\n <Form.Field inline>\n <label>First name</label>\n <Input placeholder='First name' />\n </Form.Field>\n </Form>\n)\n\nexport default FormExampleInlineField\n","collections/Form/FieldVariations/FormExampleRequiredField":"import React from 'react'\nimport { Form, Input } from 'semantic-ui-react'\n\nconst FormExampleRequiredField = () => (\n <Form>\n <Form.Field required>\n <label>Last name</label>\n <Input placeholder='Full name' />\n </Form.Field>\n </Form>\n)\n\nexport default FormExampleRequiredField\n","collections/Form/FieldVariations/FormExampleRequiredFieldShorthand":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleRequiredFieldShorthand = () => (\n <Form>\n <Form.Checkbox\n inline\n label='I agree to the terms and conditions'\n required\n />\n </Form>\n)\n\nexport default FormExampleRequiredFieldShorthand\n","collections/Form/FieldVariations/FormExampleWidthField":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleWidthField = () => (\n <Form>\n <Form.Group>\n <Form.Input label='First name' placeholder='First Name' width={6} />\n <Form.Input label='Middle Name' placeholder='Middle Name' width={4} />\n <Form.Input label='Last Name' placeholder='Last Name' width={6} />\n </Form.Group>\n <Form.Group>\n <Form.Input placeholder='2 Wide' width={2} />\n <Form.Input placeholder='12 Wide' width={12} />\n <Form.Input placeholder='2 Wide' width={2} />\n </Form.Group>\n <Form.Group>\n <Form.Input placeholder='8 Wide' width={8} />\n <Form.Input placeholder='6 Wide' width={6} />\n <Form.Input placeholder='2 Wide' width={2} />\n </Form.Group>\n </Form>\n)\n\nexport default FormExampleWidthField\n","collections/Form/Shorthand/FormExampleFieldControl":"import React, { Component } from 'react'\nimport {\n Button,\n Checkbox,\n Form,\n Input,\n Radio,\n Select,\n TextArea,\n} from 'semantic-ui-react'\n\nconst options = [\n { key: 'm', text: 'Male', value: 'male' },\n { key: 'f', text: 'Female', value: 'female' },\n { key: 'o', text: 'Other', value: 'other' },\n]\n\nclass FormExampleFieldControl extends Component {\n state = {}\n\n handleChange = (e, { value }) => this.setState({ value })\n\n render() {\n const { value } = this.state\n return (\n <Form>\n <Form.Group widths='equal'>\n <Form.Field\n control={Input}\n label='First name'\n placeholder='First name'\n />\n <Form.Field\n control={Input}\n label='Last name'\n placeholder='Last name'\n />\n <Form.Field\n control={Select}\n label='Gender'\n options={options}\n placeholder='Gender'\n />\n </Form.Group>\n <Form.Group inline>\n <label>Quantity</label>\n <Form.Field\n control={Radio}\n label='One'\n value='1'\n checked={value === '1'}\n onChange={this.handleChange}\n />\n <Form.Field\n control={Radio}\n label='Two'\n value='2'\n checked={value === '2'}\n onChange={this.handleChange}\n />\n <Form.Field\n control={Radio}\n label='Three'\n value='3'\n checked={value === '3'}\n onChange={this.handleChange}\n />\n </Form.Group>\n <Form.Field\n control={TextArea}\n label='About'\n placeholder='Tell us more about you...'\n />\n <Form.Field\n control={Checkbox}\n label='I agree to the Terms and Conditions'\n />\n <Form.Field control={Button}>Submit</Form.Field>\n </Form>\n )\n }\n}\n\nexport default FormExampleFieldControl\n","collections/Form/Shorthand/FormExampleFieldControlHTML":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleFieldControlHTML = () => (\n <Form>\n <Form.Group widths='equal'>\n <Form.Field label='An HTML <input>' control='input' />\n <Form.Field label='An HTML <select>' control='select'>\n <option value='male'>Male</option>\n <option value='female'>Female</option>\n </Form.Field>\n </Form.Group>\n <Form.Group grouped>\n <label>HTML radios</label>\n <Form.Field\n label='This one'\n control='input'\n type='radio'\n name='htmlRadios'\n />\n <Form.Field\n label='That one'\n control='input'\n type='radio'\n name='htmlRadios'\n />\n </Form.Group>\n <Form.Group grouped>\n <label>HTML checkboxes</label>\n <Form.Field label='This one' control='input' type='checkbox' />\n <Form.Field label='That one' control='input' type='checkbox' />\n </Form.Group>\n <Form.Field label='An HTML <textarea>' control='textarea' rows='3' />\n <Form.Field label='An HTML <button>' control='button'>\n HTML Button\n </Form.Field>\n </Form>\n)\n\nexport default FormExampleFieldControlHTML\n","collections/Form/Shorthand/FormExampleFieldControlId":"import React from 'react'\nimport { Form, Input, TextArea, Button, Select } from 'semantic-ui-react'\n\nconst genderOptions = [\n { key: 'm', text: 'Male', value: 'male' },\n { key: 'f', text: 'Female', value: 'female' },\n { key: 'o', text: 'Other', value: 'other' },\n]\n\nconst FormExampleFieldControlId = () => (\n <Form>\n <Form.Group widths='equal'>\n <Form.Field\n id='form-input-control-first-name'\n control={Input}\n label='First name'\n placeholder='First name'\n />\n <Form.Field\n id='form-input-control-last-name'\n control={Input}\n label='Last name'\n placeholder='Last name'\n />\n <Form.Field\n control={Select}\n options={genderOptions}\n label={{ children: 'Gender', htmlFor: 'form-select-control-gender' }}\n placeholder='Gender'\n search\n searchInput={{ id: 'form-select-control-gender' }}\n />\n </Form.Group>\n <Form.Field\n id='form-textarea-control-opinion'\n control={TextArea}\n label='Opinion'\n placeholder='Opinion'\n />\n <Form.Field\n id='form-input-control-error-email'\n control={Input}\n label='Email'\n placeholder='joe@schmoe.com'\n error={{\n content: 'Please enter a valid email address',\n pointing: 'below',\n }}\n />\n <Form.Field\n id='form-button-control-public'\n control={Button}\n content='Confirm'\n label='Label with htmlFor'\n />\n </Form>\n)\n\nexport default FormExampleFieldControlId\n","collections/Form/Shorthand/FormExampleFieldLabelElement":"import React from 'react'\nimport { Checkbox, Form } from 'semantic-ui-react'\n\nconst FormExampleFieldLabelElement = () => (\n <Form>\n <Form.Field\n control={Checkbox}\n label={<label>I agree to the Terms and Conditions</label>}\n />\n </Form>\n)\n\nexport default FormExampleFieldLabelElement\n","collections/Form/Shorthand/FormExampleFieldLabelObject":"import React from 'react'\nimport { Checkbox, Form } from 'semantic-ui-react'\n\nconst FormExampleFieldLabelObject = () => (\n <Form>\n <Form.Field\n control={Checkbox}\n label={{ children: 'I agree to the Terms and Conditions' }}\n />\n </Form>\n)\n\nexport default FormExampleFieldLabelObject\n","collections/Form/Shorthand/FormExampleSubcomponentControl":"import React, { Component } from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst options = [\n { key: 'm', text: 'Male', value: 'male' },\n { key: 'f', text: 'Female', value: 'female' },\n { key: 'o', text: 'Other', value: 'other' },\n]\n\nclass FormExampleSubcomponentControl extends Component {\n state = {}\n\n handleChange = (e, { value }) => this.setState({ value })\n\n render() {\n const { value } = this.state\n return (\n <Form>\n <Form.Group widths='equal'>\n <Form.Input fluid label='First name' placeholder='First name' />\n <Form.Input fluid label='Last name' placeholder='Last name' />\n <Form.Select\n fluid\n label='Gender'\n options={options}\n placeholder='Gender'\n />\n </Form.Group>\n <Form.Group inline>\n <label>Size</label>\n <Form.Radio\n label='Small'\n value='sm'\n checked={value === 'sm'}\n onChange={this.handleChange}\n />\n <Form.Radio\n label='Medium'\n value='md'\n checked={value === 'md'}\n onChange={this.handleChange}\n />\n <Form.Radio\n label='Large'\n value='lg'\n checked={value === 'lg'}\n onChange={this.handleChange}\n />\n </Form.Group>\n <Form.TextArea label='About' placeholder='Tell us more about you...' />\n <Form.Checkbox label='I agree to the Terms and Conditions' />\n <Form.Button>Submit</Form.Button>\n </Form>\n )\n }\n}\n\nexport default FormExampleSubcomponentControl\n","collections/Form/Shorthand/FormExampleSubcomponentId":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleSubcomponentId = () => (\n <Form>\n <Form.Group widths='equal'>\n <Form.Input\n fluid\n id='form-subcomponent-shorthand-input-first-name'\n label='First name'\n placeholder='First name'\n />\n <Form.Input\n fluid\n id='form-subcomponent-shorthand-input-last-name'\n label='Last name'\n placeholder='Last name'\n />\n </Form.Group>\n </Form>\n)\n\nexport default FormExampleSubcomponentId\n","collections/Form/Usage/FormExampleCaptureValues":"import React, { Component } from 'react'\nimport { Form } from 'semantic-ui-react'\n\nclass FormExampleCaptureValues extends Component {\n state = { name: '', email: '', submittedName: '', submittedEmail: '' }\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value })\n\n handleSubmit = () => {\n const { name, email } = this.state\n\n this.setState({ submittedName: name, submittedEmail: email })\n }\n\n render() {\n const { name, email, submittedName, submittedEmail } = this.state\n\n return (\n <div>\n <Form onSubmit={this.handleSubmit}>\n <Form.Group>\n <Form.Input\n placeholder='Name'\n name='name'\n value={name}\n onChange={this.handleChange}\n />\n <Form.Input\n placeholder='Email'\n name='email'\n value={email}\n onChange={this.handleChange}\n />\n <Form.Button content='Submit' />\n </Form.Group>\n </Form>\n <strong>onChange:</strong>\n <pre>{JSON.stringify({ name, email }, null, 2)}</pre>\n <strong>onSubmit:</strong>\n <pre>{JSON.stringify({ submittedName, submittedEmail }, null, 2)}</pre>\n </div>\n )\n }\n}\n\nexport default FormExampleCaptureValues\n","collections/Form/Usage/FormExampleClearOnSubmit":"import React, { Component } from 'react'\nimport { Form } from 'semantic-ui-react'\n\nclass FormExampleClearOnSubmit extends Component {\n state = {}\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value })\n\n handleSubmit = () => this.setState({ email: '', name: '' })\n\n render() {\n const { name, email } = this.state\n\n return (\n <Form onSubmit={this.handleSubmit}>\n <Form.Group>\n <Form.Input\n placeholder='Name'\n name='name'\n value={name}\n onChange={this.handleChange}\n />\n <Form.Input\n placeholder='Email'\n name='email'\n value={email}\n onChange={this.handleChange}\n />\n <Form.Button content='Submit' />\n </Form.Group>\n </Form>\n )\n }\n}\n\nexport default FormExampleClearOnSubmit\n","collections/Form/Types/FormExampleForm":"import React from 'react'\nimport { Button, Checkbox, Form } from 'semantic-ui-react'\n\nconst FormExampleForm = () => (\n <Form>\n <Form.Field>\n <label>First Name</label>\n <input placeholder='First Name' />\n </Form.Field>\n <Form.Field>\n <label>Last Name</label>\n <input placeholder='Last Name' />\n </Form.Field>\n <Form.Field>\n <Checkbox label='I agree to the Terms and Conditions' />\n </Form.Field>\n <Button type='submit'>Submit</Button>\n </Form>\n)\n\nexport default FormExampleForm\n","collections/Form/States/FormExampleError":"import React from 'react'\nimport { Button, Form, Message } from 'semantic-ui-react'\n\nconst FormExampleError = () => (\n <Form error>\n <Form.Input label='Email' placeholder='joe@schmoe.com' />\n <Message\n error\n header='Action Forbidden'\n content='You can only sign up for an account once with a given e-mail address.'\n />\n <Button>Submit</Button>\n </Form>\n)\n\nexport default FormExampleError\n","collections/Form/States/FormExampleFieldDisabled":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleFieldDisabled = () => (\n <Form>\n <Form.Group widths='equal'>\n <Form.Input fluid label='First name' placeholder='Disabled' disabled />\n <Form.Input fluid label='Last name' placeholder='Disabled' disabled />\n </Form.Group>\n </Form>\n)\n\nexport default FormExampleFieldDisabled\n","collections/Form/States/FormExampleFieldError":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst options = [\n { key: 'm', text: 'Male', value: 'male' },\n { key: 'f', text: 'Female', value: 'female' },\n { key: 'o', text: 'Other', value: 'other' },\n]\n\nconst FormExampleFieldError = () => (\n <Form>\n <Form.Group widths='equal'>\n <Form.Input fluid label='First name' placeholder='First name' error />\n <Form.Input fluid label='Last name' placeholder='Last name' />\n </Form.Group>\n <Form.Select options={options} placeholder='Gender' error />\n <Form.Checkbox label='I agree to the Terms and Conditions' error />\n </Form>\n)\n\nexport default FormExampleFieldError\n","collections/Form/States/FormExampleFieldErrorLabel":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleFieldErrorLabel = () => (\n <Form>\n <Form.Input\n error={{ content: 'Please enter your first name', pointing: 'below' }}\n fluid\n label='First name'\n placeholder='First name'\n id='form-input-first-name'\n />\n <Form.Input\n error='Please enter your last name'\n fluid\n label='Last name'\n placeholder='Last name'\n />\n <Form.Checkbox\n label='I agree to the Terms and Conditions'\n error={{\n content: 'You must agree to the terms and conditions',\n pointing: 'left',\n }}\n />\n </Form>\n)\n\nexport default FormExampleFieldErrorLabel\n","collections/Form/States/FormExampleFieldReadOnly":"import React from 'react'\nimport { Form } from 'semantic-ui-react'\n\nconst FormExampleFieldReadOnly = () => (\n <Form>\n <Form.Group widths='equal'>\n <Form.Input fluid label='First name' placeholder='Read only' readOnly />\n <Form.Input fluid label='Last name' placeholder='Read only' readOnly />\n </Form.Group>\n </Form>\n)\n\nexport default FormExampleFieldReadOnly\n","collections/Form/States/FormExampleLoading":"import React from 'react'\nimport { Button, Form } from 'semantic-ui-react'\n\nconst FormExampleLoading = () => (\n <Form loading>\n <Form.Input label='Email' placeholder='joe@schmoe.com' />\n <Button>Submit</Button>\n </Form>\n)\n\nexport default FormExampleLoading\n","collections/Form/States/FormExampleSuccess":"import React from 'react'\nimport { Button, Form, Message } from 'semantic-ui-react'\n\nconst FormExampleSuccess = () => (\n <Form success>\n <Form.Input label='Email' placeholder='joe@schmoe.com' />\n <Message\n success\n header='Form Completed'\n content=\"You're all signed up for the newsletter\"\n />\n <Button>Submit</Button>\n </Form>\n)\n\nexport default FormExampleSuccess\n","collections/Form/States/FormExampleWarning":"import React from 'react'\nimport { Button, Form, Message } from 'semantic-ui-react'\n\nconst FormExampleWarning = () => (\n <Form warning>\n <Form.Input label='Email' placeholder='joe@schmoe.com' />\n <Message\n warning\n header='Could you check something!'\n list={[\n 'That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail.',\n ]}\n />\n <Button>Submit</Button>\n </Form>\n)\n\nexport default FormExampleWarning\n","collections/Form/Variations/FormExampleInverted":"import React from 'react'\nimport { Button, Form, Segment } from 'semantic-ui-react'\n\nconst FormExampleInverted = () => (\n <Segment inverted>\n <Form inverted>\n <Form.Group widths='equal'>\n <Form.Input fluid label='First name' placeholder='First name' />\n <Form.Input fluid label='Last name' placeholder='Last name' />\n </Form.Group>\n <Form.Checkbox label='I agree to the Terms and Conditions' />\n <Button type='submit'>Submit</Button>\n </Form>\n </Segment>\n)\nexport default FormExampleInverted\n","collections/Form/Variations/FormExampleSize":"import React from 'react'\nimport { Button, Divider, Form } from 'semantic-ui-react'\n\nconst sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']\n\nconst FormExampleSize = () => (\n <div>\n {sizes.map((size) => (\n <Form size={size} key={size}>\n <Form.Group widths='equal'>\n <Form.Field\n label='First name'\n control='input'\n placeholder='First name'\n />\n <Form.Field\n label='Last name'\n control='input'\n placeholder='Last name'\n />\n </Form.Group>\n <Button type='submit'>Submit</Button>\n <Divider hidden />\n </Form>\n ))}\n </div>\n)\nexport default FormExampleSize\n","collections/Form/Variations/FormExampleUnstackable":"import React from 'react'\nimport { Button, Form } from 'semantic-ui-react'\n\nconst FormExampleUnstackable = () => (\n <Form unstackable>\n <Form.Group widths={2}>\n <Form.Input label='First name' placeholder='First name' />\n <Form.Input label='Last name' placeholder='Last name' />\n </Form.Group>\n <Form.Checkbox label='I agree to the Terms and Conditions' />\n <Button type='submit'>Submit</Button>\n </Form>\n)\nexport default FormExampleUnstackable\n","collections/Grid/Content/GridExampleColumns":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleColumns = () => (\n <Grid>\n <Grid.Row>\n <Grid.Column width={8}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column width={8}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row>\n <Grid.Column width={8}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column width={8}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleColumns\n","collections/Grid/Content/GridExampleRows":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleRows = () => (\n <Grid columns={3}>\n <Grid.Row>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleRows\n","collections/Grid/ResponsiveVariations/GridExampleContainer":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleContainer = () => (\n <Grid container columns={3}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleContainer\n","collections/Grid/ResponsiveVariations/GridExampleDoubling":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleDoubling = () => (\n <Grid doubling columns={5}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleDoubling\n","collections/Grid/ResponsiveVariations/GridExampleOnly":"import React from 'react'\nimport { Grid, Segment } from 'semantic-ui-react'\n\nconst GridExampleOnly = () => (\n <Grid>\n <Grid.Row columns={2} only='large screen'>\n <Grid.Column>\n <Segment>Large Screen</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Large Screen</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row columns={2} only='widescreen'>\n <Grid.Column>\n <Segment>Widescreen</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Widescreen</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row columns={2} only='mobile'>\n <Grid.Column>\n <Segment>Mobile</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Mobile</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row columns={3}>\n <Grid.Column only='computer'>\n <Segment>Computer</Segment>\n </Grid.Column>\n <Grid.Column only='tablet mobile'>\n <Segment>Tablet and Mobile</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>All Sizes</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>All Sizes</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row columns={4} only='computer'>\n <Grid.Column>\n <Segment>Computer</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Computer</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Computer</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Computer</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row columns={3} only='tablet'>\n <Grid.Column>\n <Segment>Tablet</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Tablet</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Tablet</Segment>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleOnly\n","collections/Grid/ResponsiveVariations/GridExampleOnlyMultiple":"import React from 'react'\nimport { Grid, Segment } from 'semantic-ui-react'\n\nconst GridExampleOnlyMultiple = () => (\n <Grid>\n <Grid.Row columns={2} only='mobile tablet'>\n <Grid.Column>\n <Segment>Mobile</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Tablet</Segment>\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row columns={2} only='tablet computer'>\n <Grid.Column>\n <Segment>Tablet</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Computer</Segment>\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row columns={2} only='large screen widescreen'>\n <Grid.Column>\n <Segment>Large Screen</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>Widescreen</Segment>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleOnlyMultiple\n","collections/Grid/ResponsiveVariations/GridExampleResponsiveWidth":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleResponsiveWidth = () => (\n <div>\n <Grid>\n <Grid.Column mobile={16} tablet={8} computer={4}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column mobile={16} tablet={8} computer={4}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column mobile={16} tablet={8} computer={4}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column mobile={16} tablet={8} computer={4}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column mobile={16} tablet={8} computer={4}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid>\n\n <Grid>\n <Grid.Column largeScreen={2} widescreen={1}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column largeScreen={2} widescreen={1}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column largeScreen={2} widescreen={1}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column largeScreen={2} widescreen={1}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid>\n </div>\n)\n\nexport default GridExampleResponsiveWidth\n","collections/Grid/ResponsiveVariations/GridExampleReversedComputer":"import React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst GridExampleReversedComputer = () => (\n <Grid reversed='computer' columns='equal'>\n <Grid.Row>\n <Grid.Column>Computer A Fourth</Grid.Column>\n <Grid.Column>Computer A Third</Grid.Column>\n <Grid.Column>Computer A Second</Grid.Column>\n <Grid.Column>Computer A First</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Computer B Fourth</Grid.Column>\n <Grid.Column>Computer B Third</Grid.Column>\n <Grid.Column>Computer B Second</Grid.Column>\n <Grid.Column>Computer B First</Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleReversedComputer\n","collections/Grid/ResponsiveVariations/GridExampleReversedComputerVertically":"import React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst GridExampleReversedComputerVertically = () => (\n <Grid reversed='computer vertically'>\n <Grid.Row>\n <Grid.Column>Computer Row 4</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Computer Row 3</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Computer Row 2</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Computer Row 1</Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleReversedComputerVertically\n","collections/Grid/ResponsiveVariations/GridExampleReversedMobile":"import React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst GridExampleReversedMobile = () => (\n <Grid reversed='mobile' columns='equal'>\n <Grid.Column>Mobile Fourth</Grid.Column>\n <Grid.Column>Mobile Third</Grid.Column>\n <Grid.Column>Mobile Second</Grid.Column>\n <Grid.Column>Mobile First</Grid.Column>\n </Grid>\n)\n\nexport default GridExampleReversedMobile\n","collections/Grid/ResponsiveVariations/GridExampleReversedMobileVertically":"import React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst GridExampleReversedMobileVertically = () => (\n <Grid reversed='mobile vertically'>\n <Grid.Row>\n <Grid.Column>Mobile Row 4</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Mobile Row 3</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Mobile Row 2</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Mobile Row 1</Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleReversedMobileVertically\n","collections/Grid/ResponsiveVariations/GridExampleReversedMultiple":"import React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst GridExampleReversedMultiple = () => (\n <Grid reversed='computer tablet' columns='equal'>\n <Grid.Row>\n <Grid.Column>Computer and Tablet Fourth</Grid.Column>\n <Grid.Column>Computer and Tablet Third</Grid.Column>\n <Grid.Column>Computer and Tablet Second</Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleReversedMultiple\n","collections/Grid/ResponsiveVariations/GridExampleReversedTablet":"import React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst GridExampleReversedTablet = () => (\n <Grid reversed='tablet' columns='equal'>\n <Grid.Column>Tablet Fourth</Grid.Column>\n <Grid.Column>Tablet Third</Grid.Column>\n <Grid.Column>Tablet Second</Grid.Column>\n <Grid.Column>Tablet First</Grid.Column>\n </Grid>\n)\n\nexport default GridExampleReversedTablet\n","collections/Grid/ResponsiveVariations/GridExampleReversedTabletVertically":"import React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst GridExampleReversedTabletVertically = () => (\n <Grid reversed='tablet vertically'>\n <Grid.Row>\n <Grid.Column>Tablet Row 4</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Tablet Row 3</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Tablet Row 2</Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>Tablet Row 1</Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleReversedTabletVertically\n","collections/Grid/ResponsiveVariations/GridExampleStackable":"import React from 'react'\nimport { Grid, Image, Segment } from 'semantic-ui-react'\n\nconst GridExampleStackable = () => (\n <Grid stackable columns={2}>\n <Grid.Column>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleStackable\n","collections/Grid/Types/GridExampleCelled":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleCelled = () => (\n <Grid celled>\n <Grid.Row>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column width={13}>\n <Image src='https://react.semantic-ui.com/images/wireframe/centered-paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column width={10}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleCelled\n","collections/Grid/Types/GridExampleCelledInternally":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleCelledInternally = () => (\n <Grid celled='internally'>\n <Grid.Row>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column width={10}>\n <Image src='https://react.semantic-ui.com/images/wireframe/centered-paragraph.png' />\n </Grid.Column>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column width={10}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleCelledInternally\n","collections/Grid/Types/GridExampleDividedNumber":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleDividedNumber = () => (\n <Grid columns={3} divided>\n <Grid.Row>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleDividedNumber\n","collections/Grid/Types/GridExampleDividedPhrase":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleDividedPhrase = () => (\n <Grid columns='three' divided>\n <Grid.Row>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleDividedPhrase\n","collections/Grid/Types/GridExampleDividedVertically":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleVerticallyDivided = () => (\n <Grid divided='vertically'>\n <Grid.Row columns={2}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row columns={3}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleVerticallyDivided\n","collections/Grid/Types/GridExampleGrid":"import _ from 'lodash'\nimport React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst columns = _.times(16, (i) => (\n <Grid.Column key={i}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n))\n\nconst GridExampleGrid = () => <Grid>{columns}</Grid>\n\nexport default GridExampleGrid\n","collections/Grid/Variations/GridExampleCentered":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleCentered = () => (\n <Grid centered columns={2}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n\n <Grid.Row centered columns={4}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row centered columns={4}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleCentered\n","collections/Grid/Variations/GridExampleColoredColumn":"import _ from 'lodash'\nimport React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nconst GridExampleColoredColumn = () => (\n <Grid columns={5} padded>\n {colors.map((color) => (\n <Grid.Column color={color} key={color}>\n {_.capitalize(color)}\n </Grid.Column>\n ))}\n </Grid>\n)\n\nexport default GridExampleColoredColumn\n","collections/Grid/Variations/GridExampleColoredRow":"import _ from 'lodash'\nimport React from 'react'\nimport { Grid } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nconst GridColoredRowExample = () => (\n <Grid padded>\n {colors.map((color) => (\n <Grid.Row color={color} key={color}>\n <Grid.Column>{_.capitalize(color)}</Grid.Column>\n </Grid.Row>\n ))}\n </Grid>\n)\n\nexport default GridColoredRowExample\n","collections/Grid/Variations/GridExampleColumnCount":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleColumnCount = () => (\n <Grid>\n <Grid.Row columns={3}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row columns={4}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row columns={5}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleColumnCount\n","collections/Grid/Variations/GridExampleColumnWidth":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleColumnWidth = () => (\n <Grid>\n <Grid.Column width={4}>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column width={9}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column width={3}>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleColumnWidth\n","collections/Grid/Variations/GridExampleEqualWidthColumn":"import React from 'react'\nimport { Grid, Segment } from 'semantic-ui-react'\n\nconst GridExampleEqualWidthColumn = () => (\n <Grid columns='equal'>\n <Grid.Column>\n <Segment>1</Segment>\n </Grid.Column>\n <Grid.Column width={8}>\n <Segment>2</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>3</Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleEqualWidthColumn\n","collections/Grid/Variations/GridExampleEqualWidthRow":"import React from 'react'\nimport { Grid, Segment } from 'semantic-ui-react'\n\nconst GridExampleEqualWidthRow = () => (\n <Grid columns='equal'>\n <Grid.Row>\n <Grid.Column>\n <Segment>1</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>2</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>3</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>4</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>\n <Segment>1</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>2</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>3</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>\n <Segment>1</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>2</Segment>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleEqualWidthRow\n","collections/Grid/Variations/GridExampleFloated":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleFloated = () => (\n <Grid>\n <Grid.Column floated='left' width={5}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column floated='right' width={5}>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleFloated\n","collections/Grid/Variations/GridExampleInverted":"import React from 'react'\nimport { Grid, Segment } from 'semantic-ui-react'\n\nconst GridExampleInverted = () => (\n <Grid columns='equal' divided inverted padded>\n <Grid.Row color='black' textAlign='center'>\n <Grid.Column>\n <Segment color='black' inverted>\n 1\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment color='black' inverted>\n 2\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment color='black' inverted>\n 3\n </Segment>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleInverted\n","collections/Grid/Variations/GridExamplePadded":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExamplePadded = () => (\n <div>\n <p>The following grid has vertical and horizontal gutters.</p>\n\n <Grid columns={2} padded>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid>\n </div>\n)\n\nexport default GridExamplePadded\n","collections/Grid/Variations/GridExamplePaddedHorizontally":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExamplePaddedHorizontally = () => (\n <div>\n <p>The following grid has horizontal gutters.</p>\n\n <Grid columns={2} padded='horizontally'>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid>\n </div>\n)\n\nexport default GridExamplePaddedHorizontally\n","collections/Grid/Variations/GridExamplePaddedVertically":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExamplePaddedVertically = () => (\n <div>\n <p>The following grid has vertical gutters.</p>\n\n <Grid columns={2} padded='vertically'>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Grid.Column>\n </Grid>\n </div>\n)\n\nexport default GridExamplePaddedVertically\n","collections/Grid/Variations/GridExampleRelaxed":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleRelaxed = () => (\n <Grid relaxed columns={4}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleRelaxed\n","collections/Grid/Variations/GridExampleRelaxedVery":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleRelaxedVery = () => (\n <Grid relaxed='very' columns={4}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid>\n)\n\nexport default GridExampleRelaxedVery\n","collections/Grid/Variations/GridExampleStretched":"import React from 'react'\nimport { Grid, Segment } from 'semantic-ui-react'\n\nconst GridExampleStretched = () => (\n <Grid columns={3} divided>\n <Grid.Row stretched>\n <Grid.Column>\n <Segment>1</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>1</Segment>\n <Segment>2</Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>1</Segment>\n <Segment>2</Segment>\n <Segment>3</Segment>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleStretched\n","collections/Grid/Variations/GridExampleStretchedEqual":"import React from 'react'\nimport { Grid, Image, Segment } from 'semantic-ui-react'\n\nconst GridExampleStretchedEqual = () => (\n <Grid columns='equal'>\n <Grid.Row stretched>\n <Grid.Column>\n <Segment>1</Segment>\n <Segment>2</Segment>\n </Grid.Column>\n <Grid.Column width={6}>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>1</Segment>\n <Segment>2</Segment>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>\n <Segment>1</Segment>\n <Segment>2</Segment>\n </Grid.Column>\n <Grid.Column width={6}>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment>1</Segment>\n <Segment>2</Segment>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleStretchedEqual\n","collections/Grid/Variations/GridExampleTextAlignmentCenter":"import React from 'react'\nimport { Grid, Menu } from 'semantic-ui-react'\n\nconst GridExampleTextAlignmentCenter = () => (\n <Grid textAlign='center' columns={3}>\n <Grid.Row>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Cats</Menu.Item>\n </Menu>\n </Grid.Column>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Dogs</Menu.Item>\n <Menu.Item>Poodle</Menu.Item>\n <Menu.Item>Cockerspaniel</Menu.Item>\n </Menu>\n </Grid.Column>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Monkeys</Menu.Item>\n </Menu>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleTextAlignmentCenter\n","collections/Grid/Variations/GridExampleTextAlignmentMixed":"import React from 'react'\nimport { Grid, Menu } from 'semantic-ui-react'\n\nconst GridExampleTextAlignmentJustified = () => (\n <Grid>\n <Grid.Row columns={3}>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Cats</Menu.Item>\n </Menu>\n </Grid.Column>\n <Grid.Column textAlign='center'>\n <Menu fluid vertical>\n <Menu.Item className='header'>Dogs</Menu.Item>\n <Menu.Item>Poodle</Menu.Item>\n <Menu.Item>Cockerspaniel</Menu.Item>\n </Menu>\n </Grid.Column>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Monkeys</Menu.Item>\n </Menu>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row textAlign='justified'>\n <Grid.Column>\n <p>\n Justified content fits exactly inside the grid column, taking up the\n entire width from one side to the other. Justified content fits\n exactly inside the grid column, taking up the entire width from one\n side to the other. Justified content fits exactly inside the grid\n column, taking up the entire width from one side to the other.\n Justified content fits exactly inside the grid column, taking up the\n entire width from one side to the other. Justified content fits\n exactly inside the grid column, taking up the entire width from one\n side to the other.\n </p>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleTextAlignmentJustified\n","collections/Grid/Variations/GridExampleTextAlignmentRight":"import React from 'react'\nimport { Grid, Menu } from 'semantic-ui-react'\n\nconst GridExampleTextAlignmentRight = () => (\n <Grid textAlign='right' columns={3}>\n <Grid.Row>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Cats</Menu.Item>\n </Menu>\n </Grid.Column>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Dogs</Menu.Item>\n <Menu.Item>Poodle</Menu.Item>\n <Menu.Item>Cockerspaniel</Menu.Item>\n </Menu>\n </Grid.Column>\n <Grid.Column>\n <Menu fluid vertical>\n <Menu.Item className='header'>Monkeys</Menu.Item>\n </Menu>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleTextAlignmentRight\n","collections/Grid/Variations/GridExampleVerticalAlignment":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleVerticalAlignment = () => (\n <Grid verticalAlign='middle' columns={4} centered>\n <Grid.Row>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <br />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleVerticalAlignment\n","collections/Grid/Variations/GridExampleVerticalAlignmentRow":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst GridExampleVerticalAlignmentRow = () => (\n <Grid columns={4} centered>\n <Grid.Row verticalAlign='top'>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <br />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n <Grid.Row verticalAlign='middle'>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <br />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n <Grid.Row verticalAlign='bottom'>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <br />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default GridExampleVerticalAlignmentRow\n","collections/Menu/States/MenuExampleActive":"import React from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst MenuExampleActive = () => (\n <Menu compact>\n <Menu.Item active>Link</Menu.Item>\n </Menu>\n)\n\nexport default MenuExampleActive\n","collections/Menu/States/MenuExampleDisabled":"import React from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst MenuExampleDisabled = () => (\n <Menu compact>\n <Menu.Item disabled>Link</Menu.Item>\n </Menu>\n)\n\nexport default MenuExampleDisabled\n","collections/Menu/States/MenuExampleHover":"import React from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst MenuExampleHover = () => (\n <Menu compact>\n <Menu.Item as='a'>A link</Menu.Item>\n <Menu.Item link>div Link</Menu.Item>\n </Menu>\n)\n\nexport default MenuExampleHover\n","collections/Menu/Content/MenuExampleButtons":"import React from 'react'\nimport { Button, Menu } from 'semantic-ui-react'\n\nconst MenuExampleButtons = () => (\n <Menu>\n <Menu.Item>\n <Button primary>Sign up</Button>\n </Menu.Item>\n\n <Menu.Item>\n <Button>Log-in</Button>\n </Menu.Item>\n </Menu>\n)\n\nexport default MenuExampleButtons\n","collections/Menu/Content/MenuExampleDropdownItem":"import React from 'react'\nimport { Dropdown, Menu } from 'semantic-ui-react'\n\nconst MenuExampleDropdownItem = () => (\n <Menu vertical>\n <Dropdown item text='Categories'>\n <Dropdown.Menu>\n <Dropdown.Item>Electronics</Dropdown.Item>\n <Dropdown.Item>Automotive</Dropdown.Item>\n <Dropdown.Item>Home</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </Menu>\n)\n\nexport default MenuExampleDropdownItem\n","collections/Menu/Content/MenuExampleHeader":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleHeader extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu>\n <Menu.Item header>Our Company</Menu.Item>\n <Menu.Item\n name='aboutUs'\n active={activeItem === 'aboutUs'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='jobs'\n active={activeItem === 'jobs'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='locations'\n active={activeItem === 'locations'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Content/MenuExampleHeaderVertical":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleHeaderVertical extends Component {\n state = {}\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu vertical>\n <Menu.Item>\n <Menu.Header>Products</Menu.Header>\n\n <Menu.Menu>\n <Menu.Item\n name='enterprise'\n active={activeItem === 'enterprise'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='consumer'\n active={activeItem === 'consumer'}\n onClick={this.handleItemClick}\n />\n </Menu.Menu>\n </Menu.Item>\n\n <Menu.Item>\n <Menu.Header>CMS Solutions</Menu.Header>\n\n <Menu.Menu>\n <Menu.Item\n name='rails'\n active={activeItem === 'rails'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='python'\n active={activeItem === 'python'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='php'\n active={activeItem === 'php'}\n onClick={this.handleItemClick}\n />\n </Menu.Menu>\n </Menu.Item>\n\n <Menu.Item>\n <Menu.Header>Hosting</Menu.Header>\n\n <Menu.Menu>\n <Menu.Item\n name='shared'\n active={activeItem === 'shared'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='dedicated'\n active={activeItem === 'dedicated'}\n onClick={this.handleItemClick}\n />\n </Menu.Menu>\n </Menu.Item>\n\n <Menu.Item>\n <Menu.Header>Support</Menu.Header>\n\n <Menu.Menu>\n <Menu.Item\n name='email'\n active={activeItem === 'email'}\n onClick={this.handleItemClick}\n >\n E-mail Support\n </Menu.Item>\n\n <Menu.Item\n name='faq'\n active={activeItem === 'faq'}\n onClick={this.handleItemClick}\n >\n FAQs\n </Menu.Item>\n </Menu.Menu>\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Content/MenuExampleInputs":"import React from 'react'\nimport { Input, Menu } from 'semantic-ui-react'\n\nconst MenuExampleInputs = () => (\n <Menu>\n <Menu.Item>\n <Input className='icon' icon='search' placeholder='Search...' />\n </Menu.Item>\n\n <Menu.Item position='right'>\n <Input\n action={{ type: 'submit', content: 'Go' }}\n placeholder='Navigate to...'\n />\n </Menu.Item>\n </Menu>\n)\n\nexport default MenuExampleInputs\n","collections/Menu/Content/MenuExampleLinkItem":"import React, { Component } from 'react'\nimport { Menu, Message } from 'semantic-ui-react'\n\nexport default class MenuExampleLinkItem extends Component {\n state = {}\n handleClick = () => this.setState({ message: 'onClick handled' })\n\n render() {\n const { message } = this.state\n\n return (\n <div>\n <Menu vertical>\n <Menu.Item href='//google.com' target='_blank'>\n Visit Google\n </Menu.Item>\n <Menu.Item link>Link via prop</Menu.Item>\n <Menu.Item onClick={this.handleClick}>Javascript Link</Menu.Item>\n </Menu>\n\n {message && <Message content={message} />}\n </div>\n )\n }\n}\n","collections/Menu/Content/MenuExampleMenus":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleMenus extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu>\n <Menu.Item\n name='browse'\n active={activeItem === 'browse'}\n onClick={this.handleItemClick}\n >\n Browse\n </Menu.Item>\n\n <Menu.Item\n name='submit'\n active={activeItem === 'submit'}\n onClick={this.handleItemClick}\n >\n Submit\n </Menu.Item>\n\n <Menu.Menu position='right'>\n <Menu.Item\n name='signup'\n active={activeItem === 'signup'}\n onClick={this.handleItemClick}\n >\n Sign Up\n </Menu.Item>\n\n <Menu.Item\n name='help'\n active={activeItem === 'help'}\n onClick={this.handleItemClick}\n >\n Help\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Content/MenuExampleSubMenu":"import React, { Component } from 'react'\nimport { Dropdown, Icon, Input, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSubMenu extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu vertical>\n <Menu.Item>\n <Input placeholder='Search...' />\n </Menu.Item>\n\n <Menu.Item>\n Home\n <Menu.Menu>\n <Menu.Item\n name='search'\n active={activeItem === 'search'}\n onClick={this.handleItemClick}\n >\n Search\n </Menu.Item>\n <Menu.Item\n name='add'\n active={activeItem === 'add'}\n onClick={this.handleItemClick}\n >\n Add\n </Menu.Item>\n <Menu.Item\n name='about'\n active={activeItem === 'about'}\n onClick={this.handleItemClick}\n >\n Remove\n </Menu.Item>\n </Menu.Menu>\n </Menu.Item>\n\n <Menu.Item\n name='browse'\n active={activeItem === 'browse'}\n onClick={this.handleItemClick}\n >\n <Icon name='grid layout' />\n Browse\n </Menu.Item>\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n >\n Messages\n </Menu.Item>\n\n <Dropdown item text='More'>\n <Dropdown.Menu>\n <Dropdown.Item icon='edit' text='Edit Profile' />\n <Dropdown.Item icon='globe' text='Choose Language' />\n <Dropdown.Item icon='settings' text='Account Settings' />\n </Dropdown.Menu>\n </Dropdown>\n </Menu>\n )\n }\n}\n","collections/Menu/Content/MenuExampleText":"import React, { Component } from 'react'\nimport { Header, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleText extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu vertical>\n <Menu.Item\n name='promotions'\n active={activeItem === 'promotions'}\n onClick={this.handleItemClick}\n >\n <Header as='h4'>Promotions</Header>\n <p>Check out our new promotions</p>\n </Menu.Item>\n\n <Menu.Item\n name='coupons'\n active={activeItem === 'coupons'}\n onClick={this.handleItemClick}\n >\n <Header as='h4'>Coupons</Header>\n <p>Check out our collection of coupons</p>\n </Menu.Item>\n\n <Menu.Item\n name='rebates'\n active={activeItem === 'rebates'}\n onClick={this.handleItemClick}\n >\n <Header as='h4'>Rebates</Header>\n <p>Visit our rebate forum for information on claiming rebates</p>\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleAttached":"import React from 'react'\nimport { Dropdown, Icon, Menu, Segment } from 'semantic-ui-react'\n\n// TODO: Update <Search> usage after its will be implemented\n\nconst MenuExampleAttached = () => (\n <div>\n <Menu attached='top'>\n <Dropdown item icon='wrench' simple>\n <Dropdown.Menu>\n <Dropdown.Item>\n <Icon name='dropdown' />\n <span className='text'>New</span>\n\n <Dropdown.Menu>\n <Dropdown.Item>Document</Dropdown.Item>\n <Dropdown.Item>Image</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown.Item>\n <Dropdown.Item>Open</Dropdown.Item>\n <Dropdown.Item>Save...</Dropdown.Item>\n <Dropdown.Item>Edit Permissions</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Header>Export</Dropdown.Header>\n <Dropdown.Item>Share</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Menu.Menu position='right'>\n <div className='ui right aligned category search item'>\n <div className='ui transparent icon input'>\n <input\n className='prompt'\n type='text'\n placeholder='Search animals...'\n />\n <i className='search link icon' />\n </div>\n <div className='results' />\n </div>\n </Menu.Menu>\n </Menu>\n\n <Segment attached='bottom'>\n <img src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </div>\n)\n\nexport default MenuExampleAttached\n","collections/Menu/Types/MenuExampleBasic":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleBasic extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu>\n <Menu.Item\n name='editorials'\n active={activeItem === 'editorials'}\n onClick={this.handleItemClick}\n >\n Editorials\n </Menu.Item>\n\n <Menu.Item\n name='reviews'\n active={activeItem === 'reviews'}\n onClick={this.handleItemClick}\n >\n Reviews\n </Menu.Item>\n\n <Menu.Item\n name='upcomingEvents'\n active={activeItem === 'upcomingEvents'}\n onClick={this.handleItemClick}\n >\n Upcoming Events\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleContentProp":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleContentProp extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu>\n <Menu.Item\n name='editorials'\n active={activeItem === 'editorials'}\n content='Editorials'\n onClick={this.handleItemClick}\n />\n\n <Menu.Item\n name='reviews'\n active={activeItem === 'reviews'}\n content='Reviews'\n onClick={this.handleItemClick}\n />\n\n <Menu.Item\n name='upcomingEvents'\n active={activeItem === 'upcomingEvents'}\n content='Upcoming Events'\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleNameProp":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleNameProp extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu>\n <Menu.Item\n name='editorials'\n active={activeItem === 'editorials'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='reviews'\n active={activeItem === 'reviews'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='upcomingEvents'\n active={activeItem === 'upcomingEvents'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExamplePagination":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExamplePagination extends Component {\n state = { activeItem: '10' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu pagination>\n <Menu.Item\n name='1'\n active={activeItem === '1'}\n onClick={this.handleItemClick}\n />\n <Menu.Item disabled>...</Menu.Item>\n <Menu.Item\n name='10'\n active={activeItem === '10'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='11'\n active={activeItem === '11'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='12'\n active={activeItem === '12'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExamplePointing":"import React, { Component } from 'react'\nimport { Input, Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExamplePointing extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <div>\n <Menu pointing>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n <Menu.Menu position='right'>\n <Menu.Item>\n <Input icon='search' placeholder='Search...' />\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n\n <Segment>\n <img src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </div>\n )\n }\n}\n","collections/Menu/Types/MenuExampleProps":"import React from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst items = [\n { key: 'editorials', active: true, name: 'Editorials' },\n { key: 'review', name: 'Reviews' },\n { key: 'events', name: 'Upcoming Events' },\n]\n\nconst MenuExampleProps = () => <Menu items={items} />\n\nexport default MenuExampleProps\n","collections/Menu/Types/MenuExampleSecondary":"import React, { Component } from 'react'\nimport { Input, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSecondary extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu secondary>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n <Menu.Menu position='right'>\n <Menu.Item>\n <Input icon='search' placeholder='Search...' />\n </Menu.Item>\n <Menu.Item\n name='logout'\n active={activeItem === 'logout'}\n onClick={this.handleItemClick}\n />\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleSecondaryPointing":"import React, { Component } from 'react'\nimport { Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleSecondaryPointing extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <div>\n <Menu pointing secondary>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n <Menu.Menu position='right'>\n <Menu.Item\n name='logout'\n active={activeItem === 'logout'}\n onClick={this.handleItemClick}\n />\n </Menu.Menu>\n </Menu>\n\n <Segment>\n <img src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Segment>\n </div>\n )\n }\n}\n","collections/Menu/Types/MenuExampleTabular":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleTabular extends Component {\n state = { activeItem: 'bio' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu tabular>\n <Menu.Item\n name='bio'\n active={activeItem === 'bio'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='photos'\n active={activeItem === 'photos'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleTabularOnBottom":"import React, { Component } from 'react'\nimport { Icon, Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleTabularOnBottom extends Component {\n state = { activeItem: 'active' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <div>\n <Segment attached='top'>\n <img src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n\n <Menu attached='bottom' tabular>\n <Menu.Item\n name='active'\n active={activeItem === 'active'}\n onClick={this.handleItemClick}\n >\n Active Project\n </Menu.Item>\n\n <Menu.Item\n name='2'\n active={activeItem === '2'}\n onClick={this.handleItemClick}\n >\n Project #2\n </Menu.Item>\n\n <Menu.Item\n name='3'\n active={activeItem === '3'}\n onClick={this.handleItemClick}\n >\n Project #3\n </Menu.Item>\n\n <Menu.Menu position='right'>\n <Menu.Item\n name='new-tab'\n active={activeItem === 'new-tab'}\n onClick={this.handleItemClick}\n >\n <Icon name='add' />\n New Tab\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n </div>\n )\n }\n}\n","collections/Menu/Types/MenuExampleTabularOnLeft":"import React, { Component } from 'react'\nimport { Grid, Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleTabularOnLeft extends Component {\n state = { activeItem: 'bio' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Grid>\n <Grid.Column width={4}>\n <Menu fluid vertical tabular>\n <Menu.Item\n name='bio'\n active={activeItem === 'bio'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='pics'\n active={activeItem === 'pics'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='companies'\n active={activeItem === 'companies'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='links'\n active={activeItem === 'links'}\n onClick={this.handleItemClick}\n />\n </Menu>\n </Grid.Column>\n\n <Grid.Column stretched width={12}>\n <Segment>\n This is an stretched grid column. This segment will always match the\n tab height\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","collections/Menu/Types/MenuExampleTabularOnRight":"import React, { Component } from 'react'\nimport { Grid, Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleTabularOnRight extends Component {\n state = { activeItem: 'bio' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Grid>\n <Grid.Column stretched width={12}>\n <Segment>\n This is an stretched grid column. This segment will always match the\n tab height\n </Segment>\n </Grid.Column>\n\n <Grid.Column width={4}>\n <Menu fluid vertical tabular='right'>\n <Menu.Item\n name='bio'\n active={activeItem === 'bio'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='pics'\n active={activeItem === 'pics'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='companies'\n active={activeItem === 'companies'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='links'\n active={activeItem === 'links'}\n onClick={this.handleItemClick}\n />\n </Menu>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","collections/Menu/Types/MenuExampleTabularOnTop":"import React, { Component } from 'react'\nimport { Input, Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleTabularOnTop extends Component {\n state = { activeItem: 'bio' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <div>\n <Menu attached='top' tabular>\n <Menu.Item\n name='bio'\n active={activeItem === 'bio'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='photos'\n active={activeItem === 'photos'}\n onClick={this.handleItemClick}\n />\n <Menu.Menu position='right'>\n <Menu.Item>\n <Input\n transparent\n icon={{ name: 'search', link: true }}\n placeholder='Search users...'\n />\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n\n <Segment attached='bottom'>\n <img src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </div>\n )\n }\n}\n","collections/Menu/Types/MenuExampleText":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleText extends Component {\n state = { activeItem: 'closest' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu text>\n <Menu.Item header>Sort By</Menu.Item>\n <Menu.Item\n name='closest'\n active={activeItem === 'closest'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='mostComments'\n active={activeItem === 'mostComments'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='mostPopular'\n active={activeItem === 'mostPopular'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleVertical":"import React, { Component } from 'react'\nimport { Input, Label, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleVertical extends Component {\n state = { activeItem: 'inbox' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu vertical>\n <Menu.Item\n name='inbox'\n active={activeItem === 'inbox'}\n onClick={this.handleItemClick}\n >\n <Label color='teal'>1</Label>\n Inbox\n </Menu.Item>\n\n <Menu.Item\n name='spam'\n active={activeItem === 'spam'}\n onClick={this.handleItemClick}\n >\n <Label>51</Label>\n Spam\n </Menu.Item>\n\n <Menu.Item\n name='updates'\n active={activeItem === 'updates'}\n onClick={this.handleItemClick}\n >\n <Label>1</Label>\n Updates\n </Menu.Item>\n <Menu.Item>\n <Input icon='search' placeholder='Search mail...' />\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleVerticalDropdown":"import React, { Component } from 'react'\nimport { Dropdown, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleVerticalDropdown extends Component {\n state = { activeItem: 'account' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu secondary vertical>\n <Menu.Item\n name='account'\n active={activeItem === 'account'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='settings'\n active={activeItem === 'settings'}\n onClick={this.handleItemClick}\n />\n <Dropdown item text='Display Options'>\n <Dropdown.Menu>\n <Dropdown.Header>Text Size</Dropdown.Header>\n <Dropdown.Item>Small</Dropdown.Item>\n <Dropdown.Item>Medium</Dropdown.Item>\n <Dropdown.Item>Large</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleVerticalPointing":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleVerticalPointing extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu pointing vertical>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleVerticalSecondary":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleVerticalSecondary extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu pointing secondary vertical>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Types/MenuExampleVerticalText":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleVerticalText extends Component {\n state = { activeItem: 'closest' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu text vertical>\n <Menu.Item header>Sort By</Menu.Item>\n <Menu.Item\n name='closest'\n active={activeItem === 'closest'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='mostComments'\n active={activeItem === 'mostComments'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='mostPopular'\n active={activeItem === 'mostPopular'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleAttachedTabular":"import React, { Component } from 'react'\nimport { Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleAttachedTabular extends Component {\n state = { activeItem: 'tab1' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <div>\n <Menu attached='top' tabular>\n <Menu.Item\n name='tab1'\n active={activeItem === 'tab1'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='tab2'\n active={activeItem === 'tab2'}\n onClick={this.handleItemClick}\n />\n </Menu>\n\n <Segment attached='bottom'>\n There are many variations of passages of Lorem Ipsum available, but\n the majority have suffered alteration in some form, by injected\n humour, or randomised words which don't look even slightly believable.\n If you are going to use a passage of Lorem Ipsum, you need to be sure\n there isn't anything embarrassing hidden in the middle of text. All\n the Lorem Ipsum generators on the Internet tend to repeat predefined\n chunks as necessary, making this the first true generator on the\n Internet. It uses a dictionary of over 200 Latin words, combined with\n a handful of model sentence structures, to generate Lorem Ipsum which\n looks reasonable. The generated Lorem Ipsum is therefore always free\n from repetition, injected humour, or non-characteristic words etc.\n </Segment>\n </div>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleAttachedToSegment":"import React, { Component } from 'react'\nimport { Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleAttachedToSegment extends Component {\n state = { activeItem: 'section1' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <div>\n <Menu attached='top'>\n <Menu.Item\n name='section1'\n active={activeItem === 'section1'}\n onClick={this.handleItemClick}\n >\n Section 1\n </Menu.Item>\n\n <Menu.Item\n name='section2'\n active={activeItem === 'section2'}\n onClick={this.handleItemClick}\n >\n Section 2\n </Menu.Item>\n </Menu>\n\n <Segment attached>\n There are many variations of passages of Lorem Ipsum available, but\n the majority have suffered alteration in some form, by injected\n humour, or randomised words which don't look even slightly believable.\n If you are going to use a passage of Lorem Ipsum, you need to be sure\n there isn't anything embarrassing hidden in the middle of text. All\n the Lorem Ipsum generators on the Internet tend to repeat predefined\n chunks as necessary, making this the first true generator on the\n Internet. It uses a dictionary of over 200 Latin words, combined with\n a handful of model sentence structures, to generate Lorem Ipsum which\n looks reasonable. The generated Lorem Ipsum is therefore always free\n from repetition, injected humour, or non-characteristic words etc.\n </Segment>\n\n <Menu attached='bottom'>\n <Menu.Item\n name='section1'\n active={activeItem === 'section1'}\n onClick={this.handleItemClick}\n >\n Section 1\n </Menu.Item>\n\n <Menu.Item\n name='section2'\n active={activeItem === 'section2'}\n onClick={this.handleItemClick}\n >\n Section 2\n </Menu.Item>\n </Menu>\n </div>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleBorderless":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleBorderless extends Component {\n state = { activeItem: '1' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu borderless>\n <Menu.Item\n name='1'\n active={activeItem === '1'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='2'\n active={activeItem === '2'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='3'\n active={activeItem === '3'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='4'\n active={activeItem === '4'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='5'\n active={activeItem === '5'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='6'\n active={activeItem === '6'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleColored":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst colorsA = ['red', 'orange', 'yellow', 'olive', 'green', 'teal']\nconst colorsB = ['blue', 'violet', 'purple', 'pink', 'brown', 'grey']\n\nexport default class MenuExampleColored extends Component {\n state = { activeA: colorsA[0], activeB: colorsB[0] }\n\n handleAClick = (e, { name }) => this.setState({ activeA: name })\n handleBClick = (e, { name }) => this.setState({ activeB: name })\n\n render() {\n const { activeA, activeB } = this.state\n\n return (\n <div>\n <Menu>\n {colorsA.map((c) => (\n <Menu.Item\n key={c}\n name={c}\n active={activeA === c}\n color={c}\n onClick={this.handleAClick}\n />\n ))}\n </Menu>\n\n <Menu>\n {colorsB.map((c) => (\n <Menu.Item\n key={c}\n name={c}\n active={activeB === c}\n color={c}\n onClick={this.handleBClick}\n />\n ))}\n </Menu>\n </div>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleColoredInverted":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst colorsA = ['red', 'orange', 'yellow', 'olive', 'green', 'teal']\nconst colorsB = ['blue', 'violet', 'purple', 'pink', 'brown', 'grey']\n\nexport default class MenuExampleColoredInverted extends Component {\n state = { activeA: colorsA[0], activeB: colorsB[0] }\n\n handleAClick = (e, { name }) => this.setState({ activeA: name })\n handleBClick = (e, { name }) => this.setState({ activeB: name })\n\n render() {\n const { activeA, activeB } = this.state\n\n return (\n <div>\n <Menu inverted>\n {colorsA.map((c) => (\n <Menu.Item\n key={c}\n name={c}\n active={activeA === c}\n color={c}\n onClick={this.handleAClick}\n />\n ))}\n </Menu>\n\n <Menu inverted>\n {colorsB.map((c) => (\n <Menu.Item\n key={c}\n name={c}\n active={activeB === c}\n color={c}\n onClick={this.handleBClick}\n />\n ))}\n </Menu>\n </div>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleColoredInvertedMenus":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nclass ExampleMenu extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { color } = this.props\n const { activeItem } = this.state\n\n return (\n <Menu color={color} inverted widths={3}>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n\nconst MenuExampleColoredInvertedMenus = () => {\n const menus = colors.map((color) => <ExampleMenu color={color} key={color} />)\n\n return <div>{menus}</div>\n}\n\nexport default MenuExampleColoredInvertedMenus\n","collections/Menu/Variations/MenuExampleColoredMenus":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nclass ExampleMenu extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { color } = this.props\n const { activeItem } = this.state\n\n return (\n <Menu color={color} widths={3}>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n\nconst MenuExampleColoredMenus = () => {\n const menus = colors.map((color) => <ExampleMenu color={color} key={color} />)\n\n return <div>{menus}</div>\n}\n\nexport default MenuExampleColoredMenus\n","collections/Menu/Variations/MenuExampleCompact":"import React, { Component } from 'react'\nimport { Icon, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleCompact extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu compact icon='labeled'>\n <Menu.Item\n name='gamepad'\n active={activeItem === 'gamepad'}\n onClick={this.handleItemClick}\n >\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n\n <Menu.Item\n name='video camera'\n active={activeItem === 'video camera'}\n onClick={this.handleItemClick}\n >\n <Icon name='video camera' />\n Channels\n </Menu.Item>\n\n <Menu.Item\n name='video play'\n active={activeItem === 'video play'}\n onClick={this.handleItemClick}\n >\n <Icon name='video play' />\n Videos\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleCompactVertical":"import React, { Component } from 'react'\nimport { Icon, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleCompactVertical extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu compact icon='labeled' vertical>\n <Menu.Item\n name='gamepad'\n active={activeItem === 'gamepad'}\n onClick={this.handleItemClick}\n >\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n\n <Menu.Item\n name='video camera'\n active={activeItem === 'video camera'}\n onClick={this.handleItemClick}\n >\n <Icon name='video camera' />\n Channels\n </Menu.Item>\n\n <Menu.Item\n name='video play'\n active={activeItem === 'video play'}\n onClick={this.handleItemClick}\n >\n <Icon name='video play' />\n Videos\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleEvenlyDivided":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleEvenlyDivided extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu fluid widths={3}>\n <Menu.Item\n name='buy'\n active={activeItem === 'buy'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='sell'\n active={activeItem === 'sell'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='rent'\n active={activeItem === 'rent'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleFitted":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleFitted extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu>\n <Menu.Item\n name='default'\n active={activeItem === 'default'}\n fitted\n onClick={this.handleItemClick}\n >\n No padding whatsoever\n </Menu.Item>\n\n <Menu.Item\n name='horizontally'\n active={activeItem === 'horizontally'}\n fitted='horizontally'\n onClick={this.handleItemClick}\n >\n No horizontal padding\n </Menu.Item>\n\n <Menu.Item\n name='vertically'\n active={activeItem === 'vertically'}\n fitted='vertically'\n onClick={this.handleItemClick}\n >\n No vertical padding\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleFixed":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MenuExampleFixed = () => (\n <Message info>\n You can view examples of the <b>fixed</b> variation in the\n <a\n href='https://semantic-ui.com/collections/menu.html#fixed'\n rel='noopener noreferrer'\n target='_blank'\n >\n {' '}\n official documentation\n </a>\n .\n </Message>\n)\n\nexport default MenuExampleFixed\n","collections/Menu/Variations/MenuExampleFluid":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleFluid extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu fluid vertical>\n <Menu.Item\n name='run'\n active={activeItem === 'run'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='walk'\n active={activeItem === 'walk'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='bike'\n active={activeItem === 'bike'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleIcons":"import React, { Component } from 'react'\nimport { Icon, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleIcons extends Component {\n state = { activeItem: 'gamepad' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu icon>\n <Menu.Item\n name='gamepad'\n active={activeItem === 'gamepad'}\n onClick={this.handleItemClick}\n >\n <Icon name='gamepad' />\n </Menu.Item>\n\n <Menu.Item\n name='video camera'\n active={activeItem === 'video camera'}\n onClick={this.handleItemClick}\n >\n <Icon name='video camera' />\n </Menu.Item>\n\n <Menu.Item\n name='video play'\n active={activeItem === 'video play'}\n onClick={this.handleItemClick}\n >\n <Icon name='video play' />\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleIconsVertical":"import React, { Component } from 'react'\nimport { Icon, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleIconsVertical extends Component {\n state = { activeItem: 'gamepad' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu icon vertical>\n <Menu.Item\n name='gamepad'\n active={activeItem === 'gamepad'}\n onClick={this.handleItemClick}\n >\n <Icon name='gamepad' />\n </Menu.Item>\n\n <Menu.Item\n name='video camera'\n active={activeItem === 'video camera'}\n onClick={this.handleItemClick}\n >\n <Icon name='video camera' />\n </Menu.Item>\n\n <Menu.Item\n name='video play'\n active={activeItem === 'video play'}\n onClick={this.handleItemClick}\n >\n <Icon name='video play' />\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleInverted":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleInverted extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu inverted>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleInvertedPointing":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleInvertedPointing extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu inverted pointing vertical>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleInvertedSecondary":"import React, { Component } from 'react'\nimport { Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleInvertedSecondary extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Segment inverted>\n <Menu inverted pointing secondary>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n </Segment>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleInvertedSegment":"import React, { Component } from 'react'\nimport { Menu, Segment } from 'semantic-ui-react'\n\nexport default class MenuExampleInvertedSegment extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Segment inverted>\n <Menu inverted secondary>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n </Segment>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleInvertedVertical":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleInvertedVertical extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu inverted vertical>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='friends'\n active={activeItem === 'friends'}\n onClick={this.handleItemClick}\n />\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleLabeledIcons":"import React, { Component } from 'react'\nimport { Icon, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleLabeledIcons extends Component {\n state = { activeItem: 'gamepad' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu icon='labeled'>\n <Menu.Item\n name='gamepad'\n active={activeItem === 'gamepad'}\n onClick={this.handleItemClick}\n >\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n\n <Menu.Item\n name='video camera'\n active={activeItem === 'video camera'}\n onClick={this.handleItemClick}\n >\n <Icon name='video camera' />\n Channels\n </Menu.Item>\n\n <Menu.Item\n name='video play'\n active={activeItem === 'video play'}\n onClick={this.handleItemClick}\n >\n <Icon name='video play' />\n Videos\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleLabeledIconsVertical":"import React, { Component } from 'react'\nimport { Icon, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleLabeledIconsVertical extends Component {\n state = { activeItem: 'gamepad' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu icon='labeled' vertical>\n <Menu.Item\n name='gamepad'\n active={activeItem === 'gamepad'}\n onClick={this.handleItemClick}\n >\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n\n <Menu.Item\n name='video camera'\n active={activeItem === 'video camera'}\n onClick={this.handleItemClick}\n >\n <Icon name='video camera' />\n Channels\n </Menu.Item>\n\n <Menu.Item\n name='video play'\n active={activeItem === 'video play'}\n onClick={this.handleItemClick}\n >\n <Icon name='video play' />\n Videos\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeHuge":"import React, { Component } from 'react'\nimport { Button, Dropdown, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeHuge extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='huge'>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n\n <Menu.Menu position='right'>\n <Dropdown item text='Language'>\n <Dropdown.Menu>\n <Dropdown.Item>English</Dropdown.Item>\n <Dropdown.Item>Russian</Dropdown.Item>\n <Dropdown.Item>Spanish</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Menu.Item>\n <Button primary>Sign Up</Button>\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeLarge":"import React, { Component } from 'react'\nimport { Button, Dropdown, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeLarge extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='large'>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n\n <Menu.Menu position='right'>\n <Dropdown item text='Language'>\n <Dropdown.Menu>\n <Dropdown.Item>English</Dropdown.Item>\n <Dropdown.Item>Russian</Dropdown.Item>\n <Dropdown.Item>Spanish</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Menu.Item>\n <Button primary>Sign Up</Button>\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeMassive":"import React, { Component } from 'react'\nimport { Button, Dropdown, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeMassive extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='massive'>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n\n <Menu.Menu position='right'>\n <Dropdown item text='Language'>\n <Dropdown.Menu>\n <Dropdown.Item>English</Dropdown.Item>\n <Dropdown.Item>Russian</Dropdown.Item>\n <Dropdown.Item>Spanish</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Menu.Item>\n <Button primary>Sign Up</Button>\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeMini":"import React, { Component } from 'react'\nimport { Button, Dropdown, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeMini extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='mini'>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n\n <Menu.Menu position='right'>\n <Dropdown item text='Language'>\n <Dropdown.Menu>\n <Dropdown.Item>English</Dropdown.Item>\n <Dropdown.Item>Russian</Dropdown.Item>\n <Dropdown.Item>Spanish</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Menu.Item>\n <Button primary>Sign Up</Button>\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeSmall":"import React, { Component } from 'react'\nimport { Button, Dropdown, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeSmall extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='small'>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n\n <Menu.Menu position='right'>\n <Dropdown item text='Language'>\n <Dropdown.Menu>\n <Dropdown.Item>English</Dropdown.Item>\n <Dropdown.Item>Russian</Dropdown.Item>\n <Dropdown.Item>Spanish</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Menu.Item>\n <Button primary>Sign Up</Button>\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeTiny":"import React, { Component } from 'react'\nimport { Button, Dropdown, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeTiny extends Component {\n state = { activeItem: 'home' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='tiny'>\n <Menu.Item\n name='home'\n active={activeItem === 'home'}\n onClick={this.handleItemClick}\n />\n <Menu.Item\n name='messages'\n active={activeItem === 'messages'}\n onClick={this.handleItemClick}\n />\n\n <Menu.Menu position='right'>\n <Dropdown item text='Language'>\n <Dropdown.Menu>\n <Dropdown.Item>English</Dropdown.Item>\n <Dropdown.Item>Russian</Dropdown.Item>\n <Dropdown.Item>Spanish</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n <Menu.Item>\n <Button primary>Sign Up</Button>\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeVerticalLarge":"import React, { Component } from 'react'\nimport { Input, Label, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeVerticalLarge extends Component {\n state = { activeItem: 'inbox' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='large' vertical>\n <Menu.Item\n name='inbox'\n active={activeItem === 'inbox'}\n onClick={this.handleItemClick}\n >\n <Label color='teal'>1</Label>\n Inbox\n </Menu.Item>\n\n <Menu.Item\n name='spam'\n active={activeItem === 'spam'}\n onClick={this.handleItemClick}\n >\n <Label>51</Label>\n Spam\n </Menu.Item>\n\n <Menu.Item\n name='updates'\n active={activeItem === 'updates'}\n onClick={this.handleItemClick}\n >\n <Label>1</Label>\n Updates\n </Menu.Item>\n <Menu.Item>\n <Input icon='search' placeholder='Search mail...' />\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeVerticalMassive":"import React, { Component } from 'react'\nimport { Input, Label, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeLargeMassive extends Component {\n state = { activeItem: 'inbox' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='massive' vertical>\n <Menu.Item\n name='inbox'\n active={activeItem === 'inbox'}\n onClick={this.handleItemClick}\n >\n <Label color='teal'>1</Label>\n Inbox\n </Menu.Item>\n\n <Menu.Item\n name='spam'\n active={activeItem === 'spam'}\n onClick={this.handleItemClick}\n >\n <Label>51</Label>\n Spam\n </Menu.Item>\n\n <Menu.Item\n name='updates'\n active={activeItem === 'updates'}\n onClick={this.handleItemClick}\n >\n <Label>1</Label>\n Updates\n </Menu.Item>\n <Menu.Item>\n <Input icon='search' placeholder='Search mail...' />\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeVerticalMini":"import React, { Component } from 'react'\nimport { Input, Label, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeVerticalMini extends Component {\n state = { activeItem: 'inbox' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='mini' vertical>\n <Menu.Item\n name='inbox'\n active={activeItem === 'inbox'}\n onClick={this.handleItemClick}\n >\n <Label color='teal'>1</Label>\n Inbox\n </Menu.Item>\n\n <Menu.Item\n name='spam'\n active={activeItem === 'spam'}\n onClick={this.handleItemClick}\n >\n <Label>51</Label>\n Spam\n </Menu.Item>\n\n <Menu.Item\n name='updates'\n active={activeItem === 'updates'}\n onClick={this.handleItemClick}\n >\n <Label>1</Label>\n Updates\n </Menu.Item>\n <Menu.Item>\n <Input icon='search' placeholder='Search mail...' />\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleSizeVerticalSmall":"import React, { Component } from 'react'\nimport { Input, Label, Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleSizeVerticalSmall extends Component {\n state = { activeItem: 'inbox' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu size='small' vertical>\n <Menu.Item\n name='inbox'\n active={activeItem === 'inbox'}\n onClick={this.handleItemClick}\n >\n <Label color='teal'>1</Label>\n Inbox\n </Menu.Item>\n\n <Menu.Item\n name='spam'\n active={activeItem === 'spam'}\n onClick={this.handleItemClick}\n >\n <Label>51</Label>\n Spam\n </Menu.Item>\n\n <Menu.Item\n name='updates'\n active={activeItem === 'updates'}\n onClick={this.handleItemClick}\n >\n <Label>1</Label>\n Updates\n </Menu.Item>\n <Menu.Item>\n <Input icon='search' placeholder='Search mail...' />\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleStackable":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleStackable extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu stackable>\n <Menu.Item>\n <img src='https://react.semantic-ui.com/logo.png' />\n </Menu.Item>\n\n <Menu.Item\n name='features'\n active={activeItem === 'features'}\n onClick={this.handleItemClick}\n >\n Features\n </Menu.Item>\n\n <Menu.Item\n name='testimonials'\n active={activeItem === 'testimonials'}\n onClick={this.handleItemClick}\n >\n Testimonials\n </Menu.Item>\n\n <Menu.Item\n name='sign-in'\n active={activeItem === 'sign-in'}\n onClick={this.handleItemClick}\n >\n Sign-in\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Menu/Variations/MenuExampleVerticalFitted":"import React, { Component } from 'react'\nimport { Menu } from 'semantic-ui-react'\n\nexport default class MenuExampleVerticalFitted extends Component {\n state = {}\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n render() {\n const { activeItem } = this.state\n\n return (\n <Menu vertical>\n <Menu.Item\n name='default'\n active={activeItem === 'default'}\n fitted\n onClick={this.handleItemClick}\n >\n No padding whatsoever\n </Menu.Item>\n\n <Menu.Item\n name='horizontally'\n active={activeItem === 'horizontally'}\n fitted='horizontally'\n onClick={this.handleItemClick}\n >\n No horizontal padding\n </Menu.Item>\n\n <Menu.Item\n name='vertically'\n active={activeItem === 'vertically'}\n fitted='vertically'\n onClick={this.handleItemClick}\n >\n No vertical padding\n </Menu.Item>\n </Menu>\n )\n }\n}\n","collections/Message/States/MessageExampleHidden":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleHidden = () => <Message hidden>You can't see me</Message>\n\nexport default MessageExampleHidden\n","collections/Message/States/MessageExampleVisible":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleVisible = () => (\n <Message visible>You can always see me</Message>\n)\n\nexport default MessageExampleVisible\n","collections/Message/Types/MessageExampleDismissibleBlock":"import React, { Component } from 'react'\nimport { Message } from 'semantic-ui-react'\n\nclass MessageExampleDismissibleBlock extends Component {\n state = { visible: true }\n\n handleDismiss = () => {\n this.setState({ visible: false })\n\n setTimeout(() => {\n this.setState({ visible: true })\n }, 2000)\n }\n\n render() {\n if (this.state.visible) {\n return (\n <Message\n onDismiss={this.handleDismiss}\n header='Welcome back!'\n content='This is a special notification which you can dismiss.'\n />\n )\n }\n\n return (\n <p>\n <br />\n <i>The message will return in 2s</i>\n <br />\n <br />\n </p>\n )\n }\n}\n\nexport default MessageExampleDismissibleBlock\n","collections/Message/Types/MessageExampleIcon":"import React from 'react'\nimport { Message, Icon } from 'semantic-ui-react'\n\nconst MessageExampleIcon = () => (\n <Message icon>\n <Icon name='circle notched' loading />\n <Message.Content>\n <Message.Header>Just one second</Message.Header>\n We are fetching that content for you.\n </Message.Content>\n </Message>\n)\n\nexport default MessageExampleIcon\n","collections/Message/Types/MessageExampleIconProp":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleIconProp = () => (\n <Message\n icon='inbox'\n header='Have you heard about our mailing list?'\n content='Get the best news in your e-mail every day.'\n />\n)\n\nexport default MessageExampleIconProp\n","collections/Message/Types/MessageExampleList":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleList = () => (\n <Message>\n <Message.Header>New Site Features</Message.Header>\n <Message.List>\n <Message.Item>You can now have cover images on blog pages</Message.Item>\n <Message.Item>Drafts will now auto-save while writing</Message.Item>\n </Message.List>\n </Message>\n)\n\nexport default MessageExampleList\n","collections/Message/Types/MessageExampleListItemsProp":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst items = [\n 'You can now have cover images on blog pages',\n 'Drafts will now auto-save while writing',\n]\n\nconst MessageExampleListItemsProp = () => (\n <Message>\n <Message.Header>New Site Features</Message.Header>\n <Message.List items={items} />\n </Message>\n)\n\nexport default MessageExampleListItemsProp\n","collections/Message/Types/MessageExampleListProp":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst list = [\n 'You can now have cover images on blog pages',\n 'Drafts will now auto-save while writing',\n]\n\nconst MessageExampleListProp = () => (\n <Message header='New Site Features' list={list} />\n)\n\nexport default MessageExampleListProp\n","collections/Message/Types/MessageExampleMessage":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleMessage = () => (\n <Message>\n <Message.Header>Changes in Service</Message.Header>\n <p>\n We updated our privacy policy here to better service our customers. We\n recommend reviewing the changes.\n </p>\n </Message>\n)\n\nexport default MessageExampleMessage\n","collections/Message/Types/MessageExampleMessageProps":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleMessageProps = () => (\n <Message\n header='Changes in Service'\n content='We updated our privacy policy here to better service our customers. We recommend reviewing the changes.'\n />\n)\n\nexport default MessageExampleMessageProps\n","collections/Message/Variations/MessageExampleAttached":"import React from 'react'\nimport { Button, Form, Icon, Message } from 'semantic-ui-react'\n\nconst MessageExampleAttached = () => (\n <div>\n <Message\n attached\n header='Welcome to our site!'\n content='Fill out the form below to sign-up for a new account'\n />\n <Form className='attached fluid segment'>\n <Form.Group widths='equal'>\n <Form.Input\n fluid\n label='First Name'\n placeholder='First Name'\n type='text'\n />\n <Form.Input\n fluid\n label='Last Name'\n placeholder='Last Name'\n type='text'\n />\n </Form.Group>\n <Form.Input label='Username' placeholder='Username' type='text' />\n <Form.Input label='Password' type='password' />\n <Form.Checkbox inline label='I agree to the terms and conditions' />\n <Button color='blue'>Submit</Button>\n </Form>\n <Message attached='bottom' warning>\n <Icon name='help' />\n Already signed up? <a href='#'>Login here</a> instead.\n </Message>\n </div>\n)\n\nexport default MessageExampleAttached\n","collections/Message/Variations/MessageExampleColor":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleColor = () => (\n <div>\n <Message color='red'>Red</Message>\n <Message color='orange'>Orange</Message>\n <Message color='yellow'>Yellow</Message>\n <Message color='olive'>Olive</Message>\n <Message color='green'>Green</Message>\n <Message color='teal'>Teal</Message>\n <Message color='blue'>Blue</Message>\n <Message color='violet'>Violet</Message>\n <Message color='purple'>Purple</Message>\n <Message color='pink'>Pink</Message>\n <Message color='brown'>Brown</Message>\n <Message color='black'>Black</Message>\n </div>\n)\n\nexport default MessageExampleColor\n","collections/Message/Variations/MessageExampleCompact":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleCompact = () => (\n <Message compact>\n Get all the best inventions in your e-mail every day. Sign up now!\n </Message>\n)\n\nexport default MessageExampleCompact\n","collections/Message/Variations/MessageExampleCompactProps":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleCompactProps = () => (\n <Message\n compact\n content='Get all the best inventions in your e-mail every day. Sign up now!'\n />\n)\n\nexport default MessageExampleCompactProps\n","collections/Message/Variations/MessageExampleError":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleError = () => (\n <Message\n error\n header='There was some errors with your submission'\n list={[\n 'You must include both a upper and lower case letters in your password.',\n 'You need to select your home country.',\n ]}\n />\n)\n\nexport default MessageExampleError\n","collections/Message/Variations/MessageExampleFloating":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleFloating = () => <Message floating>Way to go!</Message>\n\nexport default MessageExampleFloating\n","collections/Message/Variations/MessageExampleFloatingProps":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleFloatingProps = () => (\n <Message floating content='Way to go!' />\n)\n\nexport default MessageExampleFloatingProps\n","collections/Message/Variations/MessageExampleInfo":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleInfo = () => (\n <Message info>\n <Message.Header>Was this what you wanted?</Message.Header>\n <p>Did you know it's been a while?</p>\n </Message>\n)\n\nexport default MessageExampleInfo\n","collections/Message/Variations/MessageExampleInfoProps":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleInfoProps = () => (\n <Message\n info\n header='Was this what you wanted?'\n content=\"Did you know it's been a while?\"\n />\n)\n\nexport default MessageExampleInfoProps\n","collections/Message/Variations/MessageExampleNegative":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleNegative = () => (\n <Message negative>\n <Message.Header>We're sorry we can't apply that discount</Message.Header>\n <p>That offer has expired</p>\n </Message>\n)\n\nexport default MessageExampleNegative\n","collections/Message/Variations/MessageExamplePositive":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExamplePositive = () => (\n <Message positive>\n <Message.Header>You are eligible for a reward</Message.Header>\n <p>\n Go to your <b>special offers</b> page to see now.\n </p>\n </Message>\n)\n\nexport default MessageExamplePositive\n","collections/Message/Variations/MessageExampleSize":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleSize = () => (\n <div>\n <Message size='mini'>This is a mini message.</Message>\n <Message size='tiny'>This is a tiny message.</Message>\n <Message size='small'>This is a small message.</Message>\n <Message size='large'>This is large</Message>\n <Message size='big'>This is big</Message>\n <Message size='huge'>This is huge</Message>\n <Message size='massive'>This is massive</Message>\n </div>\n)\n\nexport default MessageExampleSize\n","collections/Message/Variations/MessageExampleSuccess":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleSuccess = () => (\n <Message\n success\n header='Your user registration was successful'\n content='You may now log-in with the username you have chosen'\n />\n)\n\nexport default MessageExampleSuccess\n","collections/Message/Variations/MessageExampleWarning":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleWarning = () => (\n <Message warning>\n <Message.Header>You must register before you can do that!</Message.Header>\n <p>Visit our registration page, then try again.</p>\n </Message>\n)\n\nexport default MessageExampleWarning\n","collections/Message/Variations/MessageExampleWarningProps":"import React from 'react'\nimport { Message } from 'semantic-ui-react'\n\nconst MessageExampleWarningProps = () => (\n <Message\n warning\n header='You must register before you can do that!'\n content='Visit our registration page, then try again.'\n />\n)\n\nexport default MessageExampleWarningProps\n","collections/Table/States/TableExampleActive":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleActive = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row active>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Selected</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell active>Jill</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleActive\n","collections/Table/States/TableExampleDisabled":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleDisabled = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row disabled>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Selected</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell disabled>Jill</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleDisabled\n","collections/Table/States/TableExampleError":"import React from 'react'\nimport { Icon, Table } from 'semantic-ui-react'\n\nconst TableExampleError = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>No Name Specified</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row error>\n <Table.Cell>Jimmy</Table.Cell>\n <Table.Cell>Cannot pull data</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell error>\n <Icon name='attention' />\n Classified\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleError\n","collections/Table/States/TableExamplePositiveNegative":"import React from 'react'\nimport { Icon, Table } from 'semantic-ui-react'\n\nconst TableExamplePositiveNegative = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>No Name Specified</Table.Cell>\n <Table.Cell>Unknown</Table.Cell>\n <Table.Cell negative>None</Table.Cell>\n </Table.Row>\n <Table.Row positive>\n <Table.Cell>Jimmy</Table.Cell>\n <Table.Cell>\n <Icon name='checkmark' />\n Approved\n </Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Unknown</Table.Cell>\n <Table.Cell positive>\n <Icon name='close' />\n Requires call\n </Table.Cell>\n </Table.Row>\n <Table.Row negative>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Unknown</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExamplePositiveNegative\n","collections/Table/States/TableExampleWarning":"import React from 'react'\nimport { Icon, Table } from 'semantic-ui-react'\n\nconst TableExampleWarning = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>No Name Specified</Table.Cell>\n <Table.Cell>Unknown</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row warning>\n <Table.Cell>Jimmy</Table.Cell>\n <Table.Cell>\n <Icon name='attention' />\n Requires Action\n </Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Unknown</Table.Cell>\n <Table.Cell warning>\n <Icon name='attention' />\n Hostile\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Unknown</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleWarning\n","collections/Table/States/TableExampleWarningShorthand":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst tableData = [\n { name: undefined, status: undefined, notes: undefined },\n { name: 'Jimmy', status: 'Requires Action', notes: undefined },\n { name: 'Jamie', status: undefined, notes: 'Hostile' },\n { name: 'Jill', status: undefined, notes: undefined },\n]\n\nconst headerRow = ['Name', 'Status', 'Notes']\n\nconst renderBodyRow = ({ name, status, notes }, i) => ({\n key: name || `row-${i}`,\n warning: !!(status && status.match('Requires Action')),\n cells: [\n name || 'No name specified',\n status ? { key: 'status', icon: 'attention', content: status } : 'Unknown',\n notes\n ? { key: 'notes', icon: 'attention', content: notes, warning: true }\n : 'None',\n ],\n})\n\nconst TableExampleWarningShorthand = () => (\n <Table\n celled\n headerRow={headerRow}\n renderBodyRow={renderBodyRow}\n tableData={tableData}\n />\n)\n\nexport default TableExampleWarningShorthand\n","collections/Table/Types/TableExampleApprove":"import React from 'react'\nimport { Button, Checkbox, Icon, Table } from 'semantic-ui-react'\n\nconst TableExampleApprove = () => (\n <Table compact celled definition>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell />\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Registration Date</Table.HeaderCell>\n <Table.HeaderCell>E-mail address</Table.HeaderCell>\n <Table.HeaderCell>Premium Plan</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell collapsing>\n <Checkbox slider />\n </Table.Cell>\n <Table.Cell>John Lilki</Table.Cell>\n <Table.Cell>September 14, 2013</Table.Cell>\n <Table.Cell>jhlilk22@yahoo.com</Table.Cell>\n <Table.Cell>No</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell collapsing>\n <Checkbox slider />\n </Table.Cell>\n <Table.Cell>Jamie Harington</Table.Cell>\n <Table.Cell>January 11, 2014</Table.Cell>\n <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell collapsing>\n <Checkbox slider />\n </Table.Cell>\n <Table.Cell>Jill Lewis</Table.Cell>\n <Table.Cell>May 11, 2014</Table.Cell>\n <Table.Cell>jilsewris22@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer fullWidth>\n <Table.Row>\n <Table.HeaderCell />\n <Table.HeaderCell colSpan='4'>\n <Button\n floated='right'\n icon\n labelPosition='left'\n primary\n size='small'\n >\n <Icon name='user' /> Add User\n </Button>\n <Button size='small'>Approve</Button>\n <Button disabled size='small'>\n Approve All\n </Button>\n </Table.HeaderCell>\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleApprove\n","collections/Table/Types/TableExampleCelledStriped":"import React from 'react'\nimport { Icon, Table } from 'semantic-ui-react'\n\nconst TableExampleCelledStriped = () => (\n <Table celled striped>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell colSpan='3'>Git Repository</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell collapsing>\n <Icon name='folder' /> node_modules\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell collapsing textAlign='right'>\n 10 hours ago\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Icon name='folder' /> test\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell textAlign='right'>10 hours ago</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Icon name='folder' /> build\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell textAlign='right'>10 hours ago</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Icon name='file outline' /> package.json\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell textAlign='right'>10 hours ago</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Icon name='file outline' /> Gruntfile.js\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell textAlign='right'>10 hours ago</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleCelledStriped\n","collections/Table/Types/TableExampleCollapsing":"import React from 'react'\nimport { Header, Image, Table } from 'semantic-ui-react'\n\nconst TableExampleCollapsing = () => (\n <Table basic='very' celled collapsing>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Employee</Table.HeaderCell>\n <Table.HeaderCell>Correct Guesses</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>\n <Header as='h4' image>\n <Image src='https://react.semantic-ui.com/images/avatar/small/lena.png' rounded size='mini' />\n <Header.Content>\n Lena\n <Header.Subheader>Human Resources</Header.Subheader>\n </Header.Content>\n </Header>\n </Table.Cell>\n <Table.Cell>22</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Header as='h4' image>\n <Image src='https://react.semantic-ui.com/images/avatar/small/matthew.png' rounded size='mini' />\n <Header.Content>\n Matthew\n <Header.Subheader>Fabric Design</Header.Subheader>\n </Header.Content>\n </Header>\n </Table.Cell>\n <Table.Cell>15</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Header as='h4' image>\n <Image src='https://react.semantic-ui.com/images/avatar/small/lindsay.png' rounded size='mini' />\n <Header.Content>\n Lindsay\n <Header.Subheader>Entertainment</Header.Subheader>\n </Header.Content>\n </Header>\n </Table.Cell>\n <Table.Cell>12</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Header as='h4' image>\n <Image src='https://react.semantic-ui.com/images/avatar/small/mark.png' rounded size='mini' />\n <Header.Content>\n Mark\n <Header.Subheader>Executive</Header.Subheader>\n </Header.Content>\n </Header>\n </Table.Cell>\n <Table.Cell>11</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleCollapsing\n","collections/Table/Types/TableExampleDefinition":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleDefinition = () => (\n <Table definition>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell />\n <Table.HeaderCell>Arguments</Table.HeaderCell>\n <Table.HeaderCell>Description</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>reset rating</Table.Cell>\n <Table.Cell>None</Table.Cell>\n <Table.Cell>Resets rating to default value</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>set rating</Table.Cell>\n <Table.Cell>rating (integer)</Table.Cell>\n <Table.Cell>Sets the current star rating to specified value</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleDefinition\n","collections/Table/Types/TableExamplePadded":"import React from 'react'\nimport { Header, Table, Rating } from 'semantic-ui-react'\n\nconst TableExamplePadded = () => (\n <Table celled padded>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell singleLine>Evidence Rating</Table.HeaderCell>\n <Table.HeaderCell>Effect</Table.HeaderCell>\n <Table.HeaderCell>Efficacy</Table.HeaderCell>\n <Table.HeaderCell>Consensus</Table.HeaderCell>\n <Table.HeaderCell>Comments</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>\n <Header as='h2' textAlign='center'>\n A\n </Header>\n </Table.Cell>\n <Table.Cell singleLine>Power Output</Table.Cell>\n <Table.Cell>\n <Rating icon='star' defaultRating={3} maxRating={3} />\n </Table.Cell>\n <Table.Cell textAlign='right'>\n 80% <br />\n <a href='#'>18 studies</a>\n </Table.Cell>\n <Table.Cell>\n Creatine supplementation is the reference compound for increasing\n muscular creatine levels; there is variability in this increase,\n however, with some nonresponders.\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Header as='h2' textAlign='center'>\n A\n </Header>\n </Table.Cell>\n <Table.Cell singleLine>Weight</Table.Cell>\n <Table.Cell>\n <Rating icon='star' defaultRating={3} maxRating={3} />\n </Table.Cell>\n <Table.Cell textAlign='right'>\n 100% <br />\n <a href='#'>65 studies</a>\n </Table.Cell>\n <Table.Cell>\n Creatine is the reference compound for power improvement, with numbers\n from one meta-analysis to assess potency\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExamplePadded\n","collections/Table/Types/TableExamplePagination":"import React from 'react'\nimport { Icon, Label, Menu, Table } from 'semantic-ui-react'\n\nconst TableExamplePagination = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Header</Table.HeaderCell>\n <Table.HeaderCell>Header</Table.HeaderCell>\n <Table.HeaderCell>Header</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>\n <Label ribbon>First</Label>\n </Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Cell</Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Cell</Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell colSpan='3'>\n <Menu floated='right' pagination>\n <Menu.Item as='a' icon>\n <Icon name='chevron left' />\n </Menu.Item>\n <Menu.Item as='a'>1</Menu.Item>\n <Menu.Item as='a'>2</Menu.Item>\n <Menu.Item as='a'>3</Menu.Item>\n <Menu.Item as='a'>4</Menu.Item>\n <Menu.Item as='a' icon>\n <Icon name='chevron right' />\n </Menu.Item>\n </Menu>\n </Table.HeaderCell>\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExamplePagination\n","collections/Table/Types/TableExampleStructured":"import React from 'react'\nimport { Icon, Table } from 'semantic-ui-react'\n\nconst TableExampleStructured = () => (\n <Table celled structured>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell rowSpan='2'>Name</Table.HeaderCell>\n <Table.HeaderCell rowSpan='2'>Type</Table.HeaderCell>\n <Table.HeaderCell rowSpan='2'>Files</Table.HeaderCell>\n <Table.HeaderCell colSpan='3'>Languages</Table.HeaderCell>\n </Table.Row>\n <Table.Row>\n <Table.HeaderCell>Ruby</Table.HeaderCell>\n <Table.HeaderCell>JavaScript</Table.HeaderCell>\n <Table.HeaderCell>Python</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>Alpha Team</Table.Cell>\n <Table.Cell>Project 1</Table.Cell>\n <Table.Cell textAlign='right'>2</Table.Cell>\n <Table.Cell textAlign='center'>\n <Icon color='green' name='checkmark' size='large' />\n </Table.Cell>\n <Table.Cell />\n <Table.Cell />\n </Table.Row>\n <Table.Row>\n <Table.Cell rowSpan='3'>Beta Team</Table.Cell>\n <Table.Cell>Project 1</Table.Cell>\n <Table.Cell textAlign='right'>52</Table.Cell>\n <Table.Cell textAlign='center'>\n <Icon color='green' name='checkmark' size='large' />\n </Table.Cell>\n <Table.Cell />\n <Table.Cell />\n </Table.Row>\n <Table.Row>\n <Table.Cell>Project 2</Table.Cell>\n <Table.Cell textAlign='right'>12</Table.Cell>\n <Table.Cell />\n <Table.Cell textAlign='center'>\n <Icon color='green' name='checkmark' size='large' />\n </Table.Cell>\n <Table.Cell />\n </Table.Row>\n <Table.Row>\n <Table.Cell>Project 3</Table.Cell>\n <Table.Cell textAlign='right'>21</Table.Cell>\n <Table.Cell textAlign='center'>\n <Icon color='green' name='checkmark' size='large' />\n </Table.Cell>\n <Table.Cell />\n <Table.Cell />\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleStructured\n","collections/Table/Variations/TableExampleAttached":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst header = (\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Header</Table.HeaderCell>\n <Table.HeaderCell>Header</Table.HeaderCell>\n <Table.HeaderCell>Header</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n)\nconst body = (\n <Table.Body>\n <Table.Row>\n <Table.Cell>Cell</Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n <Table.Cell>Cell</Table.Cell>\n </Table.Row>\n </Table.Body>\n)\n\nconst TableExampleAttached = () => (\n <div>\n <Table attached='top' basic>\n {header}\n {body}\n </Table>\n\n <Table attached>{body}</Table>\n\n <Table attached celled selectable>\n {body}\n </Table>\n\n <Table attached='bottom' celled>\n {header}\n {body}\n </Table>\n </div>\n)\n\nexport default TableExampleAttached\n","collections/Table/Variations/TableExampleBasic":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleBasic = () => (\n <Table basic>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleBasic\n","collections/Table/Variations/TableExampleCelled":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleCelled = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell>3 People</Table.HeaderCell>\n <Table.HeaderCell>2 Approved</Table.HeaderCell>\n <Table.HeaderCell />\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleCelled\n","collections/Table/Variations/TableExampleCollapsing":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleCollapsing = () => (\n <Table collapsing>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell>3 People</Table.HeaderCell>\n <Table.HeaderCell>2 Approved</Table.HeaderCell>\n <Table.HeaderCell />\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleCollapsing\n","collections/Table/Variations/TableExampleCollapsingCell":"import React from 'react'\nimport { Icon, Table } from 'semantic-ui-react'\n\nconst TableExampleCollapsingCell = () => (\n <Table>\n <Table.Body>\n <Table.Row>\n <Table.Cell collapsing>\n <Icon name='folder' />\n node_modules\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell>10 hours ago</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Icon name='folder' />\n test\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell>10 hours ago</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\n <Icon name='folder' />\n build\n </Table.Cell>\n <Table.Cell>Initial commit</Table.Cell>\n <Table.Cell>10 hours ago</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleCollapsingCell\n","collections/Table/Variations/TableExampleColors":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nconst TableExampleColors = () => (\n <div>\n {colors.map((color) => (\n <Table color={color} key={color}>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Food</Table.HeaderCell>\n <Table.HeaderCell>Calories</Table.HeaderCell>\n <Table.HeaderCell>Protein</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>Apples</Table.Cell>\n <Table.Cell>200</Table.Cell>\n <Table.Cell>0g</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Orange</Table.Cell>\n <Table.Cell>310</Table.Cell>\n <Table.Cell>0g</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n ))}\n </div>\n)\nexport default TableExampleColors\n","collections/Table/Variations/TableExampleColumnCount":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleColumnCount = () => (\n <Table columns={5}>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Age</Table.HeaderCell>\n <Table.HeaderCell>Gender</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>22</Table.Cell>\n <Table.Cell>Male</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>32</Table.Cell>\n <Table.Cell>Male</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>22</Table.Cell>\n <Table.Cell>Other</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell>3 People</Table.HeaderCell>\n <Table.HeaderCell>2 Approved</Table.HeaderCell>\n <Table.HeaderCell />\n <Table.HeaderCell />\n <Table.HeaderCell />\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleColumnCount\n","collections/Table/Variations/TableExampleColumnWidth":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleColumnWidth = () => (\n <Table>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell width={10}>Name</Table.HeaderCell>\n <Table.HeaderCell width='six'>Status</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell>3 People</Table.HeaderCell>\n <Table.HeaderCell>2 Approved</Table.HeaderCell>\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleColumnWidth\n","collections/Table/Variations/TableExampleCompact":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleCompact = () => (\n <Table compact>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleCompact\n","collections/Table/Variations/TableExampleFixed":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleFixed = () => (\n <Table fixed>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Description</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>\n John is an interesting boy but sometimes you don't really have enough\n room to describe everything you'd like\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>\n Jamie is a kind girl but sometimes you don't really have enough room\n to describe everything you'd like\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>\n Jill is an alright girl but sometimes you don't really have enough\n room to describe everything you'd like\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleFixed\n","collections/Table/Variations/TableExampleFixedLine":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleFixedLine = () => (\n <Table celled fixed singleLine>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Description</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell\n title={[\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',\n 'et dolore magna aliqua.',\n ].join(' ')}\n >\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Shorter description</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>Shorter description</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleFixedLine\n","collections/Table/Variations/TableExampleFullWidth":"import React from 'react'\nimport { Button, Checkbox, Icon, Table } from 'semantic-ui-react'\n\nconst TableExampleFullWidth = () => (\n <Table celled compact definition>\n <Table.Header fullWidth>\n <Table.Row>\n <Table.HeaderCell />\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Registration Date</Table.HeaderCell>\n <Table.HeaderCell>E-mail address</Table.HeaderCell>\n <Table.HeaderCell>Premium Plan</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell collapsing>\n <Checkbox slider />\n </Table.Cell>\n <Table.Cell>John Lilki</Table.Cell>\n <Table.Cell>September 14, 2013</Table.Cell>\n <Table.Cell>jhlilk22@yahoo.com</Table.Cell>\n <Table.Cell>No</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell collapsing>\n <Checkbox slider />\n </Table.Cell>\n <Table.Cell>Jamie Harington</Table.Cell>\n <Table.Cell>January 11, 2014</Table.Cell>\n <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell collapsing>\n <Checkbox slider />\n </Table.Cell>\n <Table.Cell>Jill Lewis</Table.Cell>\n <Table.Cell>May 11, 2014</Table.Cell>\n <Table.Cell>jilsewris22@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer fullWidth>\n <Table.Row>\n <Table.HeaderCell />\n <Table.HeaderCell colSpan='4'>\n <Button\n floated='right'\n icon\n labelPosition='left'\n primary\n size='small'\n >\n <Icon name='user' /> Add User\n </Button>\n <Button size='small'>Approve</Button>\n <Button disabled size='small'>\n Approve All\n </Button>\n </Table.HeaderCell>\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleFullWidth\n","collections/Table/Variations/TableExampleInverted":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleInverted = () => (\n <Table inverted>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell>3 People</Table.HeaderCell>\n <Table.HeaderCell>2 Approved</Table.HeaderCell>\n <Table.HeaderCell />\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleInverted\n","collections/Table/Variations/TableExampleInvertedColors":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nconst TableExampleInvertedColors = () => (\n <div>\n {colors.map((color) => (\n <Table color={color} key={color} inverted>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Food</Table.HeaderCell>\n <Table.HeaderCell>Calories</Table.HeaderCell>\n <Table.HeaderCell>Protein</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>Apples</Table.Cell>\n <Table.Cell>200</Table.Cell>\n <Table.Cell>0g</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Orange</Table.Cell>\n <Table.Cell>310</Table.Cell>\n <Table.Cell>0g</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n ))}\n </div>\n)\n\nexport default TableExampleInvertedColors\n","collections/Table/Variations/TableExampleLarge":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleLarge = () => (\n <Table size='large'>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell>3 People</Table.HeaderCell>\n <Table.HeaderCell>2 Approved</Table.HeaderCell>\n <Table.HeaderCell />\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleLarge\n","collections/Table/Variations/TableExamplePadded":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExamplePadded = () => (\n <Table padded>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>\n He is a very nice guy and I enjoyed talking to him on the telephone. I\n hope we get to talk again.\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>\n Jamie was not interested in purchasing our product.\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExamplePadded\n","collections/Table/Variations/TableExampleSelectableCell":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleSelectableCell = () => (\n <Table celled>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>No Action</Table.Cell>\n <Table.Cell selectable>\n <a href='#'>Edit</a>\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell selectable>\n <a href='#'>Edit</a>\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell selectable>\n <a href='#'>Edit</a>\n </Table.Cell>\n </Table.Row>\n <Table.Row warning>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>No Action</Table.Cell>\n <Table.Cell selectable warning>\n <a href='#'>Requires change</a>\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell positive>Approved</Table.Cell>\n <Table.Cell selectable positive>\n <a href='#'>Approve</a>\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell negative>Denied</Table.Cell>\n <Table.Cell selectable negative>\n <a href='#'>Remove</a>\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleSelectableCell\n","collections/Table/Variations/TableExampleSelectableInvertedRow":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleSelectableInvertedRow = () => (\n <Table celled inverted selectable>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleSelectableInvertedRow\n","collections/Table/Variations/TableExampleSelectableRow":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleSelectableRow = () => (\n <Table celled selectable>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>No Action</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row warning>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>No Action</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell positive>Approved</Table.Cell>\n <Table.Cell warning>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell negative>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleSelectableRow\n","collections/Table/Variations/TableExampleSingleLine":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleSingleLine = () => (\n <Table singleLine>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Registration Date</Table.HeaderCell>\n <Table.HeaderCell>E-mail address</Table.HeaderCell>\n <Table.HeaderCell>Premium Plan</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John Lilki</Table.Cell>\n <Table.Cell>September 14, 2013</Table.Cell>\n <Table.Cell>jhlilk22@yahoo.com</Table.Cell>\n <Table.Cell>No</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie Harington</Table.Cell>\n <Table.Cell>January 11, 2014</Table.Cell>\n <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill Lewis</Table.Cell>\n <Table.Cell>May 11, 2014</Table.Cell>\n <Table.Cell>jilsewris22@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleSingleLine\n","collections/Table/Variations/TableExampleSmall":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleSmall = () => (\n <Table size='small'>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n\n <Table.Footer>\n <Table.Row>\n <Table.HeaderCell>3 People</Table.HeaderCell>\n <Table.HeaderCell>2 Approved</Table.HeaderCell>\n <Table.HeaderCell />\n </Table.Row>\n </Table.Footer>\n </Table>\n)\n\nexport default TableExampleSmall\n","collections/Table/Variations/TableExampleSortable":"import _ from 'lodash'\nimport React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst tableData = [\n { name: 'John', age: 15, gender: 'Male' },\n { name: 'Amber', age: 40, gender: 'Female' },\n { name: 'Leslie', age: 25, gender: 'Other' },\n { name: 'Ben', age: 70, gender: 'Male' },\n]\n\nfunction exampleReducer(state, action) {\n switch (action.type) {\n case 'CHANGE_SORT':\n if (state.column === action.column) {\n return {\n ...state,\n data: state.data.reverse(),\n direction:\n state.direction === 'ascending' ? 'descending' : 'ascending',\n }\n }\n\n return {\n column: action.column,\n data: _.sortBy(state.data, [action.column]),\n direction: 'ascending',\n }\n default:\n throw new Error()\n }\n}\n\nfunction TableExampleSortable() {\n const [state, dispatch] = React.useReducer(exampleReducer, {\n column: null,\n data: tableData,\n direction: null,\n })\n const { column, data, direction } = state\n\n return (\n <Table sortable celled fixed>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell\n sorted={column === 'name' ? direction : null}\n onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'name' })}\n >\n Name\n </Table.HeaderCell>\n <Table.HeaderCell\n sorted={column === 'age' ? direction : null}\n onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'age' })}\n >\n Age\n </Table.HeaderCell>\n <Table.HeaderCell\n sorted={column === 'gender' ? direction : null}\n onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'gender' })}\n >\n Gender\n </Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n {data.map(({ age, gender, name }) => (\n <Table.Row key={name}>\n <Table.Cell>{name}</Table.Cell>\n <Table.Cell>{age}</Table.Cell>\n <Table.Cell>{gender}</Table.Cell>\n </Table.Row>\n ))}\n </Table.Body>\n </Table>\n )\n}\n\nexport default TableExampleSortable\n","collections/Table/Variations/TableExampleStackable":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleStackable = () => (\n <Table stackable>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleStackable\n","collections/Table/Variations/TableExampleStriped":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleStriped = () => (\n <Table striped>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Date Joined</Table.HeaderCell>\n <Table.HeaderCell>E-mail</Table.HeaderCell>\n <Table.HeaderCell>Called</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John Lilki</Table.Cell>\n <Table.Cell>September 14, 2013</Table.Cell>\n <Table.Cell>jhlilk22@yahoo.com</Table.Cell>\n <Table.Cell>No</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie Harington</Table.Cell>\n <Table.Cell>January 11, 2014</Table.Cell>\n <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill Lewis</Table.Cell>\n <Table.Cell>May 11, 2014</Table.Cell>\n <Table.Cell>jilsewris22@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John Lilki</Table.Cell>\n <Table.Cell>September 14, 2013</Table.Cell>\n <Table.Cell>jhlilk22@yahoo.com</Table.Cell>\n <Table.Cell>No</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John Lilki</Table.Cell>\n <Table.Cell>September 14, 2013</Table.Cell>\n <Table.Cell>jhlilk22@yahoo.com</Table.Cell>\n <Table.Cell>No</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie Harington</Table.Cell>\n <Table.Cell>January 11, 2014</Table.Cell>\n <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill Lewis</Table.Cell>\n <Table.Cell>May 11, 2014</Table.Cell>\n <Table.Cell>jilsewris22@yahoo.com</Table.Cell>\n <Table.Cell>Yes</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John Lilki</Table.Cell>\n <Table.Cell>September 14, 2013</Table.Cell>\n <Table.Cell>jhlilk22@yahoo.com</Table.Cell>\n <Table.Cell>No</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleStriped\n","collections/Table/Variations/TableExampleTextAlign":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleTextAlign = () => (\n <Table striped>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row textAlign='center'>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleTextAlign\n","collections/Table/Variations/TableExampleUnstackable":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleUnstackable = () => (\n <Table unstackable>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell textAlign='right'>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell textAlign='right'>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleUnstackable\n","collections/Table/Variations/TableExampleVerticalAlign":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleVerticalAlign = () => (\n <Table striped>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row verticalAlign='top'>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell verticalAlign='top'>\n Notes\n <br />\n 1<br />\n 2<br />\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell verticalAlign='bottom'>Approved</Table.Cell>\n <Table.Cell>\n Notes\n <br />\n 1<br />\n 2<br />\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleVerticalAlign\n","collections/Table/Variations/TableExampleVeryBasic":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleVeryBasic = () => (\n <Table basic='very'>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jill</Table.Cell>\n <Table.Cell>Denied</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleVeryBasic\n","collections/Table/Variations/TableExampleVeryCompact":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleVeryCompact = () => (\n <Table compact='very'>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>None</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>Requires call</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleVeryCompact\n","collections/Table/Variations/TableExampleVeryPadded":"import React from 'react'\nimport { Table } from 'semantic-ui-react'\n\nconst TableExampleVeryPadded = () => (\n <Table padded='very'>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Status</Table.HeaderCell>\n <Table.HeaderCell>Notes</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n <Table.Row>\n <Table.Cell>John</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>\n He is a very nice guy and I enjoyed talking to him on the telephone. I\n hope we get to talk again.\n </Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Jamie</Table.Cell>\n <Table.Cell>Approved</Table.Cell>\n <Table.Cell>\n Jamie was not interested in purchasing our product.\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n)\n\nexport default TableExampleVeryPadded\n","elements/Container/Types/ContainerExampleContainer":"/* eslint-disable max-len */\n\nimport React from 'react'\nimport { Container } from 'semantic-ui-react'\n\nconst ContainerExampleContainer = () => (\n <Container>\n <p>\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,\n ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa\n quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,\n arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.\n Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras\n dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\n Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.\n Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus\n viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.\n Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.\n </p>\n </Container>\n)\n\nexport default ContainerExampleContainer\n","elements/Container/Types/ContainerExampleText":"/* eslint-disable max-len */\n\nimport React from 'react'\nimport { Container, Header } from 'semantic-ui-react'\n\nconst ContainerExampleText = () => (\n <Container text>\n <Header as='h2'>Header</Header>\n <p>\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,\n ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa\n quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,\n arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.\n Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras\n dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\n Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.\n Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus\n viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.\n Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,\n ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa\n quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,\n arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.\n Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras\n dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\n Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.\n Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus\n viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.\n Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.\n </p>\n </Container>\n)\n\nexport default ContainerExampleText\n","elements/Container/Variations/ContainerExampleAlignment":"/* eslint-disable max-len */\n\nimport React from 'react'\nimport { Container, Divider } from 'semantic-ui-react'\n\nconst ContainerExampleAlignment = () => (\n <div>\n <Container textAlign='left'>Left Aligned</Container>\n <Container textAlign='center'>Center Aligned</Container>\n <Container textAlign='right'>Right Aligned</Container>\n <Container textAlign='justified'>\n <b>Justified</b>\n <Divider />\n <p>\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,\n ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa\n quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,\n arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.\n Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras\n dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend\n tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,\n enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.\n Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean\n imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper\n ultricies nisi.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,\n ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa\n quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,\n arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.\n Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras\n dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend\n tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,\n enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.\n Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean\n imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper\n ultricies nisi.\n </p>\n </Container>\n </div>\n)\n\nexport default ContainerExampleAlignment\n","elements/Container/Variations/ContainerExampleFluid":"/* eslint-disable max-len */\n\nimport React from 'react'\nimport { Container, Header } from 'semantic-ui-react'\n\nconst ContainerExampleFluid = () => (\n <div>\n <Container fluid>\n <Header as='h2'>Dogs Roles with Humans</Header>\n <p>\n Domestic dogs inherited complex behaviors, such as bite inhibition, from\n their wolf ancestors, which would have been pack hunters with complex\n body language. These sophisticated forms of social cognition and\n communication may account for their trainability, playfulness, and\n ability to fit into human households and social situations, and these\n attributes have given dogs a relationship with humans that has enabled\n them to become one of the most successful species on the planet today.\n </p>\n <p>\n The dogs' value to early human hunter-gatherers led to them quickly\n becoming ubiquitous across world cultures. Dogs perform many roles for\n people, such as hunting, herding, pulling loads, protection, assisting\n police and military, companionship, and, more recently, aiding\n handicapped individuals. This impact on human society has given them the\n nickname \"man's best friend\" in the Western world. In some cultures,\n however, dogs are also a source of meat.\n </p>\n </Container>\n </div>\n)\n\nexport default ContainerExampleFluid\n","elements/Button/Content/ButtonExampleConditionals":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleConditionals = () => (\n <Button.Group>\n <Button>Cancel</Button>\n <Button.Or />\n <Button positive>Save</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleConditionals\n","elements/Button/Content/ButtonExampleConditionalsCustom":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleConditionalsCustom = () => (\n <Button.Group>\n <Button>un</Button>\n <Button.Or text='ou' />\n <Button positive>deux</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleConditionalsCustom\n","elements/Button/Content/ButtonExampleMultipleConditionals":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleMultipleConditionals = () => (\n <Button.Group>\n <Button>One</Button>\n <Button.Or />\n <Button>Two</Button>\n <Button.Or />\n <Button>Three</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleMultipleConditionals\n","elements/Button/GroupVariations/ButtonExampleGroupBasic":"import React from 'react'\nimport { Button, Divider } from 'semantic-ui-react'\n\nconst ButtonExampleGroupBasic = () => (\n <div>\n <Button.Group basic>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </Button.Group>\n <Divider />\n <Button.Group basic vertical>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </Button.Group>\n </div>\n)\n\nexport default ButtonExampleGroupBasic\n","elements/Button/GroupVariations/ButtonExampleGroupBasicColored":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupBasicColored = () => (\n <Button.Group>\n <Button basic color='red'>\n One\n </Button>\n <Button basic color='green'>\n Two\n </Button>\n <Button basic color='blue'>\n Three\n </Button>\n </Button.Group>\n)\n\nexport default ButtonExampleGroupBasicColored\n","elements/Button/GroupVariations/ButtonExampleGroupColored":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupColored = () => (\n <Button.Group color='blue'>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleGroupColored\n","elements/Button/GroupVariations/ButtonExampleGroupEqualWidth":"import React from 'react'\nimport { Button, Divider } from 'semantic-ui-react'\n\nconst ButtonExampleGroupEqualWidth = () => (\n <div>\n <Button.Group widths='5'>\n <Button>Overview</Button>\n <Button>Specs</Button>\n <Button>Warranty</Button>\n <Button>Reviews</Button>\n <Button>Support</Button>\n </Button.Group>\n <Divider />\n <Button.Group widths='3'>\n <Button>Overview</Button>\n <Button>Specs</Button>\n <Button>Support</Button>\n </Button.Group>\n </div>\n)\n\nexport default ButtonExampleGroupEqualWidth\n","elements/Button/GroupVariations/ButtonExampleGroupFloated":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupFloated = () => (\n <div>\n <Button.Group floated='left'>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </Button.Group>\n <Button.Group floated='right'>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </Button.Group>\n </div>\n)\n\nexport default ButtonExampleGroupFloated\n","elements/Button/GroupVariations/ButtonExampleGroupIcon":"import React from 'react'\nimport { Button, Icon } from 'semantic-ui-react'\n\nconst ButtonExampleGroupIcon = () => (\n <Button.Group icon>\n <Button>\n <Icon name='play' />\n </Button>\n <Button>\n <Icon name='pause' />\n </Button>\n <Button>\n <Icon name='shuffle' />\n </Button>\n </Button.Group>\n)\n\nexport default ButtonExampleGroupIcon\n","elements/Button/GroupVariations/ButtonExampleGroupIconShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupIconShorthand = () => (\n <Button.Group>\n <Button icon='play' />\n <Button icon='pause' />\n <Button icon='shuffle' />\n </Button.Group>\n)\n\nexport default ButtonExampleGroupIconShorthand\n","elements/Button/GroupVariations/ButtonExampleGroupIconSize":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupIconSize = () => (\n <Button.Group basic size='small'>\n <Button icon='file' />\n <Button icon='save' />\n <Button icon='upload' />\n <Button icon='download' />\n </Button.Group>\n)\n\nexport default ButtonExampleGroupIconSize\n","elements/Button/GroupVariations/ButtonExampleGroupLabeledIcon":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupLabeledIcon = () => (\n <Button.Group vertical labeled icon>\n <Button icon='play' content='Play' />\n <Button icon='pause' content='Pause' />\n <Button icon='shuffle' content='Shuffle' />\n </Button.Group>\n)\n\nexport default ButtonExampleGroupLabeledIcon\n","elements/Button/GroupVariations/ButtonExampleGroupMixed":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupMixed = () => (\n <Button.Group>\n <Button labelPosition='left' icon='left chevron' content='Back' />\n <Button icon='stop' content='Stop' />\n <Button labelPosition='right' icon='right chevron' content='Forward' />\n </Button.Group>\n)\n\nexport default ButtonExampleGroupMixed\n","elements/Button/GroupVariations/ButtonExampleGroupOrSize":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupOrSize = () => (\n <Button.Group size='large'>\n <Button>One</Button>\n <Button.Or />\n <Button>Three</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleGroupOrSize\n","elements/Button/GroupVariations/ButtonExampleGroupSize":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupSize = () => (\n <Button.Group size='large'>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleGroupSize\n","elements/Button/GroupVariations/ButtonExampleGroupVertical":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupVertical = () => (\n <Button.Group vertical>\n <Button>Feed</Button>\n <Button>Messages</Button>\n <Button>Events</Button>\n <Button>Photos</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleGroupVertical\n","elements/Button/Groups/ButtonExampleGroup":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroup = () => (\n <Button.Group>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </Button.Group>\n)\n\nexport default ButtonExampleGroup\n","elements/Button/Groups/ButtonExampleGroupIcon":"import React from 'react'\nimport { Button, Icon } from 'semantic-ui-react'\n\nconst ButtonExampleGroupIcon = () => (\n <div>\n <Button.Group>\n <Button icon>\n <Icon name='align left' />\n </Button>\n <Button icon>\n <Icon name='align center' />\n </Button>\n <Button icon>\n <Icon name='align right' />\n </Button>\n <Button icon>\n <Icon name='align justify' />\n </Button>\n </Button.Group>{' '}\n <Button.Group>\n <Button icon>\n <Icon name='bold' />\n </Button>\n <Button icon>\n <Icon name='underline' />\n </Button>\n <Button icon>\n <Icon name='text width' />\n </Button>\n </Button.Group>\n </div>\n)\n\nexport default ButtonExampleGroupIcon\n","elements/Button/Groups/ButtonExampleGroupIconShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupIconShorthand = () => (\n <div>\n <Button.Group\n buttons={[\n { key: 'align left', icon: 'align left' },\n { key: 'align center', icon: 'align center' },\n { key: 'align right', icon: 'align right' },\n { key: 'align justify', icon: 'align justify' },\n ]}\n />{' '}\n <Button.Group\n buttons={[\n { key: 'bold', icon: 'bold' },\n { key: 'underline', icon: 'underline' },\n { key: 'text width', icon: 'text width' },\n ]}\n />\n </div>\n)\n\nexport default ButtonExampleGroupIconShorthand\n","elements/Button/Groups/ButtonExampleGroupShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleGroupShorthand = () => (\n <Button.Group buttons={['One', 'Two', 'Three']} />\n)\n\nexport default ButtonExampleGroupShorthand\n","elements/Button/States/ButtonExampleActive":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleActive = () => <Button active>Active</Button>\n\nexport default ButtonExampleActive\n","elements/Button/States/ButtonExampleDisabled":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleDisabled = () => <Button disabled>Disabled</Button>\n\nexport default ButtonExampleDisabled\n","elements/Button/States/ButtonExampleLoading":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleLoading = () => (\n <div>\n <Button loading>Loading</Button>\n <Button basic loading>\n Loading\n </Button>\n <Button loading primary>\n Loading\n </Button>\n <Button loading secondary>\n Loading\n </Button>\n </div>\n)\n\nexport default ButtonExampleLoading\n","elements/Button/Types/ButtonExampleAnimated":"import React from 'react'\nimport { Button, Icon } from 'semantic-ui-react'\n\nconst ButtonExampleAnimated = () => (\n <div>\n <Button animated>\n <Button.Content visible>Next</Button.Content>\n <Button.Content hidden>\n <Icon name='arrow right' />\n </Button.Content>\n </Button>\n <Button animated='vertical'>\n <Button.Content hidden>Shop</Button.Content>\n <Button.Content visible>\n <Icon name='shop' />\n </Button.Content>\n </Button>\n <Button animated='fade'>\n <Button.Content visible>Sign-up for a Pro account</Button.Content>\n <Button.Content hidden>$12.99 a month</Button.Content>\n </Button>\n </div>\n)\n\nexport default ButtonExampleAnimated\n","elements/Button/Types/ButtonExampleBasic":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleBasic = () => (\n <div>\n <Button basic>Standard</Button>\n <Button basic color='red'>\n Red\n </Button>\n <Button basic color='orange'>\n Orange\n </Button>\n <Button basic color='yellow'>\n Yellow\n </Button>\n <Button basic color='olive'>\n Olive\n </Button>\n <Button basic color='green'>\n Green\n </Button>\n <Button basic color='teal'>\n Teal\n </Button>\n <Button basic color='blue'>\n Blue\n </Button>\n <Button basic color='violet'>\n Violet\n </Button>\n <Button basic color='purple'>\n Purple\n </Button>\n <Button basic color='pink'>\n Pink\n </Button>\n <Button basic color='brown'>\n Brown\n </Button>\n <Button basic color='grey'>\n Grey\n </Button>\n <Button basic color='black'>\n Black\n </Button>\n </div>\n)\n\nexport default ButtonExampleBasic\n","elements/Button/Types/ButtonExampleBasicShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleBasicShorthand = () => (\n <div>\n <Button content='Standard' basic />\n <Button basic color='red' content='Red' />\n <Button basic color='orange' content='Orange' />\n <Button basic color='yellow' content='Yellow' />\n <Button basic color='olive' content='Olive' />\n <Button basic color='green' content='Green' />\n <Button basic color='teal' content='Teal' />\n <Button basic color='blue' content='Blue' />\n <Button basic color='violet' content='Violet' />\n <Button basic color='purple' content='Purple' />\n <Button basic color='pink' content='Pink' />\n <Button basic color='brown' content='Brown' />\n <Button basic color='grey' content='Grey' />\n <Button basic color='black' content='Black' />\n </div>\n)\n\nexport default ButtonExampleBasicShorthand\n","elements/Button/Types/ButtonExampleButton":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleButton = () => <Button>Click Here</Button>\n\nexport default ButtonExampleButton\n","elements/Button/Types/ButtonExampleEmphasis":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleEmphasis = () => (\n <div>\n <Button primary>Primary</Button>\n <Button secondary>Secondary</Button>\n </div>\n)\n\nexport default ButtonExampleEmphasis\n","elements/Button/Types/ButtonExampleEmphasisShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleEmphasisShorthand = () => (\n <div>\n <Button content='Primary' primary />\n <Button content='Secondary' secondary />\n </div>\n)\n\nexport default ButtonExampleEmphasisShorthand\n","elements/Button/Types/ButtonExampleIcon":"import React from 'react'\nimport { Button, Icon } from 'semantic-ui-react'\n\nconst ButtonExampleIcon = () => (\n <Button icon>\n <Icon name='world' />\n </Button>\n)\n\nexport default ButtonExampleIcon\n","elements/Button/Types/ButtonExampleIconShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleIconShorthand = () => <Button icon='world' />\n\nexport default ButtonExampleIconShorthand\n","elements/Button/Types/ButtonExampleInverted":"import React from 'react'\nimport { Button, Segment } from 'semantic-ui-react'\n\nconst ButtonExampleInverted = () => (\n <div>\n <Segment inverted>\n <Button inverted>Standard</Button>\n <Button inverted color='red'>\n Red\n </Button>\n <Button inverted color='orange'>\n Orange\n </Button>\n <Button inverted color='yellow'>\n Yellow\n </Button>\n <Button inverted color='olive'>\n Olive\n </Button>\n <Button inverted color='green'>\n Green\n </Button>\n <Button inverted color='teal'>\n Teal\n </Button>\n <Button inverted color='blue'>\n Blue\n </Button>\n <Button inverted color='violet'>\n Violet\n </Button>\n <Button inverted color='purple'>\n Purple\n </Button>\n <Button inverted color='pink'>\n Pink\n </Button>\n <Button inverted color='brown'>\n Brown\n </Button>\n <Button inverted color='grey'>\n Grey\n </Button>\n <Button inverted color='black'>\n Black\n </Button>\n </Segment>\n <Segment inverted>\n <Button basic inverted>\n Standard\n </Button>\n <Button basic inverted color='red'>\n Red\n </Button>\n <Button basic inverted color='orange'>\n Orange\n </Button>\n <Button basic inverted color='yellow'>\n Yellow\n </Button>\n <Button basic inverted color='olive'>\n Olive\n </Button>\n <Button basic inverted color='green'>\n Green\n </Button>\n <Button basic inverted color='teal'>\n Teal\n </Button>\n <Button basic inverted color='blue'>\n Blue\n </Button>\n <Button basic inverted color='violet'>\n Violet\n </Button>\n <Button basic inverted color='purple'>\n Purple\n </Button>\n <Button basic inverted color='pink'>\n Pink\n </Button>\n <Button basic inverted color='brown'>\n Brown\n </Button>\n <Button basic inverted color='grey'>\n Grey\n </Button>\n <Button basic inverted color='black'>\n Black\n </Button>\n </Segment>\n </div>\n)\n\nexport default ButtonExampleInverted\n","elements/Button/Types/ButtonExampleLabeled":"import React from 'react'\nimport { Button, Icon, Label } from 'semantic-ui-react'\n\nconst ButtonExampleLabeled = () => (\n <div>\n <Button as='div' labelPosition='right'>\n <Button icon>\n <Icon name='heart' />\n Like\n </Button>\n <Label as='a' basic pointing='left'>\n 2,048\n </Label>\n </Button>\n <Button as='div' labelPosition='left'>\n <Label as='a' basic pointing='right'>\n 2,048\n </Label>\n <Button icon>\n <Icon name='heart' />\n Like\n </Button>\n </Button>\n <Button as='div' labelPosition='left'>\n <Label as='a' basic>\n 2,048\n </Label>\n <Button icon>\n <Icon name='fork' />\n </Button>\n </Button>\n </div>\n)\n\nexport default ButtonExampleLabeled\n","elements/Button/Types/ButtonExampleLabeledBasic":"import React from 'react'\nimport { Button, Icon, Label } from 'semantic-ui-react'\n\nconst ButtonExampleLabeledBasic = () => (\n <div>\n <Button as='div' labelPosition='right'>\n <Button color='red'>\n <Icon name='heart' />\n Like\n </Button>\n <Label as='a' basic color='red' pointing='left'>\n 2,048\n </Label>\n </Button>\n <Button as='div' labelPosition='right'>\n <Button basic color='blue'>\n <Icon name='fork' />\n Fork\n </Button>\n <Label as='a' basic color='blue' pointing='left'>\n 2,048\n </Label>\n </Button>\n </div>\n)\n\nexport default ButtonExampleLabeledBasic\n","elements/Button/Types/ButtonExampleLabeledBasicShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleLabeledBasicShorthand = () => (\n <div>\n <Button\n color='red'\n content='Like'\n icon='heart'\n label={{ basic: true, color: 'red', pointing: 'left', content: '2,048' }}\n />\n <Button\n basic\n color='blue'\n content='Fork'\n icon='fork'\n label={{\n as: 'a',\n basic: true,\n color: 'blue',\n pointing: 'left',\n content: '2,048',\n }}\n />\n </div>\n)\n\nexport default ButtonExampleLabeledBasicShorthand\n","elements/Button/Types/ButtonExampleLabeledIcon":"import React from 'react'\nimport { Button, Icon } from 'semantic-ui-react'\n\nconst ButtonExampleLabeledIcon = () => (\n <div>\n <Button icon labelPosition='left'>\n <Icon name='pause' />\n Pause\n </Button>\n <Button icon labelPosition='right'>\n Next\n <Icon name='right arrow' />\n </Button>\n </div>\n)\n\nexport default ButtonExampleLabeledIcon\n","elements/Button/Types/ButtonExampleLabeledIconShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleLabeledIconShorthand = () => (\n <div>\n <Button content='Pause' icon='pause' labelPosition='left' />\n <Button content='Next' icon='right arrow' labelPosition='right' />\n </div>\n)\n\nexport default ButtonExampleLabeledIconShorthand\n","elements/Button/Types/ButtonExampleLabeledShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleLabeledShorthand = () => (\n <div>\n <Button\n content='Like'\n icon='heart'\n label={{ as: 'a', basic: true, content: '2,048' }}\n labelPosition='right'\n />\n <Button\n content='Like'\n icon='heart'\n label={{ as: 'a', basic: true, pointing: 'right', content: '2,048' }}\n labelPosition='left'\n />\n <Button\n icon='fork'\n label={{ as: 'a', basic: true, content: '2,048' }}\n labelPosition='left'\n />\n </div>\n)\n\nexport default ButtonExampleLabeledShorthand\n","elements/Button/Types/ButtonExampleShorthand":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleShorthand = () => <Button content='Click Here' />\n\nexport default ButtonExampleShorthand\n","elements/Button/Usage/ButtonExampleAttachedEvents":"import React, { Component } from 'react'\nimport { Button, Grid, Segment } from 'semantic-ui-react'\n\nexport default class ButtonExampleAttachedEvents extends Component {\n state = { log: [] }\n\n handleClick = () => this.updateLog('Button received click with mouse')\n\n handleKeyPress = (e) => {\n if (e.charCode === 32 || e.charCode === 13) {\n // Prevent the default action to stop scrolling when space is pressed\n e.preventDefault()\n this.updateLog('Button received click with keyboard')\n }\n }\n\n updateLog = (message) =>\n this.setState((prevState) => ({ log: [message, ...prevState.log] }))\n\n render() {\n const { log } = this.state\n\n return (\n <Grid>\n <Grid.Column width={8}>\n <Segment attached='top'>\n The button below accepts clicks with mouse and key presses with\n Space Bar or Enter.\n </Segment>\n <Button\n attached='bottom'\n content='Click'\n onClick={this.handleClick}\n onKeyPress={this.handleKeyPress}\n />\n </Grid.Column>\n <Grid.Column width={8}>\n <Segment>\n <pre style={{ height: 100, overflowY: 'scroll' }}>\n {log.map((e, i) => (\n <p key={i}>{e}</p>\n ))}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","elements/Button/Usage/ButtonExampleFocus":"import React, { Component, createRef } from 'react'\nimport { Button, Grid } from 'semantic-ui-react'\n\nexport default class ButtonExampleFocus extends Component {\n buttonRef = createRef()\n handleClick = () => this.buttonRef.current.focus()\n\n render() {\n return (\n <Grid>\n <Grid.Column width={8}>\n <Button\n content='A button that can be focused'\n primary\n ref={this.buttonRef}\n />\n </Grid.Column>\n <Grid.Column width={8}>\n <Button content='Set focused' onClick={this.handleClick} />\n </Grid.Column>\n </Grid>\n )\n }\n}\n","elements/Button/Variations/ButtonExampleCircular":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleCircular = () => <Button circular icon='settings' />\n\nexport default ButtonExampleCircular\n","elements/Button/Variations/ButtonExampleCircularSocial":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleCircularSocial = () => (\n <div>\n <Button circular color='facebook' icon='facebook' />\n <Button circular color='twitter' icon='twitter' />\n <Button circular color='linkedin' icon='linkedin' />\n <Button circular color='google plus' icon='google plus' />\n </div>\n)\n\nexport default ButtonExampleCircularSocial\n","elements/Button/Variations/ButtonExampleColored":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleColored = () => (\n <div>\n <Button color='red'>Red</Button>\n <Button color='orange'>Orange</Button>\n <Button color='yellow'>Yellow</Button>\n <Button color='olive'>Olive</Button>\n <Button color='green'>Green</Button>\n <Button color='teal'>Teal</Button>\n <Button color='blue'>Blue</Button>\n <Button color='violet'>Violet</Button>\n <Button color='purple'>Purple</Button>\n <Button color='pink'>Pink</Button>\n <Button color='brown'>Brown</Button>\n <Button color='grey'>Grey</Button>\n <Button color='black'>Black</Button>\n </div>\n)\n\nexport default ButtonExampleColored\n","elements/Button/Variations/ButtonExampleCompact":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleCompact = () => (\n <div>\n <Button compact>Compact</Button>\n <Button>Normal</Button>\n </div>\n)\n\nexport default ButtonExampleCompact\n","elements/Button/Variations/ButtonExampleFloated":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleFloated = () => (\n <div>\n <Button floated='right'>Right Floated</Button>\n <Button floated='left'>Left Floated</Button>\n </div>\n)\n\nexport default ButtonExampleFloated\n","elements/Button/Variations/ButtonExampleFluid":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleFluid = () => <Button fluid>Fits to Container</Button>\n\nexport default ButtonExampleFluid\n","elements/Button/Variations/ButtonExampleHorizontallyAttached":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleHorizontallyAttached = () => (\n <div>\n <Button attached='left'>Left</Button>\n <Button attached='right'>Right</Button>\n </div>\n)\n\nexport default ButtonExampleHorizontallyAttached\n","elements/Button/Variations/ButtonExampleNegative":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleNegative = () => (\n <div>\n <Button negative>Negative Button</Button>\n </div>\n)\n\nexport default ButtonExampleNegative\n","elements/Button/Variations/ButtonExamplePositive":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExamplePositive = () => (\n <div>\n <Button positive>Positive Button</Button>\n </div>\n)\n\nexport default ButtonExamplePositive\n","elements/Button/Variations/ButtonExampleSize":"import React from 'react'\nimport { Button } from 'semantic-ui-react'\n\nconst ButtonExampleSize = () => (\n <div>\n <Button size='mini'>Mini</Button>\n <Button size='tiny'>Tiny</Button>\n <Button size='small'>Small</Button>\n <Button size='medium'>Medium</Button>\n <Button size='large'>Large</Button>\n <Button size='big'>Big</Button>\n <Button size='huge'>Huge</Button>\n <Button size='massive'>Massive</Button>\n </div>\n)\n\nexport default ButtonExampleSize\n","elements/Button/Variations/ButtonExampleSocial":"import React from 'react'\nimport { Button, Icon } from 'semantic-ui-react'\n\nconst ButtonExampleSocial = () => (\n <div>\n <Button color='facebook'>\n <Icon name='facebook' /> Facebook\n </Button>\n <Button color='twitter'>\n <Icon name='twitter' /> Twitter\n </Button>\n <Button color='google plus'>\n <Icon name='google plus' /> Google Plus\n </Button>\n <Button color='vk'>\n <Icon name='vk' /> VK\n </Button>\n <Button color='linkedin'>\n <Icon name='linkedin' /> LinkedIn\n </Button>\n <Button color='instagram'>\n <Icon name='instagram' /> Instagram\n </Button>\n <Button color='youtube'>\n <Icon name='youtube' /> YouTube\n </Button>\n </div>\n)\n\nexport default ButtonExampleSocial\n","elements/Button/Variations/ButtonExampleToggle":"import React, { Component } from 'react'\nimport { Button } from 'semantic-ui-react'\n\nclass ButtonExampleToggle extends Component {\n state = {}\n handleClick = () =>\n this.setState((prevState) => ({ active: !prevState.active }))\n\n render() {\n const { active } = this.state\n\n return (\n <Button toggle active={active} onClick={this.handleClick}>\n Toggle\n </Button>\n )\n }\n}\n\nexport default ButtonExampleToggle\n","elements/Button/Variations/ButtonExampleVerticallyAttached":"import React from 'react'\nimport { Button, Segment } from 'semantic-ui-react'\n\nconst ButtonExampleVerticallyAttached = () => (\n <div>\n <Button attached='top'>Top</Button>\n <Segment attached>\n <img src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n <Button attached='bottom'>Bottom</Button>\n </div>\n)\n\nexport default ButtonExampleVerticallyAttached\n","elements/Button/Variations/ButtonExampleVerticallyAttachedGroup":"import React from 'react'\nimport { Button, Segment } from 'semantic-ui-react'\n\nconst ButtonExampleVerticallyAttachedGroup = () => (\n <div>\n <Button.Group attached='top'>\n <Button>One</Button>\n <Button>Two</Button>\n </Button.Group>\n <Segment attached>\n <img src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n <Button.Group attached='bottom'>\n <Button>One</Button>\n <Button>Two</Button>\n </Button.Group>\n </div>\n)\n\nexport default ButtonExampleVerticallyAttachedGroup\n","elements/Divider/Types/DividerExampleDivider":"import React from 'react'\nimport { Divider } from 'semantic-ui-react'\n\nconst DividerExampleDivider = () => <Divider />\n\nexport default DividerExampleDivider\n","elements/Divider/Types/DividerExampleHorizontal":"import React from 'react'\nimport { Button, Divider, Input, Segment } from 'semantic-ui-react'\n\nconst DividerExampleHorizontal = () => (\n <Segment basic textAlign='center'>\n <Input\n action={{ color: 'blue', content: 'Search' }}\n icon='search'\n iconPosition='left'\n placeholder='Order #'\n />\n\n <Divider horizontal>Or</Divider>\n\n <Button\n color='teal'\n content='Create New Order'\n icon='add'\n labelPosition='left'\n />\n </Segment>\n)\n\nexport default DividerExampleHorizontal\n","elements/Divider/Types/DividerExampleHorizontalTable":"import React from 'react'\nimport { Divider, Header, Icon, Table } from 'semantic-ui-react'\n\nconst DividerExampleHorizontalTable = () => (\n <>\n <Divider horizontal>\n <Header as='h4'>\n <Icon name='tag' />\n Description\n </Header>\n </Divider>\n\n <p>\n Doggie treats are good for all times of the year. Proven to be eaten by\n 99.9% of all dogs worldwide.\n </p>\n\n <Divider horizontal>\n <Header as='h4'>\n <Icon name='bar chart' />\n Specifications\n </Header>\n </Divider>\n\n <Table definition>\n <Table.Body>\n <Table.Row>\n <Table.Cell width={2}>Size</Table.Cell>\n <Table.Cell>1\" x 2\"</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Weight</Table.Cell>\n <Table.Cell>6 ounces</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Color</Table.Cell>\n <Table.Cell>Yellowish</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Odor</Table.Cell>\n <Table.Cell>Not Much Usually</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </>\n)\n\nexport default DividerExampleHorizontalTable\n","elements/Divider/Types/DividerExampleVertical":"import React from 'react'\nimport { Divider, Grid, Image, Segment } from 'semantic-ui-react'\n\nconst DividerExampleVertical = () => (\n <Segment>\n <Grid columns={2} relaxed='very'>\n <Grid.Column>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n </Grid.Column>\n <Grid.Column>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n </Grid.Column>\n </Grid>\n\n <Divider vertical>And</Divider>\n </Segment>\n)\n\nexport default DividerExampleVertical\n","elements/Divider/Types/DividerExampleVerticalForm":"import React from 'react'\nimport { Button, Divider, Form, Grid, Segment } from 'semantic-ui-react'\n\nconst DividerExampleVerticalForm = () => (\n <Segment placeholder>\n <Grid columns={2} relaxed='very' stackable>\n <Grid.Column>\n <Form>\n <Form.Input\n icon='user'\n iconPosition='left'\n label='Username'\n placeholder='Username'\n />\n <Form.Input\n icon='lock'\n iconPosition='left'\n label='Password'\n type='password'\n />\n\n <Button content='Login' primary />\n </Form>\n </Grid.Column>\n\n <Grid.Column verticalAlign='middle'>\n <Button content='Sign up' icon='signup' size='big' />\n </Grid.Column>\n </Grid>\n\n <Divider vertical>Or</Divider>\n </Segment>\n)\n\nexport default DividerExampleVerticalForm\n","elements/Divider/Variations/DividerExampleClearing":"import React from 'react'\nimport { Divider, Header, Image, Segment } from 'semantic-ui-react'\n\nconst DividerExampleClearing = () => (\n <Segment>\n <Header as='h2' floated='right'>\n Floated Content\n </Header>\n\n <Divider clearing />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n)\n\nexport default DividerExampleClearing\n","elements/Divider/Variations/DividerExampleFitted":"import React from 'react'\nimport { Divider, Segment } from 'semantic-ui-react'\n\nconst DividerExampleFitted = () => (\n <Segment>\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.\n Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse\n urna nibh, viverra non, semper suscipit, posuere a, pede.\n <Divider fitted />\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.\n Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse\n urna nibh, viverra non, semper suscipit, posuere a, pede.\n </Segment>\n)\n\nexport default DividerExampleFitted\n","elements/Divider/Variations/DividerExampleHidden":"import React from 'react'\nimport { Divider, Header, Image } from 'semantic-ui-react'\n\nconst DividerExampleHidden = () => (\n <>\n <Header as='h3'>Section One</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\n <Divider hidden />\n\n <Header as='h3'>Section Two</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </>\n)\n\nexport default DividerExampleHidden\n","elements/Divider/Variations/DividerExampleInverted":"import React from 'react'\nimport { Divider, Image, Segment } from 'semantic-ui-react'\n\nconst DividerExampleInverted = () => (\n <Segment inverted>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Divider inverted />\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Divider horizontal inverted>\n Horizontal\n </Divider>\n </Segment>\n)\n\nexport default DividerExampleInverted\n","elements/Divider/Variations/DividerExampleSection":"import React from 'react'\nimport { Divider, Header, Image, Segment } from 'semantic-ui-react'\n\nconst DividerExampleSection = () => (\n <Segment>\n <Header as='h3'>Section One</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\n <Divider section />\n\n <Header as='h3'>Section Two</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n)\n\nexport default DividerExampleSection\n","elements/Icon/Groups/IconExampleCornerGroup":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleCornerGroup = () => (\n <Icon.Group size='huge'>\n <Icon name='puzzle' />\n <Icon corner name='add' />\n </Icon.Group>\n)\n\nexport default IconExampleCornerGroup\n","elements/Icon/Groups/IconExampleCornerGroupPositions":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleCornerGroupPositions = () => (\n <>\n <Icon.Group size='huge'>\n <Icon name='puzzle' />\n <Icon corner='top left' name='add' />\n </Icon.Group>\n\n <Icon.Group size='huge'>\n <Icon name='puzzle' />\n <Icon corner='top right' name='add' />\n </Icon.Group>\n\n <Icon.Group size='huge'>\n <Icon name='puzzle' />\n <Icon corner='bottom left' name='add' />\n </Icon.Group>\n\n <Icon.Group size='huge'>\n <Icon name='puzzle' />\n <Icon corner='bottom right' name='add' />\n </Icon.Group>\n </>\n)\n\nexport default IconExampleCornerGroupPositions\n","elements/Icon/Groups/IconExampleIconGroup":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleIconGroup = () => (\n <Icon.Group size='huge'>\n <Icon size='big' name='circle outline' />\n <Icon name='user' />\n </Icon.Group>\n)\n\nexport default IconExampleIconGroup\n","elements/Icon/Groups/IconExampleLoadingGroup":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleLoadingGroup = () => (\n <div>\n <Icon.Group size='huge'>\n <Icon size='big' color='red' name='dont' />\n <Icon color='black' name='user' />\n </Icon.Group>\n <Icon.Group size='huge'>\n <Icon loading size='big' name='circle notch' />\n <Icon name='user' />\n </Icon.Group>\n </div>\n)\n\nexport default IconExampleLoadingGroup\n","elements/Icon/Groups/IconExampleTwitterGroup":"import React from 'react'\nimport { Header, Icon } from 'semantic-ui-react'\n\nconst IconExampleTwitterGroup = () => (\n <Header as='h2'>\n <Icon.Group size='large'>\n <Icon name='twitter' />\n <Icon corner name='add' />\n </Icon.Group>\n Add on Twitter\n </Header>\n)\n\nexport default IconExampleTwitterGroup\n","elements/Icon/States/IconExampleDisabled":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleDisabled = () => <Icon disabled name='users' />\n\nexport default IconExampleDisabled\n","elements/Icon/States/IconExampleLoading":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleLoading = () => (\n <div>\n <Icon loading name='spinner' />\n <Icon loading name='certificate' />\n <Icon loading name='asterisk' />\n </div>\n)\n\nexport default IconExampleLoading\n","elements/Icon/Variations/IconExampleBordered":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleBordered = () => (\n <div>\n <Icon bordered name='users' />\n <Icon bordered color='teal' name='users' />\n <Icon bordered inverted color='black' name='users' />\n <Icon bordered inverted color='teal' name='users' />\n </div>\n)\n\nexport default IconExampleBordered\n","elements/Icon/Variations/IconExampleCircular":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleCircular = () => (\n <div>\n <Icon circular name='users' />\n <Icon circular color='teal' name='users' />\n <Icon circular inverted name='users' />\n <Icon circular inverted color='teal' name='users' />\n </div>\n)\n\nexport default IconExampleCircular\n","elements/Icon/Variations/IconExampleColored":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleColored = () => (\n <div>\n <Icon color='red' name='users' />\n <Icon color='orange' name='users' />\n <Icon color='yellow' name='users' />\n <Icon color='olive' name='users' />\n <Icon color='green' name='users' />\n <Icon color='teal' name='users' />\n <Icon color='blue' name='users' />\n <Icon color='violet' name='users' />\n <Icon color='purple' name='users' />\n <Icon color='pink' name='users' />\n <Icon color='brown' name='users' />\n <Icon color='grey' name='users' />\n <Icon color='black' name='users' />\n </div>\n)\n\nexport default IconExampleColored\n","elements/Icon/Variations/IconExampleFitted":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleFitted = () => (\n <div>\n This icon\n <Icon fitted name='help' />\n is fitted.\n <br />\n This icon\n <Icon name='help' />\n is not.\n </div>\n)\n\nexport default IconExampleFitted\n","elements/Icon/Variations/IconExampleFlipped":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleFlipped = () => (\n <div>\n <Icon flipped='horizontally' name='cloud' />\n <Icon flipped='vertically' name='cloud' />\n </div>\n)\n\nexport default IconExampleFlipped\n","elements/Icon/Variations/IconExampleInvertedColored":"import React from 'react'\nimport { Segment, Icon } from 'semantic-ui-react'\n\nconst IconExampleInvertedColored = () => (\n <Segment inverted>\n <Icon inverted color='red' name='users' />\n <Icon inverted color='orange' name='users' />\n <Icon inverted color='yellow' name='users' />\n <Icon inverted color='olive' name='users' />\n <Icon inverted color='green' name='users' />\n <Icon inverted color='teal' name='users' />\n <Icon inverted color='blue' name='users' />\n <Icon inverted color='violet' name='users' />\n <Icon inverted color='purple' name='users' />\n <Icon inverted color='pink' name='users' />\n <Icon inverted color='brown' name='users' />\n <Icon inverted color='grey' name='users' />\n <Icon inverted color='black' name='users' />\n </Segment>\n)\n\nexport default IconExampleInvertedColored\n","elements/Icon/Variations/IconExampleLink":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleLink = () => (\n <div>\n <Icon link name='close' />\n <Icon link name='help' />\n </div>\n)\n\nexport default IconExampleLink\n","elements/Icon/Variations/IconExampleRotated":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleRotated = () => (\n <div>\n <Icon rotated='clockwise' name='cloud' />\n <Icon rotated='counterclockwise' name='cloud' />\n </div>\n)\n\nexport default IconExampleRotated\n","elements/Icon/Variations/IconExampleSize":"import React from 'react'\nimport { Icon } from 'semantic-ui-react'\n\nconst IconExampleSize = () => (\n <div>\n <Icon name='home' size='mini' />\n <Icon name='home' size='tiny' />\n <Icon name='home' size='small' />\n <Icon name='home' size='small' />\n <br />\n <Icon name='home' />\n <br />\n <Icon name='home' size='large' />\n <br />\n <Icon name='home' size='big' />\n <br />\n <Icon name='home' size='huge' />\n <br />\n <Icon name='home' size='massive' />\n </div>\n)\n\nexport default IconExampleSize\n","elements/Header/Content/HeaderExampleIconProp":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleIconProp = () => (\n <Header as='h2' icon='plug' content='Uptime Guarantee' />\n)\n\nexport default HeaderExampleIconProp\n","elements/Header/Content/HeaderExampleImage":"import React from 'react'\nimport { Header, Image } from 'semantic-ui-react'\n\nconst HeaderExampleImage = () => (\n <Header as='h2'>\n <Image circular src='https://react.semantic-ui.com/images/avatar/large/patrick.png' /> Patrick\n </Header>\n)\n\nexport default HeaderExampleImage\n","elements/Header/Content/HeaderExampleImageProp":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleImageProp = () => (\n <Header as='h2' image='/images/icons/school.png' content='Learn More' />\n)\n\nexport default HeaderExampleImageProp\n","elements/Header/Content/HeaderExamplePlugIcon":"import React from 'react'\nimport { Header, Icon } from 'semantic-ui-react'\n\nconst HeaderExamplePlugIcon = () => (\n <Header as='h2'>\n <Icon name='plug' />\n <Header.Content>Uptime Guarantee</Header.Content>\n </Header>\n)\n\nexport default HeaderExamplePlugIcon\n","elements/Header/Content/HeaderExampleSettingsIcon":"import React from 'react'\nimport { Header, Icon } from 'semantic-ui-react'\n\nconst HeaderExampleSettingsIcon = () => (\n <Header as='h2'>\n <Icon name='settings' />\n <Header.Content>\n Account Settings\n <Header.Subheader>Manage your preferences</Header.Subheader>\n </Header.Content>\n </Header>\n)\n\nexport default HeaderExampleSettingsIcon\n","elements/Header/Content/HeaderExampleSubheader":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleSubheader = () => (\n <Header as='h2'>\n Account Settings\n <Header.Subheader>\n Manage your account settings and set email preferences\n </Header.Subheader>\n </Header>\n)\n\nexport default HeaderExampleSubheader\n","elements/Header/Content/HeaderExampleSubheaderProp":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleSubheaderProp = () => (\n <Header\n as='h2'\n content='Account Settings'\n subheader='Manage your account settings and set email preferences'\n />\n)\n\nexport default HeaderExampleSubheaderProp\n","elements/Header/States/HeaderExampleDisabled":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleDisabled = () => (\n <Header as='h2' disabled>\n Disabled Header\n </Header>\n)\n\nexport default HeaderExampleDisabled\n","elements/Header/Types/HeaderExampleContent":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleContent = () => (\n <div>\n <Header size='huge'>Huge Header</Header>\n <Header size='large'>Large Header</Header>\n <Header size='medium'>Medium Header</Header>\n <Header size='small'>Small Header</Header>\n <Header size='tiny'>Tiny Header</Header>\n </div>\n)\n\nexport default HeaderExampleContent\n","elements/Header/Types/HeaderExamplePage":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExamplePage = () => (\n <div>\n <Header as='h1'>First Header</Header>\n <Header as='h2'>Second Header</Header>\n <Header as='h3'>Third Header</Header>\n <Header as='h4'>Fourth Header</Header>\n <Header as='h5'>Fifth Header</Header>\n <Header as='h6'>Sixth Header</Header>\n </div>\n)\n\nexport default HeaderExamplePage\n","elements/Header/Types/HeaderExampleSettingsIcon":"import React from 'react'\nimport { Header, Icon } from 'semantic-ui-react'\n\nconst HeaderExampleSettingsIcon = () => (\n <Header as='h2' icon>\n <Icon name='settings' />\n Account Settings\n <Header.Subheader>\n Manage your account settings and set e-mail preferences.\n </Header.Subheader>\n </Header>\n)\n\nexport default HeaderExampleSettingsIcon\n","elements/Header/Types/HeaderExampleSubheaders":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleSubheaders = () => (\n <div>\n <Header sub>Price</Header>\n <span>$10.99</span>\n </div>\n)\n\nexport default HeaderExampleSubheaders\n","elements/Header/Types/HeaderExampleUsersIcon":"import React from 'react'\nimport { Header, Icon, Image } from 'semantic-ui-react'\n\nconst HeaderExampleUsersIcon = () => (\n <div>\n <Header as='h2' icon textAlign='center'>\n <Icon name='users' circular />\n <Header.Content>Friends</Header.Content>\n </Header>\n <Image\n centered\n size='large'\n src='https://react.semantic-ui.com/images/wireframe/centered-paragraph.png'\n />\n </div>\n)\n\nexport default HeaderExampleUsersIcon\n","elements/Header/Variations/HeaderExampleAttached":"import React from 'react'\nimport { Header, Segment } from 'semantic-ui-react'\n\nconst HeaderExampleAttached = () => (\n <div>\n <Header as='h2' attached='top'>\n Attached Header\n </Header>\n <Segment attached>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat.\n </Segment>\n </div>\n)\n\nexport default HeaderExampleAttached\n","elements/Header/Variations/HeaderExampleBlock":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleBlock = () => (\n <Header as='h3' block>\n Block Header\n </Header>\n)\n\nexport default HeaderExampleBlock\n","elements/Header/Variations/HeaderExampleColored":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleColored = () => (\n <div>\n <Header as='h4' color='red'>\n Red\n </Header>\n <Header as='h4' color='orange'>\n Orange\n </Header>\n <Header as='h4' color='yellow'>\n Yellow\n </Header>\n <Header as='h4' color='olive'>\n Olive\n </Header>\n <Header as='h4' color='green'>\n Green\n </Header>\n <Header as='h4' color='teal'>\n Teal\n </Header>\n <Header as='h4' color='blue'>\n Blue\n </Header>\n <Header as='h4' color='purple'>\n Purple\n </Header>\n <Header as='h4' color='violet'>\n Violet\n </Header>\n <Header as='h4' color='pink'>\n Pink\n </Header>\n <Header as='h4' color='brown'>\n Brown\n </Header>\n <Header as='h4' color='grey'>\n Grey\n </Header>\n </div>\n)\n\nexport default HeaderExampleColored\n","elements/Header/Variations/HeaderExampleDividing":"import React from 'react'\nimport { Header } from 'semantic-ui-react'\n\nconst HeaderExampleDividing = () => (\n <Header as='h3' dividing>\n Dividing Header\n </Header>\n)\n\nexport default HeaderExampleDividing\n","elements/Header/Variations/HeaderExampleFloating":"import React from 'react'\nimport { Header, Segment } from 'semantic-ui-react'\n\nconst HeaderExampleFloating = () => (\n <Segment clearing>\n <Header as='h2' floated='right'>\n Float Right\n </Header>\n <Header as='h2' floated='left'>\n Float Left\n </Header>\n </Segment>\n)\n\nexport default HeaderExampleFloating\n","elements/Header/Variations/HeaderExampleInverted":"import React from 'react'\nimport { Header, Segment } from 'semantic-ui-react'\n\nconst HeaderExampleInverted = () => (\n <Segment inverted>\n <Header as='h4' inverted color='red'>\n Red\n </Header>\n <Header as='h4' inverted color='orange'>\n Orange\n </Header>\n <Header as='h4' inverted color='yellow'>\n Yellow\n </Header>\n <Header as='h4' inverted color='olive'>\n Olive\n </Header>\n <Header as='h4' inverted color='green'>\n Green\n </Header>\n <Header as='h4' inverted color='teal'>\n Teal\n </Header>\n <Header as='h4' inverted color='blue'>\n Blue\n </Header>\n <Header as='h4' inverted color='purple'>\n Purple\n </Header>\n <Header as='h4' inverted color='violet'>\n Violet\n </Header>\n <Header as='h4' inverted color='pink'>\n Pink\n </Header>\n <Header as='h4' inverted color='brown'>\n Brown\n </Header>\n <Header as='h4' inverted color='grey'>\n Grey\n </Header>\n </Segment>\n)\n\nexport default HeaderExampleInverted\n","elements/Header/Variations/HeaderExampleTextAlignment":"import React from 'react'\nimport { Header, Segment } from 'semantic-ui-react'\n\nconst HeaderExampleTextAlignment = () => (\n <Segment>\n <Header as='h3' textAlign='right'>\n Float Right\n </Header>\n <Header as='h3' textAlign='left'>\n Float Left\n </Header>\n <Header as='h3' textAlign='justified'>\n This text takes up the full width of the container\n </Header>\n <Header as='h3' textAlign='center'>\n Centered\n </Header>\n </Segment>\n)\n\nexport default HeaderExampleTextAlignment\n","elements/Flag/Types/FlagExampleFlag":"import React from 'react'\nimport { Flag, Segment } from 'semantic-ui-react'\n\nconst FlagExampleFlag = () => (\n <Segment>\n <Flag name='ae' />\n <Flag name='france' />\n <Flag name='myanmar' />\n </Segment>\n)\n\nexport default FlagExampleFlag\n","elements/Flag/Types/FlagExampleTable":"import React from 'react'\nimport { Table, Flag } from 'semantic-ui-react'\n\nconst countries = [\n { name: 'Afghanistan', countryCode: 'af' },\n { name: 'Aland Islands', countryCode: 'ax' },\n { name: 'Albania', countryCode: 'al' },\n { name: 'Algeria', countryCode: 'dz' },\n { name: 'American Samoa', countryCode: 'as' },\n { name: 'Andorra', countryCode: 'ad' },\n { name: 'Angola', countryCode: 'ao' },\n { name: 'Anguilla', countryCode: 'ai' },\n { name: 'Antigua', countryCode: 'ag' },\n { name: 'Argentina', countryCode: 'ar' },\n { name: 'Armenia', countryCode: 'am' },\n { name: 'Aruba', countryCode: 'aw' },\n { name: 'Australia', countryCode: 'au' },\n { name: 'Austria', countryCode: 'at' },\n { name: 'Azerbaijan', countryCode: 'az' },\n { name: 'Bahamas', countryCode: 'bs' },\n { name: 'Bahrain', countryCode: 'bh' },\n { name: 'Bangladesh', countryCode: 'bd' },\n { name: 'Barbados', countryCode: 'bb' },\n { name: 'Belarus', countryCode: 'by' },\n { name: 'Belgium', countryCode: 'be' },\n { name: 'Belize', countryCode: 'bz' },\n { name: 'Benin', countryCode: 'bj' },\n { name: 'Bermuda', countryCode: 'bm' },\n { name: 'Bhutan', countryCode: 'bt' },\n { name: 'Bolivia', countryCode: 'bo' },\n { name: 'Bosnia', countryCode: 'ba' },\n { name: 'Botswana', countryCode: 'bw' },\n { name: 'Bouvet Island', countryCode: 'bv' },\n { name: 'Brazil', countryCode: 'br' },\n { name: 'British Virgin Islands', countryCode: 'vg' },\n { name: 'Brunei', countryCode: 'bn' },\n { name: 'Bulgaria', countryCode: 'bg' },\n { name: 'Burkina Faso', countryCode: 'bf' },\n { name: 'Burma', countryCode: 'mm', alias: 'Myanmar' },\n { name: 'Burundi', countryCode: 'bi' },\n { name: 'Caicos Islands', countryCode: 'tc' },\n { name: 'Cambodia', countryCode: 'kh' },\n { name: 'Cameroon', countryCode: 'cm' },\n { name: 'Canada', countryCode: 'ca' },\n { name: 'Cape Verde', countryCode: 'cv' },\n { name: 'Cayman Islands', countryCode: 'ky' },\n { name: 'Central African Republic', countryCode: 'cf' },\n { name: 'Chad', countryCode: 'td' },\n { name: 'Chile', countryCode: 'cl' },\n { name: 'China', countryCode: 'cn' },\n { name: 'Christmas Island', countryCode: 'cx' },\n { name: 'Cocos Islands', countryCode: 'cc' },\n { name: 'Colombia', countryCode: 'co' },\n { name: 'Comoros', countryCode: 'km' },\n { name: 'Congo', countryCode: 'cd' },\n { name: 'Congo Brazzaville', countryCode: 'cg' },\n { name: 'Cook Islands', countryCode: 'ck' },\n { name: 'Costa Rica', countryCode: 'cr' },\n { name: 'Cote Divoire', countryCode: 'ci' },\n { name: 'Croatia', countryCode: 'hr' },\n { name: 'Cuba', countryCode: 'cu' },\n { name: 'Cyprus', countryCode: 'cy' },\n { name: 'Czech Republic', countryCode: 'cz' },\n { name: 'Denmark', countryCode: 'dk' },\n { name: 'Djibouti', countryCode: 'dj' },\n { name: 'Dominica', countryCode: 'dm' },\n { name: 'Dominican Republic', countryCode: 'do' },\n { name: 'Ecuador', countryCode: 'ec' },\n { name: 'Egypt', countryCode: 'eg' },\n { name: 'El Salvador', countryCode: 'sv' },\n { name: 'England', countryCode: 'gb eng' },\n { name: 'Equatorial Guinea', countryCode: 'gq' },\n { name: 'Eritrea', countryCode: 'er' },\n { name: 'Estonia', countryCode: 'ee' },\n { name: 'Ethiopia', countryCode: 'et' },\n { name: 'Europeanunion', countryCode: 'eu' },\n { name: 'Falkland Islands', countryCode: 'fk' },\n { name: 'Faroe Islands', countryCode: 'fo' },\n { name: 'Fiji', countryCode: 'fj' },\n { name: 'Finland', countryCode: 'fi' },\n { name: 'France', countryCode: 'fr' },\n { name: 'French Guiana', countryCode: 'gf' },\n { name: 'French Polynesia', countryCode: 'pf' },\n { name: 'French Territories', countryCode: 'tf' },\n { name: 'Gabon', countryCode: 'ga' },\n { name: 'Gambia', countryCode: 'gm' },\n { name: 'Georgia', countryCode: 'ge' },\n { name: 'Germany', countryCode: 'de' },\n { name: 'Ghana', countryCode: 'gh' },\n { name: 'Gibraltar', countryCode: 'gi' },\n { name: 'Greece', countryCode: 'gr' },\n { name: 'Greenland', countryCode: 'gl' },\n { name: 'Grenada', countryCode: 'gd' },\n { name: 'Guadeloupe', countryCode: 'gp' },\n { name: 'Guam', countryCode: 'gu' },\n { name: 'Guatemala', countryCode: 'gt' },\n { name: 'Guinea', countryCode: 'gn' },\n { name: 'Guinea-Bissau', countryCode: 'gw' },\n { name: 'Guyana', countryCode: 'gy' },\n { name: 'Haiti', countryCode: 'ht' },\n { name: 'Heard Island', countryCode: 'hm' },\n { name: 'Honduras', countryCode: 'hn' },\n { name: 'Hong Kong', countryCode: 'hk' },\n { name: 'Hungary', countryCode: 'hu' },\n { name: 'Iceland', countryCode: 'is' },\n { name: 'India', countryCode: 'in' },\n { name: 'Indian Ocean Territory', countryCode: 'io' },\n { name: 'Indonesia', countryCode: 'id' },\n { name: 'Iran', countryCode: 'ir' },\n { name: 'Iraq', countryCode: 'iq' },\n { name: 'Ireland', countryCode: 'ie' },\n { name: 'Israel', countryCode: 'il' },\n { name: 'Italy', countryCode: 'it' },\n { name: 'Jamaica', countryCode: 'jm' },\n { name: 'Jan Mayen', countryCode: 'sj', alias: 'Svalbard' },\n { name: 'Japan', countryCode: 'jp' },\n { name: 'Jordan', countryCode: 'jo' },\n { name: 'Kazakhstan', countryCode: 'kz' },\n { name: 'Kenya', countryCode: 'ke' },\n { name: 'Kiribati', countryCode: 'ki' },\n { name: 'Kuwait', countryCode: 'kw' },\n { name: 'Kyrgyzstan', countryCode: 'kg' },\n { name: 'Laos', countryCode: 'la' },\n { name: 'Latvia', countryCode: 'lv' },\n { name: 'Lebanon', countryCode: 'lb' },\n { name: 'Lesotho', countryCode: 'ls' },\n { name: 'Liberia', countryCode: 'lr' },\n { name: 'Libya', countryCode: 'ly' },\n { name: 'Liechtenstein', countryCode: 'li' },\n { name: 'Lithuania', countryCode: 'lt' },\n { name: 'Luxembourg', countryCode: 'lu' },\n { name: 'Macau', countryCode: 'mo' },\n { name: 'Macedonia', countryCode: 'mk' },\n { name: 'Madagascar', countryCode: 'mg' },\n { name: 'Malawi', countryCode: 'mw' },\n { name: 'Malaysia', countryCode: 'my' },\n { name: 'Maldives', countryCode: 'mv' },\n { name: 'Mali', countryCode: 'ml' },\n { name: 'Malta', countryCode: 'mt' },\n { name: 'Marshall Islands', countryCode: 'mh' },\n { name: 'Martinique', countryCode: 'mq' },\n { name: 'Mauritania', countryCode: 'mr' },\n { name: 'Mauritius', countryCode: 'mu' },\n { name: 'Mayotte', countryCode: 'yt' },\n { name: 'Mexico', countryCode: 'mx' },\n { name: 'Micronesia', countryCode: 'fm' },\n { name: 'Moldova', countryCode: 'md' },\n { name: 'Monaco', countryCode: 'mc' },\n { name: 'Mongolia', countryCode: 'mn' },\n { name: 'Montenegro', countryCode: 'me' },\n { name: 'Montserrat', countryCode: 'ms' },\n { name: 'Morocco', countryCode: 'ma' },\n { name: 'Mozambique', countryCode: 'mz' },\n { name: 'Namibia', countryCode: 'na' },\n { name: 'Nauru', countryCode: 'nr' },\n { name: 'Nepal', countryCode: 'np' },\n { name: 'Netherlands', countryCode: 'nl' },\n { name: 'Netherlandsantilles', countryCode: 'an' },\n { name: 'New Caledonia', countryCode: 'nc' },\n { name: 'New Guinea', countryCode: 'pg' },\n { name: 'New Zealand', countryCode: 'nz' },\n { name: 'Nicaragua', countryCode: 'ni' },\n { name: 'Niger', countryCode: 'ne' },\n { name: 'Nigeria', countryCode: 'ng' },\n { name: 'Niue', countryCode: 'nu' },\n { name: 'Norfolk Island', countryCode: 'nf' },\n { name: 'North Korea', countryCode: 'kp' },\n { name: 'Northern Mariana Islands', countryCode: 'mp' },\n { name: 'Norway', countryCode: 'no' },\n { name: 'Oman', countryCode: 'om' },\n { name: 'Pakistan', countryCode: 'pk' },\n { name: 'Palau', countryCode: 'pw' },\n { name: 'Palestine', countryCode: 'ps' },\n { name: 'Panama', countryCode: 'pa' },\n { name: 'Paraguay', countryCode: 'py' },\n { name: 'Peru', countryCode: 'pe' },\n { name: 'Philippines', countryCode: 'ph' },\n { name: 'Pitcairn Islands', countryCode: 'pn' },\n { name: 'Poland', countryCode: 'pl' },\n { name: 'Portugal', countryCode: 'pt' },\n { name: 'Puerto Rico', countryCode: 'pr' },\n { name: 'Qatar', countryCode: 'qa' },\n { name: 'Reunion', countryCode: 're' },\n { name: 'Romania', countryCode: 'ro' },\n { name: 'Russia', countryCode: 'ru' },\n { name: 'Rwanda', countryCode: 'rw' },\n { name: 'Saint Helena', countryCode: 'sh' },\n { name: 'Saint Kitts and Nevis', countryCode: 'kn' },\n { name: 'Saint Lucia', countryCode: 'lc' },\n { name: 'Saint Pierre', countryCode: 'pm' },\n { name: 'Saint Vincent', countryCode: 'vc' },\n { name: 'Samoa', countryCode: 'ws' },\n { name: 'San Marino', countryCode: 'sm' },\n { name: 'Sandwich Islands', countryCode: 'gs' },\n { name: 'Sao Tome', countryCode: 'st' },\n { name: 'Saudi Arabia', countryCode: 'sa' },\n { name: 'Scotland', countryCode: 'gb sct' },\n { name: 'Senegal', countryCode: 'sn' },\n { name: 'Serbia', countryCode: 'cs' },\n { name: 'Serbia', countryCode: 'rs' },\n { name: 'Seychelles', countryCode: 'sc' },\n { name: 'Sierra Leone', countryCode: 'sl' },\n { name: 'Singapore', countryCode: 'sg' },\n { name: 'Slovakia', countryCode: 'sk' },\n { name: 'Slovenia', countryCode: 'si' },\n { name: 'Solomon Islands', countryCode: 'sb' },\n { name: 'Somalia', countryCode: 'so' },\n { name: 'South Africa', countryCode: 'za' },\n { name: 'South Korea', countryCode: 'kr' },\n { name: 'Spain', countryCode: 'es' },\n { name: 'Sri Lanka', countryCode: 'lk' },\n { name: 'Sudan', countryCode: 'sd' },\n { name: 'Suriname', countryCode: 'sr' },\n { name: 'Swaziland', countryCode: 'sz' },\n { name: 'Sweden', countryCode: 'se' },\n { name: 'Switzerland', countryCode: 'ch' },\n { name: 'Syria', countryCode: 'sy' },\n { name: 'Taiwan', countryCode: 'tw' },\n { name: 'Tajikistan', countryCode: 'tj' },\n { name: 'Tanzania', countryCode: 'tz' },\n { name: 'Thailand', countryCode: 'th' },\n { name: 'Timorleste', countryCode: 'tl' },\n { name: 'Togo', countryCode: 'tg' },\n { name: 'Tokelau', countryCode: 'tk' },\n { name: 'Tonga', countryCode: 'to' },\n { name: 'Trinidad', countryCode: 'tt' },\n { name: 'Tunisia', countryCode: 'tn' },\n { name: 'Turkey', countryCode: 'tr' },\n { name: 'Turkmenistan', countryCode: 'tm' },\n { name: 'Tuvalu', countryCode: 'tv' },\n { name: 'U.A.E.', countryCode: 'ae', alias: 'United Arab Emirates' },\n { name: 'Uganda', countryCode: 'ug' },\n { name: 'Ukraine', countryCode: 'ua' },\n { name: 'United Kingdom', countryCode: 'gb', alias: 'uk' },\n { name: 'United States', countryCode: 'us', alias: 'America' },\n { name: 'Uruguay', countryCode: 'uy' },\n { name: 'US Minor Islands', countryCode: 'um' },\n { name: 'US Virgin Islands', countryCode: 'vi' },\n { name: 'Uzbekistan', countryCode: 'uz' },\n { name: 'Vanuatu', countryCode: 'vu' },\n { name: 'Vatican City', countryCode: 'va' },\n { name: 'Venezuela', countryCode: 've' },\n { name: 'Vietnam', countryCode: 'vn' },\n { name: 'Wales', countryCode: 'gb wls' },\n { name: 'Wallis and Futuna', countryCode: 'wf' },\n { name: 'Western Sahara', countryCode: 'eh' },\n { name: 'Yemen', countryCode: 'ye' },\n { name: 'Zambia', countryCode: 'zm' },\n { name: 'Zimbabwe', countryCode: 'zw' },\n]\n\nconst flagRenderer = (item) => <Flag name={item.countryCode} />\n\nconst FlagExampleTable = () => (\n <Table>\n <Table.Header>\n <Table.Row>\n <Table.HeaderCell>Country</Table.HeaderCell>\n <Table.HeaderCell>Name</Table.HeaderCell>\n <Table.HeaderCell>Country Code</Table.HeaderCell>\n <Table.HeaderCell>Alias</Table.HeaderCell>\n </Table.Row>\n </Table.Header>\n <Table.Body>\n {countries.map((country) => (\n <Table.Row key={country.countryCode}>\n <Table.Cell>{flagRenderer(country)}</Table.Cell>\n <Table.Cell>{country.name}</Table.Cell>\n <Table.Cell>{country.countryCode}</Table.Cell>\n <Table.Cell>{country.alias}</Table.Cell>\n </Table.Row>\n ))}\n </Table.Body>\n </Table>\n)\n\nexport default FlagExampleTable\n","elements/Image/Groups/ImageExampleGroupSize":"import React from 'react'\nimport { Divider, Image } from 'semantic-ui-react'\n\nconst src = '/images/wireframe/image.png'\n\nconst ImageExampleGroupSize = () => (\n <div>\n <Image.Group size='tiny'>\n <Image src={src} />\n <Image src={src} />\n <Image src={src} />\n <Image src={src} />\n </Image.Group>\n <Divider hidden />\n <Image.Group size='small'>\n <Image src={src} />\n <Image src={src} />\n <Image src={src} />\n <Image src={src} />\n </Image.Group>\n </div>\n)\n\nexport default ImageExampleGroupSize\n","elements/Image/States/ImageExampleDisabled":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleDisabled = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' size='medium' disabled />\n)\n\nexport default ImageExampleDisabled\n","elements/Image/States/ImageExampleHidden":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleHidden = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' size='small' hidden />\n)\n\nexport default ImageExampleHidden\n","elements/Image/Types/ImageExampleImage":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleImage = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' size='small' />\n)\n\nexport default ImageExampleImage\n","elements/Image/Types/ImageExampleLink":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleLink = () => (\n <Image\n src='https://react.semantic-ui.com/images/wireframe/image-text.png'\n as='a'\n size='medium'\n href='http://google.com'\n target='_blank'\n />\n)\n\nexport default ImageExampleLink\n","elements/Image/Types/ImageExampleWrapped":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleWrapped = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' size='small' wrapped />\n)\n\nexport default ImageExampleWrapped\n","elements/Image/Usage/ImageExampleChildren":"import React from 'react'\nimport { Image, Label } from 'semantic-ui-react'\n\nconst ImageExampleChildren = () => (\n <div>\n <Image size='small'>\n <Label content='Image not found!' icon='warning' />\n </Image>\n <span>Some other content</span>\n </div>\n)\n\nexport default ImageExampleChildren\n","elements/Image/Usage/ImageExampleImageProps":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleImageProps = () => (\n <Image\n alt='An example alt'\n size='small'\n src='https://react.semantic-ui.com/images/wireframe/image-text.png'\n srcSet='/images/wireframe/image.png 2x'\n />\n)\n\nexport default ImageExampleImageProps\n","elements/Image/Usage/ImageExampleWrappedImageProps":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleWrappedImageProps = () => (\n <Image\n as='div'\n alt='An example alt'\n size='small'\n src='https://react.semantic-ui.com/images/wireframe/image-text.png'\n srcSet='/images/wireframe/image.png 2x'\n />\n)\n\nexport default ImageExampleWrappedImageProps\n","elements/Image/Variations/ImageExampleAvatar":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleAvatar = () => (\n <div>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' avatar />\n <span>Username</span>\n </div>\n)\n\nexport default ImageExampleAvatar\n","elements/Image/Variations/ImageExampleBordered":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleBordered = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/white-image.png' size='medium' bordered />\n)\n\nexport default ImageExampleBordered\n","elements/Image/Variations/ImageExampleCentered":"import React from 'react'\nimport { Segment, Image } from 'semantic-ui-react'\n\nconst src1 = '/images/wireframe/image.png'\nconst src2 = '/images/wireframe/image-text.png'\n\nconst ImageExampleCentered = () => (\n <Segment>\n <Image src={src1} size='medium' centered />\n <p>\n Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia\n facete scriptorem, est autem aliquip detraxit at. Usu ocurreret\n referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque\n electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei\n ex natum rebum iisque.\n </p>\n <p>\n Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine\n definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te\n phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide\n phaedrum, vim vivendum maiestatis in.\n </p>\n <Image src={src2} size='small' centered />\n <p>\n Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut\n facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te\n porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi\n everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu\n per, quas minimum postulant per id.\n </p>\n </Segment>\n)\n\nexport default ImageExampleCentered\n","elements/Image/Variations/ImageExampleCircular":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleCircular = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='medium' circular />\n)\n\nexport default ImageExampleCircular\n","elements/Image/Variations/ImageExampleFloated":"import React from 'react'\nimport { Segment, Image } from 'semantic-ui-react'\n\nconst src = '/images/wireframe/image-text.png'\n\nconst ImageExampleFloated = () => (\n <Segment>\n <Image src={src} size='small' floated='left' />\n <p>\n Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia\n facete scriptorem, est autem aliquip detraxit at. Usu ocurreret\n referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque\n electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei\n ex natum rebum iisque.\n </p>\n <Image src={src} size='small' floated='right' />\n <p>\n Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine\n definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te\n phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide\n phaedrum, vim vivendum maiestatis in.\n </p>\n <p>\n Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut\n facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te\n porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi\n everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu\n per, quas minimum postulant per id.\n </p>\n </Segment>\n)\n\nexport default ImageExampleFloated\n","elements/Image/Variations/ImageExampleFluid":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleFluid = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' fluid />\n)\n\nexport default ImageExampleFluid\n","elements/Image/Variations/ImageExampleRounded":"import React from 'react'\nimport { Image } from 'semantic-ui-react'\n\nconst ImageExampleRounded = () => (\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='medium' rounded />\n)\n\nexport default ImageExampleRounded\n","elements/Image/Variations/ImageExampleSize":"import React from 'react'\nimport { Divider, Image } from 'semantic-ui-react'\n\nconst src = '/images/wireframe/image.png'\n\nconst ImageExampleSize = () => (\n <div>\n <Image src={src} size='mini' />\n <Divider hidden />\n <Image src={src} size='tiny' />\n <Divider hidden />\n <Image src={src} size='small' />\n <Divider hidden />\n <Image src={src} size='medium' />\n <Divider hidden />\n <Image src={src} size='large' />\n <Divider hidden />\n <Image src={src} size='big' />\n <Divider hidden />\n <Image src={src} size='huge' />\n <Divider hidden />\n <Image src={src} size='massive' />\n </div>\n)\n\nexport default ImageExampleSize\n","elements/Image/Variations/ImageExampleSpaced":"import React from 'react'\nimport { Segment, Image } from 'semantic-ui-react'\n\nconst src = '/images/wireframe/image.png'\n\nconst ImageExampleSpaced = () => (\n <div>\n <Segment>\n <p>\n Te eum doming eirmod, nominati pertinacia{' '}\n <Image src={src} size='mini' spaced /> argumentum ad his. Ex eam alia\n facete scriptorem, est autem aliquip detraxit at. Usu ocurreret\n referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque\n electram, eos choro alterum definiebas in. Vim dolorum definiebas an.\n Mei ex natum rebum iisque.\n </p>\n </Segment>\n <p>\n <Image src={src} size='mini' spaced='right' />\n Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine\n definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te\n phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide\n phaedrum, vim vivendum maiestatis in.\n </p>\n <p>\n Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut\n facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te\n porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi\n everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu\n per, quas minimum postulant per id.\n <Image src={src} size='mini' spaced='left' />\n </p>\n </div>\n)\n\nexport default ImageExampleSpaced\n","elements/Image/Variations/ImageExampleVerticallyAligned":"import React from 'react'\nimport { Divider, Image } from 'semantic-ui-react'\n\nconst src = '/images/wireframe/image.png'\n\nconst ImageExampleVerticallyAligned = () => (\n <div>\n <Image src={src} size='tiny' verticalAlign='top' /> <span>Top Aligned</span>\n <Divider />\n <Image src={src} size='tiny' verticalAlign='middle' />{' '}\n <span>Middle Aligned</span>\n <Divider />\n <Image src={src} size='tiny' verticalAlign='bottom' />{' '}\n <span>Bottom Aligned</span>\n </div>\n)\n\nexport default ImageExampleVerticallyAligned\n","elements/Input/States/InputExampleDisabled":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputDisabled = () => <Input disabled placeholder='Search...' />\n\nexport default InputDisabled\n","elements/Input/States/InputExampleError":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleError = () => <Input error placeholder='Search...' />\n\nexport default InputExampleError\n","elements/Input/States/InputExampleFocus":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleFocus = () => <Input focus placeholder='Search...' />\n\nexport default InputExampleFocus\n","elements/Input/States/InputExampleLeftLoading":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleLeftLoading = () => (\n <Input loading icon='user' iconPosition='left' placeholder='Search...' />\n)\n\nexport default InputExampleLeftLoading\n","elements/Input/States/InputExampleLoading":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleLoading = () => (\n <Input loading icon='user' placeholder='Search...' />\n)\n\nexport default InputExampleLoading\n","elements/Input/States/InputExampleLoadingWithoutIcon":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleLoadingWithoutIcon = () => (\n <Input loading placeholder='Search...' />\n)\n\nexport default InputExampleLoadingWithoutIcon\n","elements/Input/Types/InputExampleInput":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleInput = () => <Input placeholder='Search...' />\n\nexport default InputExampleInput\n","elements/Input/Usage/InputExampleDatalist":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleDatalist = () => (\n <div>\n <Input list='languages' placeholder='Choose language...' />\n <datalist id='languages'>\n <option value='English'>English</option>\n <option value='Chinese'>Chinese</option>\n <option value='Dutch'>Dutch</option>\n </datalist>\n </div>\n)\n\nexport default InputExampleDatalist\n","elements/Input/Usage/InputExampleRefFocus":"import React, { Component, createRef } from 'react'\nimport { Input, Button } from 'semantic-ui-react'\n\nclass InputExampleRefFocus extends Component {\n inputRef = createRef()\n handleClick = () => this.inputRef.current.focus()\n\n render() {\n return (\n <div>\n <Button content='focus' onClick={this.handleClick} />\n <Input ref={this.inputRef} placeholder='Search...' />\n </div>\n )\n }\n}\n\nexport default InputExampleRefFocus\n","elements/Input/Variations/InputExampleAction":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleAction = () => (\n <Input action='Search' placeholder='Search...' />\n)\n\nexport default InputExampleAction\n","elements/Input/Variations/InputExampleActionDropdown":"import React from 'react'\nimport { Dropdown, Input } from 'semantic-ui-react'\n\nconst options = [\n { key: 'page', text: 'This Page', value: 'page' },\n { key: 'org', text: 'This Organization', value: 'org' },\n { key: 'site', text: 'Entire Site', value: 'site' },\n]\n\nconst InputExampleActionDropdown = () => (\n <Input\n action={\n <Dropdown button basic floating options={options} defaultValue='page' />\n }\n icon='search'\n iconPosition='left'\n placeholder='Search...'\n />\n)\n\nexport default InputExampleActionDropdown\n","elements/Input/Variations/InputExampleActionIconButton":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleActionIconButton = () => (\n <Input action={{ icon: 'search' }} placeholder='Search...' />\n)\n\nexport default InputExampleActionIconButton\n","elements/Input/Variations/InputExampleActionLabeledButton":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleActionLabeledButton = () => (\n <Input\n action={{\n color: 'teal',\n labelPosition: 'right',\n icon: 'copy',\n content: 'Copy',\n }}\n defaultValue='http://ww.short.url/c0opq'\n />\n)\n\nexport default InputExampleActionLabeledButton\n","elements/Input/Variations/InputExampleActions":"import React from 'react'\nimport { Button, Select, Input } from 'semantic-ui-react'\n\nconst options = [\n { key: 'all', text: 'All', value: 'all' },\n { key: 'articles', text: 'Articles', value: 'articles' },\n { key: 'products', text: 'Products', value: 'products' },\n]\n\nconst InputExampleActions = () => (\n <Input type='text' placeholder='Search...' action>\n <input />\n <Select compact options={options} defaultValue='articles' />\n <Button type='submit'>Search</Button>\n </Input>\n)\n\nexport default InputExampleActions\n","elements/Input/Variations/InputExampleFluid":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleFluid = () => (\n <Input fluid icon='search' placeholder='Search...' />\n)\n\nexport default InputExampleFluid\n","elements/Input/Variations/InputExampleIcon":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleIcon = () => <Input icon='search' placeholder='Search...' />\n\nexport default InputExampleIcon\n","elements/Input/Variations/InputExampleIconChild":"import React from 'react'\nimport { Icon, Input } from 'semantic-ui-react'\n\nconst InputExampleIconChild = () => (\n <div>\n <Input icon placeholder='Search...'>\n <input />\n <Icon name='search' />\n </Input>\n <br />\n <br />\n <Input iconPosition='left' placeholder='Email'>\n <Icon name='at' />\n <input />\n </Input>\n </div>\n)\n\nexport default InputExampleIconChild\n","elements/Input/Variations/InputExampleIconElement":"import React from 'react'\nimport { Icon, Input } from 'semantic-ui-react'\n\nconst InputExampleIconElement = () => (\n <Input\n icon={<Icon name='search' inverted circular link />}\n placeholder='Search...'\n />\n)\n\nexport default InputExampleIconElement\n","elements/Input/Variations/InputExampleIconPosition":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleIconPosition = () => (\n <Input icon='users' iconPosition='left' placeholder='Search users...' />\n)\n\nexport default InputExampleIconPosition\n","elements/Input/Variations/InputExampleIconProps":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleIconProps = () => (\n <Input\n icon={{ name: 'search', circular: true, link: true }}\n placeholder='Search...'\n />\n)\n\nexport default InputExampleIconProps\n","elements/Input/Variations/InputExampleInverted":"import React from 'react'\nimport { Segment, Input } from 'semantic-ui-react'\n\nconst InputExampleInverted = () => (\n <Segment inverted>\n <Input inverted placeholder='Search...' />\n </Segment>\n)\n\nexport default InputExampleInverted\n","elements/Input/Variations/InputExampleLabeled":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleLabeled = () => (\n <Input label='http://' placeholder='mysite.com' />\n)\n\nexport default InputExampleLabeled\n","elements/Input/Variations/InputExampleLeftActionLabeledButton":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleLeftActionLabeledButton = () => (\n <Input\n action={{\n color: 'teal',\n labelPosition: 'left',\n icon: 'cart',\n content: 'Checkout',\n }}\n actionPosition='left'\n placeholder='Search...'\n defaultValue='52.03'\n />\n)\n\nexport default InputExampleLeftActionLabeledButton\n","elements/Input/Variations/InputExampleLeftCornerLabeled":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleLeftCornerLabeled = () => (\n <Input\n label={{ icon: 'asterisk' }}\n labelPosition='left corner'\n placeholder='Search...'\n />\n)\n\nexport default InputExampleLeftCornerLabeled\n","elements/Input/Variations/InputExampleRightCornerLabeled":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleLeftCornerLabeled = () => (\n <Input\n label={{ icon: 'asterisk' }}\n labelPosition='right corner'\n placeholder='Search...'\n />\n)\n\nexport default InputExampleLeftCornerLabeled\n","elements/Input/Variations/InputExampleRightLabeled":"import React from 'react'\nimport { Dropdown, Input } from 'semantic-ui-react'\n\nconst options = [\n { key: '.com', text: '.com', value: '.com' },\n { key: '.net', text: '.net', value: '.net' },\n { key: '.org', text: '.org', value: '.org' },\n]\n\nconst InputExampleRightLabeled = () => (\n <Input\n label={<Dropdown defaultValue='.com' options={options} />}\n labelPosition='right'\n placeholder='Find domain'\n />\n)\n\nexport default InputExampleRightLabeled\n","elements/Input/Variations/InputExampleRightLabeledBasic":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleRightLabeledBasic = () => (\n <Input\n label={{ basic: true, content: 'kg' }}\n labelPosition='right'\n placeholder='Enter weight...'\n />\n)\n\nexport default InputExampleRightLabeledBasic\n","elements/Input/Variations/InputExampleRightLabeledTag":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleRightLabeledTag = () => (\n <Input\n icon='tags'\n iconPosition='left'\n label={{ tag: true, content: 'Add Tag' }}\n labelPosition='right'\n placeholder='Enter tags'\n />\n)\n\nexport default InputExampleRightLabeledTag\n","elements/Input/Variations/InputExampleRightLeftLabeled":"import React from 'react'\nimport { Input, Label } from 'semantic-ui-react'\n\nconst InputExampleRightLeftLabeled = () => (\n <Input labelPosition='right' type='text' placeholder='Amount'>\n <Label basic>$</Label>\n <input />\n <Label>.00</Label>\n </Input>\n)\n\nexport default InputExampleRightLeftLabeled\n","elements/Input/Variations/InputExampleSize":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleSize = () => (\n <div>\n <Input size='mini' icon='search' placeholder='Search...' />\n <br />\n <br />\n <Input size='small' icon='search' placeholder='Search...' />\n <br />\n <br />\n <Input size='large' icon='search' placeholder='Search...' />\n <br />\n <br />\n <Input size='big' icon='search' placeholder='Search...' />\n <br />\n <br />\n <Input size='huge' icon='search' placeholder='Search...' />\n <br />\n <br />\n <Input size='massive' icon='search' placeholder='Search...' />\n </div>\n)\n\nexport default InputExampleSize\n","elements/Input/Variations/InputExampleTransparent":"import React from 'react'\nimport { Input } from 'semantic-ui-react'\n\nconst InputExampleTransparent = () => (\n <Input transparent placeholder='Search...' />\n)\n\nexport default InputExampleTransparent\n","elements/Label/Content/LabelExampleDetail":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleDetail = () => (\n <Label>\n Dogs\n <Label.Detail>214</Label.Detail>\n </Label>\n)\n\nexport default LabelExampleDetail\n","elements/Label/Content/LabelExampleIcon":"import React from 'react'\nimport { Icon, Label } from 'semantic-ui-react'\n\nconst LabelExampleIcon = () => (\n <div>\n <Label as='a'>\n <Icon name='mail' />\n Mail\n </Label>\n <Label as='a'>\n Tag\n <Icon name='delete' />\n </Label>\n </div>\n)\n\nexport default LabelExampleIcon\n","elements/Label/Content/LabelExampleIconShorthand":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleIconShorthand = () => (\n <Label as='a' content='Mail' icon='mail' />\n)\n\nexport default LabelExampleIconShorthand\n","elements/Label/Content/LabelExampleImage":"import React from 'react'\nimport { Image, Label } from 'semantic-ui-react'\n\nconst LabelExampleImage = () => (\n <div>\n <Label as='a'>\n <Image avatar spaced='right' src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n Elliot\n </Label>\n <Label as='a'>\n <img src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n Stevie\n </Label>\n </div>\n)\n\nexport default LabelExampleImage\n","elements/Label/Content/LabelExampleImageShorthand":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleImageShorthand = () => {\n const imageProps = {\n avatar: true,\n spaced: 'right',\n src: '/images/avatar/small/elliot.jpg',\n }\n\n return <Label as='a' content='Elliot' image={imageProps} />\n}\n\nexport default LabelExampleImageShorthand\n","elements/Label/Content/LabelExampleLink":"import React from 'react'\nimport { Icon, Label } from 'semantic-ui-react'\n\nconst LabelExampleLink = () => (\n <Label as='a'>\n <Icon name='mail' /> 23\n </Label>\n)\n\nexport default LabelExampleLink\n","elements/Label/Content/LabelExampleLinkDetail":"import React from 'react'\nimport { Icon, Label } from 'semantic-ui-react'\n\nconst LabelExampleLinkDetail = () => (\n <Label>\n <Icon name='mail' />\n 23\n <Label.Detail>View Mail</Label.Detail>\n </Label>\n)\n\nexport default LabelExampleLinkDetail\n","elements/Label/Groups/LabelExampleGroupCircular":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleGroupCircular = () => (\n <Label.Group circular>\n <Label as='a'>11</Label>\n <Label as='a'>22</Label>\n <Label as='a'>33</Label>\n <Label as='a'>44</Label>\n <Label as='a'>141</Label>\n </Label.Group>\n)\n\nexport default LabelExampleGroupCircular\n","elements/Label/Groups/LabelExampleGroupColored":"import React from 'react'\nimport { Icon, Label } from 'semantic-ui-react'\n\nconst LabelExampleGroupSize = () => (\n <Label.Group color='blue'>\n <Label as='a'>\n Fun\n <Icon name='close' />\n </Label>\n <Label as='a'>\n Happy\n <Label.Detail>22</Label.Detail>\n </Label>\n <Label as='a'>Smart</Label>\n <Label as='a'>Insane</Label>\n <Label as='a'>Exciting</Label>\n </Label.Group>\n)\n\nexport default LabelExampleGroupSize\n","elements/Label/Groups/LabelExampleGroupSize":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleGroupSize = () => (\n <Label.Group size='huge'>\n <Label>Fun</Label>\n <Label>Happy</Label>\n <Label>Smart</Label>\n <Label>Witty</Label>\n </Label.Group>\n)\n\nexport default LabelExampleGroupSize\n","elements/Label/Groups/LabelExampleGroupTag":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleGroupTag = () => (\n <Label.Group tag>\n <Label as='a'>$10.00</Label>\n <Label as='a'>$19.99</Label>\n <Label as='a'>$24.99</Label>\n <Label as='a'>$30.99</Label>\n <Label as='a'>$10.25</Label>\n </Label.Group>\n)\n\nexport default LabelExampleGroupTag\n","elements/Label/Types/LabelExampleAttached":"import React from 'react'\nimport { Grid, Image, Label, Segment } from 'semantic-ui-react'\n\nconst LabelExampleAttached = () => (\n <Grid columns={3}>\n <Grid.Row>\n <Grid.Column>\n <Segment padded>\n <Label attached='top'>HTML</Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment padded>\n <Label attached='bottom'>CSS</Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment padded>\n <Label attached='top right'>Code</Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n </Grid.Row>\n\n <Grid.Row>\n <Grid.Column>\n <Segment padded>\n <Label attached='top left'>View</Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment padded>\n <Label attached='bottom left'>User View</Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n <Grid.Column>\n <Segment padded>\n <Label attached='bottom right'>Admin View</Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default LabelExampleAttached\n","elements/Label/Types/LabelExampleBasic":"import React from 'react'\nimport { Icon, Label } from 'semantic-ui-react'\n\nconst LabelExampleBasic = () => (\n <Label>\n <Icon name='mail' /> 23\n </Label>\n)\n\nexport default LabelExampleBasic\n","elements/Label/Types/LabelExampleCorner":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst LabelExampleCorner = () => (\n <Grid columns={2}>\n <Grid.Column>\n <Image\n fluid\n label={{ as: 'a', corner: 'left', icon: 'heart' }}\n src='https://react.semantic-ui.com/images/wireframe/image.png'\n />\n </Grid.Column>\n\n <Grid.Column>\n <Image\n fluid\n label={{ as: 'a', color: 'red', corner: 'right', icon: 'save' }}\n src='https://react.semantic-ui.com/images/wireframe/image.png'\n />\n </Grid.Column>\n </Grid>\n)\n\nexport default LabelExampleCorner\n","elements/Label/Types/LabelExampleFloating":"import React from 'react'\nimport { Icon, Label, Menu } from 'semantic-ui-react'\n\nconst LabelExampleFloating = () => (\n <Menu compact>\n <Menu.Item as='a'>\n <Icon name='mail' /> Messages\n <Label color='red' floating>\n 22\n </Label>\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='users' /> Friends\n <Label color='teal' floating>\n 22\n </Label>\n </Menu.Item>\n </Menu>\n)\n\nexport default LabelExampleFloating\n","elements/Label/Types/LabelExampleHorizontal":"import React from 'react'\nimport { Label, List } from 'semantic-ui-react'\n\nconst LabelExampleHorizontal = () => (\n <List divided selection>\n <List.Item>\n <Label color='red' horizontal>\n Fruit\n </Label>\n Kumquats\n </List.Item>\n <List.Item>\n <Label color='purple' horizontal>\n Candy\n </Label>\n Ice Cream\n </List.Item>\n <List.Item>\n <Label color='red' horizontal>\n Fruit\n </Label>\n Orange\n </List.Item>\n <List.Item>\n <Label horizontal>Dog</Label>\n Poodle\n </List.Item>\n </List>\n)\n\nexport default LabelExampleHorizontal\n","elements/Label/Types/LabelExampleIcon":"import React from 'react'\nimport { Icon, Label } from 'semantic-ui-react'\n\nconst LabelExampleIcon = () => (\n <div>\n <Label image>\n <img src='https://react.semantic-ui.com/images/avatar/small/ade.jpg' />\n Adrienne\n <Icon name='delete' />\n </Label>\n <Label image>\n <img src='https://react.semantic-ui.com/images/avatar/small/zoe.jpg' />\n Zoe\n <Icon name='delete' />\n </Label>\n <Label image>\n <img src='https://react.semantic-ui.com/images/avatar/small/nan.jpg' />\n Nan\n <Icon name='delete' />\n </Label>\n </div>\n)\n\nexport default LabelExampleIcon\n","elements/Label/Types/LabelExampleImage":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleImage = () => (\n <div>\n <Label as='a' image>\n <img src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n Joe\n </Label>\n <Label as='a' image>\n <img src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n Elliot\n </Label>\n <Label as='a' image>\n <img src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n Stevie\n </Label>\n </div>\n)\n\nexport default LabelExampleImage\n","elements/Label/Types/LabelExampleImageColored":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleImage = () => (\n <div>\n <Label as='a' color='blue' image>\n <img src='https://react.semantic-ui.com/images/avatar/small/veronika.jpg' />\n Veronika\n <Label.Detail>Friend</Label.Detail>\n </Label>\n <Label as='a' color='teal' image>\n <img src='https://react.semantic-ui.com/images/avatar/small/jenny.jpg' />\n Jenny\n <Label.Detail>Friend</Label.Detail>\n </Label>\n <Label as='a' color='yellow' image>\n <img src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n Christian\n <Label.Detail>Co-worker</Label.Detail>\n </Label>\n </div>\n)\n\nexport default LabelExampleImage\n","elements/Label/Types/LabelExamplePointing":"import React from 'react'\nimport { Divider, Form, Label } from 'semantic-ui-react'\n\nconst LabelExamplePointing = () => (\n <Form>\n <Form.Field>\n <input type='text' placeholder='First name' />\n <Label pointing>Please enter a value</Label>\n </Form.Field>\n <Divider />\n\n <Form.Field>\n <Label pointing='below'>Please enter a value</Label>\n <input type='text' placeholder='Last Name' />\n </Form.Field>\n <Divider />\n\n <Form.Field inline>\n <input type='text' placeholder='Username' />\n <Label pointing='left'>That name is taken!</Label>\n </Form.Field>\n <Divider />\n\n <Form.Field inline>\n <Label pointing='right'>Your password must be 6 characters or more</Label>\n <input type='password' placeholder='Password' />\n </Form.Field>\n </Form>\n)\n\nexport default LabelExamplePointing\n","elements/Label/Types/LabelExamplePointingColored":"import React from 'react'\nimport { Divider, Form, Label } from 'semantic-ui-react'\n\nconst LabelExamplePointing = () => (\n <Form>\n <Form.Field>\n <input type='text' placeholder='First name' />\n <Label basic color='red' pointing>\n Please enter a value\n </Label>\n </Form.Field>\n <Divider />\n\n <Form.Field>\n <Label basic color='red' pointing='below'>\n Please enter a value\n </Label>\n <input type='text' placeholder='Last Name' />\n </Form.Field>\n <Divider />\n\n <Form.Field inline>\n <input type='text' placeholder='Username' />\n <Label basic color='red' pointing='left'>\n That name is taken!\n </Label>\n </Form.Field>\n <Divider />\n\n <Form.Field inline>\n <Label basic color='red' pointing='right'>\n Your password must be 6 characters or more\n </Label>\n <input type='password' placeholder='Password' />\n </Form.Field>\n </Form>\n)\n\nexport default LabelExamplePointing\n","elements/Label/Types/LabelExamplePrompt":"import React from 'react'\nimport { Form, Input, Label } from 'semantic-ui-react'\n\nconst LabelExamplePrompt = () => (\n <Form>\n <Form.Field>\n <Input placeholder='First name' />\n <Label pointing prompt>\n Please enter a value\n </Label>\n </Form.Field>\n </Form>\n)\n\nexport default LabelExamplePrompt\n","elements/Label/Types/LabelExampleRibbon":"import React from 'react'\nimport { Grid, Image, Label, Segment } from 'semantic-ui-react'\n\nconst LabelExampleRibbon = () => (\n <Grid columns={2}>\n <Grid.Column>\n <Segment raised>\n <Label as='a' color='red' ribbon>\n Overview\n </Label>\n <span>Account Details</span>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Label as='a' color='blue' ribbon>\n Community\n </Label>\n <span>User Reviews</span>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n\n <Grid.Column>\n <Segment>\n <Label as='a' color='orange' ribbon='right'>\n Specs\n </Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Label as='a' color='teal' ribbon='right'>\n Reviews\n </Label>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default LabelExampleRibbon\n","elements/Label/Types/LabelExampleRibbonImage":"import React from 'react'\nimport { Grid, Image } from 'semantic-ui-react'\n\nconst LabelExampleRibbonImage = () => (\n <Grid columns={2}>\n <Grid.Column>\n <Image\n fluid\n label={{\n as: 'a',\n color: 'black',\n content: 'Hotel',\n icon: 'hotel',\n ribbon: true,\n }}\n src='https://react.semantic-ui.com/images/wireframe/image.png'\n />\n </Grid.Column>\n\n <Grid.Column>\n <Image\n fluid\n label={{\n as: 'a',\n color: 'blue',\n content: 'Food',\n icon: 'spoon',\n ribbon: true,\n }}\n src='https://react.semantic-ui.com/images/wireframe/image.png'\n />\n </Grid.Column>\n </Grid>\n)\n\nexport default LabelExampleRibbonImage\n","elements/Label/Types/LabelExampleTag":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleTag = () => (\n <div>\n <Label as='a' tag>\n New\n </Label>\n <Label as='a' color='red' tag>\n Upcoming\n </Label>\n <Label as='a' color='teal' tag>\n Featured\n </Label>\n </div>\n)\n\nexport default LabelExampleTag\n","elements/Label/Variations/LabelExampleBasic":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst LabelExampleBasic = () => (\n <div>\n <Label as='a' basic>\n Basic\n </Label>\n <Label as='a' basic pointing>\n Pointing\n </Label>\n <Label as='a' basic image>\n <img src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n Elliot\n </Label>\n <Label as='a' basic color='red' pointing>\n Red Pointing\n </Label>\n <Label as='a' basic color='blue'>\n Blue\n </Label>\n </div>\n)\n\nexport default LabelExampleBasic\n","elements/Label/Variations/LabelExampleCircular":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nconst LabelExampleCircular = () => (\n <div>\n {colors.map((color) => (\n <Label circular color={color} key={color}>\n 2\n </Label>\n ))}\n </div>\n)\n\nexport default LabelExampleCircular\n","elements/Label/Variations/LabelExampleCircularEmpty":"import React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nconst LabelExampleCircularEmpty = () => (\n <div>\n {colors.map((color) => (\n <Label circular color={color} empty key={color} />\n ))}\n </div>\n)\n\nexport default LabelExampleCircularEmpty\n","elements/Label/Variations/LabelExampleColored":"import _ from 'lodash'\nimport React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n 'black',\n]\n\nconst LabelExampleColored = () => (\n <div>\n {colors.map((color) => (\n <Label color={color} key={color}>\n {_.capitalize(color)}\n </Label>\n ))}\n </div>\n)\n\nexport default LabelExampleColored\n","elements/Label/Variations/LabelExampleSize":"import _ from 'lodash'\nimport React from 'react'\nimport { Label } from 'semantic-ui-react'\n\nconst sizes = [\n 'mini',\n 'tiny',\n 'small',\n 'medium',\n 'large',\n 'big',\n 'huge',\n 'massive',\n]\n\nconst LabelExampleSize = () => (\n <div>\n {sizes.map((size) => (\n <Label key={size} size={size}>\n {_.capitalize(size)}\n </Label>\n ))}\n </div>\n)\n\nexport default LabelExampleSize\n","elements/Loader/States/LoaderExampleActive":"import React from 'react'\nimport { Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleActive = () => (\n <Segment>\n <Loader active />\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n)\n\nexport default LoaderExampleActive\n","elements/Loader/States/LoaderExampleDisabled":"import React from 'react'\nimport { Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleDisabled = () => (\n <Segment>\n <Loader disabled />\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n)\n\nexport default LoaderExampleDisabled\n","elements/Loader/States/LoaderExampleIndeterminate":"import React from 'react'\nimport { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleIndeterminate = () => (\n <div>\n <Segment>\n <Dimmer active>\n <Loader indeterminate>Preparing Files</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n </div>\n)\n\nexport default LoaderExampleIndeterminate\n","elements/Loader/Types/LoaderExampleLoader":"import React from 'react'\nimport { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleLoader = () => (\n <Segment>\n <Dimmer active>\n <Loader />\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n)\n\nexport default LoaderExampleLoader\n","elements/Loader/Types/LoaderExampleText":"import React from 'react'\nimport { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleText = () => (\n <div>\n <Segment>\n <Dimmer active>\n <Loader>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active inverted>\n <Loader inverted>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n </div>\n)\n\nexport default LoaderExampleText\n","elements/Loader/Types/LoaderExampleTextShorthand":"import React from 'react'\nimport { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleTextShorthand = () => (\n <div>\n <Segment>\n <Dimmer active>\n <Loader content='Loading' />\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active inverted>\n <Loader inverted content='Loading' />\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n </div>\n)\n\nexport default LoaderExampleTextShorthand\n","elements/Loader/Variations/LoaderExampleInline":"import React from 'react'\nimport { Loader } from 'semantic-ui-react'\n\nconst LoaderExampleInline = () => <Loader active inline />\n\nexport default LoaderExampleInline\n","elements/Loader/Variations/LoaderExampleInlineCentered":"import React from 'react'\nimport { Loader } from 'semantic-ui-react'\n\nconst LoaderExampleInlineCentered = () => <Loader active inline='centered' />\n\nexport default LoaderExampleInlineCentered\n","elements/Loader/Variations/LoaderExampleInverted":"import React from 'react'\nimport { Image, Loader, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleInverted = () => (\n <Segment inverted>\n <Loader active inverted />\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n)\n\nexport default LoaderExampleInverted\n","elements/Loader/Variations/LoaderExampleSizes":"import React from 'react'\nimport { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleSizes = () => (\n <div>\n <Segment>\n <Dimmer active>\n <Loader size='mini'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active>\n <Loader size='tiny'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active>\n <Loader size='small'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active>\n <Loader size='medium'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active>\n <Loader size='large'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active>\n <Loader size='big'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active>\n <Loader size='huge'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active>\n <Loader size='massive'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n </div>\n)\n\nexport default LoaderExampleSizes\n","elements/Loader/Variations/LoaderExampleSizesInverted":"import React from 'react'\nimport { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'\n\nconst LoaderExampleSizesInverted = () => (\n <div>\n <Segment>\n <Dimmer active inverted>\n <Loader size='mini'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active inverted>\n <Loader size='small'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active inverted>\n <Loader size='medium'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n\n <Segment>\n <Dimmer active inverted>\n <Loader size='large'>Loading</Loader>\n </Dimmer>\n\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </div>\n)\n\nexport default LoaderExampleSizesInverted\n","elements/List/Content/ListExampleDescription":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleDescription = () => (\n <List>\n <List.Item>\n <List.Icon name='marker' />\n <List.Content>\n <List.Header as='a'>Krowlewskie Jadlo</List.Header>\n <List.Description>\n An excellent polish restaurant, quick delivery and hearty, filling\n meals.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='marker' />\n <List.Content>\n <List.Header as='a'>Xian Famous Foods</List.Header>\n <List.Description>\n A taste of Shaanxi's delicious culinary traditions, with delights like\n spicy cold noodles and lamb burgers.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='marker' />\n <List.Content>\n <List.Header as='a'>Sapporo Haru</List.Header>\n <List.Description>\n Greenpoint's best choice for quick and delicious sushi.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='marker' />\n <List.Content>\n <List.Header as='a'>Enid's</List.Header>\n <List.Description>\n At night a bar, during the day a delicious brunch spot.\n </List.Description>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleDescription\n","elements/List/Content/ListExampleHeader":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleHeader = () => (\n <List>\n <List.Item>\n <List.Header>New York City</List.Header>A lovely city\n </List.Item>\n <List.Item>\n <List.Header>Chicago</List.Header>\n Also quite a lovely city\n </List.Item>\n <List.Item>\n <List.Header>Los Angeles</List.Header>\n Sometimes can be a lovely city\n </List.Item>\n <List.Item>\n <List.Header>San Francisco</List.Header>\n What a lovely city\n </List.Item>\n </List>\n)\n\nexport default ListExampleHeader\n","elements/List/Content/ListExampleIcon":"import React from 'react'\nimport { Icon, List } from 'semantic-ui-react'\n\nconst ListExampleIcon = () => (\n <List>\n <List.Item as='a'>\n <Icon name='help' />\n <List.Content>\n <List.Header>Floated Icon</List.Header>\n <List.Description>\n This text will always have a left margin to make sure it sits\n alongside your icon\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item as='a'>\n <Icon name='right triangle' />\n <List.Content>\n <List.Header>Icon Alignment</List.Header>\n <List.Description>\n Floated icons are by default top aligned. To have an icon top aligned\n try this example.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Icon name='help' />\n Inline Text\n </List.Item>\n </List>\n)\n\nexport default ListExampleIcon\n","elements/List/Content/ListExampleImage":"import React from 'react'\nimport { List, Image } from 'semantic-ui-react'\n\nconst ListExampleImage = () => (\n <List>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/rachel.png' />\n <List.Content>\n <List.Header as='a'>Rachel</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>Arrested Development</b>\n </a>{' '}\n just now.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/lindsay.png' />\n <List.Content>\n <List.Header as='a'>Lindsay</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>Bob's Burgers</b>\n </a>{' '}\n 10 hours ago.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/matthew.png' />\n <List.Content>\n <List.Header as='a'>Matthew</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>The Godfather Part 2</b>\n </a>{' '}\n yesterday.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/jenny.jpg' />\n <List.Content>\n <List.Header as='a'>Jenny Hess</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>Twin Peaks</b>\n </a>{' '}\n 3 days ago.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/veronika.jpg' />\n <List.Content>\n <List.Header as='a'>Veronika Ossi</List.Header>\n <List.Description>Has not watched anything recently</List.Description>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleImage\n","elements/List/Content/ListExampleItem":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleItem = () => (\n <List>\n <List.Item>1</List.Item>\n <List.Item>2</List.Item>\n <List.Item>3</List.Item>\n </List>\n)\n\nexport default ListExampleItem\n","elements/List/Content/ListExampleLink":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleLink = () => (\n <List>\n <List.Item as='a'>What is a FAQ?</List.Item>\n <List.Item as='a'>Who is our user?</List.Item>\n <List.Item as='a'>Where is our office located?</List.Item>\n </List>\n)\n\nexport default ListExampleLink\n","elements/List/Content/ListExampleLinkComplex":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleLinkComplex = () => (\n <List>\n <List.Item>\n <List.Header as='a'>Header</List.Header>\n <List.Description>\n Click a link in our <a>description</a>.\n </List.Description>\n </List.Item>\n <List.Item>\n <List.Header as='a'>Learn More</List.Header>\n <List.Description>\n Learn more about this site on <a>our FAQ page</a>.\n </List.Description>\n </List.Item>\n </List>\n)\n\nexport default ListExampleLinkComplex\n","elements/List/ContentVariations/ListExampleFloated":"import React from 'react'\nimport { Button, Image, List } from 'semantic-ui-react'\n\nconst ListExampleFloated = () => (\n <List divided verticalAlign='middle'>\n <List.Item>\n <List.Content floated='right'>\n <Button>Add</Button>\n </List.Content>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/lena.png' />\n <List.Content>Lena</List.Content>\n </List.Item>\n <List.Item>\n <List.Content floated='right'>\n <Button>Add</Button>\n </List.Content>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/lindsay.png' />\n <List.Content>Lindsay</List.Content>\n </List.Item>\n <List.Item>\n <List.Content floated='right'>\n <Button>Add</Button>\n </List.Content>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/mark.png' />\n <List.Content>Mark</List.Content>\n </List.Item>\n <List.Item>\n <List.Content floated='right'>\n <Button>Add</Button>\n </List.Content>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/molly.png' />\n <List.Content>Molly</List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleFloated\n","elements/List/ContentVariations/ListExampleFloatedHorizontal":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleFloatedHorizontal = () => (\n <div>\n <List floated='right' horizontal>\n <List.Item disabled href='#'>\n © GitHub, Inc.\n </List.Item>\n <List.Item href='#'>Terms</List.Item>\n <List.Item href='#'>Privacy</List.Item>\n <List.Item href='#'>Contact</List.Item>\n </List>\n\n <List horizontal>\n <List.Item href='#'>About Us</List.Item>\n <List.Item href='#'>Jobs</List.Item>\n </List>\n </div>\n)\n\nexport default ListExampleFloatedHorizontal\n","elements/List/ContentVariations/ListExampleVerticallyAligned":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleVerticallyAligned = () => (\n <List horizontal>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/wireframe/square-image.png' />\n <List.Content verticalAlign='top'>Top Aligned</List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/wireframe/square-image.png' />\n <List.Content verticalAlign='middle'>Middle</List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/wireframe/square-image.png' />\n <List.Content verticalAlign='bottom'>Bottom</List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleVerticallyAligned\n","elements/List/Types/ListExampleBasic":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleBasic = () => (\n <List>\n <List.Item>Apples</List.Item>\n <List.Item>Pears</List.Item>\n <List.Item>Oranges</List.Item>\n </List>\n)\n\nexport default ListExampleBasic\n","elements/List/Types/ListExampleBasicShorthand":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleBasicShorthand = () => (\n <List items={['Apples', 'Pears', 'Oranges']} />\n)\n\nexport default ListExampleBasicShorthand\n","elements/List/Types/ListExampleBulleted":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleBulleted = () => (\n <List bulleted>\n <List.Item>Gaining Access</List.Item>\n <List.Item>Inviting Friends</List.Item>\n <List.Item>\n Benefits\n <List.List>\n <List.Item href='#'>Link to somewhere</List.Item>\n <List.Item>Rebates</List.Item>\n <List.Item>Discounts</List.Item>\n </List.List>\n </List.Item>\n <List.Item>Warranty</List.Item>\n </List>\n)\n\nexport default ListExampleBulleted\n","elements/List/Types/ListExampleBulletedHorizontal":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleBulletedHorizontal = () => (\n <List bulleted horizontal>\n <List.Item as='a'>About Us</List.Item>\n <List.Item as='a'>Sitemap</List.Item>\n <List.Item as='a'>Contact</List.Item>\n </List>\n)\n\nexport default ListExampleBulletedHorizontal\n","elements/List/Types/ListExampleBulletedSimple":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleBulletedSimple = () => (\n <List as='ul'>\n <List.Item as='li'>Gaining Access</List.Item>\n <List.Item as='li'>Inviting Friends</List.Item>\n <List.Item as='li'>\n Benefits\n <List.List as='ul'>\n <List.Item as='li'>\n <a href='#'>Link to somewhere</a>\n </List.Item>\n <List.Item as='li'>Rebates</List.Item>\n <List.Item as='li'>Discounts</List.Item>\n </List.List>\n </List.Item>\n <List.Item as='li'>Warranty</List.Item>\n </List>\n)\n\nexport default ListExampleBulletedSimple\n","elements/List/Types/ListExampleDivided":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleDivided = () => (\n <List divided relaxed>\n <List.Item>\n <List.Icon name='github' size='large' verticalAlign='middle' />\n <List.Content>\n <List.Header as='a'>Semantic-Org/Semantic-UI</List.Header>\n <List.Description as='a'>Updated 10 mins ago</List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='github' size='large' verticalAlign='middle' />\n <List.Content>\n <List.Header as='a'>Semantic-Org/Semantic-UI-Docs</List.Header>\n <List.Description as='a'>Updated 22 mins ago</List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='github' size='large' verticalAlign='middle' />\n <List.Content>\n <List.Header as='a'>Semantic-Org/Semantic-UI-Meteor</List.Header>\n <List.Description as='a'>Updated 34 mins ago</List.Description>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleDivided\n","elements/List/Types/ListExampleIcon":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleIcon = () => (\n <List>\n <List.Item>\n <List.Icon name='users' />\n <List.Content>Semantic UI</List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='marker' />\n <List.Content>New York, NY</List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='mail' />\n <List.Content>\n <a href='mailto:jack@semantic-ui.com'>jack@semantic-ui.com</a>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='linkify' />\n <List.Content>\n <a href='http://www.semantic-ui.com'>semantic-ui.com</a>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleIcon\n","elements/List/Types/ListExampleIconShorthand":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleIconShorthand = () => (\n <List>\n <List.Item icon='users' content='Semantic UI' />\n <List.Item icon='marker' content='New York, NY' />\n <List.Item\n icon='mail'\n content={<a href='mailto:jack@semantic-ui.com'>jack@semantic-ui.com</a>}\n />\n <List.Item\n icon='linkify'\n content={<a href='http://www.semantic-ui.com'>semantic-ui.com</a>}\n />\n </List>\n)\n\nexport default ListExampleIconShorthand\n","elements/List/Types/ListExampleLink":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleLink = () => (\n <List link>\n <List.Item active>Home</List.Item>\n <List.Item as='a'>About</List.Item>\n <List.Item as='a'>Jobs</List.Item>\n <List.Item as='a'>Team</List.Item>\n </List>\n)\n\nexport default ListExampleLink\n","elements/List/Types/ListExampleOrdered":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleOrdered = () => (\n <List ordered>\n <List.Item as='a'>Getting Started</List.Item>\n <List.Item as='a'>Introduction</List.Item>\n <List.Item>\n <a>Languages</a>\n <List.List>\n <List.Item as='a'>HTML</List.Item>\n <List.Item as='a'>Javascript</List.Item>\n <List.Item as='a'>CSS</List.Item>\n </List.List>\n </List.Item>\n <List.Item as='a'>Review</List.Item>\n </List>\n)\n\nexport default ListExampleOrdered\n","elements/List/Types/ListExampleOrderedSimple":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleOrderedSimple = () => (\n <List as='ol'>\n <List.Item as='li'>Signing Up</List.Item>\n <List.Item as='li'>User Benefits</List.Item>\n <List.Item as='li'>\n User Types\n <List.List as='ol'>\n <List.Item as='li'>Admin</List.Item>\n <List.Item as='li'>Power User</List.Item>\n <List.Item as='li'>Regular User</List.Item>\n </List.List>\n </List.Item>\n <List.Item as='li'>Deleting Your Account</List.Item>\n </List>\n)\n\nexport default ListExampleOrderedSimple\n","elements/List/Types/ListExampleOrderedValue":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleOrderedValue = () => (\n <List as='ol'>\n <List.Item as='li' value='*'>\n Signing Up\n </List.Item>\n <List.Item as='li' value='*'>\n User Benefits\n </List.Item>\n <List.Item as='li' value='*'>\n User Types\n <List.Item as='ol'>\n <List.Item as='li' value='-'>\n Admin\n </List.Item>\n <List.Item as='li' value='-'>\n Power User\n </List.Item>\n <List.Item as='li' value='-'>\n Regular User\n </List.Item>\n </List.Item>\n </List.Item>\n <List.Item as='li' value='*'>\n Deleting Your Account\n </List.Item>\n </List>\n)\n\nexport default ListExampleOrderedValue\n","elements/List/Types/ListExampleTree":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleTree = () => (\n <List>\n <List.Item>\n <List.Icon name='folder' />\n <List.Content>\n <List.Header>src</List.Header>\n <List.Description>Source files for project</List.Description>\n <List.List>\n <List.Item>\n <List.Icon name='folder' />\n <List.Content>\n <List.Header>site</List.Header>\n <List.Description>Your site's theme</List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='folder' />\n <List.Content>\n <List.Header>themes</List.Header>\n <List.Description>Packaged theme files</List.Description>\n <List.List>\n <List.Item>\n <List.Icon name='folder' />\n <List.Content>\n <List.Header>default</List.Header>\n <List.Description>Default packaged theme</List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='folder' />\n <List.Content>\n <List.Header>my_theme</List.Header>\n <List.Description>\n Packaged themes are also available in this folder\n </List.Description>\n </List.Content>\n </List.Item>\n </List.List>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='file' />\n <List.Content>\n <List.Header>theme.config</List.Header>\n <List.Description>\n Config file for setting packaged themes\n </List.Description>\n </List.Content>\n </List.Item>\n </List.List>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='folder' />\n <List.Content>\n <List.Header>dist</List.Header>\n <List.Description>Compiled CSS and JS files</List.Description>\n <List.List>\n <List.Item>\n <List.Icon name='folder' />\n <List.Content>\n <List.Header>components</List.Header>\n <List.Description>\n Individual component CSS and JS\n </List.Description>\n </List.Content>\n </List.Item>\n </List.List>\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Icon name='file' />\n <List.Content>\n <List.Header>semantic.json</List.Header>\n <List.Description>Contains build settings for gulp</List.Description>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleTree\n","elements/List/Variations/ListExampleAnimated":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleAnimated = () => (\n <List animated verticalAlign='middle'>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/helen.jpg' />\n <List.Content>\n <List.Header>Helen</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n <List.Content>\n <List.Header>Christian</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header>Daniel</List.Header>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleAnimated\n","elements/List/Variations/ListExampleCelled":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleCelled = () => (\n <List celled>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/helen.jpg' />\n <List.Content>\n <List.Header>Snickerdoodle</List.Header>\n An excellent companion\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header>Poodle</List.Header>A poodle, it's pretty basic\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header>Paulo</List.Header>\n He's also a dog\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleCelled\n","elements/List/Variations/ListExampleCelledHorizontal":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleCelledHorizontal = () => (\n <List celled horizontal>\n <List.Item>About Us</List.Item>\n <List.Item>Contact</List.Item>\n <List.Item>Support</List.Item>\n </List>\n)\n\nexport default ListExampleCelledHorizontal\n","elements/List/Variations/ListExampleCelledOrdered":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleCelledOrdered = () => (\n <List celled ordered>\n <List.Item>Cats</List.Item>\n <List.Item>Horses</List.Item>\n <List.Item>\n Dogs\n <List.List>\n <List.Item>Labradoodles</List.Item>\n <List.Item>Shiba Inu</List.Item>\n <List.Item>Mastiff</List.Item>\n </List.List>\n </List.Item>\n </List>\n)\n\nexport default ListExampleCelledOrdered\n","elements/List/Variations/ListExampleDivided":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleDivided = () => (\n <List divided verticalAlign='middle'>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header as='a'>Daniel Louise</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n <List.Content>\n <List.Header as='a'>Stevie Feliciano</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <List.Content>\n <List.Header as='a'>Elliot Fu</List.Header>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleDivided\n","elements/List/Variations/ListExampleHorizontal":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleHorizontal = () => (\n <List horizontal>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/tom.jpg' />\n <List.Content>\n <List.Header>Tom</List.Header>\n Top Contributor\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n <List.Content>\n <List.Header>Christian Rocha</List.Header>\n Admin\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <List.Content>\n <List.Header>Matt</List.Header>\n Top Rated User\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleHorizontal\n","elements/List/Variations/ListExampleHorizontalBulleted":"import React from 'react'\nimport { List } from 'semantic-ui-react'\n\nconst ListExampleHorizontalBulleted = () => (\n <List bulleted horizontal link>\n <List.Item as='a'>Terms and Conditions</List.Item>\n <List.Item as='a'>Privacy Policy</List.Item>\n <List.Item as='a'>Contact Us</List.Item>\n </List>\n)\n\nexport default ListExampleHorizontalBulleted\n","elements/List/Variations/ListExampleHorizontalOrdered":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleHorizontalOrdered = () => (\n <List horizontal ordered>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/tom.jpg' />\n <List.Content>\n <List.Header>Tom</List.Header>\n Top Contributor\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n <List.Content>\n <List.Header>Christian Rocha</List.Header>\n Admin\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <List.Content>\n <List.Header>Matt</List.Header>\n Top Rated User\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleHorizontalOrdered\n","elements/List/Variations/ListExampleInverted":"import React from 'react'\nimport { List, Segment } from 'semantic-ui-react'\n\nconst ListExampleInverted = () => (\n <Segment inverted>\n <List divided inverted relaxed>\n <List.Item>\n <List.Content>\n <List.Header>Snickerdoodle</List.Header>\n An excellent companion\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Content>\n <List.Header>Poodle</List.Header>A poodle, its pretty basic\n </List.Content>\n </List.Item>\n <List.Item>\n <List.Content>\n <List.Header>Paulo</List.Header>\n He's also a dog\n </List.Content>\n </List.Item>\n </List>\n </Segment>\n)\n\nexport default ListExampleInverted\n","elements/List/Variations/ListExampleRelaxed":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleRelaxed = () => (\n <List relaxed>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header as='a'>Daniel Louise</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>Arrested Development</b>\n </a>{' '}\n just now.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n <List.Content>\n <List.Header as='a'>Stevie Feliciano</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>Bob's Burgers</b>\n </a>{' '}\n 10 hours ago.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <List.Content>\n <List.Header as='a'>Elliot Fu</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>The Godfather Part 2</b>\n </a>{' '}\n yesterday.\n </List.Description>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleRelaxed\n","elements/List/Variations/ListExampleRelaxedHorizontal":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleRelaxedHorizontal = () => (\n <List horizontal relaxed>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header as='a'>Daniel Louise</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n <List.Content>\n <List.Header as='a'>Stevie Feliciano</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <List.Content>\n <List.Header as='a'>Elliot Fu</List.Header>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleRelaxedHorizontal\n","elements/List/Variations/ListExampleSelection":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleSelection = () => (\n <List selection verticalAlign='middle'>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/helen.jpg' />\n <List.Content>\n <List.Header>Helen</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n <List.Content>\n <List.Header>Christian</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header>Daniel</List.Header>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleSelection\n","elements/List/Variations/ListExampleSizes":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleSizes = () => {\n const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']\n\n return (\n <div>\n {sizes.map((size) => (\n <div key={size}>\n <List divided horizontal size={size}>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/helen.jpg' />\n <List.Content>\n <List.Header>Helen</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n <List.Content>\n <List.Header>Christian</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header>Daniel</List.Header>\n </List.Content>\n </List.Item>\n </List>\n\n <br />\n </div>\n ))}\n </div>\n )\n}\n\nexport default ListExampleSizes\n","elements/List/Variations/ListExampleVeryRelaxed":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleVeryRelaxed = () => (\n <List relaxed='very'>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header as='a'>Daniel Louise</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>Arrested Development</b>\n </a>{' '}\n just now.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n <List.Content>\n <List.Header as='a'>Stevie Feliciano</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>Bob's Burgers</b>\n </a>{' '}\n 10 hours ago.\n </List.Description>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <List.Content>\n <List.Header as='a'>Elliot Fu</List.Header>\n <List.Description>\n Last seen watching{' '}\n <a>\n <b>The Godfather Part 2</b>\n </a>{' '}\n yesterday.\n </List.Description>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleVeryRelaxed\n","elements/List/Variations/ListExampleVeryRelaxedHorizontal":"import React from 'react'\nimport { Image, List } from 'semantic-ui-react'\n\nconst ListExampleVeryRelaxedHorizontal = () => (\n <List horizontal relaxed='very'>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/daniel.jpg' />\n <List.Content>\n <List.Header as='a'>Daniel Louise</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n <List.Content>\n <List.Header as='a'>Stevie Feliciano</List.Header>\n </List.Content>\n </List.Item>\n <List.Item>\n <Image avatar src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <List.Content>\n <List.Header as='a'>Elliot Fu</List.Header>\n </List.Content>\n </List.Item>\n </List>\n)\n\nexport default ListExampleVeryRelaxedHorizontal\n","elements/Placeholder/Types/PlaceholderExampleCard":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Button, Card, Divider, Image, Placeholder } from 'semantic-ui-react'\n\nconst cards = [\n {\n avatar: '/images/avatar/large/helen.jpg',\n date: 'Joined in 2013',\n header: 'Helen',\n description: 'Primary Contact',\n },\n {\n avatar: '/images/avatar/large/matthew.png',\n date: 'Joined in 2013',\n header: 'Matthew',\n description: 'Primary Contact',\n },\n {\n avatar: '/images/avatar/large/molly.png',\n date: 'Joined in 2013',\n header: 'Molly',\n description: 'Primary Contact',\n },\n]\n\nexport default class PlaceholderExampleCard extends Component {\n state = { loading: false }\n\n handleLoadingClick = () => {\n this.setState({ loading: true })\n\n setTimeout(() => {\n this.setState({ loading: false })\n }, 3000)\n }\n\n render() {\n const { loading } = this.state\n\n return (\n <>\n <Button loading={loading} onClick={this.handleLoadingClick} primary>\n Simulate loading\n </Button>\n <Divider />\n\n <Card.Group doubling itemsPerRow={3} stackable>\n {_.map(cards, (card) => (\n <Card key={card.header}>\n {loading ? (\n <Placeholder>\n <Placeholder.Image square />\n </Placeholder>\n ) : (\n <Image src={card.avatar} />\n )}\n\n <Card.Content>\n {loading ? (\n <Placeholder>\n <Placeholder.Header>\n <Placeholder.Line length='very short' />\n <Placeholder.Line length='medium' />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line length='short' />\n </Placeholder.Paragraph>\n </Placeholder>\n ) : (\n <>\n <Card.Header>{card.header}</Card.Header>\n <Card.Meta>{card.date}</Card.Meta>\n <Card.Description>{card.description}</Card.Description>\n </>\n )}\n </Card.Content>\n\n <Card.Content extra>\n <Button disabled={loading} primary>\n Add\n </Button>\n <Button disabled={loading}>Delete</Button>\n </Card.Content>\n </Card>\n ))}\n </Card.Group>\n </>\n )\n }\n}\n","elements/Placeholder/Types/PlaceholderExampleGrid":"import React from 'react'\nimport { Grid, Placeholder, Segment } from 'semantic-ui-react'\n\nconst PlaceholderExampleGrid = () => (\n <Grid columns={3} stackable>\n <Grid.Column>\n <Segment raised>\n <Placeholder>\n <Placeholder.Header image>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line length='medium' />\n <Placeholder.Line length='short' />\n </Placeholder.Paragraph>\n </Placeholder>\n </Segment>\n </Grid.Column>\n\n <Grid.Column>\n <Segment raised>\n <Placeholder>\n <Placeholder.Header image>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line length='medium' />\n <Placeholder.Line length='short' />\n </Placeholder.Paragraph>\n </Placeholder>\n </Segment>\n </Grid.Column>\n\n <Grid.Column>\n <Segment raised>\n <Placeholder>\n <Placeholder.Header image>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line length='medium' />\n <Placeholder.Line length='short' />\n </Placeholder.Paragraph>\n </Placeholder>\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default PlaceholderExampleGrid\n","elements/Placeholder/Types/PlaceholderExamplePlaceholder":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExamplePlaceholder = () => (\n <Placeholder>\n <Placeholder.Header image>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Paragraph>\n </Placeholder>\n)\n\nexport default PlaceholderExamplePlaceholder\n","elements/Placeholder/Content/PlaceholderExampleHeader":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleHeader = () => (\n <Placeholder>\n <Placeholder.Header>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n </Placeholder>\n)\n\nexport default PlaceholderExampleHeader\n","elements/Placeholder/Content/PlaceholderExampleHeaderImage":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleHeaderImage = () => (\n <Placeholder>\n <Placeholder.Header image>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n </Placeholder>\n)\n\nexport default PlaceholderExampleHeaderImage\n","elements/Placeholder/Content/PlaceholderExampleImage":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleImage = () => (\n <Placeholder style={{ height: 150, width: 150 }}>\n <Placeholder.Image />\n </Placeholder>\n)\n\nexport default PlaceholderExampleImage\n","elements/Placeholder/Content/PlaceholderExampleImageRectangular":"import React from 'react'\nimport { Card, Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleImageRectangular = () => (\n <Card.Group itemsPerRow={3}>\n <Card>\n <Card.Content>\n <Placeholder>\n <Placeholder.Image rectangular />\n </Placeholder>\n </Card.Content>\n </Card>\n <Card>\n <Card.Content>\n <Placeholder>\n <Placeholder.Image rectangular />\n </Placeholder>\n </Card.Content>\n </Card>\n <Card>\n <Card.Content>\n <Placeholder>\n <Placeholder.Image rectangular />\n </Placeholder>\n </Card.Content>\n </Card>\n </Card.Group>\n)\n\nexport default PlaceholderExampleImageRectangular\n","elements/Placeholder/Content/PlaceholderExampleImageSquare":"import React from 'react'\nimport { Card, Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleImageSquare = () => (\n <Card.Group itemsPerRow={3}>\n <Card>\n <Card.Content>\n <Placeholder>\n <Placeholder.Image square />\n </Placeholder>\n </Card.Content>\n </Card>\n <Card>\n <Card.Content>\n <Placeholder>\n <Placeholder.Image square />\n </Placeholder>\n </Card.Content>\n </Card>\n <Card>\n <Card.Content>\n <Placeholder>\n <Placeholder.Image square />\n </Placeholder>\n </Card.Content>\n </Card>\n </Card.Group>\n)\n\nexport default PlaceholderExampleImageSquare\n","elements/Placeholder/Content/PlaceholderExampleLine":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleLine = () => (\n <Placeholder>\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder>\n)\n\nexport default PlaceholderExampleLine\n","elements/Placeholder/Content/PlaceholderExampleParagraph":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleParagraph = () => (\n <Placeholder>\n <Placeholder.Paragraph>\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Paragraph>\n <Placeholder.Paragraph>\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Paragraph>\n </Placeholder>\n)\n\nexport default PlaceholderExampleParagraph\n","elements/Placeholder/Variations/PlaceholderExampleFluid":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleFluid = () => (\n <Placeholder fluid>\n <Placeholder.Header image>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Paragraph>\n </Placeholder>\n)\n\nexport default PlaceholderExampleFluid\n","elements/Placeholder/Variations/PlaceholderExampleInverted":"import React from 'react'\nimport { Placeholder, Segment } from 'semantic-ui-react'\n\nconst PlaceholderExampleInverted = () => (\n <Segment inverted>\n <Placeholder inverted>\n <Placeholder.Header image>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line />\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Paragraph>\n </Placeholder>\n </Segment>\n)\n\nexport default PlaceholderExampleInverted\n","elements/Placeholder/Variations/PlaceholderExampleLineLength":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleLineLength = () => (\n <Placeholder>\n <Placeholder.Line length='full' />\n <Placeholder.Line length='very long' />\n <Placeholder.Line length='long' />\n <Placeholder.Line length='medium' />\n <Placeholder.Line length='short' />\n <Placeholder.Line length='very short' />\n </Placeholder>\n)\n\nexport default PlaceholderExampleLineLength\n","elements/Placeholder/Variations/PlaceholderExampleLineLengthWithHeader":"import React from 'react'\nimport { Placeholder } from 'semantic-ui-react'\n\nconst PlaceholderExampleLineLengthWithHeader = () => (\n <Placeholder>\n <Placeholder.Header image>\n <Placeholder.Line length='medium' />\n <Placeholder.Line length='full' />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line length='full' />\n <Placeholder.Line length='medium' />\n </Placeholder.Paragraph>\n </Placeholder>\n)\n\nexport default PlaceholderExampleLineLengthWithHeader\n","elements/Rail/Variations/RailExampleAttached":"import React from 'react'\nimport { Grid, Image, Rail, Segment } from 'semantic-ui-react'\n\nconst RailExampleAttached = () => (\n <Grid centered columns={3}>\n <Grid.Column>\n <Segment textAlign='center'>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Rail attached position='left'>\n <Segment>Left Rail Content</Segment>\n </Rail>\n\n <Rail attached position='right'>\n <Segment>Right Rail Content</Segment>\n </Rail>\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default RailExampleAttached\n","elements/Rail/Variations/RailExampleAttachedInternal":"import React from 'react'\nimport { Image, Rail, Segment } from 'semantic-ui-react'\n\nconst RailExampleAttachedInternal = () => (\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Rail attached internal position='left'>\n <Segment>Left Rail Content</Segment>\n </Rail>\n\n <Rail attached internal position='right'>\n <Segment>Right Rail Content</Segment>\n </Rail>\n </Segment>\n)\n\nexport default RailExampleAttachedInternal\n","elements/Rail/Variations/RailExampleClose":"import React from 'react'\nimport { Grid, Image, Rail, Segment } from 'semantic-ui-react'\n\nconst RailExampleClose = () => (\n <Grid centered columns={3}>\n <Grid.Column>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Rail close position='left'>\n <Segment>Left Rail Content</Segment>\n </Rail>\n\n <Rail close position='right'>\n <Segment>Right Rail Content</Segment>\n </Rail>\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default RailExampleClose\n","elements/Rail/Variations/RailExampleCloseVery":"import React from 'react'\nimport { Grid, Image, Rail, Segment } from 'semantic-ui-react'\n\nconst RailExampleCloseVery = () => (\n <Grid centered columns={3}>\n <Grid.Column>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Rail close='very' position='left'>\n <Segment>Left Rail Content</Segment>\n </Rail>\n\n <Rail close='very' position='right'>\n <Segment>Right Rail Content</Segment>\n </Rail>\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default RailExampleCloseVery\n","elements/Rail/Variations/RailExampleSize":"import PropTypes from 'prop-types'\nimport React from 'react'\nimport { Grid, Image, Rail, Segment } from 'semantic-ui-react'\n\nconst Wrapper = ({ children }) => (\n <Grid columns={3} textAlign='center'>\n <Grid.Column>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n {children}\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nWrapper.propTypes = {\n children: PropTypes.node,\n}\n\nconst RailExampleSize = () => (\n <div>\n <Wrapper>\n <Rail size='mini' position='left'>\n Mini Left Rail\n </Rail>\n <Rail size='tiny' position='right'>\n Tiny Right Rail\n </Rail>\n </Wrapper>\n <Wrapper>\n <Rail size='small' position='left'>\n Small Left Rail\n </Rail>\n <Rail size='large' position='right'>\n Large Right Rail\n </Rail>\n </Wrapper>\n <Wrapper>\n <Rail size='big' position='left'>\n Big Left Rail\n </Rail>\n <Rail size='huge' position='right'>\n Huge Right Rail\n </Rail>\n </Wrapper>\n <Wrapper>\n <Rail size='massive' position='right'>\n Massive Right Rail\n </Rail>\n </Wrapper>\n </div>\n)\n\nexport default RailExampleSize\n","elements/Rail/Types/RailExampleDividing":"import React from 'react'\nimport { Grid, Image, Rail, Segment } from 'semantic-ui-react'\n\nconst RailExampleDividing = () => (\n <Grid centered columns={3}>\n <Grid.Column>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Rail dividing position='left'>\n <Segment>Left Rail Content</Segment>\n </Rail>\n\n <Rail dividing position='right'>\n <Segment>Right Rail Content</Segment>\n </Rail>\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default RailExampleDividing\n","elements/Rail/Types/RailExampleInternal":"import React from 'react'\nimport { Image, Rail, Segment } from 'semantic-ui-react'\n\nconst RailExampleInternal = () => (\n <Segment textAlign='center'>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Rail internal position='left'>\n <Segment>Left Rail Content</Segment>\n </Rail>\n\n <Rail internal position='right'>\n <Segment>Right Rail Content</Segment>\n </Rail>\n </Segment>\n)\n\nexport default RailExampleInternal\n","elements/Rail/Types/RailExampleRail":"import React from 'react'\nimport { Grid, Image, Rail, Segment } from 'semantic-ui-react'\n\nconst RailExampleRail = () => (\n <Grid centered columns={3}>\n <Grid.Column>\n <Segment>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\n <Rail position='left'>\n <Segment>Left Rail Content</Segment>\n </Rail>\n\n <Rail position='right'>\n <Segment>Right Rail Content</Segment>\n </Rail>\n </Segment>\n </Grid.Column>\n </Grid>\n)\n\nexport default RailExampleRail\n","elements/Reveal/Content/RevealExampleHidden":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleHidden = () => (\n <Reveal animated='small fade'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/ade.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleHidden\n","elements/Reveal/Content/RevealExampleVisible":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleVisible = () => (\n <Reveal animated='small fade'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/avatar/large/ade.jpg' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleVisible\n","elements/Reveal/Types/RevealExampleFade":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleFade = () => (\n <Reveal animated='fade'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/ade.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleFade\n","elements/Reveal/Types/RevealExampleFadeSmall":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleFadeSmall = () => (\n <Reveal animated='small fade'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/ade.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleFadeSmall\n","elements/Reveal/Types/RevealExampleMove":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleMove = () => (\n <Reveal animated='move'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/chris.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleMove\n","elements/Reveal/Types/RevealExampleMoveDown":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleMoveDown = () => (\n <Reveal animated='move down'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/nan.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleMoveDown\n","elements/Reveal/Types/RevealExampleMoveRight":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleMoveRight = () => (\n <Reveal animated='move right'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/jenny.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleMoveRight\n","elements/Reveal/Types/RevealExampleMoveUp":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleMoveUp = () => (\n <Reveal animated='move up'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/justen.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleMoveUp\n","elements/Reveal/Types/RevealExampleRotate":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleRotate = () => (\n <Reveal animated='rotate'>\n <Reveal.Content visible>\n <Image circular size='small' src='https://react.semantic-ui.com/images/wireframe/square-image.png' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image circular size='small' src='https://react.semantic-ui.com/images/avatar/large/stevie.jpg' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleRotate\n","elements/Reveal/Types/RevealExampleRotateLeft":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleRotateLeft = () => (\n <Reveal animated='rotate left'>\n <Reveal.Content visible>\n <Image circular size='small' src='https://react.semantic-ui.com/images/wireframe/square-image.png' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image circular size='small' src='https://react.semantic-ui.com/images/avatar/large/veronika.jpg' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleRotateLeft\n","elements/Reveal/States/RevealExampleActive":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleActive = () => (\n <Reveal active animated='move'>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/nan.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleActive\n","elements/Reveal/States/RevealExampleDisabled":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleDisabled = () => (\n <Reveal animated='move' disabled>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/chris.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleDisabled\n","elements/Reveal/Variations/RevealExampleInstant":"import React from 'react'\nimport { Image, Reveal } from 'semantic-ui-react'\n\nconst RevealExampleInstant = () => (\n <Reveal animated='move' instant>\n <Reveal.Content visible>\n <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='small' />\n </Reveal.Content>\n <Reveal.Content hidden>\n <Image src='https://react.semantic-ui.com/images/avatar/large/chris.jpg' size='small' />\n </Reveal.Content>\n </Reveal>\n)\n\nexport default RevealExampleInstant\n","elements/Segment/Groups/SegmentExampleHorizontalSegments":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleHorizontalSegments = () => (\n <Segment.Group horizontal>\n <Segment>Left</Segment>\n <Segment>Middle</Segment>\n <Segment>Right</Segment>\n </Segment.Group>\n)\n\nexport default SegmentExampleHorizontalSegments\n","elements/Segment/Groups/SegmentExampleNestedSegments":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleNestedSegments = () => (\n <Segment.Group>\n <Segment>Top</Segment>\n <Segment.Group>\n <Segment>Nested Top</Segment>\n <Segment>Nested Middle</Segment>\n <Segment>Nested Bottom</Segment>\n </Segment.Group>\n <Segment.Group horizontal>\n <Segment>Top</Segment>\n <Segment>Middle</Segment>\n <Segment>Bottom</Segment>\n </Segment.Group>\n <Segment>Bottom</Segment>\n </Segment.Group>\n)\n\nexport default SegmentExampleNestedSegments\n","elements/Segment/Groups/SegmentExamplePiledSegments":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExamplePiledSegments = () => (\n <Segment.Group piled>\n <Segment>Top</Segment>\n <Segment>Middle</Segment>\n <Segment>Bottom</Segment>\n </Segment.Group>\n)\n\nexport default SegmentExamplePiledSegments\n","elements/Segment/Groups/SegmentExampleRaisedSegments":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleRaisedSegments = () => (\n <Segment.Group raised>\n <Segment>Left</Segment>\n <Segment>Middle</Segment>\n <Segment>Right</Segment>\n </Segment.Group>\n)\n\nexport default SegmentExampleRaisedSegments\n","elements/Segment/Groups/SegmentExampleSegments":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleSegments = () => (\n <Segment.Group>\n <Segment>Top</Segment>\n <Segment>Middle</Segment>\n <Segment>Middle</Segment>\n <Segment>Middle</Segment>\n <Segment>Bottom</Segment>\n </Segment.Group>\n)\n\nexport default SegmentExampleSegments\n","elements/Segment/Groups/SegmentExampleStackedSegments":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleStackedSegments = () => (\n <Segment.Group stacked>\n <Segment>Top</Segment>\n <Segment>Middle</Segment>\n <Segment>Bottom</Segment>\n </Segment.Group>\n)\n\nexport default SegmentExampleStackedSegments\n","elements/Segment/States/SegmentExampleDisabled":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleDisabled = () => (\n <Segment disabled>Disabled content</Segment>\n)\n\nexport default SegmentExampleDisabled\n","elements/Segment/States/SegmentExampleLoading":"import React from 'react'\nimport { Image, Segment } from 'semantic-ui-react'\n\nconst SegmentExampleLoading = () => (\n <Segment loading>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n)\n\nexport default SegmentExampleLoading\n","elements/Segment/Types/SegmentExamplePiled":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExamplePiled = () => (\n <Segment piled>Pellentesque habitant morbi tristique senectus.</Segment>\n)\n\nexport default SegmentExamplePiled\n","elements/Segment/Types/SegmentExamplePlaceholder":"import React from 'react'\nimport { Button, Header, Icon, Segment } from 'semantic-ui-react'\n\nconst SegmentExamplePlaceholder = () => (\n <Segment placeholder>\n <Header icon>\n <Icon name='pdf file outline' />\n No documents are listed for this customer.\n </Header>\n <Button primary>Add Document</Button>\n </Segment>\n)\n\nexport default SegmentExamplePlaceholder\n","elements/Segment/Types/SegmentExamplePlaceholderGrid":"import React from 'react'\nimport {\n Button,\n Divider,\n Grid,\n Header,\n Icon,\n Search,\n Segment,\n} from 'semantic-ui-react'\n\nconst SegmentExamplePlaceholderGrid = () => (\n <Segment placeholder>\n <Grid columns={2} stackable textAlign='center'>\n <Divider vertical>Or</Divider>\n\n <Grid.Row verticalAlign='middle'>\n <Grid.Column>\n <Header icon>\n <Icon name='search' />\n Find Country\n </Header>\n\n <Search placeholder='Search countries...' />\n </Grid.Column>\n\n <Grid.Column>\n <Header icon>\n <Icon name='world' />\n Add New Country\n </Header>\n <Button primary>Create</Button>\n </Grid.Column>\n </Grid.Row>\n </Grid>\n </Segment>\n)\n\nexport default SegmentExamplePlaceholderGrid\n","elements/Segment/Types/SegmentExamplePlaceholderInline":"import React from 'react'\nimport { Button, Header, Icon, Segment } from 'semantic-ui-react'\n\nconst SegmentExamplePlaceholderInline = () => (\n <Segment placeholder>\n <Header icon>\n <Icon name='search' />\n We don't have any documents matching your query.\n </Header>\n <Segment.Inline>\n <Button primary>Clear Query</Button>\n <Button>Add Document</Button>\n </Segment.Inline>\n </Segment>\n)\n\nexport default SegmentExamplePlaceholderInline\n","elements/Segment/Types/SegmentExampleRaised":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleRaised = () => (\n <Segment raised>Pellentesque habitant morbi tristique senectus.</Segment>\n)\n\nexport default SegmentExampleRaised\n","elements/Segment/Types/SegmentExampleSegment":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleSegment = () => (\n <Segment>Pellentesque habitant morbi tristique senectus.</Segment>\n)\n\nexport default SegmentExampleSegment\n","elements/Segment/Types/SegmentExampleStacked":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleStacked = () => (\n <Segment stacked>Pellentesque habitant morbi tristique senectus.</Segment>\n)\n\nexport default SegmentExampleStacked\n","elements/Segment/Types/SegmentExampleVerticalSegment":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleVerticalSegment = () => (\n <div>\n <Segment vertical>\n Te eum doming eirmod, nominati pertinacia argumentum ad his.\n </Segment>\n <Segment vertical>Pellentesque habitant morbi tristique senectus.</Segment>\n <Segment vertical>\n Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id.\n </Segment>\n </div>\n)\n\nexport default SegmentExampleVerticalSegment\n","elements/Segment/Variations/SegmentExampleAttached":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleAttached = () => (\n <div>\n <Segment attached='top'>This segment is on top</Segment>\n <Segment attached>This segment is attached on both sides</Segment>\n <Segment attached='bottom'>This segment is on bottom</Segment>\n </div>\n)\n\nexport default SegmentExampleAttached\n","elements/Segment/Variations/SegmentExampleAttachedComplex":"import React from 'react'\nimport { Header, Icon, Message, Segment } from 'semantic-ui-react'\n\nconst SegmentExampleAttachedComplex = () => (\n <div>\n <Header as='h5' attached='top'>\n Dogs\n </Header>\n <Segment attached>Dogs are one type of animal.</Segment>\n <Header as='h5' attached>\n Cats\n </Header>\n <Segment attached>\n Cats are thought of as being related to dogs, but only humans think this.\n </Segment>\n <Header as='h5' attached>\n Lions\n </Header>\n <Segment attached>\n Humans don't think of lions as being like cats, but they are.\n </Segment>\n <Message warning attached='bottom'>\n <Icon name='warning' />\n You've reached the end of this content segment!\n </Message>\n </div>\n)\n\nexport default SegmentExampleAttachedComplex\n","elements/Segment/Variations/SegmentExampleBasic":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleBasic = () => (\n <Segment basic>\n Pellentesque habitant morbi tristique senectus et netus et malesuada fames\n ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,\n tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean\n ultricies mi vitae est. Mauris placerat eleifend leo.\n </Segment>\n)\n\nexport default SegmentExampleBasic\n","elements/Segment/Variations/SegmentExampleCircular":"import React from 'react'\nimport { Header, Segment } from 'semantic-ui-react'\n\nconst square = { width: 175, height: 175 }\n\nconst SegmentExampleCircular = () => (\n <div>\n <Segment circular style={square}>\n <Header as='h2'>\n Sale!\n <Header.Subheader>$10.99</Header.Subheader>\n </Header>\n </Segment>\n <Segment circular inverted style={square}>\n <Header as='h2' inverted>\n Buy Now\n <Header.Subheader>$10.99</Header.Subheader>\n </Header>\n </Segment>\n </div>\n)\n\nexport default SegmentExampleCircular\n","elements/Segment/Variations/SegmentExampleClearing":"import React from 'react'\nimport { Button, Segment } from 'semantic-ui-react'\n\nconst SegmentExampleClearing = () => (\n <Segment clearing>\n <Button floated='right'>floated</Button>\n </Segment>\n)\n\nexport default SegmentExampleClearing\n","elements/Segment/Variations/SegmentExampleColored":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleColored = () => (\n <div>\n <Segment color='red'>Red</Segment>\n <Segment color='orange'>Orange</Segment>\n <Segment color='yellow'>Yellow</Segment>\n <Segment color='olive'>Olive</Segment>\n <Segment color='green'>Green</Segment>\n <Segment color='teal'>Teal</Segment>\n <Segment color='blue'>Blue</Segment>\n <Segment color='violet'>Violet</Segment>\n <Segment color='purple'>Purple</Segment>\n <Segment color='pink'>Pink</Segment>\n <Segment color='brown'>Brown</Segment>\n <Segment color='grey'>Grey</Segment>\n <Segment color='black'>Black</Segment>\n </div>\n)\n\nexport default SegmentExampleColored\n","elements/Segment/Variations/SegmentExampleColoredInverted":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleColoredInverted = () => (\n <div>\n <Segment inverted color='red'>\n Red\n </Segment>\n <Segment inverted color='orange'>\n Orange\n </Segment>\n <Segment inverted color='yellow'>\n Yellow\n </Segment>\n <Segment inverted color='olive'>\n Olive\n </Segment>\n <Segment inverted color='green'>\n Green\n </Segment>\n <Segment inverted color='teal'>\n Teal\n </Segment>\n <Segment inverted color='blue'>\n Blue\n </Segment>\n <Segment inverted color='violet'>\n Violet\n </Segment>\n <Segment inverted color='purple'>\n Purple\n </Segment>\n <Segment inverted color='pink'>\n Pink\n </Segment>\n <Segment inverted color='brown'>\n Brown\n </Segment>\n <Segment inverted color='grey'>\n Grey\n </Segment>\n <Segment inverted color='black'>\n Black\n </Segment>\n </div>\n)\n\nexport default SegmentExampleColoredInverted\n","elements/Segment/Variations/SegmentExampleCompact":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleCompact = () => <Segment compact>Compact content.</Segment>\n\nexport default SegmentExampleCompact\n","elements/Segment/Variations/SegmentExampleCompactGroup":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleCompactGroup = () => (\n <Segment.Group compact>\n <Segment>Pellentesque habitant morbi</Segment>\n <Segment>Pellentesque habitant morbi</Segment>\n </Segment.Group>\n)\n\nexport default SegmentExampleCompactGroup\n","elements/Segment/Variations/SegmentExampleEmphasis":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleEmphasis = () => (\n <div>\n <Segment>\n I'm here to tell you something, and you will probably read me first.\n </Segment>\n <Segment secondary>\n I am pretty noticeable but you might check out other content before you\n look at me.\n </Segment>\n <Segment tertiary>If you notice me you must be looking very hard.</Segment>\n </div>\n)\n\nexport default SegmentExampleEmphasis\n","elements/Segment/Variations/SegmentExampleEmphasisColoredInverted":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleEmphasisColoredInverted = () => (\n <div>\n <Segment inverted color='red'>\n I'm here to tell you something, and you will probably read me first.\n </Segment>\n <Segment inverted color='red' secondary>\n I am pretty noticeable but you might check out other content before you\n look at me.\n </Segment>\n <Segment inverted color='red' tertiary>\n If you notice me you must be looking very hard.\n </Segment>\n </div>\n)\n\nexport default SegmentExampleEmphasisColoredInverted\n","elements/Segment/Variations/SegmentExampleEmphasisInverted":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleEmphasisInverted = () => (\n <div>\n <Segment inverted>\n I'm here to tell you something, and you will probably read me first.\n </Segment>\n <Segment inverted secondary>\n I am pretty noticeable but you might check out other content before you\n look at me.\n </Segment>\n <Segment inverted tertiary>\n If you notice me you must be looking very hard.\n </Segment>\n </div>\n)\n\nexport default SegmentExampleEmphasisInverted\n","elements/Segment/Variations/SegmentExampleFloated":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleFloated = () => (\n <div>\n <Segment floated='left'>This segment will appear to the left</Segment>\n <Segment floated='right'>This segment will appear to the right</Segment>\n </div>\n)\n\nexport default SegmentExampleFloated\n","elements/Segment/Variations/SegmentExampleGroupSizes":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentGroupSizesExample = () => {\n const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']\n\n return (\n <div>\n {sizes.map((size) => (\n <Segment.Group key={size} size={size}>\n <Segment>It's a {size} segment</Segment>\n <Segment>And it's a {size} segment, too</Segment>\n </Segment.Group>\n ))}\n </div>\n )\n}\n\nexport default SegmentGroupSizesExample\n","elements/Segment/Variations/SegmentExampleInverted":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleInverted = () => (\n <Segment inverted>Inverted content.</Segment>\n)\n\nexport default SegmentExampleInverted\n","elements/Segment/Variations/SegmentExamplePadded":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExamplePadded = () => <Segment padded>Padded content.</Segment>\n\nexport default SegmentExamplePadded\n","elements/Segment/Variations/SegmentExampleSizes":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleSizes = () => {\n const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']\n\n return (\n <div>\n {sizes.map((size) => (\n <Segment key={size} size={size}>\n It's a {size} segment\n </Segment>\n ))}\n </div>\n )\n}\n\nexport default SegmentExampleSizes\n","elements/Segment/Variations/SegmentExampleTextAlignment":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleTextAlignment = () => (\n <div>\n <Segment textAlign='right'>Right aligned content.</Segment>\n <Segment textAlign='left'>Left aligned content.</Segment>\n <Segment textAlign='center'>Center aligned content.</Segment>\n </div>\n)\n\nexport default SegmentExampleTextAlignment\n","elements/Segment/Variations/SegmentExampleVeryPadded":"import React from 'react'\nimport { Segment } from 'semantic-ui-react'\n\nconst SegmentExampleVeryPadded = () => (\n <Segment padded='very'>Very padded content.</Segment>\n)\n\nexport default SegmentExampleVeryPadded\n","elements/Step/Content/StepExampleDescription":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleDescription = () => (\n <Step.Group>\n <Step>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleDescription\n","elements/Step/Content/StepExampleDescriptionShorthand":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleDescriptionShorthand = () => (\n <Step.Group>\n <Step title='Shipping' description='Choose your shipping options' />\n </Step.Group>\n)\n\nexport default StepExampleDescriptionShorthand\n","elements/Step/Content/StepExampleIcon":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleIcon = () => (\n <Step.Group>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleIcon\n","elements/Step/Content/StepExampleIconShorthand":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleIconShorthand = () => (\n <Step.Group>\n <Step\n icon='truck'\n title='Shipping'\n description='Choose your shipping options'\n />\n </Step.Group>\n)\n\nexport default StepExampleIconShorthand\n","elements/Step/Content/StepExampleLink":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleLink = () => (\n <Step.Group>\n <Step link>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n <Step link>\n <Icon name='credit card' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleLink\n","elements/Step/Content/StepExampleLinkClickable":"import React, { Component } from 'react'\nimport { Step } from 'semantic-ui-react'\n\nexport default class StepExampleLinkClickable extends Component {\n state = {}\n\n handleClick = (e, { title }) => this.setState({ active: title })\n\n render() {\n const { active } = this.state\n\n return (\n <Step.Group>\n <Step\n active={active === 'Shipping'}\n icon='truck'\n link\n onClick={this.handleClick}\n title='Shipping'\n description='Choose your shipping options'\n />\n <Step\n active={active === 'Billing'}\n icon='credit card'\n link\n onClick={this.handleClick}\n title='Billing'\n description='Enter billing information'\n />\n </Step.Group>\n )\n }\n}\n","elements/Step/Content/StepExampleLinkHref":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleLinkHref = () => (\n <Step.Group>\n <Step active href='http://google.com'>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n <Step href='http://google.com'>\n <Icon name='credit card' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleLinkHref\n","elements/Step/Groups/StepExampleGroup":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleGroup = () => (\n <Step.Group>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleGroup\n","elements/Step/Groups/StepExampleGroupShorthand":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst steps = [\n {\n key: 'shipping',\n icon: 'truck',\n title: 'Shipping',\n description: 'Choose your shipping options',\n },\n {\n key: 'billing',\n active: true,\n icon: 'payment',\n title: 'Billing',\n description: 'Enter billing information',\n },\n { key: 'confirm', disabled: true, icon: 'info', title: 'Confirm Order' },\n]\n\nconst StepExampleGroupShorthand = () => <Step.Group items={steps} />\n\nexport default StepExampleGroupShorthand\n","elements/Step/Groups/StepExampleOrdered":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleOrdered = () => (\n <Step.Group ordered>\n <Step completed>\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step completed>\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleOrdered\n","elements/Step/Groups/StepExampleVertical":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleVertical = () => (\n <Step.Group vertical>\n <Step completed>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step completed>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleVertical\n","elements/Step/States/StepExampleActive":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleActive = () => (\n <Step.Group>\n <Step active>\n <Icon name='credit card' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleActive\n","elements/Step/States/StepExampleCompleted":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleCompleted = () => (\n <Step.Group>\n <Step completed>\n <Icon name='credit card' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleCompleted\n","elements/Step/States/StepExampleCompletedOrdered":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleCompletedOrdered = () => (\n <Step.Group ordered>\n <Step completed>\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleCompletedOrdered\n","elements/Step/States/StepExampleDisabled":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleDisabled = () => (\n <Step.Group>\n <Step disabled>Billing</Step>\n </Step.Group>\n)\n\nexport default StepExampleDisabled\n","elements/Step/Types/StepExampleStep":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleStep = () => (\n <Step.Group>\n <Step>Shipping</Step>\n </Step.Group>\n)\n\nexport default StepExampleStep\n","elements/Step/Types/StepExampleStepShorthand":"import React from 'react'\nimport { Step } from 'semantic-ui-react'\n\nconst StepExampleStepShorthand = () => (\n <Step.Group>\n <Step content='Shipping' />\n </Step.Group>\n)\n\nexport default StepExampleStepShorthand\n","elements/Step/Variations/StepExampleAttached":"import React from 'react'\nimport { Icon, Image, Segment, Step } from 'semantic-ui-react'\n\nconst StepExampleAttached = () => (\n <div>\n <Step.Group attached='top'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n\n <Segment attached>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n\n <Step.Group attached='bottom'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n </div>\n)\n\nexport default StepExampleAttached\n","elements/Step/Variations/StepExampleEvenlyDivided":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleEvenlyDivided = () => (\n <Step.Group widths={3}>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n </Step.Content>\n </Step>\n <Step active>\n <Icon name='credit card' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n </Step.Content>\n </Step>\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleEvenlyDivided\n","elements/Step/Variations/StepExampleEvenlyDividedAnother":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleEvenlyDividedAnother = () => (\n <Step.Group widths={2}>\n <Step active>\n <Icon name='credit card' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n </Step.Content>\n </Step>\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleEvenlyDividedAnother\n","elements/Step/Variations/StepExampleFluid":"import React from 'react'\nimport { Icon, Grid, Step } from 'semantic-ui-react'\n\nconst StepExampleFluid = () => (\n <Grid columns={2}>\n <Grid.Column>\n <Step.Group fluid vertical>\n <Step completed>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='dollar' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n </Grid.Column>\n\n <Grid.Column>\n <p>The steps take up the entire column width</p>\n </Grid.Column>\n </Grid>\n)\n\nexport default StepExampleFluid\n","elements/Step/Variations/StepExampleSizeBig":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleSizeBig = () => (\n <Step.Group size='big'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleSizeBig\n","elements/Step/Variations/StepExampleSizeHuge":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleSizeHuge = () => (\n <Step.Group size='huge'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleSizeHuge\n","elements/Step/Variations/StepExampleSizeLarge":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleSizeLarge = () => (\n <Step.Group size='large'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleSizeLarge\n","elements/Step/Variations/StepExampleSizeMassive":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleSizeMassive = () => (\n <Step.Group size='massive'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleSizeMassive\n","elements/Step/Variations/StepExampleSizeMini":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleSizeMini = () => (\n <Step.Group size='mini'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n <Step.Description>Verify order details</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleSizeMini\n","elements/Step/Variations/StepExampleSizeSmall":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleSizeSmall = () => (\n <Step.Group size='small'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n <Step.Description>Verify order details</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleSizeSmall\n","elements/Step/Variations/StepExampleSizeTiny":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleSizeTiny = () => (\n <Step.Group size='tiny'>\n <Step>\n <Icon name='truck' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n\n <Step active>\n <Icon name='payment' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n\n <Step disabled>\n <Icon name='info' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n <Step.Description>Verify order details</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleSizeTiny\n","elements/Step/Variations/StepExampleStackable":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleStackable = () => (\n <Step.Group stackable='tablet'>\n <Step>\n <Icon name='plane' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n <Step active>\n <Icon name='dollar' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n <Step disabled>\n <Icon name='info circle' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n <Step.Description>Verify order details</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleStackable\n","elements/Step/Variations/StepExampleUnstackable":"import React from 'react'\nimport { Icon, Step } from 'semantic-ui-react'\n\nconst StepExampleUnstackable = () => (\n <Step.Group unstackable>\n <Step>\n <Icon name='plane' />\n <Step.Content>\n <Step.Title>Shipping</Step.Title>\n <Step.Description>Choose your shipping options</Step.Description>\n </Step.Content>\n </Step>\n <Step active>\n <Icon name='dollar' />\n <Step.Content>\n <Step.Title>Billing</Step.Title>\n <Step.Description>Enter billing information</Step.Description>\n </Step.Content>\n </Step>\n <Step disabled>\n <Icon name='info circle' />\n <Step.Content>\n <Step.Title>Confirm Order</Step.Title>\n <Step.Description>Verify order details</Step.Description>\n </Step.Content>\n </Step>\n </Step.Group>\n)\n\nexport default StepExampleUnstackable\n","views/Advertisement/Types/AdvertisementExampleAdvertisement":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleAdvertisement = () => (\n <Advertisement unit='medium rectangle'>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Advertisement>\n)\n\nexport default AdvertisementExampleAdvertisement\n","views/Advertisement/Types/AdvertisementExampleBanner":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleBanner = () => (\n <Advertisement unit='banner' test='Banner' />\n)\n\nexport default AdvertisementExampleBanner\n","views/Advertisement/Types/AdvertisementExampleBannerHalf":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleBannerHalf = () => (\n <Advertisement unit='half banner' test='Half Banner' />\n)\n\nexport default AdvertisementExampleBannerHalf\n","views/Advertisement/Types/AdvertisementExampleBannerTop":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleBannerTop = () => (\n <Advertisement unit='top banner' test='Top Banner' />\n)\n\nexport default AdvertisementExampleBannerTop\n","views/Advertisement/Types/AdvertisementExampleBannerVertical":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleBannerVertical = () => (\n <Advertisement unit='vertical banner' test='Vertical Banner' />\n)\n\nexport default AdvertisementExampleBannerVertical\n","views/Advertisement/Types/AdvertisementExampleBillboard":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleBillboard = () => (\n <Advertisement unit='billboard' test='Billboard' />\n)\n\nexport default AdvertisementExampleBillboard\n","views/Advertisement/Types/AdvertisementExampleButton":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleButton = () => (\n <Advertisement unit='button' test='Button' />\n)\n\nexport default AdvertisementExampleButton\n","views/Advertisement/Types/AdvertisementExampleCommonUnits":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleCommonUnits = () => (\n <div>\n <Advertisement unit='medium rectangle' test='Medium Rectangle' />\n <Advertisement unit='banner' test='Banner' />\n <Advertisement unit='leaderboard' test='Leaderboard' />\n <Advertisement unit='large rectangle' test='Large Rectangle' />\n <Advertisement unit='half page' test='Half Page' />\n </div>\n)\n\nexport default AdvertisementExampleCommonUnits\n","views/Advertisement/Types/AdvertisementExampleLargeLeaderboard":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleLargeLeaderboard = () => (\n <Advertisement unit='large leaderboard' test='Large Leaderboard' />\n)\n\nexport default AdvertisementExampleLargeLeaderboard\n","views/Advertisement/Types/AdvertisementExampleLargeRectangle":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleLargeRectangle = () => (\n <Advertisement unit='large rectangle' test='Large Rectangle' />\n)\n\nexport default AdvertisementExampleLargeRectangle\n","views/Advertisement/Types/AdvertisementExampleLeaderboard":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleLeaderboard = () => (\n <Advertisement unit='leaderboard' test='Leaderboard' />\n)\n\nexport default AdvertisementExampleLeaderboard\n","views/Advertisement/Types/AdvertisementExampleMobile":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleMobile = () => (\n <div>\n <Advertisement unit='mobile banner' test='Mobile Banner' />\n <Advertisement unit='mobile leaderboard' test='Mobile Leaderboard' />\n </div>\n)\n\nexport default AdvertisementExampleMobile\n","views/Advertisement/Types/AdvertisementExampleNetboard":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleNetboard = () => (\n <Advertisement unit='netboard' test='Netboard' />\n)\n\nexport default AdvertisementExampleNetboard\n","views/Advertisement/Types/AdvertisementExamplePanorama":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExamplePanorama = () => (\n <Advertisement unit='panorama' test='Panorama' />\n)\n\nexport default AdvertisementExamplePanorama\n","views/Advertisement/Types/AdvertisementExampleRectangle":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleRectangle = () => (\n <Advertisement unit='medium rectangle' test='Medium Rectangle' />\n)\n\nexport default AdvertisementExampleRectangle\n","views/Advertisement/Types/AdvertisementExampleSkyscraper":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleSkyscraper = () => (\n <Advertisement unit='skyscraper' test='Skyscraper' />\n)\n\nexport default AdvertisementExampleSkyscraper\n","views/Advertisement/Types/AdvertisementExampleSmallButton":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleSmallButton = () => (\n <Advertisement unit='small button' test='Small Button' />\n)\n\nexport default AdvertisementExampleSmallButton\n","views/Advertisement/Types/AdvertisementExampleSmallRectangle":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleSmallRectangle = () => (\n <Advertisement unit='small rectangle' test='Small Rectangle' />\n)\n\nexport default AdvertisementExampleSmallRectangle\n","views/Advertisement/Types/AdvertisementExampleSmallSquare":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleSmallSquare = () => (\n <Advertisement unit='small square' test='Small Square' />\n)\n\nexport default AdvertisementExampleSmallSquare\n","views/Advertisement/Types/AdvertisementExampleSquare":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleSquare = () => (\n <Advertisement unit='square' test='Square' />\n)\n\nexport default AdvertisementExampleSquare\n","views/Advertisement/Types/AdvertisementExampleSquareButton":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleSquareButton = () => (\n <Advertisement unit='square button' test='Square Button' />\n)\n\nexport default AdvertisementExampleSquareButton\n","views/Advertisement/Types/AdvertisementExampleVerticalRectangle":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleVerticalRectangle = () => (\n <Advertisement unit='vertical rectangle' test='Vertical Rectangle' />\n)\n\nexport default AdvertisementExampleVerticalRectangle\n","views/Advertisement/Types/AdvertisementExampleWideSkyscraper":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleWideSkyscraper = () => (\n <Advertisement unit='wide skyscraper' test='Wide Skyscraper' />\n)\n\nexport default AdvertisementExampleWideSkyscraper\n","views/Advertisement/Variations/AdvertisementExampleCentered":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleCentered = () => (\n <Advertisement unit='banner' centered test='Centered' />\n)\n\nexport default AdvertisementExampleCentered\n","views/Advertisement/Variations/AdvertisementExampleTest":"import React from 'react'\nimport { Advertisement } from 'semantic-ui-react'\n\nconst AdvertisementExampleTest = () => (\n <div>\n <Advertisement unit='medium rectangle' test='Ad Unit 1' />\n <Advertisement unit='large rectangle' test='Ad Unit 2' />\n </div>\n)\n\nexport default AdvertisementExampleTest\n","views/Card/Content/CardExampleContentBlock":"import React from 'react'\nimport { Card, Feed } from 'semantic-ui-react'\n\nconst CardExampleContentBlock = () => (\n <Card>\n <Card.Content>\n <Card.Header>Recent Activity</Card.Header>\n </Card.Content>\n <Card.Content>\n <Feed>\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/jenny.jpg' />\n <Feed.Content>\n <Feed.Date content='1 day ago' />\n <Feed.Summary>\n You added <a>Jenny Hess</a> to your <a>coworker</a> group.\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/molly.png' />\n <Feed.Content>\n <Feed.Date content='3 days ago' />\n <Feed.Summary>\n You added <a>Molly Malone</a> as a friend.\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/elliot.jpg' />\n <Feed.Content>\n <Feed.Date content='4 days ago' />\n <Feed.Summary>\n You added <a>Elliot Baker</a> to your <a>musicians</a> group.\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n </Card.Content>\n </Card>\n)\n\nexport default CardExampleContentBlock\n","views/Card/Content/CardExampleExtraContent":"import React from 'react'\nimport { Card, Icon } from 'semantic-ui-react'\n\nconst description = [\n 'Amy is a violinist with 2 years experience in the wedding industry.',\n 'She enjoys the outdoors and currently resides in upstate New York.',\n].join(' ')\n\nconst CardExampleExtraContent = () => (\n <Card>\n <Card.Content header='About Amy' />\n <Card.Content description={description} />\n <Card.Content extra>\n <Icon name='user' />4 Friends\n </Card.Content>\n </Card>\n)\n\nexport default CardExampleExtraContent\n","views/Card/Content/CardExampleHeaderCard":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst CardExampleHeaderCard = () => (\n <Card.Group>\n <Card>\n <Card.Content>\n <Card.Header>Matthew Harris</Card.Header>\n <Card.Meta>Co-Worker</Card.Meta>\n <Card.Description>\n Matthew is a pianist living in Nashville.\n </Card.Description>\n </Card.Content>\n </Card>\n\n <Card>\n <Card.Content>\n <Card.Header content='Jake Smith' />\n <Card.Meta content='Musicians' />\n <Card.Description content='Jake is a drummer living in New York.' />\n </Card.Content>\n </Card>\n\n <Card>\n <Card.Content\n header='Elliot Baker'\n meta='Friend'\n description='Elliot is a music producer living in Chicago.'\n />\n </Card>\n\n <Card\n header='Jenny Hess'\n meta='Friend'\n description='Jenny is a student studying Media Management at the New School'\n />\n </Card.Group>\n)\n\nexport default CardExampleHeaderCard\n","views/Card/Content/CardExampleImageCard":"import React from 'react'\nimport { Card, Icon, Image } from 'semantic-ui-react'\n\nconst CardExampleImageCard = () => (\n <Card>\n <Image src='https://react.semantic-ui.com/images/avatar/large/daniel.jpg' wrapped ui={false} />\n <Card.Content>\n <Card.Header>Daniel</Card.Header>\n <Card.Meta>Joined in 2016</Card.Meta>\n <Card.Description>\n Daniel is a comedian living in Nashville.\n </Card.Description>\n </Card.Content>\n <Card.Content extra>\n <a>\n <Icon name='user' />\n 10 Friends\n </a>\n </Card.Content>\n </Card>\n)\n\nexport default CardExampleImageCard\n","views/Card/Content/CardExampleLinkCard":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst CardExampleLinkCard = () => (\n <Card\n href='#card-example-link-card'\n header='Elliot Baker'\n meta='Friend'\n description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'\n />\n)\n\nexport default CardExampleLinkCard\n","views/Card/Content/CardExampleLinkCardProp":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst CardExampleLinkCardProp = () => (\n <Card\n link\n header='Rick Sanchez'\n meta='Scientist'\n description={[\n 'Rick is a genius scientist whose alcoholism and reckless,',\n ' nihilistic behavior are a source of concern for his family.',\n ].join('')}\n />\n)\n\nexport default CardExampleLinkCardProp\n","views/Card/Types/CardExampleCard":"import React from 'react'\nimport { Card, Icon, Image } from 'semantic-ui-react'\n\nconst CardExampleCard = () => (\n <Card>\n <Image src='https://react.semantic-ui.com/images/avatar/large/matthew.png' wrapped ui={false} />\n <Card.Content>\n <Card.Header>Matthew</Card.Header>\n <Card.Meta>\n <span className='date'>Joined in 2015</span>\n </Card.Meta>\n <Card.Description>\n Matthew is a musician living in Nashville.\n </Card.Description>\n </Card.Content>\n <Card.Content extra>\n <a>\n <Icon name='user' />\n 22 Friends\n </a>\n </Card.Content>\n </Card>\n)\n\nexport default CardExampleCard\n","views/Card/Types/CardExampleCardProps":"import React from 'react'\nimport { Card, Icon } from 'semantic-ui-react'\n\nconst extra = (\n <a>\n <Icon name='user' />\n 16 Friends\n </a>\n)\n\nconst CardExampleCardProps = () => (\n <Card\n image='/images/avatar/large/elliot.jpg'\n header='Elliot Baker'\n meta='Friend'\n description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'\n extra={extra}\n />\n)\n\nexport default CardExampleCardProps\n","views/Card/Types/CardExampleGroupProps":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst items = [\n {\n header: 'Project Report - April',\n description:\n 'Leverage agile frameworks to provide a robust synopsis for high level overviews.',\n meta: 'ROI: 30%',\n },\n {\n header: 'Project Report - May',\n description:\n 'Bring to the table win-win survival strategies to ensure proactive domination.',\n meta: 'ROI: 34%',\n },\n {\n header: 'Project Report - June',\n description:\n 'Capitalise on low hanging fruit to identify a ballpark value added activity to beta test.',\n meta: 'ROI: 27%',\n },\n]\n\nconst CardExampleGroupProps = () => <Card.Group items={items} />\n\nexport default CardExampleGroupProps\n","views/Card/Types/CardExampleGroups":"import React from 'react'\nimport { Button, Card, Image } from 'semantic-ui-react'\n\nconst CardExampleGroups = () => (\n <Card.Group>\n <Card>\n <Card.Content>\n <Image\n floated='right'\n size='mini'\n src='https://react.semantic-ui.com/images/avatar/large/steve.jpg'\n />\n <Card.Header>Steve Sanders</Card.Header>\n <Card.Meta>Friends of Elliot</Card.Meta>\n <Card.Description>\n Steve wants to add you to the group <strong>best friends</strong>\n </Card.Description>\n </Card.Content>\n <Card.Content extra>\n <div className='ui two buttons'>\n <Button basic color='green'>\n Approve\n </Button>\n <Button basic color='red'>\n Decline\n </Button>\n </div>\n </Card.Content>\n </Card>\n <Card>\n <Card.Content>\n <Image\n floated='right'\n size='mini'\n src='https://react.semantic-ui.com/images/avatar/large/molly.png'\n />\n <Card.Header>Molly Thomas</Card.Header>\n <Card.Meta>New User</Card.Meta>\n <Card.Description>\n Molly wants to add you to the group <strong>musicians</strong>\n </Card.Description>\n </Card.Content>\n <Card.Content extra>\n <div className='ui two buttons'>\n <Button basic color='green'>\n Approve\n </Button>\n <Button basic color='red'>\n Decline\n </Button>\n </div>\n </Card.Content>\n </Card>\n <Card>\n <Card.Content>\n <Image\n floated='right'\n size='mini'\n src='https://react.semantic-ui.com/images/avatar/large/jenny.jpg'\n />\n <Card.Header>Jenny Lawrence</Card.Header>\n <Card.Meta>New User</Card.Meta>\n <Card.Description>\n Jenny requested permission to view your contact details\n </Card.Description>\n </Card.Content>\n <Card.Content extra>\n <div className='ui two buttons'>\n <Button basic color='green'>\n Approve\n </Button>\n <Button basic color='red'>\n Decline\n </Button>\n </div>\n </Card.Content>\n </Card>\n </Card.Group>\n)\n\nexport default CardExampleGroups\n","views/Card/Variations/CardExampleColored":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst src = '/images/wireframe/white-image.png'\n\nconst CardExampleColored = () => (\n <Card.Group itemsPerRow={4}>\n <Card color='red' image={src} />\n <Card color='orange' image={src} />\n <Card color='yellow' image={src} />\n <Card color='olive' image={src} />\n <Card color='green' image={src} />\n <Card color='teal' image={src} />\n <Card color='blue' image={src} />\n <Card color='violet' image={src} />\n <Card color='purple' image={src} />\n <Card color='pink' image={src} />\n <Card color='brown' image={src} />\n <Card color='grey' image={src} />\n </Card.Group>\n)\n\nexport default CardExampleColored\n","views/Card/Variations/CardExampleColumnCount":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst src = '/images/wireframe/image.png'\n\nconst CardExampleColumnCount = () => (\n <Card.Group itemsPerRow={6}>\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n <Card raised image={src} />\n </Card.Group>\n)\n\nexport default CardExampleColumnCount\n","views/Card/Variations/CardExampleFluid":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst CardExampleFluid = () => (\n <Card.Group>\n <Card fluid color='red' header='Option 1' />\n <Card fluid color='orange' header='Option 2' />\n <Card fluid color='yellow' header='Option 3' />\n </Card.Group>\n)\n\nexport default CardExampleFluid\n","views/Card/Variations/CardExampleGroupCentered":"import React from 'react'\nimport { Card } from 'semantic-ui-react'\n\nconst items = [\n {\n header: 'Project Report - April',\n description:\n 'Leverage agile frameworks to provide a robust synopsis for high level overviews.',\n meta: 'ROI: 30%',\n },\n {\n header: 'Project Report - May',\n description:\n 'Bring to the table win-win survival strategies to ensure proactive domination.',\n meta: 'ROI: 34%',\n },\n]\n\nconst CardExampleGroupCentered = () => <Card.Group centered items={items} />\n\nexport default CardExampleGroupCentered\n","views/Comment/Content/CommentExampleActions":"import React from 'react'\nimport { Comment, Icon } from 'semantic-ui-react'\n\nconst CommentExampleActions = () => (\n <Comment.Group>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author>Tom Lukic</Comment.Author>\n <Comment.Text>\n This will be great for business reports. I will definitely download\n this.\n </Comment.Text>\n <Comment.Actions>\n <Comment.Action>Reply</Comment.Action>\n <Comment.Action>Save</Comment.Action>\n <Comment.Action>Hide</Comment.Action>\n <Comment.Action>\n <Icon name='expand' />\n Full-screen\n </Comment.Action>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n)\n\nexport default CommentExampleActions\n","views/Comment/Content/CommentExampleAvatar":"import React from 'react'\nimport { Comment } from 'semantic-ui-react'\n\nconst CommentExampleAvatar = () => (\n <Comment.Group>\n <Comment>\n <Comment.Avatar src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Elliot Fu</Comment.Author>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n)\n\nexport default CommentExampleAvatar\n","views/Comment/Content/CommentExampleMetadata":"import React from 'react'\nimport { Comment, Icon } from 'semantic-ui-react'\n\nconst CommentExampleMetadata = () => (\n <Comment.Group>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />\n <Comment.Content>\n <Comment.Author>Stevie Feliciano</Comment.Author>\n <Comment.Metadata>\n <div>2 days ago</div>\n <div>\n <Icon name='star' />5 Faves\n </div>\n </Comment.Metadata>\n <Comment.Text>\n Hey guys, I hope this example comment is helping you read this\n documentation.\n </Comment.Text>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n)\n\nexport default CommentExampleMetadata\n","views/Comment/Content/CommentExampleReplyForm":"import React from 'react'\nimport { Button, Comment, Form } from 'semantic-ui-react'\n\nconst CommentExampleReplyForm = () => (\n <Comment.Group>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/steve.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Steve Jobes</Comment.Author>\n <Comment.Metadata>\n <div>2 days ago</div>\n </Comment.Metadata>\n <Comment.Text>Revolutionary!</Comment.Text>\n <Comment.Actions>\n <Comment.Action active>Reply</Comment.Action>\n </Comment.Actions>\n <Form reply>\n <Form.TextArea />\n <Button\n content='Add Reply'\n labelPosition='left'\n icon='edit'\n primary\n />\n </Form>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n)\n\nexport default CommentExampleReplyForm\n","views/Comment/Content/CommentExampleReplyFormOuter":"import React from 'react'\nimport { Button, Comment, Form } from 'semantic-ui-react'\n\nconst CommentExampleReplyFormOuter = () => (\n <Comment.Group>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <div>1 day ago</div>\n </Comment.Metadata>\n <Comment.Text>\n <p>\n The hours, minutes and seconds stand as visible reminders that your\n effort put them all there.\n </p>\n <p>\n Preserve until your next run, when the watch lets you see how\n Impermanent your efforts are.\n </p>\n </Comment.Text>\n <Comment.Actions>\n <Comment.Action>Reply</Comment.Action>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n <Comment.Content>\n <Comment.Author>Christian Rocha</Comment.Author>\n <Comment.Metadata>\n <div>2 days ago</div>\n </Comment.Metadata>\n <Comment.Text>I re-tweeted this.</Comment.Text>\n <Comment.Actions>\n <Comment.Action>Reply</Comment.Action>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Form reply>\n <Form.TextArea />\n <Button content='Add Comment' labelPosition='left' icon='edit' primary />\n </Form>\n </Comment.Group>\n)\n\nexport default CommentExampleReplyFormOuter\n","views/Comment/States/CommentExampleCollapsed":"import React, { Component } from 'react'\nimport { Checkbox, Comment } from 'semantic-ui-react'\n\nexport default class CommentExampleCollapsed extends Component {\n state = { collapsed: true }\n\n handleCheckbox = (e, { checked }) => this.setState({ collapsed: checked })\n\n render() {\n const { collapsed } = this.state\n\n return (\n <div>\n <Checkbox\n defaultChecked\n label='Collapse comments'\n onChange={this.handleCheckbox}\n />\n\n <Comment.Group>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/christian.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Christian Rocha</Comment.Author>\n <Comment.Metadata>\n <span>2 days ago</span>\n </Comment.Metadata>\n <Comment.Text>\n I'm very interested in this motherboard. Do you know if it'd\n work in a Intel LGA775 CPU socket?\n </Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n\n <Comment.Group collapsed={collapsed}>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Elliot Fu</Comment.Author>\n <Comment.Metadata>\n <span>1 day ago</span>\n </Comment.Metadata>\n <Comment.Text>No, it wont</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n\n <Comment.Group>\n <Comment>\n <Comment.Avatar\n as='a'\n src='https://react.semantic-ui.com/images/avatar/small/jenny.jpg'\n />\n <Comment.Content>\n <Comment.Author as='a'>Jenny Hess</Comment.Author>\n <Comment.Metadata>\n <span>20 minutes ago</span>\n </Comment.Metadata>\n <Comment.Text>Maybe it would.</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n </Comment>\n </Comment.Group>\n </Comment>\n </Comment.Group>\n </div>\n )\n }\n}\n","views/Comment/Types/CommentExampleComment":"import React from 'react'\nimport { Button, Comment, Form, Header } from 'semantic-ui-react'\n\nconst CommentExampleComment = () => (\n <Comment.Group>\n <Header as='h3' dividing>\n Comments\n </Header>\n\n <Comment>\n <Comment.Avatar src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Matt</Comment.Author>\n <Comment.Metadata>\n <div>Today at 5:42PM</div>\n </Comment.Metadata>\n <Comment.Text>How artistic!</Comment.Text>\n <Comment.Actions>\n <Comment.Action>Reply</Comment.Action>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Comment>\n <Comment.Avatar src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Elliot Fu</Comment.Author>\n <Comment.Metadata>\n <div>Yesterday at 12:30AM</div>\n </Comment.Metadata>\n <Comment.Text>\n <p>This has been very useful for my research. Thanks as well!</p>\n </Comment.Text>\n <Comment.Actions>\n <Comment.Action>Reply</Comment.Action>\n </Comment.Actions>\n </Comment.Content>\n <Comment.Group>\n <Comment>\n <Comment.Avatar src='https://react.semantic-ui.com/images/avatar/small/jenny.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Jenny Hess</Comment.Author>\n <Comment.Metadata>\n <div>Just now</div>\n </Comment.Metadata>\n <Comment.Text>Elliot you are always so right :)</Comment.Text>\n <Comment.Actions>\n <Comment.Action>Reply</Comment.Action>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n </Comment>\n\n <Comment>\n <Comment.Avatar src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <div>5 days ago</div>\n </Comment.Metadata>\n <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>\n <Comment.Actions>\n <Comment.Action>Reply</Comment.Action>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Form reply>\n <Form.TextArea />\n <Button content='Add Reply' labelPosition='left' icon='edit' primary />\n </Form>\n </Comment.Group>\n)\n\nexport default CommentExampleComment\n","views/Comment/Variations/CommentExampleGroupSize":"import React from 'react'\nimport { Comment, Header } from 'semantic-ui-react'\n\nconst CommentExampleGroupSize = () => (\n <div>\n <Comment.Group size='mini'>\n <Header as='h3' dividing>\n Mini Comments\n </Header>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Matt</Comment.Author>\n <Comment.Metadata>\n <span>Today at 5:42PM</span>\n </Comment.Metadata>\n <Comment.Text>How artistic!</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <span>5 days ago</span>\n </Comment.Metadata>\n <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n <Comment.Group size='small'>\n <Header as='h3' dividing>\n Small Comments\n </Header>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Matt</Comment.Author>\n <Comment.Metadata>\n <span>Today at 5:42PM</span>\n </Comment.Metadata>\n <Comment.Text>How artistic!</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <span>5 days ago</span>\n </Comment.Metadata>\n <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n <Comment.Group size='large'>\n <Header as='h3' dividing>\n Large Comments\n </Header>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Matt</Comment.Author>\n <Comment.Metadata>\n <span>Today at 5:42PM</span>\n </Comment.Metadata>\n <Comment.Text>How artistic!</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <span>5 days ago</span>\n </Comment.Metadata>\n <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n <Comment.Group size='massive'>\n <Header as='h3' dividing>\n Massive Comments\n </Header>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Matt</Comment.Author>\n <Comment.Metadata>\n <span>Today at 5:42PM</span>\n </Comment.Metadata>\n <Comment.Text>How artistic!</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <span>5 days ago</span>\n </Comment.Metadata>\n <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n </div>\n)\n\nexport default CommentExampleGroupSize\n","views/Comment/Variations/CommentExampleMinimal":"import React from 'react'\nimport { Button, Comment, Form, Header } from 'semantic-ui-react'\n\nconst CommentExampleMinimal = () => (\n <Comment.Group minimal>\n <Header as='h3' dividing>\n Comments\n </Header>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Matt</Comment.Author>\n <Comment.Metadata>\n <span>Today at 5:42PM</span>\n </Comment.Metadata>\n <Comment.Text>How artistic!</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Elliot Fu</Comment.Author>\n <Comment.Metadata>\n <span>Yesterday at 12:30AM</span>\n </Comment.Metadata>\n <Comment.Text>\n <p>This has been very useful for my research. Thanks as well!</p>\n </Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n\n <Comment.Group>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/jenny.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Jenny Hess</Comment.Author>\n <Comment.Metadata>\n <span>Just now</span>\n </Comment.Metadata>\n <Comment.Text>Elliot you are always so right :)</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n </Comment>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <span>5 days ago</span>\n </Comment.Metadata>\n <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Form reply>\n <Form.TextArea />\n <Button content='Add Reply' labelPosition='left' icon='edit' primary />\n </Form>\n </Comment.Group>\n)\n\nexport default CommentExampleMinimal\n","views/Comment/Variations/CommentExampleThreaded":"import React from 'react'\nimport { Button, Comment, Form, Header } from 'semantic-ui-react'\n\nconst CommentExampleThreaded = () => (\n <Comment.Group threaded>\n <Header as='h3' dividing>\n Comments\n </Header>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Matt</Comment.Author>\n <Comment.Metadata>\n <span>Today at 5:42PM</span>\n </Comment.Metadata>\n <Comment.Text>How artistic!</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Elliot Fu</Comment.Author>\n <Comment.Metadata>\n <span>Yesterday at 12:30AM</span>\n </Comment.Metadata>\n <Comment.Text>\n <p>This has been very useful for my research. Thanks as well!</p>\n </Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n\n <Comment.Group>\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/jenny.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Jenny Hess</Comment.Author>\n <Comment.Metadata>\n <span>Just now</span>\n </Comment.Metadata>\n <Comment.Text>Elliot you are always so right :)</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n </Comment.Group>\n </Comment>\n\n <Comment>\n <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' />\n <Comment.Content>\n <Comment.Author as='a'>Joe Henderson</Comment.Author>\n <Comment.Metadata>\n <span>5 days ago</span>\n </Comment.Metadata>\n <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>\n <Comment.Actions>\n <a>Reply</a>\n </Comment.Actions>\n </Comment.Content>\n </Comment>\n\n <Form reply>\n <Form.TextArea />\n <Button content='Add Reply' labelPosition='left' icon='edit' primary />\n </Form>\n </Comment.Group>\n)\n\nexport default CommentExampleThreaded\n","views/Feed/Content/FeedExampleContentDate":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst imageSrc = '/images/avatar/small/jenny.jpg'\n\nconst FeedExampleContentDate = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label image={imageSrc} />\n <Feed.Content>\n <Feed.Date>3 days ago</Feed.Date>\n <Feed.Summary>\n You added <a>Jenny Hess</a> to your <a>coworker</a> group.\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleContentDate\n","views/Feed/Content/FeedExampleContentDateShorthand":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst image = '/images/avatar/small/jenny.jpg'\nconst date = '3 days ago'\nconst summary = 'You added Jenny Hess to your coworker group.'\n\nconst FeedExampleContentDateShorthand = () => (\n <Feed>\n <Feed.Event image={image} date={date} summary={summary} />\n\n <Feed.Event>\n <Feed.Label image={image} />\n <Feed.Content date={date} summary={summary} />\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleContentDateShorthand\n","views/Feed/Content/FeedExampleExtraImages":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst FeedExampleAdditionalInformation = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/helen.jpg' />\n <Feed.Content>\n <Feed.Date>3 days ago</Feed.Date>\n <Feed.Summary>\n <a>Helen Troy</a> added 2 photos\n </Feed.Summary>\n <Feed.Extra images>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n </Feed.Extra>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleAdditionalInformation\n","views/Feed/Content/FeedExampleExtraImagesShorthand":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst image = '/images/avatar/small/helen.jpg'\nconst date = '3 days ago'\nconst summary = 'Helen Troy added 2 photos'\nconst extraImages = [\n '/images/wireframe/image.png',\n '/images/wireframe/image-text.png',\n]\n\nconst FeedExampleExtraImagesShorthand = () => (\n <Feed>\n <Feed.Event\n image={image}\n date={date}\n summary={summary}\n extraImages={extraImages}\n />\n\n <Feed.Event>\n <Feed.Label image={image} />\n <Feed.Content date={date} summary={summary} extraImages={extraImages} />\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image={image} />\n <Feed.Content>\n <Feed.Date content={date} />\n <Feed.Summary content={summary} />\n <Feed.Extra images={extraImages} />\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleExtraImagesShorthand\n","views/Feed/Content/FeedExampleExtraText":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst FeedExampleExtraText = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/laura.jpg' />\n <Feed.Content>\n <Feed.Date>3 days ago</Feed.Date>\n <Feed.Summary>\n <a>Laura Faucet</a> created a post\n </Feed.Summary>\n <Feed.Extra text>\n Have you seen what's going on in Israel? Can you believe it.\n </Feed.Extra>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleExtraText\n","views/Feed/Content/FeedExampleExtraTextShorthand":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst image = '/images/avatar/small/laura.jpg'\nconst date = '3 days ago'\nconst summary = 'Laura Faucet created a post'\nconst extraText = \"Have you seen what's going on in Israel? Can you believe it.\"\n\nconst FeedExampleExtraTextShorthand = () => (\n <Feed>\n <Feed.Event\n image={image}\n date={date}\n summary={summary}\n extraText={extraText}\n />\n\n <Feed.Event>\n <Feed.Label image={image} />\n <Feed.Content date={date} summary={summary} extraText={extraText} />\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image={image} />\n <Feed.Content>\n <Feed.Date content={date} />\n <Feed.Summary content={summary} />\n <Feed.Extra text content={extraText} />\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleExtraTextShorthand\n","views/Feed/Content/FeedExampleIconLabel":"import React from 'react'\nimport { Feed, Icon } from 'semantic-ui-react'\n\nconst FeedExampleIconLabel = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label>\n <Icon name='pencil' />\n </Feed.Label>\n <Feed.Content>\n <Feed.Date>Today</Feed.Date>\n <Feed.Summary>\n You posted on your friend <a>Stevie Feliciano's</a> wall.\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleIconLabel\n","views/Feed/Content/FeedExampleIconLabelShorthand":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst FeedExampleIconLabelShorthand = () => (\n <Feed>\n <Feed.Event\n icon='pencil'\n date='Today'\n summary=\"You posted on your friend Stevie Feliciano's wall.\"\n />\n\n <Feed.Event>\n <Feed.Label icon='pencil' />\n <Feed.Content\n date='Today'\n summary=\"You posted on your friend Stevie Feliciano's wall.\"\n />\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleIconLabelShorthand\n","views/Feed/Content/FeedExampleImageLabel":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst FeedExampleImageLabel = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label>\n <img src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n </Feed.Label>\n <Feed.Content>\n You added Elliot Fu to the group <a>Coworkers</a>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleImageLabel\n","views/Feed/Content/FeedExampleImageLabelShorthand":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst FeedExampleImageLabelShorthand = () => (\n <Feed>\n <Feed.Event\n image='/images/avatar/small/elliot.jpg'\n content='You added Elliot Fu to the group Coworkers'\n />\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/elliot.jpg' />\n <Feed.Content content='You added Elliot Fu to the group Coworkers' />\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleImageLabelShorthand\n","views/Feed/Content/FeedExampleSummaryDate":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst FeedExampleSummaryDate = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label>\n <img src='https://react.semantic-ui.com/images/avatar/small/jenny.jpg' />\n </Feed.Label>\n <Feed.Content>\n <Feed.Summary>\n You added <a>Jenny Hess</a> to your <a>coworker</a> group.\n <Feed.Date>3 days ago</Feed.Date>\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleSummaryDate\n","views/Feed/Content/FeedExampleSummaryDateShorthand":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst FeedExampleSummaryDate = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/jenny.jpg' />\n <Feed.Content>\n <Feed.Summary\n content='You added Jenny Hess to your coworker group.'\n date='3 days ago'\n />\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleSummaryDate\n","views/Feed/Types/FeedExampleBasic":"import React from 'react'\nimport { Feed, Icon } from 'semantic-ui-react'\n\nconst FeedExampleBasic = () => (\n <Feed>\n <Feed.Event>\n <Feed.Label>\n <img src='https://react.semantic-ui.com/images/avatar/small/elliot.jpg' />\n </Feed.Label>\n <Feed.Content>\n <Feed.Summary>\n <Feed.User>Elliot Fu</Feed.User> added you as a friend\n <Feed.Date>1 Hour Ago</Feed.Date>\n </Feed.Summary>\n <Feed.Meta>\n <Feed.Like>\n <Icon name='like' />4 Likes\n </Feed.Like>\n </Feed.Meta>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/helen.jpg' />\n <Feed.Content>\n <Feed.Summary>\n <a>Helen Troy</a> added <a>2 new illustrations</a>\n <Feed.Date>4 days ago</Feed.Date>\n </Feed.Summary>\n <Feed.Extra images>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n </Feed.Extra>\n <Feed.Meta>\n <Feed.Like>\n <Icon name='like' />1 Like\n </Feed.Like>\n </Feed.Meta>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/jenny.jpg' />\n <Feed.Content>\n <Feed.Summary\n date='2 Days Ago'\n user='Jenny Hess'\n content='add you as a friend'\n />\n <Feed.Meta>\n <Feed.Like>\n <Icon name='like' />8 Likes\n </Feed.Like>\n </Feed.Meta>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/joe.jpg' />\n <Feed.Content>\n <Feed.Summary>\n <a>Joe Henderson</a> posted on his page\n <Feed.Date>3 days ago</Feed.Date>\n </Feed.Summary>\n <Feed.Extra text>\n Ours is a life of constant reruns. We're always circling back to where\n we'd we started, then starting all over again. Even if we don't run\n extra laps that day, we surely will come back for more of the same\n another day soon.\n </Feed.Extra>\n <Feed.Meta>\n <Feed.Like>\n <Icon name='like' />5 Likes\n </Feed.Like>\n </Feed.Meta>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/justen.jpg' />\n <Feed.Content>\n <Feed.Summary>\n <a>Justen Kitsune</a> added <a>2 new photos</a> of you\n <Feed.Date>4 days ago</Feed.Date>\n </Feed.Summary>\n <Feed.Extra images>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n </Feed.Extra>\n <Feed.Meta>\n <Feed.Like>\n <Icon name='like' />\n 41 Likes\n </Feed.Like>\n </Feed.Meta>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleBasic\n","views/Feed/Types/FeedExampleEventsProp":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst events = [\n {\n date: '1 Hour Ago',\n image: '/images/avatar/small/elliot.jpg',\n meta: '4 Likes',\n summary: 'Elliot Fu added you as a friend',\n },\n {\n date: '4 days ago',\n image: '/images/avatar/small/helen.jpg',\n meta: '1 Like',\n summary: 'Helen Troy added 2 new illustrations',\n extraImages: [\n '/images/wireframe/image.png',\n '/images/wireframe/image-text.png',\n ],\n },\n {\n date: '3 days ago',\n image: '/images/avatar/small/joe.jpg',\n meta: '8 Likes',\n summary: 'Joe Henderson posted on his page',\n extraText:\n \"Ours is a life of constant reruns. We're always circling back to where we'd we started.\",\n },\n {\n date: '4 days ago',\n image: '/images/avatar/small/justen.jpg',\n meta: '41 Likes',\n summary: 'Justen Kitsune added 2 new photos of you',\n extraText:\n 'Look at these fun pics I found from a few years ago. Good times.',\n extraImages: [\n '/images/wireframe/image.png',\n '/images/wireframe/image-text.png',\n ],\n },\n]\n\nconst FeedExampleEventsProp = () => <Feed events={events} />\n\nexport default FeedExampleEventsProp\n","views/Feed/Types/FeedExampleShorthand":"import React from 'react'\nimport { Feed } from 'semantic-ui-react'\n\nconst events = [\n {\n date: '1 Hour Ago',\n image: '/images/avatar/small/elliot.jpg',\n meta: '4 Likes',\n summary: 'Elliot Fu added you as a friend',\n },\n {\n date: '4 days ago',\n image: '/images/avatar/small/helen.jpg',\n meta: '1 Like',\n summary: 'Helen Troy added 2 new illustrations',\n extraImages: [\n '/images/wireframe/image.png',\n '/images/wireframe/image-text.png',\n ],\n },\n {\n date: '2 Days Ago',\n image: '/images/avatar/small/jenny.jpg',\n meta: '8 Likes',\n summary: 'Jenny Hess added you as a friend',\n },\n {\n date: '3 days ago',\n image: '/images/avatar/small/joe.jpg',\n meta: '8 Likes',\n summary: 'Joe Henderson posted on his page',\n extraText: [\n \"Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all\",\n \"over again. Even if we don't run extra laps that day, we surely will come back for more of the same another\",\n 'day soon.',\n ].join(' '),\n },\n {\n date: '4 days ago',\n image: '/images/avatar/small/justen.jpg',\n meta: '41 Likes',\n summary: 'Justen Kitsune added 2 new photos of you',\n extraImages: [\n '/images/wireframe/image.png',\n '/images/wireframe/image-text.png',\n ],\n },\n]\n\nconst FeedExampleShorthand = () => <Feed events={events} />\n\nexport default FeedExampleShorthand\n","views/Feed/Variations/FeedExampleSizeLarge":"import React from 'react'\nimport { Feed, Icon } from 'semantic-ui-react'\n\nconst FeedExampleSizeLarge = () => (\n <Feed size='large'>\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/elliot.jpg' />\n <Feed.Content>\n <Feed.Summary>\n <Feed.User>Elliot Fu</Feed.User> added you as a friend\n <Feed.Date>1 Hour Ago</Feed.Date>\n </Feed.Summary>\n <Feed.Meta>\n <Feed.Like>\n <Icon name='like' />4 Likes\n </Feed.Like>\n </Feed.Meta>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label icon='pencil' />\n <Feed.Content>\n <Feed.Summary>\n You submitted a new post to the page\n <Feed.Date>3 days ago</Feed.Date>\n </Feed.Summary>\n <Feed.Extra text>\n I'm having a BBQ this weekend. Come by around 4pm if you can.\n </Feed.Extra>\n <Feed.Meta>\n <Feed.Like>11 Likes</Feed.Like>\n </Feed.Meta>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Label image='/images/avatar/small/helen.jpg' />\n <Feed.Content>\n <Feed.Date>4 days ago</Feed.Date>\n <Feed.Summary>\n <a>Helen Troy</a> added <a>2 new illustrations</a>\n </Feed.Summary>\n\n <Feed.Extra images>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n <a>\n <img src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </a>\n </Feed.Extra>\n\n <Feed.Meta like='1 Like' />\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleSizeLarge\n","views/Feed/Variations/FeedExampleSizeSmall":"import React from 'react'\nimport { Feed, Header } from 'semantic-ui-react'\n\nconst FeedExampleSizeSmall = () => (\n <Feed size='small'>\n <Header as='h4'>Followers Activity</Header>\n\n <Feed.Event>\n <Feed.Content>\n <Feed.Summary>\n <a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Content>\n <Feed.Summary>\n <a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Content>\n <Feed.Summary>\n <a>Helen Troy</a> added <a>Christian Rocha</a> as a friend\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n\n <Feed.Event>\n <Feed.Content>\n <Feed.Summary>\n <a>Christian Rocha</a> signed up for the site.\n </Feed.Summary>\n </Feed.Content>\n </Feed.Event>\n </Feed>\n)\n\nexport default FeedExampleSizeSmall\n","views/Item/Content/ItemExampleContents":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst ItemExampleContents = () => (\n <Item.Group divided>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content verticalAlign='middle'>Content A</Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content verticalAlign='middle'>Content B</Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content content='Content C' verticalAlign='middle' />\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleContents\n","views/Item/Content/ItemExampleDescriptions":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst description = [\n 'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',\n 'tiny stature, and even others for their massive size.',\n].join(' ')\n\nconst ItemExampleDescriptions = () => (\n <Item.Group>\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>Cute Dog</Item.Header>\n <Item.Description>\n <p>{description}</p>\n <p>\n Many people also have their own barometers for what makes a cute\n dog.\n </p>\n </Item.Description>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>Cute Dog</Item.Header>\n <Item.Description content={description} />\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content header='Cute Dog' description={description} />\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleDescriptions\n","views/Item/Content/ItemExampleExtraContent":"import React from 'react'\nimport { Icon, Image, Item } from 'semantic-ui-react'\n\nconst paragraph = <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\nconst ItemExampleExtraContent = () => (\n <Item.Group>\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>Cute Dog</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra>\n <Icon color='green' name='check' /> 121 Votes\n </Item.Extra>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>Cute Dog</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra content='121 Votes' />\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content header='Cute Dog' extra='121 Votes' />\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleExtraContent\n","views/Item/Content/ItemExampleHeaders":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst ItemExampleHeaders = () => (\n <Item.Group>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a'>12 Years a Slave</Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a' content='My Neighbor Totoro' />\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content header='Watchmen' verticalAlign='middle' />\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleHeaders\n","views/Item/Content/ItemExampleImages":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst ItemExampleImages = () => (\n <Item.Group divided>\n <Item>\n <Item.Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Item>\n\n <Item>\n <Item.Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Item>\n\n <Item image='/images/wireframe/image.png' />\n </Item.Group>\n)\n\nexport default ItemExampleImages\n","views/Item/Content/ItemExampleLink":"import React from 'react'\nimport { Image, Item } from 'semantic-ui-react'\n\nconst paragraph = <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\nconst ItemExampleLink = () => (\n <Item.Group>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header>Arrowhead Valley Camp</Item.Header>\n <Item.Meta>\n <span className='price'>$1200</span>\n <span className='stay'>1 Month</span>\n </Item.Meta>\n <Item.Description>{paragraph}</Item.Description>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header>Buck's Homebrew Stayaway</Item.Header>\n <Item.Meta content='$1000 2 Weeks' />\n <Item.Description>{paragraph}</Item.Description>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleLink\n","views/Item/Content/ItemExampleMetadata":"import React from 'react'\nimport { Image, Item } from 'semantic-ui-react'\n\nconst paragraph = <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\nconst ItemExampleMetadata = () => (\n <Item.Group>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header>Arrowhead Valley Camp</Item.Header>\n <Item.Meta>\n <span className='price'>$1200</span>\n <span className='stay'>1 Month</span>\n </Item.Meta>\n <Item.Description>{paragraph}</Item.Description>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header>Buck's Homebrew Stayaway</Item.Header>\n <Item.Meta content='$1000 2 Weeks' />\n <Item.Description>{paragraph}</Item.Description>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleMetadata\n","views/Item/Content/ItemExampleRatings":"import React from 'react'\nimport { Icon, Item } from 'semantic-ui-react'\n\nconst ItemExampleRatings = () => (\n <Item.Group>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/avatar/large/jenny.jpg' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header>\n <Icon name='like' />\n Veronika Ossi\n </Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/avatar/large/justen.jpg' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header>\n <Icon name='favorite' />\n Justen Kitsune\n </Item.Header>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleRatings\n","views/Item/Types/ItemExampleItems":"import React from 'react'\nimport { Image, Item } from 'semantic-ui-react'\n\nconst ItemExampleItems = () => (\n <Item.Group>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>Header</Item.Header>\n <Item.Meta>Description</Item.Meta>\n <Item.Description>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Item.Description>\n <Item.Extra>Additional Details</Item.Extra>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>Header</Item.Header>\n <Item.Meta>Description</Item.Meta>\n <Item.Description>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </Item.Description>\n <Item.Extra>Additional Details</Item.Extra>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleItems\n","views/Item/Types/ItemExampleProps":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst items = [\n {\n childKey: 0,\n image: '/images/wireframe/image.png',\n header: 'Header',\n description: 'Description',\n meta: 'Metadata',\n extra: 'Extra',\n },\n {\n childKey: 1,\n image: '/images/wireframe/image.png',\n header: 'Header',\n description: 'Description',\n meta: 'Metadata',\n extra: 'Extra',\n },\n]\n\nconst ItemExampleProps = () => <Item.Group items={items} />\n\nexport default ItemExampleProps\n","views/Item/Variations/ItemExampleAlignment":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst ItemExampleAlignment = () => (\n <Item.Group>\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='top'>\n <Item.Header>Top Aligned</Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header>Middle Aligned</Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='bottom'>\n <Item.Header>Bottom Aligned</Item.Header>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleAlignment\n","views/Item/Variations/ItemExampleDivided":"import React from 'react'\nimport { Button, Icon, Image, Item, Label } from 'semantic-ui-react'\n\nconst paragraph = <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\nconst ItemExampleDivided = () => (\n <Item.Group divided>\n <Item>\n <Item.Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>12 Years a Slave</Item.Header>\n <Item.Meta>\n <span className='cinema'>Union Square 14</span>\n </Item.Meta>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra>\n <Label>IMAX</Label>\n <Label icon='globe' content='Additional Languages' />\n </Item.Extra>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>My Neighbor Totoro</Item.Header>\n <Item.Meta>\n <span className='cinema'>IFC Cinema</span>\n </Item.Meta>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra>\n <Button primary floated='right'>\n Buy tickets\n <Icon name='right chevron' />\n </Button>\n <Label>Limited</Label>\n </Item.Extra>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content>\n <Item.Header as='a'>Watchmen</Item.Header>\n <Item.Meta>\n <span className='cinema'>IFC</span>\n </Item.Meta>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra>\n <Button primary floated='right'>\n Buy tickets\n <Icon name='right chevron' />\n </Button>\n </Item.Extra>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleDivided\n","views/Item/Variations/ItemExampleFloated":"import React from 'react'\nimport { Button, Image, Item } from 'semantic-ui-react'\n\nconst paragraph = <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\nconst ItemExampleFloated = () => (\n <Item.Group relaxed>\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header>Content A</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra>\n <Button floated='right'>Action</Button>\n </Item.Extra>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header>Content B</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra>\n <Button floated='right'>Action</Button>\n </Item.Extra>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='small' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header>Content C</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n <Item.Extra>\n <Button floated='right'>Action</Button>\n </Item.Extra>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleFloated\n","views/Item/Variations/ItemExampleLink":"import React from 'react'\nimport { Image as ImageComponent, Item } from 'semantic-ui-react'\n\nconst paragraph = <ImageComponent src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n\nconst ItemExampleLink = () => (\n <Item.Group link>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/avatar/large/stevie.jpg' />\n\n <Item.Content>\n <Item.Header>Stevie Feliciano</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/avatar/large/veronika.jpg' />\n\n <Item.Content>\n <Item.Header>Veronika Ossi</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/avatar/large/jenny.jpg' />\n\n <Item.Content>\n <Item.Header>Jenny Hess</Item.Header>\n <Item.Description>{paragraph}</Item.Description>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleLink\n","views/Item/Variations/ItemExampleRelaxed":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst ItemExampleRelaxed = () => (\n <Item.Group relaxed>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a'>12 Years a Slave</Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a'>My Neighbor Totoro</Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a'>Watchmen</Item.Header>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleRelaxed\n","views/Item/Variations/ItemExampleUnstackable":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst ItemExampleImages = () => (\n <Item.Group divided unstackable>\n <Item>\n <Item.Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Item>\n\n <Item>\n <Item.Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Item>\n\n <Item image='/images/wireframe/image.png' />\n </Item.Group>\n)\n\nexport default ItemExampleImages\n","views/Item/Variations/ItemExampleVeryRelaxed":"import React from 'react'\nimport { Item } from 'semantic-ui-react'\n\nconst ItemExampleVeryRelaxed = () => (\n <Item.Group relaxed='very'>\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a'>12 Years a Slave</Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a'>My Neighbor Totoro</Item.Header>\n </Item.Content>\n </Item>\n\n <Item>\n <Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />\n\n <Item.Content verticalAlign='middle'>\n <Item.Header as='a'>Watchmen</Item.Header>\n </Item.Content>\n </Item>\n </Item.Group>\n)\n\nexport default ItemExampleVeryRelaxed\n","views/Statistic/Content/StatisticExampleLabel":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleLabel = () => (\n <Statistic>\n <Statistic.Value>2,204</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n)\n\nexport default StatisticExampleLabel\n","views/Statistic/Content/StatisticExampleValue":"import React from 'react'\nimport { Icon, Image, Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleValue = () => (\n <Statistic.Group>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Saves</Statistic.Label>\n </Statistic>\n\n <Statistic>\n <Statistic.Value text>\n Three\n <br />\n Thousand\n </Statistic.Value>\n <Statistic.Label>Signups</Statistic.Label>\n </Statistic>\n\n <Statistic>\n <Statistic.Value>\n <Icon name='plane' />5\n </Statistic.Value>\n <Statistic.Label>Flights</Statistic.Label>\n </Statistic>\n\n <Statistic>\n <Statistic.Value>\n <Image src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' inline circular />\n 42\n </Statistic.Value>\n <Statistic.Label>Team Members</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n)\n\nexport default StatisticExampleValue\n","views/Statistic/Content/StatisticExampleValueShorthand":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleValueShorthand = () => (\n <Statistic.Group>\n <Statistic label='Saves' value='22' />\n <Statistic label='Signups' value='Three Thousand' text />\n <Statistic label='Flights' value='5' />\n <Statistic label='Team Members' value='42' />\n </Statistic.Group>\n)\n\nexport default StatisticExampleValueShorthand\n","views/Statistic/Types/StatisticExampleGroup":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleGroup = () => (\n <div>\n <Statistic.Group>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Faves</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>31,200</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Members</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n </div>\n)\n\nexport default StatisticExampleGroup\n","views/Statistic/Types/StatisticExampleGroupShorthand":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst items = [\n { key: 'faves', label: 'Faves', value: '22' },\n { key: 'views', label: 'Views', value: '31,200' },\n { key: 'members', label: 'Members', value: '22' },\n]\n\nconst StatisticExampleGroupShorthand = () => <Statistic.Group items={items} />\n\nexport default StatisticExampleGroupShorthand\n","views/Statistic/Types/StatisticExampleStatistic":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleStatistic = () => (\n <Statistic>\n <Statistic.Value>5,550</Statistic.Value>\n <Statistic.Label>Downloads</Statistic.Label>\n </Statistic>\n)\n\nexport default StatisticExampleStatistic\n","views/Statistic/Types/StatisticExampleStatisticShorthand":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleStatisticShorthand = () => (\n <Statistic label='Downloads' value='5,550' />\n)\n\nexport default StatisticExampleStatisticShorthand\n","views/Statistic/Types/StatisticExampleTopLabel":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleTopLabel = () => (\n <Statistic>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>40,509</Statistic.Value>\n </Statistic>\n)\n\nexport default StatisticExampleTopLabel\n","views/Statistic/Variations/StatisticExampleColored":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleColored = () => (\n <Statistic.Group>\n <Statistic color='red'>\n <Statistic.Value>27</Statistic.Value>\n <Statistic.Label>red</Statistic.Label>\n </Statistic>\n <Statistic color='orange'>\n <Statistic.Value>8'</Statistic.Value>\n <Statistic.Label>orange</Statistic.Label>\n </Statistic>\n <Statistic color='yellow'>\n <Statistic.Value>28</Statistic.Value>\n <Statistic.Label>yellow</Statistic.Label>\n </Statistic>\n <Statistic color='olive'>\n <Statistic.Value>7'</Statistic.Value>\n <Statistic.Label>olive</Statistic.Label>\n </Statistic>\n <Statistic color='green'>\n <Statistic.Value>14</Statistic.Value>\n <Statistic.Label>green</Statistic.Label>\n </Statistic>\n <Statistic color='teal'>\n <Statistic.Value>82</Statistic.Value>\n <Statistic.Label>teal</Statistic.Label>\n </Statistic>\n <Statistic color='blue'>\n <Statistic.Value>1'</Statistic.Value>\n <Statistic.Label>blue</Statistic.Label>\n </Statistic>\n <Statistic color='violet'>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>violet</Statistic.Label>\n </Statistic>\n <Statistic color='purple'>\n <Statistic.Value>23</Statistic.Value>\n <Statistic.Label>purple</Statistic.Label>\n </Statistic>\n <Statistic color='pink'>\n <Statistic.Value>15</Statistic.Value>\n <Statistic.Label>pink</Statistic.Label>\n </Statistic>\n <Statistic color='brown'>\n <Statistic.Value>36</Statistic.Value>\n <Statistic.Label>brown</Statistic.Label>\n </Statistic>\n <Statistic color='grey'>\n <Statistic.Value>49</Statistic.Value>\n <Statistic.Label>grey</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n)\n\nexport default StatisticExampleColored\n","views/Statistic/Variations/StatisticExampleColoredGroup":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Divider, Statistic } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n]\n\nexport default class StatisticExampleColoredGroup extends Component {\n state = { color: colors[0] }\n\n handleColorChange = (e) => this.setState({ color: e.target.value })\n\n render() {\n const { color } = this.state\n\n return (\n <div>\n <select onChange={this.handleColorChange}>\n {_.map(colors, (c) => (\n <option key={c} value={c}>\n {_.startCase(c)}\n </option>\n ))}\n </select>\n\n <Divider hidden />\n\n <Statistic.Group color={color}>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Faves</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>31,200</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Members</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n </div>\n )\n }\n}\n","views/Statistic/Variations/StatisticExampleEvenlyDivided":"import React from 'react'\nimport { Icon, Image, Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleEvenlyDivided = () => (\n <Statistic.Group widths='four'>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Saves</Statistic.Label>\n </Statistic>\n\n <Statistic>\n <Statistic.Value text>\n Three\n <br />\n Thousand\n </Statistic.Value>\n <Statistic.Label>Signups</Statistic.Label>\n </Statistic>\n\n <Statistic>\n <Statistic.Value>\n <Icon name='plane' />5\n </Statistic.Value>\n <Statistic.Label>Flights</Statistic.Label>\n </Statistic>\n\n <Statistic>\n <Statistic.Value>\n <Image src='https://react.semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />\n 42\n </Statistic.Value>\n <Statistic.Label>Team Members</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n)\n\nexport default StatisticExampleEvenlyDivided\n","views/Statistic/Variations/StatisticExampleFloated":"import React from 'react'\nimport { Segment, Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleFloated = () => (\n <Segment>\n <Statistic floated='right'>\n <Statistic.Value>2,204</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n\n <p>\n Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia\n facete scriptorem, est autem aliquip detraxit at. Usu ocurreret\n referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque\n electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei\n ex natum rebum iisque.\n </p>\n\n <p>\n Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine\n definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te\n phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide\n phaedrum, vim vivendum maiestatis in.\n </p>\n\n <Statistic floated='left'>\n <Statistic.Value>2,204</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n\n <p>\n Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut\n facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te\n porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi\n everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu\n per, quas minimum postulant per id.\n </p>\n <p>\n Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine\n definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te\n phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide\n phaedrum, vim vivendum maiestatis in.\n </p>\n </Segment>\n)\n\nexport default StatisticExampleFloated\n","views/Statistic/Variations/StatisticExampleHorizontal":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleHorizontal = () => (\n <Statistic horizontal>\n <Statistic.Value>2,204</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n)\n\nexport default StatisticExampleHorizontal\n","views/Statistic/Variations/StatisticExampleHorizontalGroup":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleHorizontalGroup = () => (\n <Statistic.Group horizontal>\n <Statistic>\n <Statistic.Value>2,204</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>3,322</Statistic.Value>\n <Statistic.Label>Downloads</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Tasks</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n)\n\nexport default StatisticExampleHorizontalGroup\n","views/Statistic/Variations/StatisticExampleHorizontalShorthand":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleHorizontalShorthand = () => (\n <Statistic horizontal label='Views' value='2,204' />\n)\n\nexport default StatisticExampleHorizontalShorthand\n","views/Statistic/Variations/StatisticExampleInverted":"import React from 'react'\nimport { Segment, Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleInverted = () => (\n <Segment inverted>\n <Statistic inverted>\n <Statistic.Value>54</Statistic.Value>\n <Statistic.Label>inverted</Statistic.Label>\n </Statistic>\n <Statistic color='red' inverted>\n <Statistic.Value>27</Statistic.Value>\n <Statistic.Label>red</Statistic.Label>\n </Statistic>\n <Statistic color='orange' inverted>\n <Statistic.Value>8'</Statistic.Value>\n <Statistic.Label>orange</Statistic.Label>\n </Statistic>\n <Statistic color='yellow' inverted>\n <Statistic.Value>28</Statistic.Value>\n <Statistic.Label>yellow</Statistic.Label>\n </Statistic>\n <Statistic color='olive' inverted>\n <Statistic.Value>7'</Statistic.Value>\n <Statistic.Label>olive</Statistic.Label>\n </Statistic>\n <Statistic color='green' inverted>\n <Statistic.Value>14</Statistic.Value>\n <Statistic.Label>green</Statistic.Label>\n </Statistic>\n <Statistic color='teal' inverted>\n <Statistic.Value>82</Statistic.Value>\n <Statistic.Label>teal</Statistic.Label>\n </Statistic>\n <Statistic color='blue' inverted>\n <Statistic.Value>1'</Statistic.Value>\n <Statistic.Label>blue</Statistic.Label>\n </Statistic>\n <Statistic color='violet' inverted>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>violet</Statistic.Label>\n </Statistic>\n <Statistic color='purple' inverted>\n <Statistic.Value>23</Statistic.Value>\n <Statistic.Label>purple</Statistic.Label>\n </Statistic>\n <Statistic color='pink' inverted>\n <Statistic.Value>15</Statistic.Value>\n <Statistic.Label>pink</Statistic.Label>\n </Statistic>\n <Statistic color='brown' inverted>\n <Statistic.Value>36</Statistic.Value>\n <Statistic.Label>brown</Statistic.Label>\n </Statistic>\n <Statistic color='grey' inverted>\n <Statistic.Value>49</Statistic.Value>\n <Statistic.Label>grey</Statistic.Label>\n </Statistic>\n </Segment>\n)\n\nexport default StatisticExampleInverted\n","views/Statistic/Variations/StatisticExampleInvertedGroup":"import React from 'react'\nimport { Segment, Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleInvertedGroup = () => (\n <Segment inverted>\n <Statistic.Group inverted>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Faves</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>31,200</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Members</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n </Segment>\n)\n\nexport default StatisticExampleInvertedGroup\n","views/Statistic/Variations/StatisticExampleSize":"import React from 'react'\nimport { Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleSize = () => (\n <div>\n <Statistic size='mini'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Statistic size='tiny'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Statistic size='small'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Statistic>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Statistic size='large'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Statistic size='huge'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n </div>\n)\n\nexport default StatisticExampleSize\n","views/Statistic/Variations/StatisticExampleSizeDivided":"import React from 'react'\nimport { Divider, Statistic } from 'semantic-ui-react'\n\nconst StatisticExampleSizeDivided = () => (\n <div>\n <Statistic size='mini'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Divider />\n\n <Statistic size='tiny'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Divider />\n\n <Statistic size='small'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Divider />\n\n <Statistic>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Divider />\n\n <Statistic size='large'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n <Divider />\n\n <Statistic size='huge'>\n <Statistic.Label>Views</Statistic.Label>\n <Statistic.Value>2,204</Statistic.Value>\n </Statistic>\n </div>\n)\n\nexport default StatisticExampleSizeDivided\n","views/Statistic/Variations/StatisticExampleSizeGroup":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Divider, Statistic } from 'semantic-ui-react'\n\nconst sizes = ['mini', 'tiny', 'small', 'large', 'huge']\n\nexport default class StatisticExampleSizeGroup extends Component {\n state = { size: sizes[0] }\n\n handleSizeChange = (e) => this.setState({ size: e.target.value })\n\n render() {\n const { size } = this.state\n\n return (\n <div>\n <select onChange={this.handleSizeChange}>\n {_.map(sizes, (s) => (\n <option key={s} value={s}>\n {_.startCase(s)}\n </option>\n ))}\n </select>\n\n <Divider hidden />\n\n <Statistic.Group size={size}>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Faves</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>31,200</Statistic.Value>\n <Statistic.Label>Views</Statistic.Label>\n </Statistic>\n <Statistic>\n <Statistic.Value>22</Statistic.Value>\n <Statistic.Label>Members</Statistic.Label>\n </Statistic>\n </Statistic.Group>\n </div>\n )\n }\n}\n","modules/Accordion/Advanced/AccordionExampleForm":"import React from 'react'\nimport { Accordion, Button, Form, Segment } from 'semantic-ui-react'\n\nconst panels = [\n {\n key: 'details',\n title: 'Optional Details',\n content: {\n as: Form.Input,\n label: 'Maiden Name',\n placeholder: 'Maiden Name',\n },\n },\n]\n\nconst AccordionExampleForm = () => (\n <Segment>\n <Form>\n <Form.Group widths={2}>\n <Form.Input label='First Name' placeholder='First Name' />\n <Form.Input label='Last Name' placeholder='Last Name' />\n </Form.Group>\n <Accordion as={Form.Field} panels={panels} />\n\n <Button secondary>Sign Up</Button>\n </Form>\n </Segment>\n)\n\nexport default AccordionExampleForm\n","modules/Accordion/Advanced/AccordionExampleIconShorthand":"import React from 'react'\nimport { Accordion } from 'semantic-ui-react'\n\nconst panels = [\n {\n key: 'acquire-dog',\n title: {\n content: 'How do you acquire a dog?',\n icon: 'question',\n },\n content: {\n content: (\n <span>\n Three common ways for a prospective owner to acquire a dog is from pet\n shops, private owners, or shelters.\n </span>\n ),\n },\n },\n {\n key: 'care-for-dogs',\n title: {\n content: 'How do I care for a dog?',\n icon: 'question',\n },\n content: {\n content: (\n <span>\n It is entirely acceptable to feed your dog a pure kibble diet. Or you\n can mix their diet up with some cooked or raw meat, fish, vegetables\n and rice.\n </span>\n ),\n },\n },\n]\n\nconst AccordionExampleIconShorthand = () => (\n <Accordion defaultActiveIndex={0} panels={panels} />\n)\n\nexport default AccordionExampleIconShorthand\n","modules/Accordion/Advanced/AccordionExampleMenu":"import React, { Component } from 'react'\nimport { Accordion, Form, Menu } from 'semantic-ui-react'\n\nconst ColorForm = (\n <Form>\n <Form.Group grouped>\n <Form.Checkbox label='Red' name='color' value='red' />\n <Form.Checkbox label='Orange' name='color' value='orange' />\n <Form.Checkbox label='Green' name='color' value='green' />\n <Form.Checkbox label='Blue' name='color' value='blue' />\n </Form.Group>\n </Form>\n)\n\nconst SizeForm = (\n <Form>\n <Form.Group grouped>\n <Form.Radio label='Small' name='size' type='radio' value='small' />\n <Form.Radio label='Medium' name='size' type='radio' value='medium' />\n <Form.Radio label='Large' name='size' type='radio' value='large' />\n <Form.Radio label='X-Large' name='size' type='radio' value='x-large' />\n </Form.Group>\n </Form>\n)\n\nexport default class AccordionExampleMenu extends Component {\n state = { activeIndex: 0 }\n\n handleClick = (e, titleProps) => {\n const { index } = titleProps\n const { activeIndex } = this.state\n const newIndex = activeIndex === index ? -1 : index\n\n this.setState({ activeIndex: newIndex })\n }\n\n render() {\n const { activeIndex } = this.state\n\n return (\n <Accordion as={Menu} vertical>\n <Menu.Item>\n <Accordion.Title\n active={activeIndex === 0}\n content='Size'\n index={0}\n onClick={this.handleClick}\n />\n <Accordion.Content active={activeIndex === 0} content={SizeForm} />\n </Menu.Item>\n\n <Menu.Item>\n <Accordion.Title\n active={activeIndex === 1}\n content='Colors'\n index={1}\n onClick={this.handleClick}\n />\n <Accordion.Content active={activeIndex === 1} content={ColorForm} />\n </Menu.Item>\n </Accordion>\n )\n }\n}\n","modules/Accordion/Advanced/AccordionExampleNested":"import React from 'react'\nimport { Accordion } from 'semantic-ui-react'\n\nconst level1Panels = [\n { key: 'panel-1a', title: 'Level 1A', content: 'Level 1A Contents' },\n { key: 'panel-ba', title: 'Level 1B', content: 'Level 1B Contents' },\n]\n\nconst Level1Content = (\n <div>\n Welcome to level 1\n <Accordion.Accordion panels={level1Panels} />\n </div>\n)\n\nconst level2Panels = [\n { key: 'panel-2a', title: 'Level 2A', content: 'Level 2A Contents' },\n { key: 'panel-2b', title: 'Level 2B', content: 'Level 2B Contents' },\n]\n\nconst Level2Content = (\n <div>\n Welcome to level 2\n <Accordion.Accordion panels={level2Panels} />\n </div>\n)\n\nconst rootPanels = [\n { key: 'panel-1', title: 'Level 1', content: { content: Level1Content } },\n { key: 'panel-2', title: 'Level 2', content: { content: Level2Content } },\n]\n\nconst AccordionExampleNested = () => (\n <Accordion defaultActiveIndex={0} panels={rootPanels} styled />\n)\n\nexport default AccordionExampleNested\n","modules/Accordion/Advanced/AccordionExampleShorthand":"import faker from 'faker'\nimport _ from 'lodash'\nimport React from 'react'\nimport { Accordion, Label, Message } from 'semantic-ui-react'\n\nconst panels = _.times(3, (i) => ({\n key: `panel-${i}`,\n title: {\n content: <Label color='blue' content={faker.lorem.sentence()} />,\n },\n content: {\n content: (\n <Message\n info\n header={faker.lorem.sentence()}\n content={faker.lorem.paragraph()}\n />\n ),\n },\n}))\n\nconst AccordionExampleShorthand = () => (\n <Accordion defaultActiveIndex={1} panels={panels} />\n)\n\nexport default AccordionExampleShorthand\n","modules/Accordion/Types/AccordionExampleStandard":"import React, { Component } from 'react'\nimport { Accordion, Icon } from 'semantic-ui-react'\n\nexport default class AccordionExampleStandard extends Component {\n state = { activeIndex: 0 }\n\n handleClick = (e, titleProps) => {\n const { index } = titleProps\n const { activeIndex } = this.state\n const newIndex = activeIndex === index ? -1 : index\n\n this.setState({ activeIndex: newIndex })\n }\n\n render() {\n const { activeIndex } = this.state\n\n return (\n <Accordion>\n <Accordion.Title\n active={activeIndex === 0}\n index={0}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What is a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 0}>\n <p>\n A dog is a type of domesticated animal. Known for its loyalty and\n faithfulness, it can be found as a welcome guest in many households\n across the world.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 1}\n index={1}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What kinds of dogs are there?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 1}>\n <p>\n There are many breeds of dogs. Each breed varies in size and\n temperament. Owners often select a breed of dog that they find to be\n compatible with their own lifestyle and desires from a companion.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 2}\n index={2}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n How do you acquire a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 2}>\n <p>\n Three common ways for a prospective owner to acquire a dog is from\n pet shops, private owners, or shelters.\n </p>\n <p>\n A pet shop may be the most convenient way to buy a dog. Buying a dog\n from a private owner allows you to assess the pedigree and\n upbringing of your dog before choosing to take it home. Lastly,\n finding your dog from a shelter, helps give a good home to a dog who\n may not find one so readily.\n </p>\n </Accordion.Content>\n </Accordion>\n )\n }\n}\n","modules/Accordion/Types/AccordionExampleStandardShorthand":"import React from 'react'\nimport { Accordion } from 'semantic-ui-react'\n\nconst panels = [\n {\n key: 'what-is-dog',\n title: 'What is a dog?',\n content: [\n 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome',\n 'guest in many households across the world.',\n ].join(' '),\n },\n {\n key: 'kinds-of-dogs',\n title: 'What kinds of dogs are there?',\n content: [\n 'There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog',\n 'that they find to be compatible with their own lifestyle and desires from a companion.',\n ].join(' '),\n },\n {\n key: 'acquire-dog',\n title: 'How do you acquire a dog?',\n content: {\n content: (\n <div>\n <p>\n Three common ways for a prospective owner to acquire a dog is from\n pet shops, private owners, or shelters.\n </p>\n <p>\n A pet shop may be the most convenient way to buy a dog. Buying a dog\n from a private owner allows you to assess the pedigree and\n upbringing of your dog before choosing to take it home. Lastly,\n finding your dog from a shelter, helps give a good home to a dog who\n may not find one so readily.\n </p>\n </div>\n ),\n },\n },\n]\n\nconst AccordionExampleStandardShorthand = () => (\n <Accordion defaultActiveIndex={0} panels={panels} />\n)\n\nexport default AccordionExampleStandardShorthand\n","modules/Accordion/Types/AccordionExampleStyled":"import React, { Component } from 'react'\nimport { Accordion, Icon } from 'semantic-ui-react'\n\nexport default class AccordionExampleStyled extends Component {\n state = { activeIndex: 0 }\n\n handleClick = (e, titleProps) => {\n const { index } = titleProps\n const { activeIndex } = this.state\n const newIndex = activeIndex === index ? -1 : index\n\n this.setState({ activeIndex: newIndex })\n }\n\n render() {\n const { activeIndex } = this.state\n\n return (\n <Accordion styled>\n <Accordion.Title\n active={activeIndex === 0}\n index={0}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What is a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 0}>\n <p>\n A dog is a type of domesticated animal. Known for its loyalty and\n faithfulness, it can be found as a welcome guest in many households\n across the world.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 1}\n index={1}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What kinds of dogs are there?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 1}>\n <p>\n There are many breeds of dogs. Each breed varies in size and\n temperament. Owners often select a breed of dog that they find to be\n compatible with their own lifestyle and desires from a companion.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 2}\n index={2}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n How do you acquire a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 2}>\n <p>\n Three common ways for a prospective owner to acquire a dog is from\n pet shops, private owners, or shelters.\n </p>\n <p>\n A pet shop may be the most convenient way to buy a dog. Buying a dog\n from a private owner allows you to assess the pedigree and\n upbringing of your dog before choosing to take it home. Lastly,\n finding your dog from a shelter, helps give a good home to a dog who\n may not find one so readily.\n </p>\n </Accordion.Content>\n </Accordion>\n )\n }\n}\n","modules/Accordion/Usage/AccordionExampleActiveIndex":"import faker from 'faker'\nimport _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Accordion, Segment } from 'semantic-ui-react'\n\nconst panels = _.times(3, (i) => ({\n key: `panel-${i}`,\n title: faker.lorem.sentence(),\n content: faker.lorem.paragraphs(),\n}))\n\nexport default class AccordionExampleActiveIndex extends Component {\n state = { activeIndex: 0 }\n\n handleSliderChange = (e) =>\n this.setState({ activeIndex: Number(e.target.value) })\n\n handleTitleClick = (e, itemProps) => {\n const { index } = itemProps\n const { activeIndex } = this.state\n const newIndex = activeIndex === index ? -1 : index\n\n this.setState({ activeIndex: newIndex })\n }\n\n render() {\n const { activeIndex } = this.state\n\n return (\n <div>\n <Segment secondary>\n <div>activeIndex: {activeIndex}</div>\n <input\n type='range'\n min='-1'\n max={panels.length - 1}\n value={activeIndex}\n onChange={this.handleSliderChange}\n />\n </Segment>\n\n <Accordion\n activeIndex={activeIndex}\n panels={panels}\n onTitleClick={this.handleTitleClick}\n />\n </div>\n )\n }\n}\n","modules/Accordion/Usage/AccordionExampleExclusive":"import faker from 'faker'\nimport _ from 'lodash'\nimport React from 'react'\nimport { Accordion } from 'semantic-ui-react'\n\nconst panels = _.times(3, (i) => ({\n key: `panel-${i}`,\n title: faker.lorem.sentence(),\n content: faker.lorem.paragraphs(),\n}))\n\nconst AccordionExampleExclusive = () => (\n <Accordion\n defaultActiveIndex={[0, 2]}\n panels={panels}\n exclusive={false}\n fluid\n />\n)\n\nexport default AccordionExampleExclusive\n","modules/Accordion/Variations/AccordionExampleFluid":"import React, { Component } from 'react'\nimport { Accordion, Icon } from 'semantic-ui-react'\n\nexport default class AccordionExampleFluid extends Component {\n state = { activeIndex: 0 }\n\n handleClick = (e, titleProps) => {\n const { index } = titleProps\n const { activeIndex } = this.state\n const newIndex = activeIndex === index ? -1 : index\n\n this.setState({ activeIndex: newIndex })\n }\n\n render() {\n const { activeIndex } = this.state\n\n return (\n <Accordion fluid styled>\n <Accordion.Title\n active={activeIndex === 0}\n index={0}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What is a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 0}>\n <p>\n A dog is a type of domesticated animal. Known for its loyalty and\n faithfulness, it can be found as a welcome guest in many households\n across the world.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 1}\n index={1}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What kinds of dogs are there?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 1}>\n <p>\n There are many breeds of dogs. Each breed varies in size and\n temperament. Owners often select a breed of dog that they find to be\n compatible with their own lifestyle and desires from a companion.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 2}\n index={2}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n How do you acquire a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 2}>\n <p>\n Three common ways for a prospective owner to acquire a dog is from\n pet shops, private owners, or shelters.\n </p>\n <p>\n A pet shop may be the most convenient way to buy a dog. Buying a dog\n from a private owner allows you to assess the pedigree and\n upbringing of your dog before choosing to take it home. Lastly,\n finding your dog from a shelter, helps give a good home to a dog who\n may not find one so readily.\n </p>\n </Accordion.Content>\n </Accordion>\n )\n }\n}\n","modules/Accordion/Variations/AccordionExampleInverted":"import React, { Component } from 'react'\nimport { Accordion, Icon, Segment } from 'semantic-ui-react'\n\nexport default class AccordionExampleInverted extends Component {\n state = { activeIndex: 0 }\n\n handleClick = (e, titleProps) => {\n const { index } = titleProps\n const { activeIndex } = this.state\n const newIndex = activeIndex === index ? -1 : index\n\n this.setState({ activeIndex: newIndex })\n }\n\n render() {\n const { activeIndex } = this.state\n\n return (\n <Segment inverted>\n <Accordion inverted>\n <Accordion.Title\n active={activeIndex === 0}\n index={0}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What is a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 0}>\n <p>\n A dog is a type of domesticated animal. Known for its loyalty and\n faithfulness, it can be found as a welcome guest in many\n households across the world.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 1}\n index={1}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n What kinds of dogs are there?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 1}>\n <p>\n There are many breeds of dogs. Each breed varies in size and\n temperament. Owners often select a breed of dog that they find to\n be compatible with their own lifestyle and desires from a\n companion.\n </p>\n </Accordion.Content>\n\n <Accordion.Title\n active={activeIndex === 2}\n index={2}\n onClick={this.handleClick}\n >\n <Icon name='dropdown' />\n How do you acquire a dog?\n </Accordion.Title>\n <Accordion.Content active={activeIndex === 2}>\n <p>\n Three common ways for a prospective owner to acquire a dog is from\n pet shops, private owners, or shelters.\n </p>\n <p>\n A pet shop may be the most convenient way to buy a dog. Buying a\n dog from a private owner allows you to assess the pedigree and\n upbringing of your dog before choosing to take it home. Lastly,\n finding your dog from a shelter, helps give a good home to a dog\n who may not find one so readily.\n </p>\n </Accordion.Content>\n </Accordion>\n </Segment>\n )\n }\n}\n","modules/Checkbox/States/CheckboxExampleChecked":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleChecked = () => (\n <Checkbox label='This checkbox comes pre-checked' defaultChecked />\n)\n\nexport default CheckboxExampleChecked\n","modules/Checkbox/States/CheckboxExampleDisabled":"import React from 'react'\nimport { Form, Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleDisabled = () => (\n <Form>\n <Form.Field>\n <Checkbox label='Disabled' disabled />\n </Form.Field>\n <Form.Field>\n <Checkbox toggle label='Disabled' disabled />\n </Form.Field>\n </Form>\n)\n\nexport default CheckboxExampleDisabled\n","modules/Checkbox/States/CheckboxExampleIndeterminate":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleIndeterminate = () => (\n <Checkbox label='This checkbox is indeterminate' defaultIndeterminate />\n)\n\nexport default CheckboxExampleIndeterminate\n","modules/Checkbox/States/CheckboxExampleReadOnly":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleReadOnly = () => (\n <Checkbox label='This checkbox is read-only' readOnly />\n)\n\nexport default CheckboxExampleReadOnly\n","modules/Checkbox/Types/CheckboxExampleCheckbox":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleCheckbox = () => (\n <Checkbox label='Make my profile visible' />\n)\n\nexport default CheckboxExampleCheckbox\n","modules/Checkbox/Types/CheckboxExampleRadio":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleRadio = () => <Checkbox radio label='Radio choice' />\n\nexport default CheckboxExampleRadio\n","modules/Checkbox/Types/CheckboxExampleRadioGroup":"import React, { Component } from 'react'\nimport { Form, Checkbox } from 'semantic-ui-react'\n\nexport default class CheckboxExampleRadioGroup extends Component {\n state = {}\n handleChange = (e, { value }) => this.setState({ value })\n\n render() {\n return (\n <Form>\n <Form.Field>\n Selected value: <b>{this.state.value}</b>\n </Form.Field>\n <Form.Field>\n <Checkbox\n radio\n label='Choose this'\n name='checkboxRadioGroup'\n value='this'\n checked={this.state.value === 'this'}\n onChange={this.handleChange}\n />\n </Form.Field>\n <Form.Field>\n <Checkbox\n radio\n label='Or that'\n name='checkboxRadioGroup'\n value='that'\n checked={this.state.value === 'that'}\n onChange={this.handleChange}\n />\n </Form.Field>\n </Form>\n )\n }\n}\n","modules/Checkbox/Types/CheckboxExampleShorthandElement":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleShorthandElement = () => (\n <Checkbox label={<label>Make my profile visible</label>} />\n)\n\nexport default CheckboxExampleShorthandElement\n","modules/Checkbox/Types/CheckboxExampleShorthandObject":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleShorthandObject = () => (\n <Checkbox label={{ children: 'Make my profile visible' }} />\n)\n\nexport default CheckboxExampleShorthandObject\n","modules/Checkbox/Types/CheckboxExampleSlider":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleSlider = () => <Checkbox slider />\n\nexport default CheckboxExampleSlider\n","modules/Checkbox/Types/CheckboxExampleToggle":"import React from 'react'\nimport { Checkbox } from 'semantic-ui-react'\n\nconst CheckboxExampleToggle = () => <Checkbox toggle />\n\nexport default CheckboxExampleToggle\n","modules/Checkbox/Usage/CheckboxExampleDOMComparison":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Button, Checkbox, Grid, Segment, Table } from 'semantic-ui-react'\n\nexport default class CheckboxExampleDOMComparison extends Component {\n state = {\n domChecked: false,\n suirChecked: false,\n log: [],\n }\n\n clearLog = () => this.setState({ log: [] })\n\n log = (action, value) =>\n this.setState(({ log }) => ({\n log: [\n `${new Date().toLocaleTimeString()}: ${_.padEnd(\n action,\n 10,\n )} { checked: ${value} }`,\n ...log,\n ].slice(0, 15),\n }))\n\n toggle = () =>\n this.setState(({ suirChecked }) => ({ suirChecked: !suirChecked }))\n toggleDOM = () =>\n this.setState(({ domChecked }) => ({ domChecked: !domChecked }))\n\n handleMouseDown = (e, { checked }) => this.log('MouseDown', checked)\n handleMouseUp = (e, { checked }) => this.log('MouseUp', checked)\n handleClick = (e, { checked }) => this.log('Click', checked)\n handleChange = (e, { checked }) => {\n this.log('Change', checked)\n this.toggle()\n }\n\n handleDOMMouseDown = (e) => this.log('DOM MouseDown', e.target.checked)\n handleDOMMouseUp = (e) => this.log('DOM MouseUp', e.target.checked)\n handleDOMClick = (e) => this.log('DOM Click', e.target.checked)\n handleDOMChange = (e) => {\n this.log('DOM Change', e.target.checked)\n this.toggleDOM()\n }\n\n render() {\n const { domChecked, suirChecked, log } = this.state\n\n return (\n <Grid>\n <Grid.Column width={10}>\n <Table>\n <Table.Body>\n <Table.Row>\n <Table.Cell collapsing>\n <Button compact onClick={this.toggle}>\n Toggle\n </Button>\n </Table.Cell>\n <Table.Cell>\n <Checkbox\n checked={suirChecked}\n label='SUIR Checkbox'\n onChange={this.handleChange}\n onClick={this.handleClick}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n />\n <br />\n\n <Checkbox\n checked={suirChecked}\n id='suir-checkbox'\n label='SUIR Checkbox with id'\n onChange={this.handleChange}\n onClick={this.handleClick}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n />\n </Table.Cell>\n <Table.Cell collapsing>\n <code>{`{ checked: ${suirChecked} }`}</code>\n </Table.Cell>\n </Table.Row>\n\n <Table.Row>\n <Table.Cell>\n <Button compact onClick={this.toggleDOM}>\n Toggle\n </Button>\n </Table.Cell>\n <Table.Cell>\n <label>\n <input\n checked={domChecked}\n onChange={this.handleDOMChange}\n onClick={this.handleDOMClick}\n onMouseDown={this.handleDOMMouseDown}\n onMouseUp={this.handleDOMMouseUp}\n type='checkbox'\n />{' '}\n DOM Checkbox\n </label>\n <br />\n\n <input\n checked={domChecked}\n id='dom-checkbox'\n onChange={this.handleDOMChange}\n onClick={this.handleDOMClick}\n onMouseDown={this.handleDOMMouseDown}\n onMouseUp={this.handleDOMMouseUp}\n type='checkbox'\n />\n <label htmlFor='dom-checkbox'> DOM Checkbox with id</label>\n </Table.Cell>\n <Table.Cell>\n <code>{`{ checked: ${domChecked} }`}</code>\n </Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </Grid.Column>\n\n <Grid.Column width={6}>\n <Segment.Group>\n <Segment>\n <Button\n compact\n size='small'\n floated='right'\n onClick={this.clearLog}\n >\n Clear\n </Button>\n Event Log\n </Segment>\n <Segment secondary>\n <pre>\n {log.map((e, i) => (\n <div key={i}>{e}</div>\n ))}\n </pre>\n </Segment>\n </Segment.Group>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Checkbox/Usage/CheckboxExampleRemoteControl":"import React, { Component } from 'react'\nimport { Button, Checkbox } from 'semantic-ui-react'\n\nexport default class CheckboxExampleRemoteControl extends Component {\n state = { checked: false }\n toggle = () => this.setState((prevState) => ({ checked: !prevState.checked }))\n\n render() {\n return (\n <div>\n <Button onClick={this.toggle}>Toggle it</Button>\n <Checkbox\n label='Check this box'\n onChange={this.toggle}\n checked={this.state.checked}\n />\n </div>\n )\n }\n}\n","modules/Checkbox/Variations/CheckboxExampleFitted":"import React from 'react'\nimport { Checkbox, Segment } from 'semantic-ui-react'\n\nconst CheckboxExampleFitted = () => (\n <div>\n <Segment compact>\n <Checkbox />\n </Segment>\n <Segment compact>\n <Checkbox slider />\n </Segment>\n <Segment compact>\n <Checkbox toggle />\n </Segment>\n </div>\n)\n\nexport default CheckboxExampleFitted\n","modules/Dimmer/States/DimmerExampleActive":"import React from 'react'\nimport { Dimmer, Image, Segment } from 'semantic-ui-react'\n\nconst DimmerExampleActive = () => (\n <Segment>\n <Dimmer active />\n\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n </Segment>\n)\n\nexport default DimmerExampleActive\n","modules/Dimmer/Types/DimmerExampleContent":"import React, { Component } from 'react'\nimport { Button, Dimmer, Header, Icon, Image, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleDimmer extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} dimmed={active}>\n <Header as='h3'>Overlayable Section</Header>\n <Image.Group size='small' className='ui small images'>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Image.Group>\n <Image size='medium' src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n\n <Dimmer active={active} onClickOutside={this.handleHide}>\n <Header as='h2' icon inverted>\n <Icon name='heart' />\n Dimmed Message!\n </Header>\n </Dimmer>\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dimmer/Types/DimmerExampleDimmer":"import React, { Component } from 'react'\nimport { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleDimmer extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} dimmed={active}>\n <Header as='h3'>Overlayable Section</Header>\n <Image.Group size='small' className='ui small images'>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Image.Group>\n <Image size='medium' src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n\n <Dimmer active={active} onClickOutside={this.handleHide} />\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dimmer/Types/DimmerExamplePage":"import React, { Component } from 'react'\nimport { Button, Dimmer, Header, Icon } from 'semantic-ui-react'\n\nexport default class DimmerExamplePage extends Component {\n state = {}\n\n handleOpen = () => this.setState({ active: true })\n handleClose = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Button\n content='Show'\n icon='plus'\n labelPosition='left'\n onClick={this.handleOpen}\n />\n\n <Dimmer active={active} onClickOutside={this.handleClose} page>\n <Header as='h2' icon inverted>\n <Icon name='heart' />\n Dimmed Message!\n <Header.Subheader>Dimmer sub-header</Header.Subheader>\n </Header>\n </Dimmer>\n </div>\n )\n }\n}\n","modules/Dimmer/Usage/DimmerExampleEvents":"import React, { Component } from 'react'\nimport { Button, Dimmer, Header, Image } from 'semantic-ui-react'\n\nexport default class DimmerExampleEvents extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n const content = (\n <div>\n <Header as='h2' inverted>\n Title\n </Header>\n\n <Button primary>Add</Button>\n <Button>View</Button>\n </div>\n )\n\n return (\n <Dimmer.Dimmable\n as={Image}\n dimmed={active}\n dimmer={{ active, content }}\n onMouseEnter={this.handleShow}\n onMouseLeave={this.handleHide}\n size='medium'\n src='https://react.semantic-ui.com/images/wireframe/image.png'\n />\n )\n }\n}\n","modules/Dimmer/Usage/DimmerExampleLoader":"import React, { Component } from 'react'\nimport { Button, Dimmer, Image, Loader, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleLoader extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} dimmed={active}>\n <Dimmer active={active} inverted>\n <Loader>Loading</Loader>\n </Dimmer>\n\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dimmer/Variations/DimmerExampleBlurring":"import React, { Component } from 'react'\nimport { Button, Dimmer, Image, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleBlurring extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} blurring dimmed={active}>\n <Dimmer active={active} onClickOutside={this.handleHide} />\n\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dimmer/Variations/DimmerExampleBlurringInverted":"import React, { Component } from 'react'\nimport { Button, Dimmer, Image, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleBlurringInverted extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} blurring dimmed={active}>\n <Dimmer active={active} inverted onClickOutside={this.handleHide} />\n\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dimmer/Variations/DimmerExampleInverted":"import React, { Component } from 'react'\nimport { Button, Dimmer, Image, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleInverted extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} dimmed={active}>\n <Dimmer active={active} inverted onClickOutside={this.handleHide} />\n\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </p>\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dimmer/Variations/DimmerExampleSimple":"import React from 'react'\nimport { Dimmer, Image, Segment } from 'semantic-ui-react'\n\nconst DimmerExampleSimple = () => (\n <Dimmer.Dimmable as={Segment} dimmed>\n <Dimmer simple />\n\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n </Dimmer.Dimmable>\n)\n\nexport default DimmerExampleSimple\n","modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom":"import React, { Component } from 'react'\nimport { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleVerticalAlignBottom extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} dimmed={active}>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n\n <Dimmer\n active={active}\n onClickOutside={this.handleHide}\n verticalAlign='bottom'\n >\n <Header as='h2' inverted>\n Title\n </Header>\n\n <Button primary>Add</Button>\n <Button>View</Button>\n </Dimmer>\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dimmer/Variations/DimmerExampleVerticalAlignTop":"import React, { Component } from 'react'\nimport { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'\n\nexport default class DimmerExampleVerticalAlignTop extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Dimmer.Dimmable as={Segment} dimmed={active}>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n <p>\n <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />\n </p>\n\n <Dimmer\n active={active}\n onClickOutside={this.handleHide}\n verticalAlign='top'\n >\n <Header as='h2' inverted>\n Title\n </Header>\n\n <Button primary>Add</Button>\n <Button>View</Button>\n </Dimmer>\n </Dimmer.Dimmable>\n\n <Button.Group>\n <Button icon='plus' onClick={this.handleShow} />\n <Button icon='minus' onClick={this.handleHide} />\n </Button.Group>\n </div>\n )\n }\n}\n","modules/Dropdown/Content/DropdownExampleDescription":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst DropdownExampleDescription = () => (\n <Dropdown\n text='Filter Tags'\n floating\n labeled\n button\n icon='filter'\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header icon='tags' content='Filter by tag' />\n <Dropdown.Divider />\n <Dropdown.Item description='2 new' text='Important' />\n <Dropdown.Item description='10 new' text='Hopper' />\n <Dropdown.Item description='5 new' text='Discussion' />\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleDescription\n","modules/Dropdown/Content/DropdownExampleDivider":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst DropdownExampleDivider = () => (\n <Dropdown\n text='Filter'\n icon='filter'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header icon='tags' content='Filter by tag' />\n <Dropdown.Divider />\n <Dropdown.Item>Important</Dropdown.Item>\n <Dropdown.Item>Announcement</Dropdown.Item>\n <Dropdown.Item>Discussion</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleDivider\n","modules/Dropdown/Content/DropdownExampleFloatedContent":"import React from 'react'\nimport { Dropdown, Icon } from 'semantic-ui-react'\n\nconst DropdownExampleFloatedContent = () => (\n <Dropdown\n text='Filter'\n icon='filter'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header icon='tags' content='Filter by tag' />\n <Dropdown.Divider />\n <Dropdown.Item>\n <Icon name='attention' className='right floated' />\n Important\n </Dropdown.Item>\n <Dropdown.Item>\n <Icon name='comment' className='right floated' />\n Announcement\n </Dropdown.Item>\n <Dropdown.Item>\n <Icon name='conversation' className='right floated' />\n Discussion\n </Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleFloatedContent\n","modules/Dropdown/Content/DropdownExampleHeader":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst DropdownExampleHeader = () => (\n <Dropdown\n text='Filter'\n icon='filter'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header icon='tags' content='Filter by tag' />\n <Dropdown.Item>Important</Dropdown.Item>\n <Dropdown.Item>Announcement</Dropdown.Item>\n <Dropdown.Item>Discussion</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleHeader\n","modules/Dropdown/Content/DropdownExampleIcon":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst DropdownExampleIcon = () => (\n <Dropdown\n text='Filter'\n icon='filter'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header icon='tags' content='Filter by tag' />\n <Dropdown.Divider />\n <Dropdown.Item icon='attention' text='Important' />\n <Dropdown.Item icon='comment' text='Announcement' />\n <Dropdown.Item icon='conversation' text='Discussion' />\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleIcon\n","modules/Dropdown/Content/DropdownExampleImage":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst friendOptions = [\n {\n key: 'Jenny Hess',\n text: 'Jenny Hess',\n value: 'Jenny Hess',\n image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },\n },\n {\n key: 'Elliot Fu',\n text: 'Elliot Fu',\n value: 'Elliot Fu',\n image: { avatar: true, src: '/images/avatar/small/elliot.jpg' },\n },\n {\n key: 'Stevie Feliciano',\n text: 'Stevie Feliciano',\n value: 'Stevie Feliciano',\n image: { avatar: true, src: '/images/avatar/small/stevie.jpg' },\n },\n]\n\nconst DropdownExampleImage = () => (\n <Dropdown\n text='Add user'\n icon='add user'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header content='People You Might Know' />\n {friendOptions.map((option) => (\n <Dropdown.Item key={option.value} {...option} />\n ))}\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleImage\n","modules/Dropdown/Content/DropdownExampleInput":"import React from 'react'\nimport { Dropdown, Input } from 'semantic-ui-react'\n\nconst DropdownExampleInput = () => (\n <Dropdown\n text='Filter'\n icon='filter'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header content='Search Issues' />\n <Input icon='search' iconPosition='left' name='search' />\n <Dropdown.Header icon='tags' content='Filter by tag' />\n <Dropdown.Divider />\n <Dropdown.Item\n label={{ color: 'red', empty: true, circular: true }}\n text='Important'\n />\n <Dropdown.Item\n label={{ color: 'blue', empty: true, circular: true }}\n text='Announcement'\n />\n <Dropdown.Item\n label={{ color: 'black', empty: true, circular: true }}\n text='Discussion'\n />\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleInput\n","modules/Dropdown/Content/DropdownExampleLabel":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst DropdownExampleLabel = () => (\n <Dropdown\n text='Filter'\n icon='filter'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Dropdown.Header icon='tags' content='Filter by tag' />\n <Dropdown.Divider />\n <Dropdown.Item\n label={{ color: 'red', empty: true, circular: true }}\n text='Important'\n />\n <Dropdown.Item\n label={{ color: 'blue', empty: true, circular: true }}\n text='Announcement'\n />\n <Dropdown.Item\n label={{ color: 'black', empty: true, circular: true }}\n text='Discussion'\n />\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleLabel\n","modules/Dropdown/Content/DropdownExampleMessage":"import React from 'react'\nimport { Dropdown, Message } from 'semantic-ui-react'\n\nconst DropdownExampleMessage = () => (\n <Dropdown text='Login' icon='filter' floating labeled button className='icon'>\n <Dropdown.Menu>\n <Message\n error\n header='Error'\n content='You must log-in to see all categories'\n />\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleMessage\n","modules/Dropdown/States/DropdownExampleActive":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'Choice 1', value: 1 },\n { key: 2, text: 'Choice 2', value: 2 },\n]\n\nconst DropdownExampleActive = () => (\n <Dropdown text='Dropdown' options={options} open />\n)\n\nexport default DropdownExampleActive\n","modules/Dropdown/States/DropdownExampleDisabled":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'Choice 1', value: 1 },\n { key: 2, text: 'Choice 2', value: 2 },\n]\n\nconst DropdownExampleDisabled = () => (\n <Dropdown text='Dropdown' options={options} disabled />\n)\n\nexport default DropdownExampleDisabled\n","modules/Dropdown/States/DropdownExampleDisabledItem":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'Choice 1', value: 1 },\n { key: 2, text: 'Choice 2', value: 2, disabled: true },\n { key: 3, text: 'Choice 3', value: 3 },\n]\n\nconst DropdownExampleDisabledItem = () => (\n <Dropdown text='Dropdown' options={options} />\n)\n\nexport default DropdownExampleDisabledItem\n","modules/Dropdown/States/DropdownExampleError":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'Choice 1', value: 1 },\n { key: 2, text: 'Choice 2', value: 2 },\n]\n\nconst DropdownExampleError = () => (\n <Dropdown text='Dropdown' options={options} error />\n)\n\nexport default DropdownExampleError\n","modules/Dropdown/States/DropdownExampleLoading":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'Choice 1', value: 1 },\n { key: 2, text: 'Choice 2', value: 2 },\n]\n\nconst DropdownExampleLoading = () => (\n <Dropdown text='Dropdown' options={options} loading />\n)\n\nexport default DropdownExampleLoading\n","modules/Dropdown/Types/DropdownExampleClearable":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'Choice 1', value: 1 },\n { key: 2, text: 'Choice 2', value: 2 },\n { key: 3, text: 'Choice 3', value: 3 },\n]\n\nconst DropdownExampleClearable = () => (\n <Dropdown clearable options={options} selection />\n)\n\nexport default DropdownExampleClearable\n","modules/Dropdown/Types/DropdownExampleClearableMultiple":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst countryOptions = [\n { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' },\n { key: 'ax', value: 'ax', flag: 'ax', text: 'Aland Islands' },\n { key: 'al', value: 'al', flag: 'al', text: 'Albania' },\n { key: 'dz', value: 'dz', flag: 'dz', text: 'Algeria' },\n { key: 'as', value: 'as', flag: 'as', text: 'American Samoa' },\n { key: 'ad', value: 'ad', flag: 'ad', text: 'Andorra' },\n { key: 'ao', value: 'ao', flag: 'ao', text: 'Angola' },\n { key: 'ai', value: 'ai', flag: 'ai', text: 'Anguilla' },\n { key: 'ag', value: 'ag', flag: 'ag', text: 'Antigua' },\n { key: 'ar', value: 'ar', flag: 'ar', text: 'Argentina' },\n { key: 'am', value: 'am', flag: 'am', text: 'Armenia' },\n { key: 'aw', value: 'aw', flag: 'aw', text: 'Aruba' },\n { key: 'au', value: 'au', flag: 'au', text: 'Australia' },\n { key: 'at', value: 'at', flag: 'at', text: 'Austria' },\n { key: 'az', value: 'az', flag: 'az', text: 'Azerbaijan' },\n { key: 'bs', value: 'bs', flag: 'bs', text: 'Bahamas' },\n { key: 'bh', value: 'bh', flag: 'bh', text: 'Bahrain' },\n { key: 'bd', value: 'bd', flag: 'bd', text: 'Bangladesh' },\n { key: 'bb', value: 'bb', flag: 'bb', text: 'Barbados' },\n { key: 'by', value: 'by', flag: 'by', text: 'Belarus' },\n { key: 'be', value: 'be', flag: 'be', text: 'Belgium' },\n { key: 'bz', value: 'bz', flag: 'bz', text: 'Belize' },\n { key: 'bj', value: 'bj', flag: 'bj', text: 'Benin' },\n]\n\nconst DropdownExampleClearableMultiple = () => (\n <Dropdown\n clearable\n fluid\n multiple\n search\n selection\n options={countryOptions}\n placeholder='Select Country'\n />\n)\n\nexport default DropdownExampleClearableMultiple\n","modules/Dropdown/Types/DropdownExampleDropdown":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\n// TODO: This is missing functionality for sub-menu here from SUI core examples.\n// The \"Publish To Web\" item should contain a sub-menu.\n\nconst DropdownExampleDropdown = () => (\n <Dropdown text='File'>\n <Dropdown.Menu>\n <Dropdown.Item text='New' />\n <Dropdown.Item text='Open...' description='ctrl + o' />\n <Dropdown.Item text='Save as...' description='ctrl + s' />\n <Dropdown.Item text='Rename' description='ctrl + r' />\n <Dropdown.Item text='Make a copy' />\n <Dropdown.Item icon='folder' text='Move to folder' />\n <Dropdown.Item icon='trash' text='Move to trash' />\n <Dropdown.Divider />\n <Dropdown.Item text='Download As...' />\n <Dropdown.Item text='Publish To Web' />\n <Dropdown.Item text='E-mail Collaborators' />\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleDropdown\n","modules/Dropdown/Types/DropdownExampleFloating":"import React from 'react'\nimport { Button, Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'edit', icon: 'edit', text: 'Edit Post', value: 'edit' },\n { key: 'delete', icon: 'delete', text: 'Remove Post', value: 'delete' },\n { key: 'hide', icon: 'hide', text: 'Hide Post', value: 'hide' },\n]\n\nconst DropdownExampleFloating = () => (\n <Button.Group color='teal'>\n <Button>Save</Button>\n <Dropdown\n className='button icon'\n floating\n options={options}\n trigger={<></>}\n />\n </Button.Group>\n)\n\nexport default DropdownExampleFloating\n","modules/Dropdown/Types/DropdownExampleInline":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst friendOptions = [\n {\n key: 'Jenny Hess',\n text: 'Jenny Hess',\n value: 'Jenny Hess',\n image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },\n },\n {\n key: 'Elliot Fu',\n text: 'Elliot Fu',\n value: 'Elliot Fu',\n image: { avatar: true, src: '/images/avatar/small/elliot.jpg' },\n },\n {\n key: 'Stevie Feliciano',\n text: 'Stevie Feliciano',\n value: 'Stevie Feliciano',\n image: { avatar: true, src: '/images/avatar/small/stevie.jpg' },\n },\n {\n key: 'Christian',\n text: 'Christian',\n value: 'Christian',\n image: { avatar: true, src: '/images/avatar/small/christian.jpg' },\n },\n]\n\nconst DropdownExampleInline = () => (\n <span>\n Show me posts by{' '}\n <Dropdown\n inline\n options={friendOptions}\n defaultValue={friendOptions[0].value}\n />\n </span>\n)\n\nexport default DropdownExampleInline\n","modules/Dropdown/Types/DropdownExampleInlineTwo":"import React from 'react'\nimport { Dropdown, Header, Icon } from 'semantic-ui-react'\n\nconst options = [\n {\n key: 'today',\n text: 'today',\n value: 'today',\n content: 'Today',\n },\n {\n key: 'this week',\n text: 'this week',\n value: 'this week',\n content: 'This Week',\n },\n {\n key: 'this month',\n text: 'this month',\n value: 'this month',\n content: 'This Month',\n },\n]\n\nconst DropdownExampleInlineTwo = () => (\n <Header as='h4'>\n <Icon name='trophy' />\n <Header.Content>\n Trending repos{' '}\n <Dropdown\n inline\n header='Adjust time span'\n options={options}\n defaultValue={options[0].value}\n />\n </Header.Content>\n </Header>\n)\n\nexport default DropdownExampleInlineTwo\n","modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu":"import React from 'react'\nimport { Dropdown, Input } from 'semantic-ui-react'\n\nconst tagOptions = [\n {\n key: 'Important',\n text: 'Important',\n value: 'Important',\n label: { color: 'red', empty: true, circular: true },\n },\n {\n key: 'Announcement',\n text: 'Announcement',\n value: 'Announcement',\n label: { color: 'blue', empty: true, circular: true },\n },\n {\n key: 'Cannot Fix',\n text: 'Cannot Fix',\n value: 'Cannot Fix',\n label: { color: 'black', empty: true, circular: true },\n },\n {\n key: 'News',\n text: 'News',\n value: 'News',\n label: { color: 'purple', empty: true, circular: true },\n },\n {\n key: 'Enhancement',\n text: 'Enhancement',\n value: 'Enhancement',\n label: { color: 'orange', empty: true, circular: true },\n },\n {\n key: 'Change Declined',\n text: 'Change Declined',\n value: 'Change Declined',\n label: { empty: true, circular: true },\n },\n {\n key: 'Off Topic',\n text: 'Off Topic',\n value: 'Off Topic',\n label: { color: 'yellow', empty: true, circular: true },\n },\n {\n key: 'Interesting',\n text: 'Interesting',\n value: 'Interesting',\n label: { color: 'pink', empty: true, circular: true },\n },\n {\n key: 'Discussion',\n text: 'Discussion',\n value: 'Discussion',\n label: { color: 'green', empty: true, circular: true },\n },\n]\n\nconst DropdownExampleMultipleSearchInMenu = () => (\n <Dropdown text='Filter Posts' multiple icon='filter'>\n <Dropdown.Menu>\n <Input icon='search' iconPosition='left' className='search' />\n <Dropdown.Divider />\n <Dropdown.Header icon='tags' content='Tag Label' />\n <Dropdown.Menu scrolling>\n {tagOptions.map((option) => (\n <Dropdown.Item key={option.value} {...option} />\n ))}\n </Dropdown.Menu>\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleMultipleSearchInMenu\n","modules/Dropdown/Types/DropdownExampleMultipleSearchSelection":"import faker from 'faker'\nimport _ from 'lodash'\nimport React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst addressDefinitions = faker.definitions.address\nconst stateOptions = _.map(addressDefinitions.state, (state, index) => ({\n key: addressDefinitions.state_abbr[index],\n text: state,\n value: addressDefinitions.state_abbr[index],\n}))\n\nconst DropdownExampleMultipleSearchSelection = () => (\n <Dropdown\n placeholder='State'\n fluid\n multiple\n search\n selection\n options={stateOptions}\n />\n)\n\nexport default DropdownExampleMultipleSearchSelection\n","modules/Dropdown/Types/DropdownExampleMultipleSelection":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'angular', text: 'Angular', value: 'angular' },\n { key: 'css', text: 'CSS', value: 'css' },\n { key: 'design', text: 'Graphic Design', value: 'design' },\n { key: 'ember', text: 'Ember', value: 'ember' },\n { key: 'html', text: 'HTML', value: 'html' },\n { key: 'ia', text: 'Information Architecture', value: 'ia' },\n { key: 'javascript', text: 'Javascript', value: 'javascript' },\n { key: 'mech', text: 'Mechanical Engineering', value: 'mech' },\n { key: 'meteor', text: 'Meteor', value: 'meteor' },\n { key: 'node', text: 'NodeJS', value: 'node' },\n { key: 'plumbing', text: 'Plumbing', value: 'plumbing' },\n { key: 'python', text: 'Python', value: 'python' },\n { key: 'rails', text: 'Rails', value: 'rails' },\n { key: 'react', text: 'React', value: 'react' },\n { key: 'repair', text: 'Kitchen Repair', value: 'repair' },\n { key: 'ruby', text: 'Ruby', value: 'ruby' },\n { key: 'ui', text: 'UI Design', value: 'ui' },\n { key: 'ux', text: 'User Experience', value: 'ux' },\n]\n\nconst DropdownExampleMultipleSelection = () => (\n <Dropdown placeholder='Skills' fluid multiple selection options={options} />\n)\n\nexport default DropdownExampleMultipleSelection\n","modules/Dropdown/Types/DropdownExamplePointing":"import React from 'react'\nimport { Dropdown, Menu } from 'semantic-ui-react'\n\nconst DropdownExamplePointing = () => (\n <Menu>\n <Menu.Item>Home</Menu.Item>\n <Dropdown text='Shopping' pointing className='link item'>\n <Dropdown.Menu>\n <Dropdown.Header>Categories</Dropdown.Header>\n <Dropdown.Item>\n <Dropdown text='Clothing'>\n <Dropdown.Menu>\n <Dropdown.Header>Mens</Dropdown.Header>\n <Dropdown.Item>Shirts</Dropdown.Item>\n <Dropdown.Item>Pants</Dropdown.Item>\n <Dropdown.Item>Jeans</Dropdown.Item>\n <Dropdown.Item>Shoes</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Header>Womens</Dropdown.Header>\n <Dropdown.Item>Dresses</Dropdown.Item>\n <Dropdown.Item>Shoes</Dropdown.Item>\n <Dropdown.Item>Bags</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </Dropdown.Item>\n <Dropdown.Item>Home Goods</Dropdown.Item>\n <Dropdown.Item>Bedroom</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Header>Order</Dropdown.Header>\n <Dropdown.Item>Status</Dropdown.Item>\n <Dropdown.Item>Cancellations</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n <Menu.Item>Forums</Menu.Item>\n <Menu.Item>Contact Us</Menu.Item>\n </Menu>\n)\n\nexport default DropdownExamplePointing\n","modules/Dropdown/Types/DropdownExamplePointingTwo":"import React from 'react'\nimport { Dropdown, Menu } from 'semantic-ui-react'\n\nconst DropdownExamplePointingTwo = () => (\n <Menu vertical>\n <Menu.Item>Home</Menu.Item>\n <Dropdown text='Messages' pointing='left' className='link item'>\n <Dropdown.Menu>\n <Dropdown.Item>Inbox</Dropdown.Item>\n <Dropdown.Item>Starred</Dropdown.Item>\n <Dropdown.Item>Sent Mail</Dropdown.Item>\n <Dropdown.Item>Drafts (143)</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item>Spam (1009)</Dropdown.Item>\n <Dropdown.Item>Trash</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n <Menu.Item>Browse</Menu.Item>\n <Menu.Item>Help</Menu.Item>\n </Menu>\n)\n\nexport default DropdownExamplePointingTwo\n","modules/Dropdown/Types/DropdownExampleSearchDropdown":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst languageOptions = [\n { key: 'Arabic', text: 'Arabic', value: 'Arabic' },\n { key: 'Chinese', text: 'Chinese', value: 'Chinese' },\n { key: 'Danish', text: 'Danish', value: 'Danish' },\n { key: 'Dutch', text: 'Dutch', value: 'Dutch' },\n { key: 'English', text: 'English', value: 'English' },\n { key: 'French', text: 'French', value: 'French' },\n { key: 'German', text: 'German', value: 'German' },\n { key: 'Greek', text: 'Greek', value: 'Greek' },\n { key: 'Hungarian', text: 'Hungarian', value: 'Hungarian' },\n { key: 'Italian', text: 'Italian', value: 'Italian' },\n { key: 'Japanese', text: 'Japanese', value: 'Japanese' },\n { key: 'Korean', text: 'Korean', value: 'Korean' },\n { key: 'Lithuanian', text: 'Lithuanian', value: 'Lithuanian' },\n { key: 'Persian', text: 'Persian', value: 'Persian' },\n { key: 'Polish', text: 'Polish', value: 'Polish' },\n { key: 'Portuguese', text: 'Portuguese', value: 'Portuguese' },\n { key: 'Russian', text: 'Russian', value: 'Russian' },\n { key: 'Spanish', text: 'Spanish', value: 'Spanish' },\n { key: 'Swedish', text: 'Swedish', value: 'Swedish' },\n { key: 'Turkish', text: 'Turkish', value: 'Turkish' },\n { key: 'Vietnamese', text: 'Vietnamese', value: 'Vietnamese' },\n]\n\nconst DropdownExampleSearchDropdown = () => (\n <Dropdown\n button\n className='icon'\n floating\n labeled\n icon='world'\n options={languageOptions}\n search\n text='Select Language'\n />\n)\n\nexport default DropdownExampleSearchDropdown\n","modules/Dropdown/Types/DropdownExampleSearchInMenu":"import React from 'react'\nimport { Dropdown, Input } from 'semantic-ui-react'\n\nconst tagOptions = [\n {\n key: 'Important',\n text: 'Important',\n value: 'Important',\n label: { color: 'red', empty: true, circular: true },\n },\n {\n key: 'Announcement',\n text: 'Announcement',\n value: 'Announcement',\n label: { color: 'blue', empty: true, circular: true },\n },\n {\n key: 'Cannot Fix',\n text: 'Cannot Fix',\n value: 'Cannot Fix',\n label: { color: 'black', empty: true, circular: true },\n },\n {\n key: 'News',\n text: 'News',\n value: 'News',\n label: { color: 'purple', empty: true, circular: true },\n },\n {\n key: 'Enhancement',\n text: 'Enhancement',\n value: 'Enhancement',\n label: { color: 'orange', empty: true, circular: true },\n },\n {\n key: 'Change Declined',\n text: 'Change Declined',\n value: 'Change Declined',\n label: { empty: true, circular: true },\n },\n {\n key: 'Off Topic',\n text: 'Off Topic',\n value: 'Off Topic',\n label: { color: 'yellow', empty: true, circular: true },\n },\n {\n key: 'Interesting',\n text: 'Interesting',\n value: 'Interesting',\n label: { color: 'pink', empty: true, circular: true },\n },\n {\n key: 'Discussion',\n text: 'Discussion',\n value: 'Discussion',\n label: { color: 'green', empty: true, circular: true },\n },\n]\n\nconst DropdownExampleSearchInMenu = () => (\n <Dropdown\n text='Filter Posts'\n icon='filter'\n floating\n labeled\n button\n className='icon'\n >\n <Dropdown.Menu>\n <Input icon='search' iconPosition='left' className='search' />\n <Dropdown.Divider />\n <Dropdown.Header icon='tags' content='Tag Label' />\n <Dropdown.Menu scrolling>\n {tagOptions.map((option) => (\n <Dropdown.Item key={option.value} {...option} />\n ))}\n </Dropdown.Menu>\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleSearchInMenu\n","modules/Dropdown/Types/DropdownExampleSearchSelection":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst countryOptions = [\n { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' },\n { key: 'ax', value: 'ax', flag: 'ax', text: 'Aland Islands' },\n { key: 'al', value: 'al', flag: 'al', text: 'Albania' },\n { key: 'dz', value: 'dz', flag: 'dz', text: 'Algeria' },\n { key: 'as', value: 'as', flag: 'as', text: 'American Samoa' },\n { key: 'ad', value: 'ad', flag: 'ad', text: 'Andorra' },\n { key: 'ao', value: 'ao', flag: 'ao', text: 'Angola' },\n { key: 'ai', value: 'ai', flag: 'ai', text: 'Anguilla' },\n { key: 'ag', value: 'ag', flag: 'ag', text: 'Antigua' },\n { key: 'ar', value: 'ar', flag: 'ar', text: 'Argentina' },\n { key: 'am', value: 'am', flag: 'am', text: 'Armenia' },\n { key: 'aw', value: 'aw', flag: 'aw', text: 'Aruba' },\n { key: 'au', value: 'au', flag: 'au', text: 'Australia' },\n { key: 'at', value: 'at', flag: 'at', text: 'Austria' },\n { key: 'az', value: 'az', flag: 'az', text: 'Azerbaijan' },\n { key: 'bs', value: 'bs', flag: 'bs', text: 'Bahamas' },\n { key: 'bh', value: 'bh', flag: 'bh', text: 'Bahrain' },\n { key: 'bd', value: 'bd', flag: 'bd', text: 'Bangladesh' },\n { key: 'bb', value: 'bb', flag: 'bb', text: 'Barbados' },\n { key: 'by', value: 'by', flag: 'by', text: 'Belarus' },\n { key: 'be', value: 'be', flag: 'be', text: 'Belgium' },\n { key: 'bz', value: 'bz', flag: 'bz', text: 'Belize' },\n { key: 'bj', value: 'bj', flag: 'bj', text: 'Benin' },\n]\n\nconst DropdownExampleSearchSelection = () => (\n <Dropdown\n placeholder='Select Country'\n fluid\n search\n selection\n options={countryOptions}\n />\n)\n\nexport default DropdownExampleSearchSelection\n","modules/Dropdown/Types/DropdownExampleSearchSelectionTwo":"import faker from 'faker'\nimport _ from 'lodash'\nimport React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst addressDefinitions = faker.definitions.address\nconst stateOptions = _.map(addressDefinitions.state, (state, index) => ({\n key: addressDefinitions.state_abbr[index],\n text: state,\n value: addressDefinitions.state_abbr[index],\n}))\n\nconst DropdownExampleSearchSelectionTwo = () => (\n <Dropdown placeholder='State' search selection options={stateOptions} />\n)\n\nexport default DropdownExampleSearchSelectionTwo\n","modules/Dropdown/Types/DropdownExampleSelection":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst friendOptions = [\n {\n key: 'Jenny Hess',\n text: 'Jenny Hess',\n value: 'Jenny Hess',\n image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },\n },\n {\n key: 'Elliot Fu',\n text: 'Elliot Fu',\n value: 'Elliot Fu',\n image: { avatar: true, src: '/images/avatar/small/elliot.jpg' },\n },\n {\n key: 'Stevie Feliciano',\n text: 'Stevie Feliciano',\n value: 'Stevie Feliciano',\n image: { avatar: true, src: '/images/avatar/small/stevie.jpg' },\n },\n {\n key: 'Christian',\n text: 'Christian',\n value: 'Christian',\n image: { avatar: true, src: '/images/avatar/small/christian.jpg' },\n },\n {\n key: 'Matt',\n text: 'Matt',\n value: 'Matt',\n image: { avatar: true, src: '/images/avatar/small/matt.jpg' },\n },\n {\n key: 'Justen Kitsune',\n text: 'Justen Kitsune',\n value: 'Justen Kitsune',\n image: { avatar: true, src: '/images/avatar/small/justen.jpg' },\n },\n]\n\nconst DropdownExampleSelection = () => (\n <Dropdown\n placeholder='Select Friend'\n fluid\n selection\n options={friendOptions}\n />\n)\n\nexport default DropdownExampleSelection\n","modules/Dropdown/Types/DropdownExampleSimple":"import React from 'react'\nimport { Dropdown, Menu } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'Choice 1', value: 1 },\n { key: 2, text: 'Choice 2', value: 2 },\n { key: 3, text: 'Choice 3', value: 3 },\n]\n\nconst DropdownExampleSimple = () => (\n <Menu compact>\n <Dropdown text='Dropdown' options={options} simple item />\n </Menu>\n)\n\nexport default DropdownExampleSimple\n","modules/Dropdown/Usage/DropdownExampleAdditionLabelComponent":"import React, { Component } from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'English', text: 'English', value: 'English' },\n { key: 'French', text: 'French', value: 'French' },\n { key: 'Spanish', text: 'Spanish', value: 'Spanish' },\n { key: 'German', text: 'German', value: 'German' },\n { key: 'Chinese', text: 'Chinese', value: 'Chinese' },\n]\n\nclass DropdownExampleAdditionLabelComponent extends Component {\n state = { options }\n\n handleAddition = (e, { value }) => {\n this.setState((prevState) => ({\n options: [{ text: value, value }, ...prevState.options],\n }))\n }\n\n handleChange = (e, { value }) => this.setState({ currentValue: value })\n\n render() {\n const { currentValue } = this.state\n\n return (\n <Dropdown\n options={this.state.options}\n placeholder='Choose Language'\n search\n selection\n fluid\n allowAdditions\n additionLabel={<i style={{ color: 'red' }}>Custom Language: </i>}\n value={currentValue}\n onAddItem={this.handleAddition}\n onChange={this.handleChange}\n />\n )\n }\n}\n\nexport default DropdownExampleAdditionLabelComponent\n","modules/Dropdown/Usage/DropdownExampleAdditionLabelString":"import React, { Component } from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'English', text: 'English', value: 'English' },\n { key: 'French', text: 'French', value: 'French' },\n { key: 'Spanish', text: 'Spanish', value: 'Spanish' },\n { key: 'German', text: 'German', value: 'German' },\n { key: 'Chinese', text: 'Chinese', value: 'Chinese' },\n]\n\nclass DropdownExampleAdditionLabelString extends Component {\n state = { options }\n\n handleAddition = (e, { value }) => {\n this.setState((prevState) => ({\n options: [{ text: value, value }, ...prevState.options],\n }))\n }\n\n handleChange = (e, { value }) => this.setState({ currentValue: value })\n\n render() {\n const { currentValue } = this.state\n\n return (\n <Dropdown\n options={this.state.options}\n placeholder='Choose Language'\n search\n selection\n fluid\n allowAdditions\n additionLabel='Custom Language: '\n value={currentValue}\n onAddItem={this.handleAddition}\n onChange={this.handleChange}\n />\n )\n }\n}\n\nexport default DropdownExampleAdditionLabelString\n","modules/Dropdown/Usage/DropdownExampleAllowAdditions":"import React, { Component } from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'English', text: 'English', value: 'English' },\n { key: 'French', text: 'French', value: 'French' },\n { key: 'Spanish', text: 'Spanish', value: 'Spanish' },\n { key: 'German', text: 'German', value: 'German' },\n { key: 'Chinese', text: 'Chinese', value: 'Chinese' },\n]\n\nclass DropdownExampleAllowAdditions extends Component {\n state = { options }\n\n handleAddition = (e, { value }) => {\n this.setState((prevState) => ({\n options: [{ text: value, value }, ...prevState.options],\n }))\n }\n\n handleChange = (e, { value }) => this.setState({ currentValue: value })\n\n render() {\n const { currentValue } = this.state\n\n return (\n <Dropdown\n options={this.state.options}\n placeholder='Choose Language'\n search\n selection\n fluid\n allowAdditions\n value={currentValue}\n onAddItem={this.handleAddition}\n onChange={this.handleChange}\n />\n )\n }\n}\n\nexport default DropdownExampleAllowAdditions\n","modules/Dropdown/Usage/DropdownExampleCloseOnBlur":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst friendOptions = [\n {\n key: 'Jenny Hess',\n text: 'Jenny Hess',\n value: 'Jenny Hess',\n image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },\n },\n {\n key: 'Elliot Fu',\n text: 'Elliot Fu',\n value: 'Elliot Fu',\n image: { avatar: true, src: '/images/avatar/small/elliot.jpg' },\n },\n {\n key: 'Stevie Feliciano',\n text: 'Stevie Feliciano',\n value: 'Stevie Feliciano',\n image: { avatar: true, src: '/images/avatar/small/stevie.jpg' },\n },\n {\n key: 'Christian',\n text: 'Christian',\n value: 'Christian',\n image: { avatar: true, src: '/images/avatar/small/christian.jpg' },\n },\n {\n key: 'Matt',\n text: 'Matt',\n value: 'Matt',\n image: { avatar: true, src: '/images/avatar/small/matt.jpg' },\n },\n {\n key: 'Justen Kitsune',\n text: 'Justen Kitsune',\n value: 'Justen Kitsune',\n image: { avatar: true, src: '/images/avatar/small/justen.jpg' },\n },\n]\n\nconst DropdownExampleCloseOnBlur = () => (\n <>\n <Dropdown\n placeholder='I close on blur'\n closeOnBlur\n selection\n options={friendOptions}\n />{' '}\n <Dropdown\n placeholder='I stay open on blur'\n closeOnBlur={false}\n selection\n options={friendOptions}\n />\n </>\n)\n\nexport default DropdownExampleCloseOnBlur\n","modules/Dropdown/Usage/DropdownExampleCloseOnChange":"import _ from 'lodash'\nimport React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst getOptions = (number, prefix = 'Choice ') =>\n _.times(number, (index) => ({\n key: index,\n text: `${prefix}${index}`,\n value: index,\n }))\n\nconst DropdownExampleCloseOnChange = () => (\n <>\n <Dropdown\n multiple\n search\n selection\n closeOnChange\n options={getOptions(5)}\n placeholder='I close on change'\n />{' '}\n <Dropdown\n multiple\n search\n selection\n options={getOptions(5)}\n placeholder='I stay open on change'\n />\n </>\n)\n\nexport default DropdownExampleCloseOnChange\n","modules/Dropdown/Usage/DropdownExampleCloseOnEscape":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst friendOptions = [\n {\n key: 'Jenny Hess',\n text: 'Jenny Hess',\n value: 'Jenny Hess',\n image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },\n },\n {\n key: 'Elliot Fu',\n text: 'Elliot Fu',\n value: 'Elliot Fu',\n image: { avatar: true, src: '/images/avatar/small/elliot.jpg' },\n },\n {\n key: 'Stevie Feliciano',\n text: 'Stevie Feliciano',\n value: 'Stevie Feliciano',\n image: { avatar: true, src: '/images/avatar/small/stevie.jpg' },\n },\n {\n key: 'Christian',\n text: 'Christian',\n value: 'Christian',\n image: { avatar: true, src: '/images/avatar/small/christian.jpg' },\n },\n {\n key: 'Matt',\n text: 'Matt',\n value: 'Matt',\n image: { avatar: true, src: '/images/avatar/small/matt.jpg' },\n },\n {\n key: 'Justen Kitsune',\n text: 'Justen Kitsune',\n value: 'Justen Kitsune',\n image: { avatar: true, src: '/images/avatar/small/justen.jpg' },\n },\n]\n\nconst DropdownExampleCloseOnEscape = () => (\n <>\n <Dropdown\n placeholder='I close on escape'\n closeOnEscape\n selection\n options={friendOptions}\n />{' '}\n <Dropdown\n placeholder='I stay open on escape'\n closeOnEscape={false}\n selection\n options={friendOptions}\n />\n </>\n)\n\nexport default DropdownExampleCloseOnEscape\n","modules/Dropdown/Usage/DropdownExampleControlled":"import React, { Component } from 'react'\nimport { Dropdown, Grid, Segment } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'One', value: 1 },\n { key: 2, text: 'Two', value: 2 },\n { key: 3, text: 'Three', value: 3 },\n]\n\nexport default class DropdownExampleControlled extends Component {\n state = {}\n\n handleChange = (e, { value }) => this.setState({ value })\n\n render() {\n const { value } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Dropdown\n onChange={this.handleChange}\n options={options}\n placeholder='Choose an option'\n selection\n value={value}\n />\n </Grid.Column>\n <Grid.Column>\n <Segment secondary>\n <pre>Current value: {value}</pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Dropdown/Usage/DropdownExampleCustomNoResultsMessage":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst DropdownExampleCustomNoResultsMessage = () => (\n <Dropdown\n options={[]}\n search\n selection\n placeholder='A custom message...'\n noResultsMessage='Try another search.'\n />\n)\n\nexport default DropdownExampleCustomNoResultsMessage\n","modules/Dropdown/Usage/DropdownExampleCustomSearchFunction":"import _ from 'lodash'\nimport React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst caseSensitiveSearch = (options, query) => {\n const re = new RegExp(_.escapeRegExp(query))\n return options.filter((opt) => re.test(opt.text))\n}\n\nconst options = [\n { key: 'a', value: 'a', text: 'UPPERCASE' },\n { key: 'b', value: 'b', text: 'lowercase' },\n]\n\nconst DropdownExampleCustomSearchFunction = () => (\n <Dropdown\n fluid\n options={options}\n placeholder='Try to search for case or CASE'\n search={caseSensitiveSearch}\n selection\n />\n)\n\nexport default DropdownExampleCustomSearchFunction\n","modules/Dropdown/Usage/DropdownExampleDeburrSearch":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'a', value: 'a', text: 'Café with accent' },\n { key: 'b', value: 'b', text: 'Cafe without accent' },\n { key: 'c', value: 'c', text: 'Déjà vu' },\n { key: 'd', value: 'd', text: 'Deja vu' },\n { key: 'e', value: 'e', text: 'Scandinavian å ä æ ø ö' },\n { key: 'f', value: 'f', text: 'Scandinavian a a ae o o' },\n]\n\nconst DropdownExampleSearchSelection = () => (\n <Dropdown\n deburr\n fluid\n options={options}\n placeholder='Try to search for \"Deja vu\"'\n search\n selection\n />\n)\n\nexport default DropdownExampleSearchSelection\n","modules/Dropdown/Usage/DropdownExampleItemContent":"import React from 'react'\nimport { Dropdown, Header } from 'semantic-ui-react'\n\nconst options = [\n {\n key: 1,\n text: 'Mobile',\n value: 1,\n content: (\n <Header icon='mobile' content='Mobile' subheader='The smallest size' />\n ),\n },\n {\n key: 2,\n text: 'Tablet',\n value: 2,\n content: (\n <Header\n icon='tablet'\n content='Tablet'\n subheader='The size in the middle'\n />\n ),\n },\n {\n key: 3,\n text: 'Desktop',\n value: 3,\n content: (\n <Header icon='desktop' content='Desktop' subheader='The largest size' />\n ),\n },\n]\n\nconst DropdownExampleItemContent = () => (\n <Dropdown selection fluid options={options} placeholder='Choose an option' />\n)\n\nexport default DropdownExampleItemContent\n","modules/Dropdown/Usage/DropdownExampleMultipleAllowAdditions":"import React, { Component } from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'English', text: 'English', value: 'English' },\n { key: 'French', text: 'French', value: 'French' },\n { key: 'Spanish', text: 'Spanish', value: 'Spanish' },\n { key: 'German', text: 'German', value: 'German' },\n { key: 'Chinese', text: 'Chinese', value: 'Chinese' },\n]\n\nclass DropdownExampleAllowAdditions extends Component {\n state = { options }\n\n handleAddition = (e, { value }) => {\n this.setState((prevState) => ({\n options: [{ text: value, value }, ...prevState.options],\n }))\n }\n\n handleChange = (e, { value }) => this.setState({ currentValues: value })\n\n render() {\n const { currentValues } = this.state\n\n return (\n <Dropdown\n options={this.state.options}\n placeholder='Choose Languages'\n search\n selection\n fluid\n multiple\n allowAdditions\n value={currentValues}\n onAddItem={this.handleAddition}\n onChange={this.handleChange}\n />\n )\n }\n}\n\nexport default DropdownExampleAllowAdditions\n","modules/Dropdown/Usage/DropdownExampleMultipleCustomLabel":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'One', value: 1 },\n { key: 2, text: 'Two', value: 2 },\n { key: 3, text: 'Three', value: 3 },\n]\n\nconst renderLabel = (label) => ({\n color: 'blue',\n content: `Customized label - ${label.text}`,\n icon: 'check',\n})\n\nconst DropdownExampleMultipleCustomLabel = () => (\n <Dropdown\n multiple\n selection\n fluid\n options={options}\n placeholder='Choose an option'\n renderLabel={renderLabel}\n />\n)\n\nexport default DropdownExampleMultipleCustomLabel\n","modules/Dropdown/Usage/DropdownExampleOpenOnFocus":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst friendOptions = [\n {\n key: 'Jenny Hess',\n text: 'Jenny Hess',\n value: 'Jenny Hess',\n image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },\n },\n {\n key: 'Elliot Fu',\n text: 'Elliot Fu',\n value: 'Elliot Fu',\n image: { avatar: true, src: '/images/avatar/small/elliot.jpg' },\n },\n {\n key: 'Stevie Feliciano',\n text: 'Stevie Feliciano',\n value: 'Stevie Feliciano',\n image: { avatar: true, src: '/images/avatar/small/stevie.jpg' },\n },\n {\n key: 'Christian',\n text: 'Christian',\n value: 'Christian',\n image: { avatar: true, src: '/images/avatar/small/christian.jpg' },\n },\n {\n key: 'Matt',\n text: 'Matt',\n value: 'Matt',\n image: { avatar: true, src: '/images/avatar/small/matt.jpg' },\n },\n {\n key: 'Justen Kitsune',\n text: 'Justen Kitsune',\n value: 'Justen Kitsune',\n image: { avatar: true, src: '/images/avatar/small/justen.jpg' },\n },\n]\n\nconst DropdownExampleOpenOnFocus = () => (\n <>\n <Dropdown\n placeholder='I open on focus'\n openOnFocus\n selection\n options={friendOptions}\n />{' '}\n <Dropdown\n placeholder='I do not open on focus'\n openOnFocus={false}\n selection\n options={friendOptions}\n />\n </>\n)\n\nexport default DropdownExampleOpenOnFocus\n","modules/Dropdown/Usage/DropdownExampleRemote":"import _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Button, Dropdown, Grid, Header } from 'semantic-ui-react'\n\nconst getOptions = () =>\n _.times(3, () => {\n const name = faker.name.findName()\n return { key: name, text: name, value: _.snakeCase(name) }\n })\n\nclass DropdownExampleRemote extends Component {\n state = {\n isFetching: false,\n multiple: true,\n search: true,\n searchQuery: null,\n value: [],\n options: getOptions(),\n }\n\n handleChange = (e, { value }) => this.setState({ value })\n handleSearchChange = (e, { searchQuery }) => this.setState({ searchQuery })\n\n fetchOptions = () => {\n this.setState({ isFetching: true })\n\n setTimeout(() => {\n this.setState({ isFetching: false, options: getOptions() })\n this.selectRandom()\n }, 500)\n }\n\n selectRandom = () => {\n const { multiple, options } = this.state\n const value = _.sample(options).value\n this.setState({ value: multiple ? [value] : value })\n }\n\n toggleSearch = (e) => this.setState({ search: e.target.checked })\n\n toggleMultiple = (e) => {\n const { value } = this.state\n const multiple = e.target.checked\n // convert the value to/from an array\n const newValue = multiple ? _.compact([value]) : _.head(value) || ''\n this.setState({ multiple, value: newValue })\n }\n\n render() {\n const { multiple, options, isFetching, search, value } = this.state\n\n return (\n <Grid>\n <Grid.Column width={8}>\n <p>\n <Button onClick={this.fetchOptions}>Fetch</Button>\n <Button onClick={this.selectRandom} disabled={_.isEmpty(options)}>\n Random\n </Button>\n <label>\n <input\n type='checkbox'\n checked={search}\n onChange={this.toggleSearch}\n />{' '}\n Search\n </label>{' '}\n <label>\n <input\n type='checkbox'\n checked={multiple}\n onChange={this.toggleMultiple}\n />{' '}\n Multiple\n </label>\n </p>\n <Dropdown\n fluid\n selection\n multiple={multiple}\n search={search}\n options={options}\n value={value}\n placeholder='Add Users'\n onChange={this.handleChange}\n onSearchChange={this.handleSearchChange}\n disabled={isFetching}\n loading={isFetching}\n />\n </Grid.Column>\n <Grid.Column width={8}>\n <Header>State</Header>\n <pre>{JSON.stringify(this.state, null, 2)}</pre>\n </Grid.Column>\n </Grid>\n )\n }\n}\n\nexport default DropdownExampleRemote\n","modules/Dropdown/Usage/DropdownExampleRemoveNoResultsMessage":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst DropdownExampleRemoveNoResultsMessage = () => (\n <Dropdown\n options={[]}\n search\n selection\n placeholder='No message...'\n noResultsMessage={null}\n />\n)\n\nexport default DropdownExampleRemoveNoResultsMessage\n","modules/Dropdown/Usage/DropdownExampleSearchInput":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 100, text: '100', value: 100 },\n { key: 200, text: '200', value: 200 },\n { key: 300, text: '300', value: 300 },\n { key: 400, text: '400', value: 400 },\n]\n\nconst DropdownExampleSearchInput = () => (\n <Dropdown\n search\n searchInput={{ type: 'number' }}\n selection\n options={options}\n placeholder='Select amount...'\n />\n)\n\nexport default DropdownExampleSearchInput\n","modules/Dropdown/Usage/DropdownExampleSearchQuery":"import faker from 'faker'\nimport _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst addressDefinitions = faker.definitions.address\nconst stateOptions = _.map(addressDefinitions.state, (state, index) => ({\n key: addressDefinitions.state_abbr[index],\n text: state,\n value: addressDefinitions.state_abbr[index],\n}))\n\nexport default class DropdownExampleSearchQuery extends Component {\n state = { searchQuery: '' }\n\n handleChange = (e, { searchQuery, value }) =>\n this.setState({ searchQuery, value })\n\n handleSearchChange = (e, { searchQuery }) => this.setState({ searchQuery })\n\n render() {\n const { searchQuery, value } = this.state\n\n return (\n <Dropdown\n fluid\n multiple\n onChange={this.handleChange}\n onSearchChange={this.handleSearchChange}\n options={stateOptions}\n placeholder='State'\n search\n searchQuery={searchQuery}\n selection\n value={value}\n />\n )\n }\n}\n","modules/Dropdown/Usage/DropdownExampleSelectOnNavigation":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Grid, Dropdown, Form } from 'semantic-ui-react'\n\nconst getOptions = (number, prefix = 'Choice ') =>\n _.times(number, (index) => ({\n key: index,\n text: `${prefix}${index}`,\n value: index,\n }))\n\nexport default class DropdownExampleSelectOnNavigation extends Component {\n state = {\n default: '',\n false: '',\n }\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value })\n\n render() {\n return (\n <Grid columns='equal'>\n <Grid.Column>\n <Form>\n <Form.Field>\n <label>Default selectOnNavigation</label>\n <Dropdown\n selection\n name='default'\n options={getOptions(3)}\n placeholder='I change value on keyboard navigation'\n onChange={this.handleChange}\n />\n </Form.Field>\n <Form.Field>\n <label>{'selectOnNavigation={false}'}</label>\n <Dropdown\n selectOnNavigation={false}\n selection\n name='false'\n options={getOptions(3)}\n placeholder='I do not change value on keyboard navigation'\n onChange={this.handleChange}\n />\n </Form.Field>\n </Form>\n </Grid.Column>\n <Grid.Column>\n Dropdown values:\n <pre>{JSON.stringify(this.state, null, 2)}</pre>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Dropdown/Usage/DropdownExampleTrigger":"import React from 'react'\nimport { Dropdown, Icon } from 'semantic-ui-react'\n\nconst trigger = (\n <span>\n <Icon name='user' /> Hello, Bob\n </span>\n)\n\nconst options = [\n {\n key: 'user',\n text: (\n <span>\n Signed in as <strong>Bob Smith</strong>\n </span>\n ),\n disabled: true,\n },\n { key: 'profile', text: 'Your Profile' },\n { key: 'stars', text: 'Your Stars' },\n { key: 'explore', text: 'Explore' },\n { key: 'integrations', text: 'Integrations' },\n { key: 'help', text: 'Help' },\n { key: 'settings', text: 'Settings' },\n { key: 'sign-out', text: 'Sign Out' },\n]\n\nconst DropdownTriggerExample = () => (\n <Dropdown trigger={trigger} options={options} />\n)\n\nexport default DropdownTriggerExample\n","modules/Dropdown/Usage/DropdownExampleTriggerImage":"import faker from 'faker'\nimport React from 'react'\nimport { Dropdown, Image } from 'semantic-ui-react'\n\nconst trigger = (\n <span>\n <Image avatar src={faker.internet.avatar()} /> {faker.name.findName()}\n </span>\n)\n\nconst options = [\n { key: 'user', text: 'Account', icon: 'user' },\n { key: 'settings', text: 'Settings', icon: 'settings' },\n { key: 'sign-out', text: 'Sign Out', icon: 'sign out' },\n]\n\nconst DropdownImageTriggerExample = () => (\n <Dropdown\n trigger={trigger}\n options={options}\n pointing='top left'\n icon={null}\n />\n)\n\nexport default DropdownImageTriggerExample\n","modules/Dropdown/Usage/DropdownExampleUncontrolled":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'One', value: 1 },\n { key: 2, text: 'Two', value: 2 },\n { key: 3, text: 'Three', value: 3 },\n]\n\nconst DropdownExampleUncontrolled = () => (\n <Dropdown selection options={options} placeholder='Choose an option' />\n)\n\nexport default DropdownExampleUncontrolled\n","modules/Dropdown/Usage/DropdownExampleUpward":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 'new', text: 'New', value: 'new' },\n { key: 'save', text: 'Save as...', value: 'save' },\n { key: 'edit', text: 'Edit', value: 'edit' },\n]\n\nconst DropdownExampleUpward = () => (\n <Dropdown upward floating options={options} text='File' />\n)\n\nexport default DropdownExampleUpward\n","modules/Dropdown/Usage/DropdownExampleUpwardInline":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 's', text: 'small', value: 's' },\n { key: 'm', text: 'medium', value: 'm' },\n { key: 'l', text: 'large', value: 'l' },\n]\n\nconst DropdownExampleUpwardInline = () => (\n <div>\n I'd like a size{' '}\n <Dropdown upward floating inline options={options} defaultValue='m' />{' '}\n T-shirt, please.\n </div>\n)\n\nexport default DropdownExampleUpwardInline\n","modules/Dropdown/Usage/DropdownExampleUpwardSelection":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'One', value: 1 },\n { key: 2, text: 'Two', value: 2 },\n { key: 3, text: 'Three', value: 3 },\n]\n\nconst DropdownExampleUpwardSelection = () => (\n <Dropdown\n upward\n search\n selection\n options={options}\n placeholder='Choose an option'\n />\n)\n\nexport default DropdownExampleUpwardSelection\n","modules/Dropdown/Usage/DropdownExampleWrapSelectionFalse":"import React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'One', value: 1 },\n { key: 2, text: 'Two', value: 2 },\n { key: 3, text: 'Three', value: 3 },\n]\n\nconst DropdownExampleWrapSelectionFalse = () => (\n <Dropdown\n search\n selection\n wrapSelection={false}\n options={options}\n placeholder='Choose an option'\n />\n)\n\nexport default DropdownExampleWrapSelectionFalse\n","modules/Dropdown/Variations/DropdownExampleCompact":"import _ from 'lodash'\nimport React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst getOptions = (number, prefix = 'Choice ') =>\n _.times(number, (index) => ({\n key: index,\n text: `${prefix}${index}`,\n value: index,\n }))\n\nconst DropdownExampleCompact = () => (\n <Dropdown\n placeholder='Compact'\n compact\n selection\n options={getOptions(3, '')}\n />\n)\n\nexport default DropdownExampleCompact\n","modules/Dropdown/Variations/DropdownExampleFluid":"import _ from 'lodash'\nimport React from 'react'\nimport { Dropdown, Menu } from 'semantic-ui-react'\n\nconst getOptions = (number, prefix = 'Choice ') =>\n _.times(number, (index) => ({\n key: index,\n text: `${prefix}${index}`,\n value: index,\n }))\n\nconst DropdownExampleFluid = () => (\n <Menu vertical>\n <Menu.Item as='a'>Link 1</Menu.Item>\n <Menu.Item as='a'>Link 2</Menu.Item>\n <Menu.Item header>All Sections</Menu.Item>\n <Menu.Item>\n <Dropdown placeholder='More' fluid selection options={getOptions(3)} />\n </Menu.Item>\n </Menu>\n)\n\nexport default DropdownExampleFluid\n","modules/Dropdown/Variations/DropdownExampleMenuDirection":"import React from 'react'\nimport { Menu, Dropdown } from 'semantic-ui-react'\n\nconst options = [\n { key: 1, text: 'This is a super long item', value: 1 },\n { key: 2, text: 'Dropdown direction can help', value: 2 },\n { key: 3, text: 'Items are kept within view', value: 3 },\n]\n\nconst DropdownExampleMenuDirection = () => (\n <Menu>\n <Dropdown\n item\n simple\n text='Left menu'\n direction='right'\n options={options}\n />\n <Menu.Menu position='right'>\n <Dropdown\n item\n simple\n text='Right menu'\n direction='right'\n options={options}\n />\n </Menu.Menu>\n </Menu>\n)\n\nexport default DropdownExampleMenuDirection\n","modules/Dropdown/Variations/DropdownExampleMenuDirectionLeft":"import React from 'react'\nimport { Dropdown, Icon } from 'semantic-ui-react'\n\nconst DropdownExampleMenuDirectionLeft = () => (\n <Dropdown text='Menu' floating labeled button className='icon'>\n <Dropdown.Menu className='left'>\n <Dropdown.Item>\n <Icon name='dropdown' />\n <span className='text'>Left</span>\n <Dropdown.Menu>\n <Dropdown.Item>\n <Icon name='dropdown' />\n <span className='text'>Still Left</span>\n <Dropdown.Menu>\n <Dropdown.Item>1</Dropdown.Item>\n <Dropdown.Item>2</Dropdown.Item>\n <Dropdown.Item>3</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown.Item>\n <Dropdown.Item>2</Dropdown.Item>\n <Dropdown.Item>3</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown.Item>\n <Dropdown.Item>\n <Icon name='left dropdown' />\n <span className='text'>Left</span>\n <Dropdown.Menu>\n <Dropdown.Item>1</Dropdown.Item>\n <Dropdown.Item>2</Dropdown.Item>\n <Dropdown.Item>3</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleMenuDirectionLeft\n","modules/Dropdown/Variations/DropdownExampleScrolling":"import _ from 'lodash'\nimport React from 'react'\nimport { Dropdown } from 'semantic-ui-react'\n\nconst getOptions = (number, prefix = 'Choice ') =>\n _.times(number, (index) => ({\n key: index,\n text: `${prefix}${index}`,\n value: index,\n }))\n\nconst DropdownExampleScrolling = () => (\n <Dropdown placeholder='Select choice' scrolling options={getOptions(15)} />\n)\n\nexport default DropdownExampleScrolling\n","modules/Dropdown/Variations/DropdownExampleSearchInMenuScrolling":"import React from 'react'\nimport { Dropdown, Input } from 'semantic-ui-react'\n\nconst tagOptions = [\n {\n key: 'Important',\n text: 'Important',\n value: 'Important',\n label: { color: 'red', empty: true, circular: true },\n },\n {\n key: 'Announcement',\n text: 'Announcement',\n value: 'Announcement',\n label: { color: 'blue', empty: true, circular: true },\n },\n {\n key: 'Cannot Fix',\n text: 'Cannot Fix',\n value: 'Cannot Fix',\n label: { color: 'black', empty: true, circular: true },\n },\n {\n key: 'News',\n text: 'News',\n value: 'News',\n label: { color: 'purple', empty: true, circular: true },\n },\n {\n key: 'Enhancement',\n text: 'Enhancement',\n value: 'Enhancement',\n label: { color: 'orange', empty: true, circular: true },\n },\n {\n key: 'Change Declined',\n text: 'Change Declined',\n value: 'Change Declined',\n label: { empty: true, circular: true },\n },\n {\n key: 'Off Topic',\n text: 'Off Topic',\n value: 'Off Topic',\n label: { color: 'yellow', empty: true, circular: true },\n },\n {\n key: 'Interesting',\n text: 'Interesting',\n value: 'Interesting',\n label: { color: 'pink', empty: true, circular: true },\n },\n {\n key: 'Discussion',\n text: 'Discussion',\n value: 'Discussion',\n label: { color: 'green', empty: true, circular: true },\n },\n]\n\nconst DropdownExampleSearchInMenuScrolling = () => (\n <Dropdown text='Filter Posts' icon='filter'>\n <Dropdown.Menu>\n <Input icon='search' iconPosition='left' className='search' />\n <Dropdown.Divider />\n <Dropdown.Header icon='tags' content='Tag Label' />\n <Dropdown.Menu scrolling>\n {tagOptions.map((option) => (\n <Dropdown.Item key={option.value} {...option} />\n ))}\n </Dropdown.Menu>\n </Dropdown.Menu>\n </Dropdown>\n)\n\nexport default DropdownExampleSearchInMenuScrolling\n","modules/Modal/Content/ModalExampleCloseIcon":"import React from 'react'\nimport { Button, Header, Icon, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleCloseIcon() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Modal\n closeIcon\n open={open}\n trigger={<Button>Show Modal</Button>}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n >\n <Header icon='archive' content='Archive Old Messages' />\n <Modal.Content>\n <p>\n Your inbox is getting full, would you like us to enable automatic\n archiving of old messages?\n </p>\n </Modal.Content>\n <Modal.Actions>\n <Button color='red' onClick={() => setOpen(false)}>\n <Icon name='remove' /> No\n </Button>\n <Button color='green' onClick={() => setOpen(false)}>\n <Icon name='checkmark' /> Yes\n </Button>\n </Modal.Actions>\n </Modal>\n )\n}\n\nexport default ModalExampleCloseIcon\n","modules/Modal/Content/ModalExampleContentImage":"import React from 'react'\nimport { Button, Image, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleContentImage() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Modal\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n open={open}\n trigger={<Button>Show Modal</Button>}\n >\n <Modal.Header>Upload image</Modal.Header>\n <Modal.Content image>\n <Image size='medium' src='https://react.semantic-ui.com/images/wireframe/image-square.png' wrapped />\n <Modal.Description>\n <p>Would you like to upload this image?</p>\n </Modal.Description>\n </Modal.Content>\n <Modal.Actions>\n <Button onClick={() => setOpen(false)}>Cancel</Button>\n <Button onClick={() => setOpen(false)} positive>\n Ok\n </Button>\n </Modal.Actions>\n </Modal>\n )\n}\n\nexport default ModalExampleContentImage\n","modules/Modal/Content/ModalExampleDimmer":"import React from 'react'\nimport { Button, Modal } from 'semantic-ui-react'\n\nfunction exampleReducer(state, action) {\n switch (action.type) {\n case 'OPEN_MODAL':\n return { open: true, dimmer: action.dimmer }\n case 'CLOSE_MODAL':\n return { open: false }\n default:\n throw new Error()\n }\n}\n\nfunction ModalExampleDimmer() {\n const [state, dispatch] = React.useReducer(exampleReducer, {\n open: false,\n dimmer: undefined,\n })\n const { open, dimmer } = state\n\n return (\n <div>\n <Button onClick={() => dispatch({ type: 'OPEN_MODAL' })}>Default</Button>\n <Button\n onClick={() => dispatch({ type: 'OPEN_MODAL', dimmer: 'inverted' })}\n >\n Inverted\n </Button>\n <Button\n onClick={() => dispatch({ type: 'OPEN_MODAL', dimmer: 'blurring' })}\n >\n Blurring\n </Button>\n\n <Modal\n dimmer={dimmer}\n open={open}\n onClose={() => dispatch({ type: 'CLOSE_MODAL' })}\n >\n <Modal.Header>Use Google's location service?</Modal.Header>\n <Modal.Content>\n Let Google help apps determine location. This means sending anonymous\n location data to Google, even when no apps are running.\n </Modal.Content>\n <Modal.Actions>\n <Button negative onClick={() => dispatch({ type: 'CLOSE_MODAL' })}>\n Disagree\n </Button>\n <Button positive onClick={() => dispatch({ type: 'CLOSE_MODAL' })}>\n Agree\n </Button>\n </Modal.Actions>\n </Modal>\n </div>\n )\n}\n\nexport default ModalExampleDimmer\n","modules/Modal/Types/ModalExampleBasic":"import React from 'react'\nimport { Button, Header, Icon, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleBasic() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Modal\n basic\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n open={open}\n size='small'\n trigger={<Button>Basic Modal</Button>}\n >\n <Header icon>\n <Icon name='archive' />\n Archive Old Messages\n </Header>\n <Modal.Content>\n <p>\n Your inbox is getting full, would you like us to enable automatic\n archiving of old messages?\n </p>\n </Modal.Content>\n <Modal.Actions>\n <Button basic color='red' inverted onClick={() => setOpen(false)}>\n <Icon name='remove' /> No\n </Button>\n <Button color='green' inverted onClick={() => setOpen(false)}>\n <Icon name='checkmark' /> Yes\n </Button>\n </Modal.Actions>\n </Modal>\n )\n}\n\nexport default ModalExampleBasic\n","modules/Modal/Types/ModalExampleModal":"import React from 'react'\nimport { Button, Header, Image, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleModal() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Modal\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n open={open}\n trigger={<Button>Show Modal</Button>}\n >\n <Modal.Header>Select a Photo</Modal.Header>\n <Modal.Content image>\n <Image size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' wrapped />\n <Modal.Description>\n <Header>Default Profile Image</Header>\n <p>\n We've found the following gravatar image associated with your e-mail\n address.\n </p>\n <p>Is it okay to use this photo?</p>\n </Modal.Description>\n </Modal.Content>\n <Modal.Actions>\n <Button color='black' onClick={() => setOpen(false)}>\n Nope\n </Button>\n <Button\n content=\"Yep, that's me\"\n labelPosition='right'\n icon='checkmark'\n onClick={() => setOpen(false)}\n positive\n />\n </Modal.Actions>\n </Modal>\n )\n}\n\nexport default ModalExampleModal\n","modules/Modal/Types/ModalExampleShorthand":"import React from 'react'\nimport { Button, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleShorthand() {\n return (\n <Modal\n trigger={<Button>Show Modal</Button>}\n header='Reminder!'\n content='Call Benjamin regarding the reports.'\n actions={['Snooze', { key: 'done', content: 'Done', positive: true }]}\n />\n )\n}\n\nexport default ModalExampleShorthand\n","modules/Modal/Usage/ModalExampleCallbacks":"import React from 'react'\nimport { Button, Grid, Label, Modal, Segment } from 'semantic-ui-react'\n\nfunction exampleReducer(state, action) {\n switch (action.type) {\n case 'CLEAR_LOG':\n return { ...state, log: [] }\n case 'OPEN_MODAL':\n return {\n log: [\n {\n event: action.event,\n date: new Date().toLocaleTimeString(),\n name: action.name,\n value: true,\n },\n ...state.log,\n ],\n open: true,\n }\n case 'CLOSE_MODAL':\n return {\n log: [\n {\n event: action.event,\n date: new Date().toLocaleTimeString(),\n name: action.name,\n value: true,\n },\n ...state.log,\n ],\n open: false,\n }\n default:\n throw new Error()\n }\n}\n\nfunction ModalExampleCloseConfig() {\n const [state, dispatch] = React.useReducer(exampleReducer, {\n log: [],\n open: false,\n })\n const { log, open } = state\n\n return (\n <Grid>\n <Grid.Column width={4}>\n <Modal\n onOpen={(e) =>\n dispatch({ event: e.type, name: 'onOpen', type: 'OPEN_MODAL' })\n }\n onClose={(e) =>\n dispatch({ event: e.type, name: 'onClose', type: 'CLOSE_MODAL' })\n }\n open={open}\n trigger={<Button>Open a modal</Button>}\n >\n <Modal.Header>Delete Your Account</Modal.Header>\n <Modal.Content>\n <p>Are you sure you want to delete your account</p>\n </Modal.Content>\n <Modal.Actions>\n <Button\n onClick={(e) =>\n dispatch({\n event: e.type,\n name: 'onClick',\n type: 'CLOSE_MODAL',\n })\n }\n negative\n >\n No\n </Button>\n <Button\n onClick={(e) =>\n dispatch({\n event: e.type,\n name: 'onClick',\n type: 'CLOSE_MODAL',\n })\n }\n positive\n >\n Yes\n </Button>\n </Modal.Actions>\n </Modal>\n </Grid.Column>\n <Grid.Column width={12}>\n {log.length > 0 && (\n <Segment attached='top' secondary>\n {log.map((entry, i) => (\n <pre key={i}>\n [{entry.date}] {entry.name} (\n {JSON.stringify({\n e: { type: entry.event },\n data: { open: entry.value },\n })}\n )\n </pre>\n ))}\n </Segment>\n )}\n <Segment attached={log.length > 0 ? 'bottom' : undefined} secondary>\n <Label>Entries: {log.length}</Label>\n <Button\n compact\n floated='right'\n onClick={() => dispatch({ type: 'CLEAR_LOG' })}\n size='tiny'\n >\n Clear\n </Button>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default ModalExampleCloseConfig\n","modules/Modal/Usage/ModalExampleCloseConfig":"import React from 'react'\nimport { Button, Checkbox, Grid, Modal } from 'semantic-ui-react'\n\nfunction exampleReducer(state, action) {\n switch (action.type) {\n case 'CONFIG_CLOSE_ON_DIMMER_CLICK':\n return { ...state, closeOnDimmerClick: action.value }\n case 'CONFIG_CLOSE_ON_ESCAPE':\n return { ...state, closeOnEscape: action.value }\n case 'OPEN_MODAL':\n return { ...state, open: true }\n case 'CLOSE_MODAL':\n return { ...state, open: false }\n default:\n throw new Error()\n }\n}\n\nfunction ModalExampleCloseConfig() {\n const [state, dispatch] = React.useReducer(exampleReducer, {\n closeOnEscape: true,\n closeOnDimmerClick: true,\n open: false,\n dimmer: undefined,\n })\n const { open, closeOnEscape, closeOnDimmerClick } = state\n\n return (\n <Grid columns={1}>\n <Grid.Column>\n <Checkbox\n checked={closeOnEscape}\n label={{ children: <code>closeOnEscape</code> }}\n onChange={(e, { checked }) =>\n dispatch({ type: 'CONFIG_CLOSE_ON_ESCAPE', value: checked })\n }\n />\n <br />\n <Checkbox\n checked={closeOnDimmerClick}\n label={{ children: <code>closeOnDimmerClick</code> }}\n onChange={(e, { checked }) =>\n dispatch({ type: 'CONFIG_CLOSE_ON_DIMMER_CLICK', value: checked })\n }\n />\n </Grid.Column>\n\n <Grid.Column>\n <Modal\n closeOnEscape={closeOnEscape}\n closeOnDimmerClick={closeOnDimmerClick}\n open={open}\n onOpen={() => dispatch({ type: 'OPEN_MODAL' })}\n onClose={() => dispatch({ type: 'CLOSE_MODAL' })}\n trigger={<Button>Show Modal</Button>}\n >\n <Modal.Header>Delete Your Account</Modal.Header>\n <Modal.Content>\n <p>Are you sure you want to delete your account</p>\n </Modal.Content>\n <Modal.Actions>\n <Button onClick={() => dispatch({ type: 'CLOSE_MODAL' })} negative>\n No\n </Button>\n <Button onClick={() => dispatch({ type: 'CLOSE_MODAL' })} positive>\n Yes\n </Button>\n </Modal.Actions>\n </Modal>\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default ModalExampleCloseConfig\n","modules/Modal/Usage/ModalExampleMultiple":"import React from 'react'\nimport { Button, Icon, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleMultiple() {\n const [firstOpen, setFirstOpen] = React.useState(false)\n const [secondOpen, setSecondOpen] = React.useState(false)\n\n return (\n <>\n <Button onClick={() => setFirstOpen(true)}>Open first Modal</Button>\n\n <Modal\n onClose={() => setFirstOpen(false)}\n onOpen={() => setFirstOpen(true)}\n open={firstOpen}\n >\n <Modal.Header>Modal #1</Modal.Header>\n <Modal.Content image>\n <div className='image'>\n <Icon name='right arrow' />\n </div>\n <Modal.Description>\n <p>We have more to share with you. Follow us along to modal 2</p>\n </Modal.Description>\n </Modal.Content>\n <Modal.Actions>\n <Button onClick={() => setSecondOpen(true)} primary>\n Proceed <Icon name='right chevron' />\n </Button>\n </Modal.Actions>\n\n <Modal\n onClose={() => setSecondOpen(false)}\n open={secondOpen}\n size='small'\n >\n <Modal.Header>Modal #2</Modal.Header>\n <Modal.Content>\n <p>That's everything!</p>\n </Modal.Content>\n <Modal.Actions>\n <Button\n icon='check'\n content='All Done'\n onClick={() => setSecondOpen(false)}\n />\n </Modal.Actions>\n </Modal>\n </Modal>\n </>\n )\n}\n\nexport default ModalExampleMultiple\n","modules/Modal/Variations/ModalExampleScrolling":"import React from 'react'\nimport { Button, Icon, Image, Modal } from 'semantic-ui-react'\n\nfunction ModalScrollingExample() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Modal\n open={open}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n trigger={<Button>Long Modal</Button>}\n >\n <Modal.Header>Modal Header</Modal.Header>\n <Modal.Content image>\n <Image size='medium' src='https://react.semantic-ui.com/images/wireframe/image.png' wrapped />\n <Modal.Description>\n <p>\n This is an example of expanded content that will cause the modal's\n dimmer to scroll.\n </p>\n\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Modal.Description>\n </Modal.Content>\n <Modal.Actions>\n <Button primary onClick={() => setOpen(false)}>\n Proceed <Icon name='right chevron' />\n </Button>\n </Modal.Actions>\n </Modal>\n )\n}\n\nexport default ModalScrollingExample\n","modules/Modal/Variations/ModalExampleScrollingContent":"import React from 'react'\nimport { Button, Icon, Image, Modal } from 'semantic-ui-react'\n\nconst ModalExampleScrollingContent = () => {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Modal\n open={open}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n trigger={<Button>Scrolling Content Modal</Button>}\n >\n <Modal.Header>Profile Picture</Modal.Header>\n <Modal.Content image scrolling>\n <Image size='medium' src='https://react.semantic-ui.com/images/wireframe/image.png' wrapped />\n\n <Modal.Description>\n <p>\n This is an example of expanded content that will cause the modal's\n dimmer to scroll.\n </p>\n\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image\n src='https://react.semantic-ui.com/images/wireframe/paragraph.png'\n style={{ marginBottom: 10 }}\n />\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Modal.Description>\n </Modal.Content>\n <Modal.Actions>\n <Button onClick={() => setOpen(false)} primary>\n Proceed <Icon name='chevron right' />\n </Button>\n </Modal.Actions>\n </Modal>\n )\n}\n\nexport default ModalExampleScrollingContent\n","modules/Modal/Variations/ModalExampleSize":"import React from 'react'\nimport { Button, Icon, Modal } from 'semantic-ui-react'\n\nfunction exampleReducer(state, action) {\n switch (action.type) {\n case 'close':\n return { open: false }\n case 'open':\n return { open: true, size: action.size }\n default:\n throw new Error('Unsupported action...')\n }\n}\n\nconst ModalExampleSize = () => {\n const [state, dispatch] = React.useReducer(exampleReducer, {\n open: false,\n size: undefined,\n })\n const { open, size } = state\n\n return (\n <>\n <Button onClick={() => dispatch({ type: 'open', size: 'mini' })}>\n Mini\n </Button>\n <Button onClick={() => dispatch({ type: 'open', size: 'tiny' })}>\n Tiny\n </Button>\n <Button onClick={() => dispatch({ type: 'open', size: 'small' })}>\n Small\n </Button>\n <Button onClick={() => dispatch({ type: 'open', size: 'large' })}>\n Large\n </Button>\n <Button onClick={() => dispatch({ type: 'open', size: 'fullscreen' })}>\n <Icon name='desktop' />\n Fullscreen\n </Button>\n\n <Modal\n size={size}\n open={open}\n onClose={() => dispatch({ type: 'close' })}\n >\n <Modal.Header>Delete Your Account</Modal.Header>\n <Modal.Content>\n <p>Are you sure you want to delete your account</p>\n </Modal.Content>\n <Modal.Actions>\n <Button negative onClick={() => dispatch({ type: 'close' })}>\n No\n </Button>\n <Button positive onClick={() => dispatch({ type: 'close' })}>\n Yes\n </Button>\n </Modal.Actions>\n </Modal>\n </>\n )\n}\n\nexport default ModalExampleSize\n","modules/Modal/Variations/ModalExampleTopAligned":"import React from 'react'\nimport { Button, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleTopAligned() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Modal\n centered={false}\n open={open}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n trigger={<Button>Show Modal</Button>}\n >\n <Modal.Header>Thank you!</Modal.Header>\n <Modal.Content>\n <Modal.Description>\n Your subscription has been confirmed\n </Modal.Description>\n </Modal.Content>\n <Modal.Actions>\n <Button onClick={() => setOpen(false)}>OK</Button>\n </Modal.Actions>\n </Modal>\n )\n}\n\nexport default ModalExampleTopAligned\n","modules/Embed/States/EmbedExampleActive":"import React, { Component } from 'react'\nimport { Button, Divider, Embed } from 'semantic-ui-react'\n\nexport default class EmbedExampleActive extends Component {\n state = {}\n\n handleClick = () => this.setState({ active: true })\n\n render() {\n const { active } = this.state\n\n return (\n <div>\n <Embed\n active={active}\n icon='arrow circle down'\n id='90Omh7_I8vI'\n placeholder='/images/image-16by9.png'\n source='youtube'\n />\n\n <Divider hidden />\n\n <Button\n content='Activate'\n icon='bomb'\n labelPosition='left'\n onClick={this.handleClick}\n />\n </div>\n )\n }\n}\n","modules/Embed/Types/EmbedExampleCustom":"import React from 'react'\nimport { Embed } from 'semantic-ui-react'\n\nconst EmbedExampleCustom = () => (\n <Embed\n icon='right circle arrow'\n placeholder='/images/image-16by9.png'\n url='https://www.myfav.es/jack'\n />\n)\n\nexport default EmbedExampleCustom\n","modules/Embed/Types/EmbedExampleVimeo":"import React from 'react'\nimport { Embed } from 'semantic-ui-react'\n\nconst EmbedExampleVimeo = () => (\n <Embed\n id='125292332'\n placeholder='/images/vimeo-example.jpg'\n source='vimeo'\n />\n)\n\nexport default EmbedExampleVimeo\n","modules/Embed/Types/EmbedExampleYoutube":"import React from 'react'\nimport { Embed } from 'semantic-ui-react'\n\nconst EmbedExampleYouTube = () => (\n <Embed\n id='O6Xo21L0ybE'\n placeholder='/images/image-16by9.png'\n source='youtube'\n />\n)\n\nexport default EmbedExampleYouTube\n","modules/Embed/Usage/EmbedExampleIframe":"import React from 'react'\nimport { Embed } from 'semantic-ui-react'\n\nconst EmbedExampleIframe = () => (\n <Embed\n autoplay={false}\n color='white'\n hd={false}\n id='gJscrxxl_Bg'\n iframe={{\n allowFullScreen: true,\n style: {\n padding: 10,\n },\n }}\n placeholder='/images/image-16by9.png'\n source='youtube'\n />\n)\n\nexport default EmbedExampleIframe\n","modules/Embed/Usage/EmbedExampleSettings":"import React from 'react'\nimport { Embed } from 'semantic-ui-react'\n\nconst EmbedExampleSettings = () => (\n <Embed\n autoplay={false}\n brandedUI\n color='white'\n hd={false}\n id='D0WnZyxp_Wo'\n placeholder='/images/image-16by9.png'\n source='youtube'\n />\n)\n\nexport default EmbedExampleSettings\n","modules/Embed/Variations/EmbedExampleAspectRatio":"import React from 'react'\nimport { Embed } from 'semantic-ui-react'\n\nconst EmbedExampleAspectRatio = () => (\n <Embed\n aspectRatio='4:3'\n id='HTZudKi36bo'\n placeholder='/images/4by3.jpg'\n source='youtube'\n />\n)\n\nexport default EmbedExampleAspectRatio\n","modules/Popup/States/PopupExampleDisabled":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExampleDisabled = () => (\n <Popup\n content='I will not render.'\n disabled\n trigger={<Button content='Button' />}\n />\n)\n\nexport default PopupExampleDisabled\n","modules/Popup/States/PopupExamplePinned":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExamplePinned = () => (\n <Popup\n content='I will not flip!'\n on='click'\n pinned\n trigger={<Button content='Button' />}\n />\n)\n\nexport default PopupExamplePinned\n","modules/Popup/Types/PopupExample":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExample = () => (\n <Popup content='Add users to your feed' trigger={<Button icon='add' />} />\n)\n\nexport default PopupExample\n","modules/Popup/Types/PopupExampleHeader":"import React from 'react'\nimport { Image, Popup } from 'semantic-ui-react'\n\nconst users = [\n {\n name: 'Elliot Fu',\n bio: 'Elliot has been a member since July 2012',\n avatar: '/images/avatar/small/elliot.jpg',\n },\n {\n name: 'Stevie Feliciano',\n bio: 'Stevie has been a member since August 2013',\n avatar: '/images/avatar/small/stevie.jpg',\n },\n {\n name: 'Matt',\n bio: 'Matt has been a member since July 2014',\n avatar: '/images/avatar/small/matt.jpg',\n },\n]\n\nconst PopupExampleHeader = () => (\n <>\n {users.map((user) => (\n <Popup\n content={user.bio}\n key={user.name}\n header={user.name}\n trigger={<Image src={user.avatar} avatar />}\n />\n ))}\n </>\n)\n\nexport default PopupExampleHeader\n","modules/Popup/Types/PopupExampleTrigger":"import React from 'react'\nimport { Popup, Card, Image, Rating } from 'semantic-ui-react'\n\nconst PopupExampleTrigger = () => (\n <Popup\n trigger={\n <Card>\n <Image src='https://react.semantic-ui.com/images/movies/totoro-horizontal.jpg' />\n <Card.Content>\n <Card.Header>My Neighbor Totoro</Card.Header>\n <Card.Description>\n Two sisters move to the country with their father in order to be\n closer to their hospitalized mother, and discover the surrounding\n trees are inhabited by magical spirits.\n </Card.Description>\n </Card.Content>\n </Card>\n }\n >\n <Popup.Header>User Rating</Popup.Header>\n <Popup.Content>\n <Rating icon='star' defaultRating={3} maxRating={4} />\n </Popup.Content>\n </Popup>\n)\n\nexport default PopupExampleTrigger\n","modules/Popup/Usage/PopupExampleActions":"import React from 'react'\nimport { Button, Grid, Input, Popup } from 'semantic-ui-react'\n\nconst PopupExampleActions = () => (\n <Grid columns={1}>\n <Grid.Column>\n <Popup\n trigger={<Button icon='add' content='Add a friend' />}\n content='Sends an email invite to a friend.'\n on='hover'\n />\n <Popup\n trigger={\n <Button color='red' icon='flask' content='Activate doomsday device' />\n }\n content={<Button color='green' content='Confirm the launch' />}\n on='click'\n position='top right'\n />\n <Popup\n trigger={<Input icon='search' placeholder='Search...' />}\n header='Movie Search'\n content='You may search by genre, header, year and actors'\n on='focus'\n />\n </Grid.Column>\n <Grid.Column>\n <Popup\n trigger={<Button>Click me or Hover me</Button>}\n header='Movie Search'\n content='Multiple events can trigger a popup'\n on={['hover', 'click']}\n />\n </Grid.Column>\n </Grid>\n)\n\nexport default PopupExampleActions\n","modules/Popup/Usage/PopupExampleContext":"import React, { createRef } from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nclass PopupExampleContextControlled extends React.Component {\n contextRef = createRef()\n\n render() {\n return (\n <>\n <Popup\n trigger={<Button content='Trigger Popup' />}\n context={this.contextRef}\n content='Hello'\n position='top center'\n />\n ---------->\n <strong ref={this.contextRef}>here</strong>\n </>\n )\n }\n}\n\nexport default PopupExampleContextControlled\n","modules/Popup/Usage/PopupExampleContextControlled":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nclass PopupExampleContextControlled extends React.Component {\n state = {}\n contextRef = React.createRef()\n\n toggle = () => this.setState((prevState) => ({ open: !prevState.open }))\n\n render() {\n return (\n <>\n <Button content='Open controlled Popup' onClick={this.toggle} />\n <Popup\n context={this.contextRef}\n content='Hello'\n position='top center'\n open={this.state.open}\n />\n ---------->\n <strong ref={this.contextRef}>here</strong>\n </>\n )\n }\n}\n\nexport default PopupExampleContextControlled\n","modules/Popup/Usage/PopupExampleControlled":"import React from 'react'\nimport { Button, Grid, Header, Popup, Segment } from 'semantic-ui-react'\n\nconst timeoutLength = 2500\n\nclass PopupExampleControlled extends React.Component {\n state = { isOpen: false }\n\n handleOpen = () => {\n this.setState({ isOpen: true })\n\n this.timeout = setTimeout(() => {\n this.setState({ isOpen: false })\n }, timeoutLength)\n }\n\n handleClose = () => {\n this.setState({ isOpen: false })\n clearTimeout(this.timeout)\n }\n\n render() {\n return (\n <Grid>\n <Grid.Column width={8}>\n <Popup\n trigger={<Button content='Open controlled popup' />}\n content={`This message will self-destruct in ${\n timeoutLength / 1000\n } seconds!`}\n on='click'\n open={this.state.isOpen}\n onClose={this.handleClose}\n onOpen={this.handleOpen}\n position='top right'\n />\n </Grid.Column>\n <Grid.Column width={8}>\n <Header>State</Header>\n <Segment secondary>\n <pre>{JSON.stringify(this.state, null, 2)}</pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n\nexport default PopupExampleControlled\n","modules/Popup/Usage/PopupExampleDefaultOpen":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExampleDefaultOpen = () => (\n <Popup\n content='Hello'\n open\n position='top center'\n trigger={<Button content='Already Open' />}\n />\n)\n\nexport default PopupExampleDefaultOpen\n","modules/Popup/Usage/PopupExampleDelay":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExampleDelay = () => (\n <Popup\n content='Popup will hide in 500ms after leaving mouse.'\n mouseEnterDelay={500}\n mouseLeaveDelay={500}\n on='hover'\n trigger={<Button>Open After 500ms</Button>}\n />\n)\n\nexport default PopupExampleDelay\n","modules/Popup/Usage/PopupExampleEventsEnabled":"import React from 'react'\nimport { Button, Checkbox, Divider, Grid, Popup } from 'semantic-ui-react'\n\nconst PopupExampleEventsEnabled = () => {\n const [eventsEnabled, setEventsEnabled] = React.useState(true)\n const [open, setOpen] = React.useState(false)\n\n return (\n <Grid columns={2}>\n <Grid.Column>\n <Checkbox\n checked={open}\n label={{ children: <code>open</code> }}\n onChange={(e, data) => setOpen(data.checked)}\n />\n <Divider fitted hidden />\n <Checkbox\n checked={eventsEnabled}\n label={{ children: <code>eventsEnabled</code> }}\n onChange={(e, data) => setEventsEnabled(data.checked)}\n />\n </Grid.Column>\n\n <Grid.Column>\n <Popup\n content='Hello'\n eventsEnabled={eventsEnabled}\n on='click'\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n open={open}\n trigger={<Button content='A trigger' />}\n />\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default PopupExampleEventsEnabled\n","modules/Popup/Usage/PopupExampleHideOnScroll":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExampleHideOnScroll = () => (\n <>\n <Popup\n trigger={<Button>Click me</Button>}\n content='Hide the popup on any scroll event'\n on='click'\n hideOnScroll\n />\n <Popup\n trigger={<Button>Hover me</Button>}\n content='Hide the popup on any scroll event'\n hideOnScroll\n />\n </>\n)\n\nexport default PopupExampleHideOnScroll\n","modules/Popup/Usage/PopupExampleMultiple":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExampleMultiple = () => (\n <Popup\n trigger={<Button icon>Click me or Hover me</Button>}\n header='Movie Search'\n content='Multiple events can trigger a popup'\n on={['hover', 'click']}\n />\n)\n\nexport default PopupExampleMultiple\n","modules/Popup/Usage/PopupExampleNested":"import React from 'react'\nimport { Button, Grid, Popup } from 'semantic-ui-react'\n\nconst PopupExampleNested = () => (\n <Popup wide trigger={<Button content='Are you the one?' />} on='click'>\n <Grid divided columns='equal'>\n <Grid.Column>\n <Popup\n trigger={<Button color='blue' content='Blue Pill' fluid />}\n content='The story ends. You wake up in your bed and believe whatever you want to believe.'\n position='top center'\n size='tiny'\n inverted\n />\n </Grid.Column>\n <Grid.Column>\n <Popup\n trigger={<Button color='red' content='Red Pill' fluid />}\n content='Stay in Wonderland, and I show you how deep the rabbit hole goes.'\n position='top center'\n size='tiny'\n inverted\n />\n </Grid.Column>\n </Grid>\n </Popup>\n)\n\nexport default PopupExampleNested\n","modules/Popup/Usage/PopupExampleOffset":"import React from 'react'\nimport { Icon, Popup } from 'semantic-ui-react'\n\nconst PopupExampleOffset = () => (\n <>\n <Popup\n trigger={<Icon size='large' name='heart' circular />}\n content='Way off to the left'\n offset='0, 50px'\n position='left center'\n />\n <Popup\n trigger={<Icon size='large' name='heart' circular />}\n content='As expected this popup is way off to the right'\n offset='0, 50px'\n position='right center'\n />\n <Popup\n trigger={<Icon size='large' name='heart' circular />}\n content='Way off to the top'\n offset='0, 50px'\n position='top center'\n />\n <Popup\n trigger={<Icon size='large' name='heart' circular />}\n content='As expected this popup is way off to the bottom'\n offset='0, 50px'\n position='bottom center'\n />\n </>\n)\n\nexport default PopupExampleOffset\n","modules/Popup/Usage/PopupExamplePopperDependencies":"import faker from 'faker'\nimport React from 'react'\nimport { Button, Header, Placeholder, Popup } from 'semantic-ui-react'\n\nconst PopupExamplePopperDependencies = () => {\n const [data, setData] = React.useState(null)\n const timer = React.useRef()\n\n return (\n <Popup\n on='click'\n onClose={() => {\n setData(null)\n clearTimeout(timer.current)\n }}\n onOpen={() => {\n setData(null)\n\n timer.current = setTimeout(() => {\n setData({\n description: faker.lorem.sentences(5),\n name: faker.name.firstName(),\n title: faker.name.title(),\n })\n }, 2000)\n }}\n popperDependencies={[!!data]}\n trigger={<Button content='Simulate loading' icon='lab' />}\n wide\n >\n {data === null ? (\n <Placeholder style={{ minWidth: '200px' }}>\n <Placeholder.Header>\n <Placeholder.Line />\n <Placeholder.Line />\n </Placeholder.Header>\n <Placeholder.Paragraph>\n <Placeholder.Line length='medium' />\n <Placeholder.Line length='short' />\n </Placeholder.Paragraph>\n </Placeholder>\n ) : (\n <>\n <Header as='h2' content={data.name} subheader={data.title} />\n <p>{data.description}</p>\n </>\n )}\n </Popup>\n )\n}\n\nexport default PopupExamplePopperDependencies\n","modules/Popup/Variations/PopupExampleBasic":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst PopupExampleBasic = () => (\n <Popup\n trigger={<Button icon='add' />}\n content=\"The default theme's basic popup removes the pointing arrow.\"\n basic\n />\n)\n\nexport default PopupExampleBasic\n","modules/Popup/Variations/PopupExampleFlowing":"import React from 'react'\nimport { Header, Button, Popup, Grid } from 'semantic-ui-react'\n\nconst PopupExampleFlowing = () => (\n <Popup trigger={<Button>Show flowing popup</Button>} flowing hoverable>\n <Grid centered divided columns={3}>\n <Grid.Column textAlign='center'>\n <Header as='h4'>Basic Plan</Header>\n <p>\n <b>2</b> projects, $10 a month\n </p>\n <Button>Choose</Button>\n </Grid.Column>\n <Grid.Column textAlign='center'>\n <Header as='h4'>Business Plan</Header>\n <p>\n <b>5</b> projects, $20 a month\n </p>\n <Button>Choose</Button>\n </Grid.Column>\n <Grid.Column textAlign='center'>\n <Header as='h4'>Premium Plan</Header>\n <p>\n <b>8</b> projects, $25 a month\n </p>\n <Button>Choose</Button>\n </Grid.Column>\n </Grid>\n </Popup>\n)\n\nexport default PopupExampleFlowing\n","modules/Popup/Variations/PopupExampleInverted":"import React from 'react'\nimport { Button, Icon, Popup } from 'semantic-ui-react'\n\nconst PopupExampleInverted = () => (\n <>\n <Popup\n trigger={<Button icon='add' />}\n content='Hello. This is an inverted popup'\n inverted\n />\n <Popup\n trigger={<Icon circular name='heart' />}\n content='Hello. This is an inverted popup'\n inverted\n />\n </>\n)\n\nexport default PopupExampleInverted\n","modules/Popup/Variations/PopupExamplePosition":"import React from 'react'\nimport { Icon, Popup, Grid } from 'semantic-ui-react'\n\nconst PopupExamplePosition = () => (\n <Grid columns={3} style={{ width: '600px' }}>\n <Grid.Row>\n <Grid.Column>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the top left'\n position='top left'\n />\n </Grid.Column>\n <Grid.Column textAlign='center'>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the top center'\n position='top center'\n />\n </Grid.Column>\n <Grid.Column textAlign='right'>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the top right'\n position='top right'\n />\n </Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column floated='left'>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the left center'\n position='left center'\n />\n </Grid.Column>\n <Grid.Column floated='right' textAlign='right'>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the right center'\n position='right center'\n />\n </Grid.Column>\n </Grid.Row>\n <Grid.Row>\n <Grid.Column>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the bottom left'\n position='bottom left'\n />\n </Grid.Column>\n <Grid.Column textAlign='center'>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the bottom center'\n position='bottom center'\n />\n </Grid.Column>\n <Grid.Column textAlign='right'>\n <Popup\n trigger={<Icon name='heart' color='red' size='large' circular />}\n content='I am positioned to the bottom right'\n position='bottom right'\n />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n)\n\nexport default PopupExamplePosition\n","modules/Popup/Variations/PopupExampleSize":"import React from 'react'\nimport { Icon, Popup } from 'semantic-ui-react'\n\nconst PopupExampleSize = () => (\n <>\n <Popup\n trigger={<Icon circular name='heart' />}\n content='Hello. This is a mini popup'\n size='mini'\n />\n <Popup\n trigger={<Icon circular name='heart' />}\n content='Hello. This is a tiny popup'\n size='tiny'\n />\n <Popup\n trigger={<Icon circular name='heart' />}\n content='Hello. This is a small popup'\n size='small'\n />\n <Popup\n trigger={<Icon circular name='heart' />}\n content='Hello. This is a large popup'\n size='large'\n />\n <Popup\n trigger={<Icon circular name='heart' />}\n content='Hello. This is a huge popup'\n size='huge'\n />\n </>\n)\n\nexport default PopupExampleSize\n","modules/Popup/Variations/PopupExampleStyle":"import React from 'react'\nimport { Button, Popup } from 'semantic-ui-react'\n\nconst style = {\n borderRadius: 0,\n opacity: 0.7,\n padding: '2em',\n}\n\nconst PopupExampleStyle = () => (\n <Popup\n trigger={<Button icon='eye' />}\n content='Popup with a custom style prop'\n style={style}\n inverted\n />\n)\n\nexport default PopupExampleStyle\n","modules/Popup/Variations/PopupExampleWide":"import React from 'react'\nimport { Icon, Popup } from 'semantic-ui-react'\n\nconst PopupExampleWide = () => (\n <>\n <Popup trigger={<Icon circular name='heart' />}>\n Hello. This is a regular pop-up which does not allow for lots of content.\n You cannot fit a lot of words here as the paragraphs will be pretty\n narrow.\n </Popup>\n <Popup trigger={<Icon circular name='heart' />} wide>\n Hello. This is a wide pop-up which allows for lots of content with\n additional space. You can fit a lot of words here and the paragraphs will\n be pretty wide.\n </Popup>\n <Popup trigger={<Icon circular name='heart' />} wide='very'>\n Hello. This is a very wide pop-up which allows for lots of content with\n additional space. You can fit a lot of words here and the paragraphs will\n be pretty wide.\n </Popup>\n </>\n)\n\nexport default PopupExampleWide\n","modules/Progress/Content/ProgressExampleBar":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleBar = () => <Progress percent={33} />\n\nexport default ProgressExampleBar\n","modules/Progress/Content/ProgressExampleLabel":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleLabel = () => <Progress percent={55}>Label</Progress>\n\nexport default ProgressExampleLabel\n","modules/Progress/Content/ProgressExampleLabelProp":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleLabelProp = () => <Progress percent={55} label='Label' />\n\nexport default ProgressExampleLabelProp\n","modules/Progress/Content/ProgressExampleProgress":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleProgress = () => <Progress percent={44} progress />\n\nexport default ProgressExampleProgress\n","modules/Progress/Content/ProgressExampleProgressPercent":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleProgressPercent = () => (\n <Progress value='4' total='5' progress='percent' />\n)\n\nexport default ProgressExampleProgressPercent\n","modules/Progress/Content/ProgressExampleProgressRatio":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleProgressRatio = () => (\n <Progress value='3' total='5' progress='ratio' />\n)\n\nexport default ProgressExampleProgressRatio\n","modules/Progress/Content/ProgressExampleProgressValue":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleProgressValue = () => (\n <Progress progress='value' value={35} />\n)\n\nexport default ProgressExampleProgressValue\n","modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleProgressValuePercentageOfTotal = () => (\n <Progress progress='value' value={35} total={50} />\n)\n\nexport default ProgressExampleProgressValuePercentageOfTotal\n","modules/Progress/States/ProgressExampleActive":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleActive = () => (\n <Progress percent={60} active>\n Active\n </Progress>\n)\n\nexport default ProgressExampleActive\n","modules/Progress/States/ProgressExampleDisabled":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleDisabled = () => (\n <Progress percent={60} disabled>\n Disabled\n </Progress>\n)\n\nexport default ProgressExampleDisabled\n","modules/Progress/States/ProgressExampleError":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleError = () => (\n <Progress percent={100} error>\n There was an error\n </Progress>\n)\n\nexport default ProgressExampleError\n","modules/Progress/States/ProgressExampleSuccess":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleSuccess = () => (\n <Progress percent={100} success>\n The progress was successful\n </Progress>\n)\n\nexport default ProgressExampleSuccess\n","modules/Progress/States/ProgressExampleWarning":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleWarning = () => (\n <Progress percent={100} warning>\n I am warning you\n </Progress>\n)\n\nexport default ProgressExampleWarning\n","modules/Progress/Types/ProgressExampleAutoSuccess":"import React, { Component } from 'react'\nimport { Button, Progress } from 'semantic-ui-react'\n\nexport default class ProgressExampleAutoSuccess extends Component {\n state = { percent: 0 }\n\n toggle = () =>\n this.setState((prevState) => ({\n percent: prevState.percent === 0 ? 100 : 0,\n }))\n\n render() {\n return (\n <div>\n <Progress percent={this.state.percent} autoSuccess />\n <Button onClick={this.toggle}>Toggle Complete</Button>\n </div>\n )\n }\n}\n","modules/Progress/Types/ProgressExampleIndicating":"import React, { Component } from 'react'\nimport { Button, Progress } from 'semantic-ui-react'\n\nexport default class ProgressExampleIndicating extends Component {\n state = { percent: 33 }\n\n increment = () =>\n this.setState((prevState) => ({\n percent: prevState.percent >= 100 ? 0 : prevState.percent + 20,\n }))\n\n render() {\n return (\n <div>\n <Progress percent={this.state.percent} indicating />\n <Button onClick={this.increment}>Increment</Button>\n </div>\n )\n }\n}\n","modules/Progress/Types/ProgressExampleStandard":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleStandard = () => <Progress percent={11} />\n\nexport default ProgressExampleStandard\n","modules/Progress/Variations/ProgressExampleAttached":"import React from 'react'\nimport { Progress, Segment } from 'semantic-ui-react'\n\nconst ProgressExampleAttached = () => (\n <Segment>\n <Progress percent={50} attached='top' />\n La la la la\n <Progress percent={50} attached='bottom' />\n </Segment>\n)\n\nexport default ProgressExampleAttached\n","modules/Progress/Variations/ProgressExampleColor":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleColor = () => (\n <div>\n <Progress percent={32} color='red' />\n <Progress percent={59} color='orange' />\n <Progress percent={13} color='yellow' />\n <Progress percent={37} color='olive' />\n <Progress percent={83} color='green' />\n <Progress percent={23} color='teal' />\n <Progress percent={85} color='blue' />\n <Progress percent={38} color='violet' />\n <Progress percent={47} color='purple' />\n <Progress percent={29} color='pink' />\n <Progress percent={68} color='brown' />\n <Progress percent={36} color='grey' />\n <Progress percent={72} color='black' />\n </div>\n)\n\nexport default ProgressExampleColor\n","modules/Progress/Variations/ProgressExampleInverted":"import React from 'react'\nimport { Progress, Segment } from 'semantic-ui-react'\n\nconst ProgressExampleInverted = () => (\n <Segment inverted>\n <Progress percent={21} inverted progress>\n Uploading Files\n </Progress>\n <Progress percent={100} inverted progress success>\n success\n </Progress>\n <Progress percent={100} inverted progress warning>\n warning\n </Progress>\n <Progress percent={100} inverted progress error>\n error\n </Progress>\n </Segment>\n)\nexport default ProgressExampleInverted\n","modules/Progress/Variations/ProgressExampleInvertedColor":"import React from 'react'\nimport { Progress, Segment } from 'semantic-ui-react'\n\nconst ProgressExampleInvertedColor = () => (\n <Segment inverted>\n <Progress percent={32} inverted color='red' progress />\n <Progress percent={59} inverted color='orange' progress />\n <Progress percent={13} inverted color='yellow' progress />\n <Progress percent={37} inverted color='olive' progress />\n <Progress percent={83} inverted color='green' progress />\n <Progress percent={23} inverted color='teal' progress />\n <Progress percent={85} inverted color='blue' progress />\n <Progress percent={38} inverted color='violet' progress />\n <Progress percent={47} inverted color='purple' progress />\n <Progress percent={29} inverted color='pink' progress />\n <Progress percent={68} inverted color='brown' progress />\n <Progress percent={36} inverted color='grey' progress />\n <Progress percent={72} inverted color='black' progress />\n </Segment>\n)\n\nexport default ProgressExampleInvertedColor\n","modules/Progress/Variations/ProgressExampleSize":"import React from 'react'\nimport { Progress } from 'semantic-ui-react'\n\nconst ProgressExampleSize = () => (\n <div>\n <Progress percent={10} size='tiny'>\n tiny\n </Progress>\n <Progress percent={20} size='small'>\n small\n </Progress>\n <Progress percent={35} size='medium'>\n medium\n </Progress>\n <Progress percent={60} size='large'>\n large\n </Progress>\n <Progress percent={90} size='big'>\n big\n </Progress>\n </div>\n)\nexport default ProgressExampleSize\n","modules/Rating/Types/RatingExampleClearable":"import React from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nconst RatingExampleClearable = () => <Rating maxRating={5} clearable />\n\nexport default RatingExampleClearable\n","modules/Rating/Types/RatingExampleControlled":"import React, { Component } from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nexport default class RatingExampleControlled extends Component {\n state = { rating: 0 }\n\n handleChange = (e) => this.setState({ rating: e.target.value })\n\n render() {\n const { rating } = this.state\n\n return (\n <div>\n <div>Rating: {rating}</div>\n <input\n type='range'\n min={0}\n max={5}\n value={rating}\n onChange={this.handleChange}\n />\n <br />\n <Rating rating={this.state.rating} maxRating={5} />\n </div>\n )\n }\n}\n","modules/Rating/Types/RatingExampleDisabled":"import React from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nconst RatingExampleDisabled = () => (\n <Rating defaultRating={3} maxRating={5} disabled />\n)\n\nexport default RatingExampleDisabled\n","modules/Rating/Types/RatingExampleHeart":"import React from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nconst RatingExampleHeart = () => (\n <Rating icon='heart' defaultRating={1} maxRating={3} />\n)\n\nexport default RatingExampleHeart\n","modules/Rating/Types/RatingExampleOnRate":"import React, { Component } from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nexport default class RatingExampleOnRate extends Component {\n state = {}\n\n handleRate = (e, { rating, maxRating }) =>\n this.setState({ rating, maxRating })\n\n render() {\n return (\n <div>\n <Rating maxRating={5} onRate={this.handleRate} />\n <pre>{JSON.stringify(this.state, null, 2)}</pre>\n </div>\n )\n }\n}\n","modules/Rating/Types/RatingExampleRating":"import React from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nconst RatingExampleRating = () => <Rating />\n\nexport default RatingExampleRating\n","modules/Rating/Types/RatingExampleStar":"import React from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nconst RatingExampleStar = () => (\n <Rating icon='star' defaultRating={3} maxRating={4} />\n)\n\nexport default RatingExampleStar\n","modules/Rating/Variations/RatingExampleSize":"import React from 'react'\nimport { Rating } from 'semantic-ui-react'\n\nconst RatingExampleSize = () => (\n <div>\n <Rating maxRating={5} defaultRating={3} icon='star' size='mini' />\n <br />\n <br />\n\n <Rating maxRating={5} defaultRating={3} icon='star' size='tiny' />\n <br />\n <br />\n\n <Rating maxRating={5} defaultRating={3} icon='star' size='small' />\n <br />\n <br />\n\n <Rating maxRating={5} defaultRating={3} icon='star' />\n <br />\n <br />\n\n <Rating maxRating={5} defaultRating={3} icon='star' size='large' />\n <br />\n <br />\n\n <Rating maxRating={5} defaultRating={3} icon='star' size='huge' />\n <br />\n <br />\n\n <Rating maxRating={5} defaultRating={3} icon='star' size='massive' />\n <br />\n <br />\n </div>\n)\nexport default RatingExampleSize\n","modules/Search/Types/SearchExampleCategory":"import _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Search, Grid, Header, Segment } from 'semantic-ui-react'\n\nconst initialState = { isLoading: false, results: [], value: '' }\n\nconst getResults = () =>\n _.times(5, () => ({\n title: faker.company.companyName(),\n description: faker.company.catchPhrase(),\n image: faker.internet.avatar(),\n price: faker.finance.amount(0, 100, 2, '$'),\n }))\n\nconst source = _.range(0, 3).reduce((memo) => {\n const name = faker.hacker.noun()\n\n // eslint-disable-next-line no-param-reassign\n memo[name] = {\n name,\n results: getResults(),\n }\n\n return memo\n}, {})\n\nexport default class SearchExampleCategory extends Component {\n state = initialState\n\n handleResultSelect = (e, { result }) => this.setState({ value: result.title })\n\n handleSearchChange = (e, { value }) => {\n this.setState({ isLoading: true, value })\n\n setTimeout(() => {\n if (this.state.value.length < 1) return this.setState(initialState)\n\n const re = new RegExp(_.escapeRegExp(this.state.value), 'i')\n const isMatch = (result) => re.test(result.title)\n\n const filteredResults = _.reduce(\n source,\n (memo, data, name) => {\n const results = _.filter(data.results, isMatch)\n if (results.length) memo[name] = { name, results } // eslint-disable-line no-param-reassign\n\n return memo\n },\n {},\n )\n\n this.setState({\n isLoading: false,\n results: filteredResults,\n })\n }, 300)\n }\n\n render() {\n const { isLoading, value, results } = this.state\n\n return (\n <Grid>\n <Grid.Column width={8}>\n <Search\n category\n loading={isLoading}\n onResultSelect={this.handleResultSelect}\n onSearchChange={_.debounce(this.handleSearchChange, 500, {\n leading: true,\n })}\n results={results}\n value={value}\n />\n </Grid.Column>\n <Grid.Column width={8}>\n <Segment>\n <Header>State</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(this.state, null, 2)}\n </pre>\n <Header>Options</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(source, null, 2)}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Search/Types/SearchExampleCategoryCustom":"import PropTypes from 'prop-types'\nimport _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'\n\nconst categoryLayoutRenderer = ({ categoryContent, resultsContent }) => (\n <div>\n <h3 className='name'>{categoryContent}</h3>\n <div style={{ background: 'red' }} className='results'>\n {resultsContent}\n </div>\n </div>\n)\n\ncategoryLayoutRenderer.propTypes = {\n categoryContent: PropTypes.node,\n resultsContent: PropTypes.node,\n}\n\nconst categoryRenderer = ({ name }) => <Label as='span' content={name} />\n\ncategoryRenderer.propTypes = {\n name: PropTypes.string,\n}\n\nconst resultRenderer = ({ title }) => <Label content={title} />\n\nresultRenderer.propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n}\n\nconst initialState = { isLoading: false, results: [], value: '' }\n\nconst getResults = () =>\n _.times(5, () => ({\n title: faker.company.companyName(),\n description: faker.company.catchPhrase(),\n image: faker.internet.avatar(),\n price: faker.finance.amount(0, 100, 2, '$'),\n }))\n\nconst source = _.range(0, 3).reduce((memo) => {\n const name = faker.hacker.noun()\n\n // eslint-disable-next-line no-param-reassign\n memo[name] = {\n name,\n results: getResults(),\n }\n\n return memo\n}, {})\n\nexport default class SearchExampleCategory extends Component {\n state = initialState\n\n handleResultSelect = (e, { result }) => this.setState({ value: result.title })\n\n handleSearchChange = (e, { value }) => {\n this.setState({ isLoading: true, value })\n\n setTimeout(() => {\n if (this.state.value.length < 1) return this.setState(initialState)\n\n const re = new RegExp(_.escapeRegExp(this.state.value), 'i')\n const isMatch = (result) => re.test(result.title)\n\n const filteredResults = _.reduce(\n source,\n (memo, data, name) => {\n const results = _.filter(data.results, isMatch)\n if (results.length) memo[name] = { name, results } // eslint-disable-line no-param-reassign\n\n return memo\n },\n {},\n )\n\n this.setState({\n isLoading: false,\n results: filteredResults,\n })\n }, 300)\n }\n\n render() {\n const { isLoading, value, results } = this.state\n\n return (\n <Grid>\n <Grid.Column width={8}>\n <Search\n category\n categoryLayoutRenderer={categoryLayoutRenderer}\n categoryRenderer={categoryRenderer}\n loading={isLoading}\n onResultSelect={this.handleResultSelect}\n onSearchChange={_.debounce(this.handleSearchChange, 500, {\n leading: true,\n })}\n resultRenderer={resultRenderer}\n results={results}\n value={value}\n />\n </Grid.Column>\n <Grid.Column width={8}>\n <Segment>\n <Header>State</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(this.state, null, 2)}\n </pre>\n <Header>Options</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(source, null, 2)}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Search/Types/SearchExampleStandard":"import _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Search, Grid, Header, Segment } from 'semantic-ui-react'\n\nconst initialState = { isLoading: false, results: [], value: '' }\n\nconst source = _.times(5, () => ({\n title: faker.company.companyName(),\n description: faker.company.catchPhrase(),\n image: faker.internet.avatar(),\n price: faker.finance.amount(0, 100, 2, '$'),\n}))\n\nexport default class SearchExampleStandard extends Component {\n state = initialState\n\n handleResultSelect = (e, { result }) => this.setState({ value: result.title })\n\n handleSearchChange = (e, { value }) => {\n this.setState({ isLoading: true, value })\n\n setTimeout(() => {\n if (this.state.value.length < 1) return this.setState(initialState)\n\n const re = new RegExp(_.escapeRegExp(this.state.value), 'i')\n const isMatch = (result) => re.test(result.title)\n\n this.setState({\n isLoading: false,\n results: _.filter(source, isMatch),\n })\n }, 300)\n }\n\n render() {\n const { isLoading, value, results } = this.state\n\n return (\n <Grid>\n <Grid.Column width={6}>\n <Search\n loading={isLoading}\n onResultSelect={this.handleResultSelect}\n onSearchChange={_.debounce(this.handleSearchChange, 500, {\n leading: true,\n })}\n results={results}\n value={value}\n />\n </Grid.Column>\n <Grid.Column width={10}>\n <Segment>\n <Header>State</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(this.state, null, 2)}\n </pre>\n <Header>Options</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(source, null, 2)}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Search/Types/SearchExampleStandardCustom":"import PropTypes from 'prop-types'\nimport _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'\n\nconst source = _.times(5, () => ({\n title: faker.company.companyName(),\n description: faker.company.catchPhrase(),\n image: faker.internet.avatar(),\n price: faker.finance.amount(0, 100, 2, '$'),\n}))\n\nconst resultRenderer = ({ title }) => <Label content={title} />\n\nresultRenderer.propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n}\n\nconst initialState = { isLoading: false, results: [], value: '' }\n\nexport default class SearchExampleStandard extends Component {\n state = initialState\n\n handleResultSelect = (e, { result }) => this.setState({ value: result.title })\n\n handleSearchChange = (e, { value }) => {\n this.setState({ isLoading: true, value })\n\n setTimeout(() => {\n if (this.state.value.length < 1) return this.setState(initialState)\n\n const re = new RegExp(_.escapeRegExp(this.state.value), 'i')\n const isMatch = (result) => re.test(result.title)\n\n this.setState({\n isLoading: false,\n results: _.filter(source, isMatch),\n })\n }, 300)\n }\n\n render() {\n const { isLoading, value, results } = this.state\n\n return (\n <Grid>\n <Grid.Column width={6}>\n <Search\n loading={isLoading}\n onResultSelect={this.handleResultSelect}\n onSearchChange={_.debounce(this.handleSearchChange, 500, {\n leading: true,\n })}\n results={results}\n value={value}\n resultRenderer={resultRenderer}\n />\n </Grid.Column>\n <Grid.Column width={10}>\n <Segment>\n <Header>State</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(this.state, null, 2)}\n </pre>\n <Header>Options</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(source, null, 2)}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Search/Variations/SearchExampleAligned":"import _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Search, Grid, Header, Segment } from 'semantic-ui-react'\n\nconst source = _.times(5, () => ({\n title: faker.company.companyName(),\n description: faker.company.catchPhrase(),\n image: faker.internet.avatar(),\n price: faker.finance.amount(0, 100, 2, '$'),\n}))\n\nconst initialState = { isLoading: false, results: [], value: '' }\n\nexport default class SearchExampleStandard extends Component {\n state = initialState\n\n handleResultSelect = (e, { result }) => this.setState({ value: result.title })\n\n handleSearchChange = (e, { value }) => {\n this.setState({ isLoading: true, value })\n\n setTimeout(() => {\n if (this.state.value.length < 1) return this.setState(initialState)\n\n const re = new RegExp(_.escapeRegExp(this.state.value), 'i')\n const isMatch = (result) => re.test(result.title)\n\n this.setState({\n isLoading: false,\n results: _.filter(source, isMatch),\n })\n }, 300)\n }\n\n render() {\n const { isLoading, value, results } = this.state\n\n return (\n <Grid>\n <Grid.Column width={6}>\n <Search\n aligned='right'\n loading={isLoading}\n onResultSelect={this.handleResultSelect}\n onSearchChange={_.debounce(this.handleSearchChange, 500, {\n leading: true,\n })}\n results={results}\n value={value}\n />\n </Grid.Column>\n <Grid.Column width={10}>\n <Segment>\n <Header>State</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(this.state, null, 2)}\n </pre>\n <Header>Options</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(source, null, 2)}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Search/Variations/SearchExampleFluid":"import _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Search, Grid, Header, Segment } from 'semantic-ui-react'\n\nconst source = _.times(5, () => ({\n title: faker.company.companyName(),\n description: faker.company.catchPhrase(),\n image: faker.internet.avatar(),\n price: faker.finance.amount(0, 100, 2, '$'),\n}))\n\nconst initialState = { isLoading: false, results: [], value: '' }\n\nexport default class SearchExampleStandard extends Component {\n state = initialState\n\n handleResultSelect = (e, { result }) => this.setState({ value: result.title })\n\n handleSearchChange = (e, { value }) => {\n this.setState({ isLoading: true, value })\n\n setTimeout(() => {\n if (this.state.value.length < 1) return this.setState(initialState)\n\n const re = new RegExp(_.escapeRegExp(this.state.value), 'i')\n const isMatch = (result) => re.test(result.title)\n\n this.setState({\n isLoading: false,\n results: _.filter(source, isMatch),\n })\n }, 300)\n }\n\n render() {\n const { isLoading, value, results } = this.state\n\n return (\n <Grid>\n <Grid.Column width={6}>\n <Search\n fluid\n loading={isLoading}\n onResultSelect={this.handleResultSelect}\n onSearchChange={_.debounce(this.handleSearchChange, 500, {\n leading: true,\n })}\n results={results}\n value={value}\n />\n </Grid.Column>\n <Grid.Column width={10}>\n <Segment>\n <Header>State</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(this.state, null, 2)}\n </pre>\n <Header>Options</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(source, null, 2)}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Search/Variations/SearchExampleInput":"import _ from 'lodash'\nimport faker from 'faker'\nimport React, { Component } from 'react'\nimport { Search, Grid, Header, Segment } from 'semantic-ui-react'\n\nconst source = _.times(5, () => ({\n title: faker.company.companyName(),\n description: faker.company.catchPhrase(),\n image: faker.internet.avatar(),\n price: faker.finance.amount(0, 100, 2, '$'),\n}))\n\nconst initialState = { isLoading: false, results: [], value: '' }\n\nexport default class SearchExampleStandard extends Component {\n state = initialState\n\n handleResultSelect = (e, { result }) => this.setState({ value: result.title })\n\n handleSearchChange = (e, { value }) => {\n this.setState({ isLoading: true, value })\n\n setTimeout(() => {\n if (this.state.value.length < 1) return this.setState(initialState)\n\n const re = new RegExp(_.escapeRegExp(this.state.value), 'i')\n const isMatch = (result) => re.test(result.title)\n\n this.setState({\n isLoading: false,\n results: _.filter(source, isMatch),\n })\n }, 300)\n }\n\n render() {\n const { isLoading, value, results } = this.state\n\n return (\n <Grid>\n <Grid.Column width={6}>\n <Search\n input={{ icon: 'search', iconPosition: 'left' }}\n loading={isLoading}\n onResultSelect={this.handleResultSelect}\n onSearchChange={_.debounce(this.handleSearchChange, 500, {\n leading: true,\n })}\n results={results}\n value={value}\n />\n </Grid.Column>\n <Grid.Column width={10}>\n <Segment>\n <Header>State</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(this.state, null, 2)}\n </pre>\n <Header>Options</Header>\n <pre style={{ overflowX: 'auto' }}>\n {JSON.stringify(source, null, 2)}\n </pre>\n </Segment>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Sidebar/Examples/SidebarExampleMultiple":"import React from 'react'\nimport {\n Checkbox,\n Grid,\n Header,\n Icon,\n Image,\n Menu,\n Segment,\n Sidebar,\n} from 'semantic-ui-react'\n\nconst SidebarExampleMultiple = () => {\n const [visible, setVisible] = React.useState(false)\n\n return (\n <Grid columns={1}>\n <Grid.Column>\n <Checkbox\n checked={visible}\n label={{ children: <code>visible</code> }}\n onChange={(e, data) => setVisible(data.checked)}\n />\n </Grid.Column>\n\n <Grid.Column>\n <Sidebar.Pushable as={Segment}>\n <Sidebar\n as={Menu}\n animation='overlay'\n direction='left'\n icon='labeled'\n inverted\n onHide={() => setVisible(false)}\n vertical\n visible={visible}\n width='thin'\n >\n <Menu.Item as='a'>\n <Icon name='home' />\n Home\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='camera' />\n Channels\n </Menu.Item>\n </Sidebar>\n\n <Sidebar\n as={Menu}\n animation='overlay'\n direction='right'\n inverted\n vertical\n visible={visible}\n >\n <Menu.Item as='a' header>\n File Permissions\n </Menu.Item>\n <Menu.Item as='a'>Share on Social</Menu.Item>\n <Menu.Item as='a'>Share by E-mail</Menu.Item>\n <Menu.Item as='a'>Edit Permissions</Menu.Item>\n <Menu.Item as='a'>Delete Permanently</Menu.Item>\n </Sidebar>\n\n <Sidebar.Pusher>\n <Segment basic>\n <Header as='h3'>Application Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Sidebar.Pusher>\n </Sidebar.Pushable>\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default SidebarExampleMultiple\n","modules/Sidebar/Examples/SidebarExampleTransitions":"import React from 'react'\nimport {\n Button,\n Checkbox,\n Grid,\n Header,\n Icon,\n Image,\n Menu,\n Segment,\n Sidebar,\n} from 'semantic-ui-react'\n\nconst HorizontalSidebar = ({ animation, direction, visible }) => (\n <Sidebar\n as={Segment}\n animation={animation}\n direction={direction}\n visible={visible}\n >\n <Grid textAlign='center'>\n <Grid.Row columns={1}>\n <Grid.Column>\n <Header as='h3'>New Content Awaits</Header>\n </Grid.Column>\n </Grid.Row>\n <Grid.Row columns={3}>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n <Grid.Column>\n <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />\n </Grid.Column>\n </Grid.Row>\n </Grid>\n </Sidebar>\n)\n\nconst VerticalSidebar = ({ animation, direction, visible }) => (\n <Sidebar\n as={Menu}\n animation={animation}\n direction={direction}\n icon='labeled'\n inverted\n vertical\n visible={visible}\n width='thin'\n >\n <Menu.Item as='a'>\n <Icon name='home' />\n Home\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='camera' />\n Channels\n </Menu.Item>\n </Sidebar>\n)\n\nfunction exampleReducer(state, action) {\n switch (action.type) {\n case 'CHANGE_ANIMATION':\n return { ...state, animation: action.animation, visible: !state.visible }\n case 'CHANGE_DIMMED':\n return { ...state, dimmed: action.dimmed }\n case 'CHANGE_DIRECTION':\n return { ...state, direction: action.direction, visible: false }\n default:\n throw new Error()\n }\n}\n\nfunction SidebarExampleTransitions() {\n const [state, dispatch] = React.useReducer(exampleReducer, {\n animation: 'overlay',\n direction: 'left',\n dimmed: false,\n visible: false,\n })\n\n const { animation, dimmed, direction, visible } = state\n const vertical = direction === 'bottom' || direction === 'top'\n\n return (\n <div>\n <Checkbox\n checked={dimmed}\n label='Dim Page'\n onChange={(e, { checked }) =>\n dispatch({ type: 'CHANGE_DIMMED', dimmed: checked })\n }\n toggle\n />\n\n <Header as='h5'>Direction</Header>\n <Button.Group>\n <Button\n active={direction === 'left'}\n onClick={() =>\n dispatch({ type: 'CHANGE_DIRECTION', direction: 'left' })\n }\n >\n Left\n </Button>\n <Button\n active={direction === 'right'}\n onClick={() =>\n dispatch({ type: 'CHANGE_DIRECTION', direction: 'right' })\n }\n >\n Right\n </Button>\n <Button\n active={direction === 'top'}\n onClick={() =>\n dispatch({ type: 'CHANGE_DIRECTION', direction: 'top' })\n }\n >\n Top\n </Button>\n <Button\n active={direction === 'bottom'}\n onClick={() =>\n dispatch({ type: 'CHANGE_DIRECTION', direction: 'bottom' })\n }\n >\n Bottom\n </Button>\n </Button.Group>\n\n <Header as='h5'>All Direction Animations</Header>\n <Button\n onClick={() =>\n dispatch({ type: 'CHANGE_ANIMATION', animation: 'overlay' })\n }\n >\n Overlay\n </Button>\n <Button\n onClick={() =>\n dispatch({ type: 'CHANGE_ANIMATION', animation: 'push' })\n }\n >\n Push\n </Button>\n <Button\n onClick={() =>\n dispatch({ type: 'CHANGE_ANIMATION', animation: 'scale down' })\n }\n >\n Scale Down\n </Button>\n\n <Header as='h5'>Vertical-Only Animations</Header>\n <Button\n disabled={vertical}\n onClick={() =>\n dispatch({ type: 'CHANGE_ANIMATION', animation: 'uncover' })\n }\n >\n Uncover\n </Button>\n <Button\n disabled={vertical}\n onClick={() =>\n dispatch({ type: 'CHANGE_ANIMATION', animation: 'slide along' })\n }\n >\n Slide Along\n </Button>\n <Button\n disabled={vertical}\n onClick={() =>\n dispatch({ type: 'CHANGE_ANIMATION', animation: 'slide out' })\n }\n >\n Slide Out\n </Button>\n\n <Sidebar.Pushable as={Segment} style={{ overflow: 'hidden' }}>\n {vertical && (\n <HorizontalSidebar\n animation={animation}\n direction={direction}\n visible={visible}\n />\n )}\n {!vertical && (\n <VerticalSidebar\n animation={animation}\n direction={direction}\n visible={visible}\n />\n )}\n\n <Sidebar.Pusher dimmed={dimmed && visible}>\n <Segment basic>\n <Header as='h3'>Application Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Sidebar.Pusher>\n </Sidebar.Pushable>\n </div>\n )\n}\n\nexport default SidebarExampleTransitions\n","modules/Sidebar/States/SidebarExampleDimmed":"import React from 'react'\nimport {\n Checkbox,\n Grid,\n Header,\n Icon,\n Image,\n Menu,\n Segment,\n Sidebar,\n} from 'semantic-ui-react'\n\nconst SidebarExampleDimmed = () => {\n const [visible, setVisible] = React.useState(false)\n\n return (\n <Grid columns={1}>\n <Grid.Column>\n <Checkbox\n checked={visible}\n label={{ children: <code>visible</code> }}\n onChange={(e, data) => setVisible(data.checked)}\n />\n </Grid.Column>\n\n <Grid.Column>\n <Sidebar.Pushable as={Segment}>\n <Sidebar\n as={Menu}\n animation='overlay'\n icon='labeled'\n inverted\n onHide={() => setVisible(false)}\n vertical\n visible={visible}\n width='thin'\n >\n <Menu.Item as='a'>\n <Icon name='home' />\n Home\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='camera' />\n Channels\n </Menu.Item>\n </Sidebar>\n\n <Sidebar.Pusher dimmed={visible}>\n <Segment basic>\n <Header as='h3'>Application Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Sidebar.Pusher>\n </Sidebar.Pushable>\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default SidebarExampleDimmed\n","modules/Sidebar/States/SidebarExampleVisible":"import React from 'react'\nimport { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'\n\nconst SidebarExampleVisible = () => (\n <Sidebar.Pushable as={Segment}>\n <Sidebar\n as={Menu}\n animation='overlay'\n icon='labeled'\n inverted\n vertical\n visible\n width='thin'\n >\n <Menu.Item as='a'>\n <Icon name='home' />\n Home\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='camera' />\n Channels\n </Menu.Item>\n </Sidebar>\n\n <Sidebar.Pusher>\n <Segment basic>\n <Header as='h3'>Application Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Sidebar.Pusher>\n </Sidebar.Pushable>\n)\n\nexport default SidebarExampleVisible\n","modules/Sidebar/Types/SidebarExampleSidebar":"import React from 'react'\nimport {\n Checkbox,\n Grid,\n Header,\n Icon,\n Image,\n Menu,\n Segment,\n Sidebar,\n} from 'semantic-ui-react'\n\nconst SidebarExampleSidebar = () => {\n const [visible, setVisible] = React.useState(false)\n\n return (\n <Grid columns={1}>\n <Grid.Column>\n <Checkbox\n checked={visible}\n label={{ children: <code>visible</code> }}\n onChange={(e, data) => setVisible(data.checked)}\n />\n </Grid.Column>\n\n <Grid.Column>\n <Sidebar.Pushable as={Segment}>\n <Sidebar\n as={Menu}\n animation='overlay'\n icon='labeled'\n inverted\n onHide={() => setVisible(false)}\n vertical\n visible={visible}\n width='thin'\n >\n <Menu.Item as='a'>\n <Icon name='home' />\n Home\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='gamepad' />\n Games\n </Menu.Item>\n <Menu.Item as='a'>\n <Icon name='camera' />\n Channels\n </Menu.Item>\n </Sidebar>\n\n <Sidebar.Pusher>\n <Segment basic>\n <Header as='h3'>Application Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Sidebar.Pusher>\n </Sidebar.Pushable>\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default SidebarExampleSidebar\n","modules/Sidebar/Usage/SidebarExampleCallback":"import React from 'react'\nimport {\n Button,\n Checkbox,\n Grid,\n Header,\n Image,\n Label,\n Menu,\n Segment,\n Sidebar,\n} from 'semantic-ui-react'\n\nconst initialState = { items: [], count: 0 }\n\nconst logReducer = (state, action) => {\n switch (action.type) {\n case 'clearLog':\n return initialState\n case 'updateLog':\n return {\n items: [\n `${new Date().toLocaleTimeString()}: ${action.name}`,\n ...state.items,\n ].slice(0, 20),\n count: state.count + 1,\n }\n default:\n return state\n }\n}\n\nconst SidebarExampleCallback = () => {\n const [logs, dispatch] = React.useReducer(logReducer, initialState)\n const [visible, setVisible] = React.useState(false)\n\n return (\n <Grid>\n <Grid.Column width={16}>\n <Checkbox\n checked={visible}\n label={{ children: <code>visible</code> }}\n onChange={(e, data) => setVisible(data.checked)}\n />\n </Grid.Column>\n\n <Grid.Column width={8}>\n <Sidebar.Pushable as={Segment}>\n <Sidebar\n as={Menu}\n animation='overlay'\n icon='labeled'\n inverted\n onHidden={() => dispatch({ name: 'onHidden', type: 'updateLog' })}\n onHide={() => {\n setVisible(false)\n dispatch({ name: 'onHide', type: 'updateLog' })\n }}\n onShow={() => dispatch({ name: 'onShow', type: 'updateLog' })}\n onVisible={() => dispatch({ name: 'onVisible', type: 'updateLog' })}\n vertical\n visible={visible}\n width='thin'\n >\n <Menu.Item as='a'>Home</Menu.Item>\n <Menu.Item as='a'>Games</Menu.Item>\n <Menu.Item as='a'>Channels</Menu.Item>\n </Sidebar>\n\n <Sidebar.Pusher>\n <Segment basic>\n <Header as='h3'>Application Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Sidebar.Pusher>\n </Sidebar.Pushable>\n </Grid.Column>\n\n <Grid.Column width={8}>\n <Segment.Group>\n <Segment>\n <Button\n compact\n size='small'\n floated='right'\n onClick={() => dispatch({ type: 'clearLog' })}\n >\n Clear\n </Button>\n Event Log <Label circular>{logs.count}</Label>\n </Segment>\n <Segment secondary>\n <pre>\n {logs.items.map((e, i) => (\n <div key={i}>{e}</div>\n ))}\n </pre>\n </Segment>\n </Segment.Group>\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default SidebarExampleCallback\n","modules/Sidebar/Usage/SidebarExampleTarget":"import React from 'react'\nimport {\n Checkbox,\n Grid,\n Header,\n Image,\n Menu,\n Ref,\n Segment,\n Sidebar,\n} from 'semantic-ui-react'\n\nconst SidebarExampleTarget = () => {\n const segmentRef = React.useRef()\n const [visible, setVisible] = React.useState(false)\n\n return (\n <Grid columns={1}>\n <Grid.Column>\n <Checkbox\n checked={visible}\n label={{ children: <code>visible</code> }}\n onChange={(e, data) => setVisible(data.checked)}\n />\n </Grid.Column>\n\n <Grid.Column>\n <Sidebar.Pushable as={Segment.Group} raised>\n <Sidebar\n as={Menu}\n animation='overlay'\n icon='labeled'\n inverted\n onHide={() => setVisible(false)}\n vertical\n target={segmentRef}\n visible={visible}\n width='thin'\n >\n <Menu.Item as='a'>Home</Menu.Item>\n <Menu.Item as='a'>Games</Menu.Item>\n <Menu.Item as='a'>Channels</Menu.Item>\n </Sidebar>\n\n <Ref innerRef={segmentRef}>\n <Segment secondary>\n <Header as='h3'>Clickable area</Header>\n <p>When you will click there, the sidebar will be closed.</p>\n </Segment>\n </Ref>\n\n <Segment>\n <Header as='h3'>Application Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n </Segment>\n </Sidebar.Pushable>\n </Grid.Column>\n </Grid>\n )\n}\n\nexport default SidebarExampleTarget\n","modules/Sticky/Types/StickyExampleAdjacentContext":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Grid,\n Header,\n Image,\n Rail,\n Ref,\n Segment,\n Sticky,\n} from 'semantic-ui-react'\n\nconst Placeholder = () => <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\nexport default class StickyExampleAdjacentContext extends Component {\n contextRef = createRef()\n\n render() {\n return (\n <Grid centered columns={3}>\n <Grid.Column>\n <Ref innerRef={this.contextRef}>\n <Segment>\n {_.times(10, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Rail position='left'>\n {_.times(3, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Sticky context={this.contextRef}>\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n\n <Rail position='right'>\n <Sticky context={this.contextRef}>\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n </Segment>\n </Ref>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Sticky/Types/StickyExamplePushing":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Grid,\n Header,\n Image,\n Rail,\n Ref,\n Segment,\n Sticky,\n} from 'semantic-ui-react'\n\nconst Placeholder = () => <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\nexport default class StickyExamplePushing extends Component {\n contextRef = createRef()\n\n render() {\n return (\n <Grid centered columns={3}>\n <Grid.Column>\n <Ref innerRef={this.contextRef}>\n <Segment>\n {_.times(10, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Rail position='left'>\n <Sticky context={this.contextRef} pushing>\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n\n <Rail position='right'>\n {_.times(3, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Sticky context={this.contextRef} pushing>\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n </Segment>\n </Ref>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Sticky/Usage/StickyExampleAboveContent":"import React, { Component, createRef } from 'react'\nimport { Image, Input, Menu, Segment, Sticky } from 'semantic-ui-react'\nimport _ from 'lodash'\n\nexport default class StickyExampleAboveContent extends Component {\n contextRef = createRef()\n\n render() {\n return (\n <div ref={this.contextRef}>\n <Sticky context={this.contextRef}>\n <Menu\n attached='top'\n tabular\n style={{ backgroundColor: '#fff', paddingTop: '1em' }}\n >\n <Menu.Item as='a' active name='bio' />\n <Menu.Item as='a' active={false} name='photos' />\n <Menu.Menu position='right'>\n <Menu.Item>\n <Input\n transparent\n icon={{ name: 'search', link: true }}\n placeholder='Search users...'\n />\n </Menu.Item>\n </Menu.Menu>\n </Menu>\n </Sticky>\n <Segment attached='bottom'>\n {_.times(5, (i) => (\n <Image key={i} src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n ))}\n </Segment>\n </div>\n )\n }\n}\n","modules/Sticky/Usage/StickyExampleOffset":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Grid,\n Header,\n Image,\n Rail,\n Ref,\n Segment,\n Sticky,\n} from 'semantic-ui-react'\n\nconst Placeholder = () => <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\nexport default class StickyExampleOffset extends Component {\n contextRef = createRef()\n\n render() {\n return (\n <Grid centered columns={3}>\n <Grid.Column>\n <Ref innerRef={this.contextRef}>\n <Segment>\n {_.times(10, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Rail position='left'>\n {_.times(3, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Sticky context={this.contextRef} offset={100}>\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n\n <Rail position='right'>\n <Sticky\n bottomOffset={50}\n context={this.contextRef}\n offset={50}\n pushing\n >\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n </Segment>\n </Ref>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Sticky/Variations/StickyExampleActive":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Checkbox,\n Grid,\n Header,\n Image,\n Rail,\n Ref,\n Segment,\n Sticky,\n} from 'semantic-ui-react'\n\nconst Placeholder = () => <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\nexport default class StickyExampleActive extends Component {\n state = { active: true }\n contextRef = createRef()\n\n handleToggle = () =>\n this.setState((prevState) => ({ active: !prevState.active }))\n\n render() {\n const { active } = this.state\n\n return (\n <Grid centered columns={3}>\n <Grid.Column>\n <Ref innerRef={this.contextRef}>\n <Segment>\n {_.times(10, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Rail position='left'>\n <Sticky context={this.contextRef}>\n <Segment>\n <Checkbox\n checked={active}\n label='Activate Sticky on right'\n onChange={this.handleToggle}\n toggle\n />\n </Segment>\n </Sticky>\n </Rail>\n\n <Rail position='right'>\n <Sticky active={active} context={this.contextRef}>\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n </Segment>\n </Ref>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Sticky/Variations/StickyExampleOversized":"import _ from 'lodash'\nimport React, { Component, createRef } from 'react'\nimport {\n Grid,\n Header,\n Image,\n Item,\n Rail,\n Ref,\n Segment,\n Sticky,\n} from 'semantic-ui-react'\n\nconst Placeholder = () => <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />\n\nexport default class StickyExampleOversized extends Component {\n state = {}\n contextRef = createRef()\n\n render() {\n return (\n <Grid centered columns={3}>\n <Grid.Column>\n <Ref innerRef={this.contextRef}>\n <Segment>\n {_.times(15, (i) => (\n <Placeholder key={i} />\n ))}\n\n <Rail position='left'>\n <Sticky context={this.contextRef}>\n <Item.Group divided>\n {_.times(12, (i) => (\n <Item key={i}>\n <Item.Image\n size='tiny'\n src='https://react.semantic-ui.com/images/wireframe/image.png'\n />\n <Item.Content>\n <Item.Header as='a'>Followup Article</Item.Header>\n <Item.Meta>By Author</Item.Meta>\n </Item.Content>\n </Item>\n ))}\n </Item.Group>\n </Sticky>\n </Rail>\n\n <Rail position='right'>\n <Sticky context={this.contextRef}>\n <Header as='h3'>Stuck Content</Header>\n <Image src='https://react.semantic-ui.com/images/wireframe/image.png' />\n </Sticky>\n </Rail>\n </Segment>\n </Ref>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Transition/Explorers/TransitionExampleGroupExplorer":"import React, { Component } from 'react'\nimport { Form, Grid, Image, Transition } from 'semantic-ui-react'\n\nconst transitions = [\n 'browse',\n 'browse right',\n 'drop',\n 'fade',\n 'fade up',\n 'fade down',\n 'fade left',\n 'fade right',\n 'fly up',\n 'fly down',\n 'fly left',\n 'fly right',\n 'horizontal flip',\n 'vertical flip',\n 'scale',\n 'slide up',\n 'slide down',\n 'slide left',\n 'slide right',\n 'swing up',\n 'swing down',\n 'swing left',\n 'swing right',\n 'zoom',\n]\nconst options = transitions.map((name) => ({\n key: name,\n text: name,\n value: name,\n}))\n\nexport default class TransitionExampleSingleExplorer extends Component {\n state = { animation: transitions[0], duration: 500, visible: true }\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value })\n\n handleVisibility = () =>\n this.setState((prevState) => ({ visible: !prevState.visible }))\n\n render() {\n const { animation, duration, visible } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column as={Form}>\n <Form.Select\n label='Choose transition'\n name='animation'\n onChange={this.handleChange}\n options={options}\n value={animation}\n />\n <Form.Input\n label={`Duration: ${duration}ms `}\n min={100}\n max={2000}\n name='duration'\n onChange={this.handleChange}\n step={100}\n type='range'\n value={duration}\n />\n <Form.Button\n content={visible ? 'Unmount' : 'Mount'}\n onClick={this.handleVisibility}\n />\n </Grid.Column>\n\n <Grid.Column>\n <Transition.Group animation={animation} duration={duration}>\n {visible && (\n <Image centered size='small' src='https://react.semantic-ui.com/images/leaves/4.png' />\n )}\n </Transition.Group>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Transition/Explorers/TransitionExampleTransitionExplorer":"import React, { Component } from 'react'\nimport { Form, Grid, Image, Transition } from 'semantic-ui-react'\n\nconst transitions = [\n 'jiggle',\n 'flash',\n 'shake',\n 'pulse',\n 'tada',\n 'bounce',\n 'glow',\n]\n\nconst options = transitions.map((name) => ({\n key: name,\n text: name,\n value: name,\n}))\n\nexport default class TransitionExampleTransitionExplorer extends Component {\n state = { animation: transitions[0], duration: 500, visible: true }\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value })\n toggleVisibility = () =>\n this.setState((prevState) => ({ visible: !prevState.visible }))\n\n render() {\n const { animation, duration, visible } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column as={Form}>\n <Form.Select\n label='Choose transition'\n name='animation'\n onChange={this.handleChange}\n options={options}\n value={animation}\n />\n <Form.Input\n label={`Duration: ${duration}ms `}\n min={100}\n max={2000}\n name='duration'\n onChange={this.handleChange}\n step={100}\n type='range'\n value={duration}\n />\n <Form.Button content='Run' onClick={this.toggleVisibility} />\n </Grid.Column>\n\n <Grid.Column>\n <Transition\n animation={animation}\n duration={duration}\n visible={visible}\n >\n <Image centered size='small' src='https://react.semantic-ui.com/images/leaves/5.png' />\n </Transition>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Transition/Types/TransitionExampleGroup":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Button, Image, List, Transition } from 'semantic-ui-react'\n\nconst users = ['ade', 'chris', 'christian', 'daniel', 'elliot', 'helen']\n\nexport default class TransitionExampleGroup extends Component {\n state = { items: users.slice(0, 3) }\n\n handleAdd = () =>\n this.setState((prevState) => ({\n items: users.slice(0, prevState.items.length + 1),\n }))\n\n handleRemove = () =>\n this.setState((prevState) => ({ items: prevState.items.slice(0, -1) }))\n\n render() {\n const { items } = this.state\n\n return (\n <div>\n <Button.Group>\n <Button\n disabled={items.length === 0}\n icon='minus'\n onClick={this.handleRemove}\n />\n <Button\n disabled={items.length === users.length}\n icon='plus'\n onClick={this.handleAdd}\n />\n </Button.Group>\n\n <Transition.Group\n as={List}\n duration={200}\n divided\n size='huge'\n verticalAlign='middle'\n >\n {items.map((item) => (\n <List.Item key={item}>\n <Image avatar src={`/images/avatar/small/${item}.jpg`} />\n <List.Content header={_.startCase(item)} />\n </List.Item>\n ))}\n </Transition.Group>\n </div>\n )\n }\n}\n","modules/Transition/Types/TransitionExampleTransition":"import React, { Component } from 'react'\nimport { Button, Divider, Image, Transition } from 'semantic-ui-react'\n\nexport default class TransitionExampleTransition extends Component {\n state = { visible: true }\n\n toggleVisibility = () =>\n this.setState((prevState) => ({ visible: !prevState.visible }))\n\n render() {\n const { visible } = this.state\n\n return (\n <div>\n <Button\n content={visible ? 'Hide' : 'Show'}\n onClick={this.toggleVisibility}\n />\n <Divider hidden />\n <Transition visible={visible} animation='scale' duration={500}>\n <Image size='small' src='https://react.semantic-ui.com/images/leaves/1.png' />\n </Transition>\n </div>\n )\n }\n}\n","modules/Transition/Usage/TransitionExampleDuration":"import React, { Component } from 'react'\nimport { Form, Grid, Image, Transition } from 'semantic-ui-react'\n\nexport default class TransitionExampleDuration extends Component {\n state = { hide: 500, show: 500, visible: true }\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value })\n toggleVisibility = () =>\n this.setState((prevState) => ({ visible: !prevState.visible }))\n\n render() {\n const { hide, show, visible } = this.state\n\n return (\n <Grid columns={2}>\n <Grid.Column as={Form}>\n <Form.Input\n label={`Hide duration: ${hide}ms `}\n min={100}\n max={5000}\n name='hide'\n onChange={this.handleChange}\n step={100}\n type='range'\n value={hide}\n />\n <Form.Input\n label={`Show duration: ${show}ms `}\n min={100}\n max={5000}\n name='show'\n onChange={this.handleChange}\n step={100}\n type='range'\n value={show}\n />\n <Form.Button content='Run' onClick={this.toggleVisibility} />\n </Grid.Column>\n\n <Grid.Column>\n <Transition duration={{ hide, show }} visible={visible}>\n <Image centered size='small' src='https://react.semantic-ui.com/images/leaves/3.png' />\n </Transition>\n </Grid.Column>\n </Grid>\n )\n }\n}\n","modules/Tab/MenuVariations/TabExampleAttachedBottom":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached='top'>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached='top'>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached='top'>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleAttachedBottom = () => (\n <Tab menu={{ attached: 'bottom' }} panes={panes} />\n)\n\nexport default TabExampleAttachedBottom\n","modules/Tab/MenuVariations/TabExampleAttachedFalse":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleAttachedFalse = () => (\n <Tab menu={{ attached: false }} panes={panes} />\n)\n\nexport default TabExampleAttachedFalse\n","modules/Tab/MenuVariations/TabExampleBorderless":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleBorderless = () => (\n <Tab\n menu={{ borderless: true, attached: false, tabular: false }}\n panes={panes}\n />\n)\n\nexport default TabExampleBorderless\n","modules/Tab/MenuVariations/TabExampleColored":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Divider, Tab } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n]\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nclass TabExampleColored extends Component {\n state = { color: colors[0] }\n\n handleColorChange = (e) => this.setState({ color: e.target.value })\n\n render() {\n const { color } = this.state\n\n return (\n <div>\n <select onChange={this.handleColorChange}>\n {_.map(colors, (c) => (\n <option key={c} value={c}>\n {_.startCase(c)}\n </option>\n ))}\n </select>\n\n <Divider hidden />\n\n <Tab menu={{ color, attached: false, tabular: false }} panes={panes} />\n </div>\n )\n }\n}\n\nexport default TabExampleColored\n","modules/Tab/MenuVariations/TabExampleColoredInverted":"import _ from 'lodash'\nimport React, { Component } from 'react'\nimport { Divider, Tab } from 'semantic-ui-react'\n\nconst colors = [\n 'red',\n 'orange',\n 'yellow',\n 'olive',\n 'green',\n 'teal',\n 'blue',\n 'violet',\n 'purple',\n 'pink',\n 'brown',\n 'grey',\n]\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nclass TabExampleColoredInverted extends Component {\n state = { color: colors[0] }\n\n handleColorChange = (e) => this.setState({ color: e.target.value })\n\n render() {\n const { color } = this.state\n\n return (\n <div>\n <select onChange={this.handleColorChange}>\n {_.map(colors, (c) => (\n <option key={c} value={c}>\n {_.startCase(c)}\n </option>\n ))}\n </select>\n\n <Divider hidden />\n\n <Tab\n menu={{ color, inverted: true, attached: false, tabular: false }}\n panes={panes}\n />\n </div>\n )\n }\n}\n\nexport default TabExampleColoredInverted\n","modules/Tab/MenuVariations/TabExampleMenuPositionRight":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nconst TabExampleMenuPositionRight = () => (\n <Tab\n menu={{ fluid: true, vertical: true }}\n menuPosition='right'\n panes={panes}\n />\n)\n\nexport default TabExampleMenuPositionRight\n","modules/Tab/MenuVariations/TabExampleTabularFalse":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleTabularFalse = () => (\n <Tab menu={{ attached: false, tabular: false }} panes={panes} />\n)\n\nexport default TabExampleTabularFalse\n","modules/Tab/MenuVariations/TabExampleVerticalTabular":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nconst TabExampleVerticalTabular = () => (\n <Tab menu={{ fluid: true, vertical: true, tabular: true }} panes={panes} />\n)\n\nexport default TabExampleVerticalTabular\n","modules/Tab/MenuVariations/TabExampleVerticalTabularRight":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nconst TabExampleVerticalTabularRight = () => (\n <Tab menu={{ fluid: true, vertical: true, tabular: 'right' }} panes={panes} />\n)\n\nexport default TabExampleVerticalTabularRight\n","modules/Tab/States/TabExampleLoading":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane loading>Tab 1 Content</Tab.Pane>,\n },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nconst TabExampleLoading = () => <Tab panes={panes} />\n\nexport default TabExampleLoading\n","modules/Tab/Types/TabExampleBasic":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nconst TabExampleBasic = () => <Tab panes={panes} />\n\nexport default TabExampleBasic\n","modules/Tab/Types/TabExampleBasicAll":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', pane: 'Tab 1 Content' },\n { menuItem: 'Tab 2', pane: 'Tab 2 Content' },\n { menuItem: 'Tab 3', pane: 'Tab 3 Content' },\n]\n\nconst TabExampleBasicAll = () => <Tab panes={panes} renderActiveOnly={false} />\n\nexport default TabExampleBasicAll\n","modules/Tab/Types/TabExamplePointing":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExamplePointing = () => <Tab menu={{ pointing: true }} panes={panes} />\n\nexport default TabExamplePointing\n","modules/Tab/Types/TabExampleSecondary":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleSecondary = () => (\n <Tab menu={{ secondary: true }} panes={panes} />\n)\n\nexport default TabExampleSecondary\n","modules/Tab/Types/TabExampleSecondaryPointing":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleSecondaryPointing = () => (\n <Tab menu={{ secondary: true, pointing: true }} panes={panes} />\n)\n\nexport default TabExampleSecondaryPointing\n","modules/Tab/Types/TabExampleText":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 2',\n render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,\n },\n {\n menuItem: 'Tab 3',\n render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleText = () => <Tab menu={{ text: true }} panes={panes} />\n\nexport default TabExampleText\n","modules/Tab/Usage/TabExampleActiveIndex":"import React, { Component } from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nclass TabExampleActiveIndex extends Component {\n state = { activeIndex: 1 }\n\n handleRangeChange = (e) => this.setState({ activeIndex: e.target.value })\n handleTabChange = (e, { activeIndex }) => this.setState({ activeIndex })\n\n render() {\n const { activeIndex } = this.state\n\n return (\n <div>\n <div>activeIndex: {activeIndex}</div>\n <input\n type='range'\n max='2'\n value={activeIndex}\n onChange={this.handleRangeChange}\n />\n <Tab\n panes={panes}\n activeIndex={activeIndex}\n onTabChange={this.handleTabChange}\n />\n </div>\n )\n }\n}\n\nexport default TabExampleActiveIndex\n","modules/Tab/Usage/TabExampleCustomMenuItem":"import React from 'react'\nimport { Label, Menu, Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: { key: 'users', icon: 'users', content: 'Users' },\n render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>,\n },\n {\n menuItem: (\n <Menu.Item key='messages'>\n Messages<Label>15</Label>\n </Menu.Item>\n ),\n render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>,\n },\n]\n\nconst TabExampleCustomMenuItem = () => <Tab panes={panes} />\n\nexport default TabExampleCustomMenuItem\n","modules/Tab/Usage/TabExampleDefaultActiveIndex":"import React from 'react'\nimport { Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nconst TabExampleDefaultActiveIndex = () => (\n <Tab panes={panes} defaultActiveIndex={2} />\n)\n\nexport default TabExampleDefaultActiveIndex\n","modules/Tab/Usage/TabExampleOnTabChange":"import React, { Component } from 'react'\nimport { Segment, Tab } from 'semantic-ui-react'\n\nconst panes = [\n { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },\n { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },\n { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },\n]\n\nclass TabExampleOnTabChange extends Component {\n state = {}\n\n handleChange = (e, data) => this.setState(data)\n\n render() {\n return (\n <div>\n <Tab panes={panes} onTabChange={this.handleChange} />\n <Segment tertiary>\n <pre>{JSON.stringify(this.state, null, 2)}</pre>\n </Segment>\n </div>\n )\n }\n}\n\nexport default TabExampleOnTabChange\n","modules/Tab/Usage/TabExamplePaneShorthand":"import React from 'react'\nimport { List, Label, Tab } from 'semantic-ui-react'\n\nconst panes = [\n {\n menuItem: 'Tab 1',\n pane: { key: 'tab1', content: 'This is a massive tab', size: 'massive' },\n },\n {\n menuItem: 'Tab 2',\n pane: {\n key: 'tab2',\n content: 'This tab has center-aligned text',\n textAlign: 'center',\n },\n },\n {\n menuItem: 'Tab 3',\n pane: {\n key: 'tab3',\n content: (\n <div>\n This tab contains a <Label>JSX</Label> element\n </div>\n ),\n },\n },\n {\n menuItem: 'Tab 4',\n pane: (\n <Tab.Pane key='tab4'>\n <p>This tab has complex content</p>\n\n <List>\n <List.Item>Apples</List.Item>\n <List.Item>Pears</List.Item>\n <List.Item>Oranges</List.Item>\n </List>\n </Tab.Pane>\n ),\n },\n]\n\nconst TabExampleContentShorthand = () => (\n <Tab panes={panes} renderActiveOnly={false} />\n)\n\nexport default TabExampleContentShorthand\n"},"sidebarSections":[{"sectionName":"Types","examples":[{"title":"Confirm","examplePath":"addons/Confirm/Types/ConfirmExampleConfirm"},{"title":"Callbacks","examplePath":"addons/Confirm/Types/ConfirmExampleCallbacks"}]},{"sectionName":"Variations","examples":[{"title":"Header","examplePath":"addons/Confirm/Variations/ConfirmExampleHeader"},{"title":"Content","examplePath":"addons/Confirm/Variations/ConfirmExampleContent"},{"title":"Button Text","examplePath":"addons/Confirm/Variations/ConfirmExampleButtons"},{"title":"Confirm Size","examplePath":"addons/Confirm/Variations/ConfirmExampleSize"}]}],"displayName":"Confirm","deprecated":false,"seeTags":[{"displayName":"Modal","to":"/modules/modal/"}]},"siteData":{"dev":false,"componentMenu":[{"displayName":"Confirm","type":"addon"},{"displayName":"MountNode","type":"addon"},{"displayName":"Pagination","type":"addon"},{"displayName":"Portal","type":"addon"},{"displayName":"Radio","type":"addon"},{"displayName":"Responsive","type":"addon"},{"displayName":"Select","type":"addon"},{"displayName":"TextArea","type":"addon"},{"displayName":"TransitionablePortal","type":"addon"},{"displayName":"Visibility","type":"behavior"},{"displayName":"Container","type":"element"},{"displayName":"Button","type":"element"},{"displayName":"Divider","type":"element"},{"displayName":"Flag","type":"element"},{"displayName":"Icon","type":"element"},{"displayName":"Header","type":"element"},{"displayName":"Input","type":"element"},{"displayName":"Image","type":"element"},{"displayName":"Label","type":"element"},{"displayName":"List","type":"element"},{"displayName":"Loader","type":"element"},{"displayName":"Placeholder","type":"element"},{"displayName":"Rail","type":"element"},{"displayName":"Reveal","type":"element"},{"displayName":"Segment","type":"element"},{"displayName":"Step","type":"element"},{"displayName":"Breadcrumb","type":"collection"},{"displayName":"Form","type":"collection"},{"displayName":"Grid","type":"collection"},{"displayName":"Message","type":"collection"},{"displayName":"Menu","type":"collection"},{"displayName":"Table","type":"collection"},{"displayName":"Accordion","type":"module"},{"displayName":"Checkbox","type":"module"},{"displayName":"Dimmer","type":"module"},{"displayName":"Embed","type":"module"},{"displayName":"Dropdown","type":"module"},{"displayName":"Modal","type":"module"},{"displayName":"Progress","type":"module"},{"displayName":"Popup","type":"module"},{"displayName":"Rating","type":"module"},{"displayName":"Sidebar","type":"module"},{"displayName":"Sticky","type":"module"},{"displayName":"Search","type":"module"},{"displayName":"Tab","type":"module"},{"displayName":"Transition","type":"module"},{"displayName":"Advertisement","type":"view"},{"displayName":"Card","type":"view"},{"displayName":"Comment","type":"view"},{"displayName":"Feed","type":"view"},{"displayName":"Statistic","type":"view"},{"displayName":"Item","type":"view"}],"pkg":{"description":"The official Semantic-UI-React integration.","name":"semantic-ui-react"},"title":"Semantic UI React","versions":{"anchor":"4.2.2","babel":{"standalone":"7.10.5"},"faker":"4.1.0","propTypes":"15.7.2","prismjs":"1.20.0","react":"16.9.0","sui":"2.4.2","suir":"1.1.1"}}};</script><script defer="" type="text/javascript" src="https://react.semantic-ui.com/bootstrap.988e8ff3.js"></script><script defer="" type="text/javascript" src="https://react.semantic-ui.com/templates/src-components-ComponentDoc.116784b0.js"></script><script defer="" type="text/javascript" src="https://react.semantic-ui.com/main.80e03568.js"></script></body></html>