Fix: Examples package name;

README.md

@@ -17,7 +17,7 @@ Re-export the Aphrodite tools through your React application folder structure.
 ```js
 export {
     colors,
-} from 'aphrodite-react';
+} from '@ingresse/aphrodite';
 ```
 
 `src/components/index.js`:
@@ -26,7 +26,7 @@ export {
     Button,
     Container,
     Segment,
-} from 'aphrodite-react';
+} from '@ingresse/aphrodite';
 ```
 
 `src/App.jsx`:
@@ -37,6 +37,7 @@ import React from 'react';
 /* Your Project Components */
 import {
     Button,
+    Container,
     Segment,
 } from './components';
 
@@ -46,12 +47,18 @@ function App() {
     }
 
     return (
-        <Segment
-            textAlign="center">
-            <Button onClick={handleClick}>
-                Aphrodite Button
-            </Button>
-        </Segment>
+        <Container>
+            <Segment
+                as="section"
+                textAlign="center"
+                background="helper">
+                <Button
+                    color="bamboo"
+                    onClick={handleClick}>
+                    Aphrodite Button
+                </Button>
+            </Segment>
+        </Container>
     );
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ingresse/aphrodite",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "license": "MIT",
   "description": "React UI library from ingresse.com",
@@ -71,9 +71,10 @@
   ],
   "authors": [
     "Ingresse",
-    "Udimberto Silvestre Junior",
     "Ana Paula de Oliveira",
-    "Maicon Silva"
+    "Ana Flávia Rodrigues",
+    "Maicon Silva",
+    "Udimberto Silvestre Junior"
   ],
   "bugs": {
     "url": "https://github.com/ingresse/aphrodite-react/issues"

src/components/ActionBar/ActionBar.mdx

@@ -13,7 +13,7 @@ import { ActionBar, Button, Container, Segment } from '../';
 ### Toggle visibility of action elements
 
 ```jsx
-import { ActionBar, Button } from 'aphrodite-react';
+import { ActionBar, Button } from '@ingresse/aphrodite';
 
 <ActionBar
     visible={true}

src/components/Badge/Badge.mdx

@@ -16,7 +16,7 @@ import {
 ### Badge styled with Aphrodite definitions.
 
 ```jsx
-import { Badge } from 'aphrodite-react';
+import { Badge } from '@ingresse/aphrodite';
 
 <Badge>
     Hello, you

src/components/Button/Button.mdx

@@ -14,7 +14,7 @@ import { Button, Container, Segment, Row, Col } from '../';
 ### Button styled with Aphrodite definitions.
 
 ```jsx
-import { Button } from 'aphrodite-react';
+import { Button } from '@ingresse/aphrodite';
 
 <Button>Hello, you</Button>
 ```

src/components/Card/Card.mdx

@@ -17,7 +17,7 @@ import {
 ### Used as base on `Collapsible` component.
 
 ```jsx
-import { Card } from 'aphrodite-react';
+import { Card } from '@ingresse/aphrodite';
 
 ...
 

src/components/Clipboard/Clipboard.mdx

@@ -17,7 +17,7 @@ import {
 
 
 ```jsx
-import { Clipboard } from 'aphrodite-react';
+import { Clipboard } from '@ingresse/aphrodite';
 
 ...
 

src/components/Collapsible/Collapsible.mdx

@@ -17,7 +17,7 @@ import {
 ### An alternative to accordion.
 
 ```jsx
-import { Collapsible, Segment } from 'aphrodite-react';
+import { Collapsible, Segment } from '@ingresse/aphrodite';
 ...
 <Collapsible header="Hi">
     <Segment padding="5px 10px">

src/components/Countdown/Countdown.mdx

@@ -24,7 +24,7 @@ import { colors } from '../../utils';
 ### Regressive seconds visual timer
 
 ```jsx
-import { Countdown } from 'aphrodite-react';
+import { Countdown } from '@ingresse/aphrodite';
 
 ...
 

src/components/Dialog/Dialog.mdx

@@ -21,7 +21,7 @@ import {
 ### Dialog boxes tell users about a task and can contain critical information, require decisions, or involve multiple tasks.
 
 ```jsx
-import { Dialog } from 'aphrodite-react';
+import { Dialog } from '@ingresse/aphrodite';
 
 ...
 

src/components/Dropdown/Dropdown.mdx

@@ -22,12 +22,14 @@ import {
 ### A white block, rounded, with simple shadow effect, downing from some other component.
 
 ```jsx
-import { Dropdown } from 'aphrodite-react';
+import { Dropdown } from '@ingresse/aphrodite';
 
 ...
 
-<Dropdown>
-    Hello
+<Dropdown
+    center
+    toggle="Dropdown toggle">
+    Dropdown content
 </Dropdown>
 ```
 

src/components/ExpansionPanel/ExpansionPanel.mdx

@@ -24,7 +24,7 @@ import { colors } from '../../utils';
 
 <Playground>
     {() => {
-        // import { ExpansionPanel } from 'aphrodite-react';
+        // import { ExpansionPanel } from '@ingresse/aphrodite';
 
         return (
             <ExpansionPanel

src/components/Flex/Flex.mdx

@@ -20,7 +20,7 @@ import {
 
 <Playground style={{ margin: '-20px', padding: '0 !important' }}>
     {() => {
-        // import { Flex } from 'aphrodite-react';
+        // import { Flex } from '@ingresse/aphrodite';
 
         const wrapperStyles = {
             width    : '100%',

src/components/Form/Select/Select.jsx

@@ -79,7 +79,7 @@ const Select = memo(forwardRef((props, ref) => {
                 <Icon
                     size={30}
                     slug="arrow-down"
-                    color={props.disabled ? 'disabled' : 'base'}
+                    color={props.disabled ? 'helper' : 'base'}
                 />
             </AphFormControlButtonStyled>
             <AphFormControlErrorMsgStyled

src/components/Form/Select/Select.mdx

@@ -33,6 +33,22 @@ import {
 </Playground>
 
 
+## Disabled
+
+<Playground>
+    <Container xs>
+        <Segment padding="10px 0">
+            <Select disabled label="Disabled example">
+                <option value=""></option>
+                <option value="ingresse">Ingresse</option>
+                <option value="aphrodite">Aphrodite</option>
+                <option value="react">React</option>
+            </Select>
+        </Segment>
+    </Container>
+</Playground>
+
+
 ## Delayed
 
 <Playground>

src/components/Grid/grid.mdx

@@ -14,7 +14,7 @@ import { GRID, RADIUS } from '../../constants';
 ### Align the components with Aphrodite standards
 
 ```jsx
-import { Container, Row, Col } from 'aphrodite-react';
+import { Container, Row, Col } from '@ingresse/aphrodite';
 ...
 <Container>
     <Row>

src/components/HoverActions/HoverActions.mdx

@@ -12,7 +12,7 @@ import { HoverActions, HoverActionsItem, Img, Container } from '../';
 ### On some content hovered, display another content over the original.
 
 ```jsx
-import { HoverActions, HoverActionsItem } from 'aphrodite-react';
+import { HoverActions, HoverActionsItem } from '@ingresse/aphrodite';
 
 ...
 

src/components/Img/Img.mdx

@@ -12,7 +12,7 @@ import { Img } from '../';
 ### A styled component to images, with some facilities.
 
 ```jsx
-import { Img } from 'aphrodite-react';
+import { Img } from '@ingresse/aphrodite';
 
 <Img
     circle

src/components/Modal/Modal.mdx

@@ -29,7 +29,7 @@ import { Playground, Props } from 'docz';
 
 <Playground style={{ margin: '-20px', padding: '0 !important' }}>
     {() => {
-        // import { Modal, Segment, Button, Placeholder } from 'aphrodite-react';
+        // import { Modal, Segment, Button, Placeholder } from '@ingresse/aphrodite';
 
         const [ opened, setOpened ]                     = useState(false);
         const [ title, setTitle ]                       = useState('Oi, eu sou o Goku');

src/components/NumberFormat/NumberFormat.mdx

@@ -14,7 +14,7 @@ import { Button, NumberFormat } from '../';
 
 
 ```jsx
-import { NumberFormat } from 'aphrodite-react';
+import { NumberFormat } from '@ingresse/aphrodite';
 ...
 
 function ExampleComponent() {

src/components/Placeholder/Placeholder.mdx

@@ -11,7 +11,7 @@ import { Button, Placeholder } from '../';
 ### A simple way to make a "shadow" of your components, when your application is loading the real content.
 
 ```jsx
-import { Placeholder } from 'aphrodite-react';
+import { Placeholder } from '@ingresse/aphrodite';
 
 <Placeholder />
 ```

src/components/ProgressBar/ProgressBar.mdx

@@ -11,7 +11,7 @@ import { colors } from '../../utils';
 
 # Progress Bar
 ```jsx
-import { colors, ProgressBar } from 'aphrodite-react';
+import { colors, ProgressBar } from '@ingresse/aphrodite';
 
 <ProgressBar
     size="200px"    // Have priority

src/components/Segment/Segment.mdx

@@ -12,7 +12,7 @@ import { Segment, Container, Row, Col, Card, Switch } from '../';
 ### A simple block, with default paddings of `20px 10px`.
 
 ```jsx
-import { Segment } from 'aphrodite-react';
+import { Segment } from '@ingresse/aphrodite';
 
 ...
 

src/components/SidePill/SidePill.mdx-incomplete

@@ -12,7 +12,7 @@ import { Img, Placeholder, SidePill } from '../';
 #### Boring
 
 ```jsx
-import { SidePill, Img } from 'aphrodite-react';
+import { SidePill, Img } from '@ingresse/aphrodite';
 
 <SidePill />
 ```

src/components/Table/Table.mdxs

@@ -9,7 +9,7 @@ import { Table } from '../';
 
 # Table
 ```jsx
-import { Table } from 'aphrodite-react';
+import { Table } from '@ingresse/aphrodite';
 
 <Table bordered condensed hoverable striped>
     <thead>

src/components/Tooltip/Tooltip.mdx-incomplete

@@ -12,7 +12,7 @@ import { COLORS } from '../../constants';
 #### Just an implementation of awesome library [**React Tooltip**](https://github.com/wwayne/react-tooltip), with Aphrodite's definitions.
 #### So, it's just consult the [documentation](https://github.com/wwayne/react-tooltip) for more options.
 ```jsx
-import { Tooltip } from 'aphrodite-react';
+import { Tooltip } from '@ingresse/aphrodite';
 
 <Tooltip tip="How you doing?!">Hover me</Tooltip>
 ```

src/components/Typography/Typography.mdx

@@ -16,7 +16,7 @@ import { H1, H2, H3, P, Label, Row, Col } from '../';
 ## Title component
 
 ```jsx
-import { H1 } from 'aphrodite-react';
+import { H1 } from '@ingresse/aphrodite';
 ...
 <H1>
     Hello
@@ -62,7 +62,7 @@ import { H1 } from 'aphrodite-react';
 #### Title component
 
 ```jsx
-import { H2 } from 'aphrodite-react';
+import { H2 } from '@ingresse/aphrodite';
 ...
 <H2>
     Hello
@@ -106,7 +106,7 @@ import { H2 } from 'aphrodite-react';
 #### Title component
 
 ```jsx
-import { H3 } from 'aphrodite-react';
+import { H3 } from '@ingresse/aphrodite';
 ...
 <H3>
     Hello
@@ -150,7 +150,7 @@ import { H3 } from 'aphrodite-react';
 #### Paragraph component
 
 ```jsx
-import { P } from 'aphrodite-react';
+import { P } from '@ingresse/aphrodite';
 ...
 <P>
     Hello
@@ -201,7 +201,7 @@ import { P } from 'aphrodite-react';
 #### Content label component
 
 ```jsx
-import { Label } from 'aphrodite-react';
+import { Label } from '@ingresse/aphrodite';
 ...
 <Label>
     Hello

src/hooks/use-window-size/useWindowSize.jsx

@@ -80,7 +80,6 @@ function useWindowSize(delay = 500) {
             clearTimeout(timer);
 
             timer = setTimeout(() => {
-                console.log('resize handler acting');
                 setWindowSize(getSize());
             }, delay);
         }

src/hooks/use-window-size/useWindowSize.mdx

@@ -21,7 +21,7 @@ import {
     H3,
     Container,
     Segment,
-} from 'aphrodite-react';
+} from '@ingresse/aphrodite';
 
 function Header() {
     const {
@@ -41,7 +41,8 @@ function Header() {
             as="header"
             padding={xs ? '20px 0' : '40px 0'}>
             <Container>
-                <Title>
+                <Title
+                    as="h1">
                     Sales Report
                 </Title>
             </Container>