box-ui-elements 19.0.0-beta.8 → 19.0.0

package/es/components/search-form/SearchForm.js.flow

@@ -1,34 +1,17 @@
 // @flow
 import * as React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 
-import ClearBadge16 from '../../icon/fill/ClearBadge16';
-import Search16 from '../../icon/fill/Search16';
+// $FlowFixMe
+import SearchActions from './SearchActions';
 
-import makeLoadable from '../loading-indicator/makeLoadable';
+// $FlowFixMe
+import messages from './messages';
 
 import './SearchForm.scss';
 
-const messages = defineMessages({
-    clearButtonTitle: {
-        defaultMessage: 'Clear',
-        description: 'Title for a clear button',
-        id: 'boxui.searchForm.clearButtonTitle',
-    },
-    searchButtonTitle: {
-        defaultMessage: 'Search',
-        description: 'Title for a search button',
-        id: 'boxui.searchForm.searchButtonTitle',
-    },
-    searchLabel: {
-        defaultMessage: 'Search query',
-        description: 'Label for a search input',
-        id: 'boxui.searchForm.searchLabel',
-    },
-});
-
 type Props = {
     /** Form submit action */
     action?: string,
@@ -41,13 +24,13 @@ type Props = {
     method?: 'get' | 'post',
     /** Name of the text input */
     name?: string,
-    /** On change handler for the search input, debounced by 250ms */
+    /** On change handler for the search input */
     onChange?: Function,
     /** On submit handler for the search input */
     onSubmit?: Function,
     /** Extra query parameters in addition to the form data */
     queryParams: { [arg: string]: string },
-    /** Boolean to prevent propogation of search clear action */
+    /** Whether to prevent propagation of search clear action */
     shouldPreventClearEventPropagation?: boolean,
     /** If the clear button is shown when input field is not empty */
     useClearButton?: boolean,
@@ -177,35 +160,6 @@ class SearchFormBase extends React.Component<Props, State> {
             <input key={index} name={param} type="hidden" value={queryParams[param]} />
         ));
 
-        const SearchActions = () => (
-            <div className="action-buttons">
-                {onSubmit ? (
-                    <button
-                        type="submit"
-                        className="action-button search-button"
-                        title={formatMessage(messages.searchButtonTitle)}
-                    >
-                        <Search16 />
-                    </button>
-                ) : (
-                    <div className="action-button search-button">
-                        <Search16 />
-                    </div>
-                )}
-
-                <button
-                    className="action-button clear-button"
-                    onClick={this.onClearHandler}
-                    title={formatMessage(messages.clearButtonTitle)}
-                    type="button"
-                >
-                    <ClearBadge16 />
-                </button>
-            </div>
-        );
-
-        const LoadableSearchActions = makeLoadable(SearchActions);
-
         // @NOTE Prevent errors from React about controlled inputs
         const onChangeStub = () => {};
 
@@ -229,11 +183,13 @@ class SearchFormBase extends React.Component<Props, State> {
                         type="search"
                         {...inputProps}
                     />
-                    <LoadableSearchActions
+                    <SearchActions
+                        hasSubmitAction={!!onSubmit}
                         isLoading={isLoading}
                         loadingIndicatorProps={{
                             className: 'search-form-loading-indicator',
                         }}
+                        onClear={this.onClearHandler}
                     />
                     {hiddenInputs}
                 </form>

package/es/components/search-form/SearchForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/search-form/SearchForm.js"],"names":["React","defineMessages","injectIntl","classNames","omit","ClearBadge16","Search16","makeLoadable","messages","clearButtonTitle","searchButtonTitle","searchLabel","SearchFormBase","Component","isEmpty","event","onChange","shouldPreventClearEventPropagation","props","stopPropagation","searchInput","value","setState","target","trim","length","elements","onSubmit","element","getSearchInput","getDerivedStateFromProps","render","action","className","innerRef","intl","isLoading","method","name","queryParams","useClearButton","rest","state","inputProps","formatMessage","classes","formClassNames","hiddenInputs","Object","keys","map","param","index","SearchActions","onClearHandler","LoadableSearchActions","onChangeStub","onChangeHandler","onSubmitHandler","setInputRef","SearchFormBaseIntl","SearchForm","forwardRef","ref","displayName"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\n\nimport ClearBadge16 from '../../icon/fill/ClearBadge16';\nimport Search16 from '../../icon/fill/Search16';\n\nimport makeLoadable from '../loading-indicator/makeLoadable';\n\nimport './SearchForm.scss';\n\nconst messages = defineMessages({\n    clearButtonTitle: {\n        defaultMessage: 'Clear',\n        description: 'Title for a clear button',\n        id: 'boxui.searchForm.clearButtonTitle',\n    },\n    searchButtonTitle: {\n        defaultMessage: 'Search',\n        description: 'Title for a search button',\n        id: 'boxui.searchForm.searchButtonTitle',\n    },\n    searchLabel: {\n        defaultMessage: 'Search query',\n        description: 'Label for a search input',\n        id: 'boxui.searchForm.searchLabel',\n    },\n});\n\ntype Props = {\n    /** Form submit action */\n    action?: string,\n    className?: string,\n    getSearchInput?: Function,\n    innerRef?: React.Ref<any>,\n    intl: Object,\n    isLoading?: boolean,\n    /** The way to send the form data, get or post */\n    method?: 'get' | 'post',\n    /** Name of the text input */\n    name?: string,\n    /** On change handler for the search input, debounced by 250ms */\n    onChange?: Function,\n    /** On submit handler for the search input */\n    onSubmit?: Function,\n    /** Extra query parameters in addition to the form data */\n    queryParams: { [arg: string]: string },\n    /** Boolean to prevent propogation of search clear action */\n    shouldPreventClearEventPropagation?: boolean,\n    /** If the clear button is shown when input field is not empty */\n    useClearButton?: boolean,\n    /** The value of the input if controlled */\n    value?: string,\n};\n\ntype DefaultProps = {\n    action: string,\n    method: 'get' | 'post',\n    name: string,\n    queryParams: { [arg: string]: string },\n    useClearButton: boolean,\n};\n\ntype IntlProps = {\n    intl: Object,\n};\n\ntype State = {\n    isEmpty: boolean,\n};\n\ntype Config = React.Config<Props, DefaultProps & IntlProps>;\n\nclass SearchFormBase extends React.Component<Props, State> {\n    static defaultProps: DefaultProps = {\n        action: '',\n        method: 'get',\n        name: 'search',\n        queryParams: {},\n        useClearButton: false,\n    };\n\n    state = {\n        isEmpty: true,\n    };\n\n    static getDerivedStateFromProps(props: Props): any {\n        const { value } = props;\n\n        if (value && !!value.trim()) {\n            return {\n                isEmpty: true,\n            };\n        }\n\n        return null;\n    }\n\n    onClearHandler = (event: SyntheticEvent<>) => {\n        const { onChange, shouldPreventClearEventPropagation } = this.props;\n        if (shouldPreventClearEventPropagation) {\n            event.stopPropagation();\n        }\n\n        if (this.searchInput) {\n            this.searchInput.value = '';\n        }\n        this.setState({ isEmpty: true });\n\n        if (onChange) {\n            onChange('');\n        }\n    };\n\n    onChangeHandler = ({ target }) => {\n        const { value } = target;\n        const { onChange } = this.props;\n        this.setState({ isEmpty: !value || !value.trim().length });\n\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    onSubmitHandler = event => {\n        const { value } = event.target.elements[0];\n        const { onSubmit } = this.props;\n\n        if (onSubmit) {\n            onSubmit(value, event);\n        }\n    };\n\n    setInputRef = element => {\n        this.searchInput = element;\n\n        if (this.props.getSearchInput) {\n            this.props.getSearchInput(this.searchInput);\n        }\n    };\n\n    searchInput: ?HTMLInputElement;\n\n    render() {\n        const {\n            action,\n            className,\n            innerRef,\n            intl,\n            isLoading,\n            method,\n            name,\n            queryParams,\n            onSubmit,\n            useClearButton,\n            ...rest\n        } = this.props;\n        const { isEmpty } = this.state;\n\n        const inputProps = omit(rest, [\n            'getSearchInput',\n            'onChange',\n            'onSubmit',\n            'required',\n            'shouldPreventClearEventPropagation',\n        ]);\n\n        const { formatMessage } = intl;\n        const classes = classNames(className, 'search-input-container');\n        const formClassNames = classNames('search-form', {\n            'is-empty': isEmpty,\n            'use-clear-button': useClearButton,\n        });\n        const hiddenInputs = Object.keys(queryParams).map((param, index) => (\n            <input key={index} name={param} type=\"hidden\" value={queryParams[param]} />\n        ));\n\n        const SearchActions = () => (\n            <div className=\"action-buttons\">\n                {onSubmit ? (\n                    <button\n                        type=\"submit\"\n                        className=\"action-button search-button\"\n                        title={formatMessage(messages.searchButtonTitle)}\n                    >\n                        <Search16 />\n                    </button>\n                ) : (\n                    <div className=\"action-button search-button\">\n                        <Search16 />\n                    </div>\n                )}\n\n                <button\n                    className=\"action-button clear-button\"\n                    onClick={this.onClearHandler}\n                    title={formatMessage(messages.clearButtonTitle)}\n                    type=\"button\"\n                >\n                    <ClearBadge16 />\n                </button>\n            </div>\n        );\n\n        const LoadableSearchActions = makeLoadable(SearchActions);\n\n        // @NOTE Prevent errors from React about controlled inputs\n        const onChangeStub = () => {};\n\n        return (\n            <div ref={innerRef} className={classes}>\n                <form\n                    action={action}\n                    className={formClassNames}\n                    method={method}\n                    onChange={this.onChangeHandler}\n                    onSubmit={this.onSubmitHandler}\n                    role=\"search\"\n                >\n                    <input\n                        ref={this.setInputRef}\n                        aria-label={formatMessage(messages.searchLabel)}\n                        autoComplete=\"off\"\n                        className=\"search-input\"\n                        name={name}\n                        onChange={onChangeStub}\n                        type=\"search\"\n                        {...inputProps}\n                    />\n                    <LoadableSearchActions\n                        isLoading={isLoading}\n                        loadingIndicatorProps={{\n                            className: 'search-form-loading-indicator',\n                        }}\n                    />\n                    {hiddenInputs}\n                </form>\n            </div>\n        );\n    }\n}\n\nconst SearchFormBaseIntl = injectIntl(SearchFormBase);\nexport { SearchFormBaseIntl };\n\nconst SearchForm = React.forwardRef<Config, HTMLDivElement>((props: Config, ref: React.Ref<any>) => (\n    <SearchFormBaseIntl {...props} innerRef={ref} />\n));\nSearchForm.displayName = 'SearchForm';\n\nexport default SearchForm;\n"],"file":"SearchForm.js"}
+{"version":3,"sources":["../../../src/components/search-form/SearchForm.js"],"names":["React","injectIntl","classNames","omit","SearchActions","messages","SearchFormBase","Component","isEmpty","event","onChange","shouldPreventClearEventPropagation","props","stopPropagation","searchInput","value","setState","target","trim","length","elements","onSubmit","element","getSearchInput","getDerivedStateFromProps","render","action","className","innerRef","intl","isLoading","method","name","queryParams","useClearButton","rest","state","inputProps","formatMessage","classes","formClassNames","hiddenInputs","Object","keys","map","param","index","onChangeStub","onChangeHandler","onSubmitHandler","setInputRef","searchLabel","onClearHandler","SearchFormBaseIntl","SearchForm","forwardRef","ref","displayName"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\n\n// $FlowFixMe\nimport SearchActions from './SearchActions';\n\n// $FlowFixMe\nimport messages from './messages';\n\nimport './SearchForm.scss';\n\ntype Props = {\n    /** Form submit action */\n    action?: string,\n    className?: string,\n    getSearchInput?: Function,\n    innerRef?: React.Ref<any>,\n    intl: Object,\n    isLoading?: boolean,\n    /** The way to send the form data, get or post */\n    method?: 'get' | 'post',\n    /** Name of the text input */\n    name?: string,\n    /** On change handler for the search input */\n    onChange?: Function,\n    /** On submit handler for the search input */\n    onSubmit?: Function,\n    /** Extra query parameters in addition to the form data */\n    queryParams: { [arg: string]: string },\n    /** Whether to prevent propagation of search clear action */\n    shouldPreventClearEventPropagation?: boolean,\n    /** If the clear button is shown when input field is not empty */\n    useClearButton?: boolean,\n    /** The value of the input if controlled */\n    value?: string,\n};\n\ntype DefaultProps = {\n    action: string,\n    method: 'get' | 'post',\n    name: string,\n    queryParams: { [arg: string]: string },\n    useClearButton: boolean,\n};\n\ntype IntlProps = {\n    intl: Object,\n};\n\ntype State = {\n    isEmpty: boolean,\n};\n\ntype Config = React.Config<Props, DefaultProps & IntlProps>;\n\nclass SearchFormBase extends React.Component<Props, State> {\n    static defaultProps: DefaultProps = {\n        action: '',\n        method: 'get',\n        name: 'search',\n        queryParams: {},\n        useClearButton: false,\n    };\n\n    state = {\n        isEmpty: true,\n    };\n\n    static getDerivedStateFromProps(props: Props): any {\n        const { value } = props;\n\n        if (value && !!value.trim()) {\n            return {\n                isEmpty: true,\n            };\n        }\n\n        return null;\n    }\n\n    onClearHandler = (event: SyntheticEvent<>) => {\n        const { onChange, shouldPreventClearEventPropagation } = this.props;\n        if (shouldPreventClearEventPropagation) {\n            event.stopPropagation();\n        }\n\n        if (this.searchInput) {\n            this.searchInput.value = '';\n        }\n        this.setState({ isEmpty: true });\n\n        if (onChange) {\n            onChange('');\n        }\n    };\n\n    onChangeHandler = ({ target }) => {\n        const { value } = target;\n        const { onChange } = this.props;\n        this.setState({ isEmpty: !value || !value.trim().length });\n\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    onSubmitHandler = event => {\n        const { value } = event.target.elements[0];\n        const { onSubmit } = this.props;\n\n        if (onSubmit) {\n            onSubmit(value, event);\n        }\n    };\n\n    setInputRef = element => {\n        this.searchInput = element;\n\n        if (this.props.getSearchInput) {\n            this.props.getSearchInput(this.searchInput);\n        }\n    };\n\n    searchInput: ?HTMLInputElement;\n\n    render() {\n        const {\n            action,\n            className,\n            innerRef,\n            intl,\n            isLoading,\n            method,\n            name,\n            queryParams,\n            onSubmit,\n            useClearButton,\n            ...rest\n        } = this.props;\n        const { isEmpty } = this.state;\n\n        const inputProps = omit(rest, [\n            'getSearchInput',\n            'onChange',\n            'onSubmit',\n            'required',\n            'shouldPreventClearEventPropagation',\n        ]);\n\n        const { formatMessage } = intl;\n        const classes = classNames(className, 'search-input-container');\n        const formClassNames = classNames('search-form', {\n            'is-empty': isEmpty,\n            'use-clear-button': useClearButton,\n        });\n        const hiddenInputs = Object.keys(queryParams).map((param, index) => (\n            <input key={index} name={param} type=\"hidden\" value={queryParams[param]} />\n        ));\n\n        // @NOTE Prevent errors from React about controlled inputs\n        const onChangeStub = () => {};\n\n        return (\n            <div ref={innerRef} className={classes}>\n                <form\n                    action={action}\n                    className={formClassNames}\n                    method={method}\n                    onChange={this.onChangeHandler}\n                    onSubmit={this.onSubmitHandler}\n                    role=\"search\"\n                >\n                    <input\n                        ref={this.setInputRef}\n                        aria-label={formatMessage(messages.searchLabel)}\n                        autoComplete=\"off\"\n                        className=\"search-input\"\n                        name={name}\n                        onChange={onChangeStub}\n                        type=\"search\"\n                        {...inputProps}\n                    />\n                    <SearchActions\n                        hasSubmitAction={!!onSubmit}\n                        isLoading={isLoading}\n                        loadingIndicatorProps={{\n                            className: 'search-form-loading-indicator',\n                        }}\n                        onClear={this.onClearHandler}\n                    />\n                    {hiddenInputs}\n                </form>\n            </div>\n        );\n    }\n}\n\nconst SearchFormBaseIntl = injectIntl(SearchFormBase);\nexport { SearchFormBaseIntl };\n\nconst SearchForm = React.forwardRef<Config, HTMLDivElement>((props: Config, ref: React.Ref<any>) => (\n    <SearchFormBaseIntl {...props} innerRef={ref} />\n));\nSearchForm.displayName = 'SearchForm';\n\nexport default SearchForm;\n"],"file":"SearchForm.js"}

package/es/components/search-form/messages.js

@@ -0,0 +1,17 @@
+import { defineMessages } from 'react-intl';
+const messages = defineMessages({
+  clearButtonTitle: {
+    "id": "boxui.searchForm.clearButtonTitle",
+    "defaultMessage": "Clear"
+  },
+  searchButtonTitle: {
+    "id": "boxui.searchForm.searchButtonTitle",
+    "defaultMessage": "Search"
+  },
+  searchLabel: {
+    "id": "boxui.searchForm.searchLabel",
+    "defaultMessage": "Search query"
+  }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/es/components/search-form/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search-form/messages.ts"],"names":["defineMessages","messages","clearButtonTitle","searchButtonTitle","searchLabel"],"mappings":"AAAA,SAASA,cAAT,QAA+B,YAA/B;AAEA,MAAMC,QAAQ,GAAGD,cAAc,CAAC;AAC5BE,EAAAA,gBAAgB;AAAA;AAAA;AAAA,GADY;AAM5BC,EAAAA,iBAAiB;AAAA;AAAA;AAAA,GANW;AAW5BC,EAAAA,WAAW;AAAA;AAAA;AAAA;AAXiB,CAAD,CAA/B;AAkBA,eAAeH,QAAf","sourcesContent":["import { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n    clearButtonTitle: {\n        defaultMessage: 'Clear',\n        description: 'Title for a clear button',\n        id: 'boxui.searchForm.clearButtonTitle',\n    },\n    searchButtonTitle: {\n        defaultMessage: 'Search',\n        description: 'Title for a search button',\n        id: 'boxui.searchForm.searchButtonTitle',\n    },\n    searchLabel: {\n        defaultMessage: 'Search query',\n        description: 'Label for a search input',\n        id: 'boxui.searchForm.searchLabel',\n    },\n});\n\nexport default messages;\n"],"file":"messages.js"}

package/es/components/section/Section.stories.js

@@ -10,7 +10,7 @@ export const basic = () => React.createElement(Section, {
   placeholder: "Enter email here"
 }));
 export default {
-  title: 'Components|Section',
+  title: 'Components/Section',
   component: Section,
   parameters: {
     notes

package/es/components/section/Section.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/section/Section.stories.tsx"],"names":["React","Section","notes","basic","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,KAAP,MAAkB,sBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,OAAD;AAAS,EAAA,KAAK,EAAC,WAAf;AAA2B,EAAA,WAAW,EAAC;AAAvC,GACI;AAAO,EAAA,IAAI,EAAC,WAAZ;AAAwB,EAAA,IAAI,EAAC,OAA7B;AAAqC,EAAA,WAAW,EAAC;AAAjD,EADJ,CADG;AAMP,eAAe;AACXC,EAAAA,KAAK,EAAE,oBADI;AAEXC,EAAAA,SAAS,EAAEJ,OAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport Section from './Section';\nimport notes from './Section.stories.md';\n\nexport const basic = () => (\n    <Section title=\"User Info\" description=\"Your account info\">\n        <input name=\"textinput\" type=\"email\" placeholder=\"Enter email here\" />\n    </Section>\n);\n\nexport default {\n    title: 'Components|Section',\n    component: Section,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Section.stories.js"}
+{"version":3,"sources":["../../../src/components/section/Section.stories.tsx"],"names":["React","Section","notes","basic","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,KAAP,MAAkB,sBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,OAAD;AAAS,EAAA,KAAK,EAAC,WAAf;AAA2B,EAAA,WAAW,EAAC;AAAvC,GACI;AAAO,EAAA,IAAI,EAAC,WAAZ;AAAwB,EAAA,IAAI,EAAC,OAA7B;AAAqC,EAAA,WAAW,EAAC;AAAjD,EADJ,CADG;AAMP,eAAe;AACXC,EAAAA,KAAK,EAAE,oBADI;AAEXC,EAAAA,SAAS,EAAEJ,OAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport Section from './Section';\nimport notes from './Section.stories.md';\n\nexport const basic = () => (\n    <Section title=\"User Info\" description=\"Your account info\">\n        <input name=\"textinput\" type=\"email\" placeholder=\"Enter email here\" />\n    </Section>\n);\n\nexport default {\n    title: 'Components/Section',\n    component: Section,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Section.stories.js"}

package/es/components/select/Select.stories.js

@@ -27,7 +27,7 @@ export const withInfoTooltip = () => React.createElement(Select, {
   infoTooltip: "Here's your favorite 90s rap albums"
 }, React.createElement("option", null, "Illmatic"), React.createElement("option", null, "The Marshall Mathers LP"), React.createElement("option", null, "All Eyez on Me"), React.createElement("option", null, "Ready To Die"), React.createElement("option", null, "Enter the Wu-Tang"), React.createElement("option", null, "The Eminem Show"), React.createElement("option", null, "The Chronic"), React.createElement("option", null, "Straight Outta Compton"), React.createElement("option", null, "Reasonable Doubt"));
 export default {
-  title: 'Components|Select',
+  title: 'Components/Select',
   component: Select,
   parameters: {
     notes

package/es/components/select/Select.stories.js.flow

@@ -68,7 +68,7 @@ export const withInfoTooltip = () => (
 );
 
 export default {
-    title: 'Components|Select',
+    title: 'Components/Select',
     component: Select,
     parameters: {
         notes,

package/es/components/select/Select.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select/Select.stories.js"],"names":["React","boolean","Select","notes","basic","disabled","withErrorMessage","withErrorOutline","withInfoTooltip","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC;AAA5B,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,OAAO,MAAMC,QAAQ,GAAG,MACpB,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,iBAA5B;AAA8C,EAAA,UAAU,EAAEJ,OAAO,CAAC,YAAD,EAAe,IAAf;AAAjE,GACI,6DADJ,CADG;AAMP,OAAO,MAAMK,gBAAgB,GAAG,MAC5B,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,OAA5B;AAAoC,EAAA,KAAK,EAAC;AAA1C,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,OAAO,MAAMC,gBAAgB,GAAG,MAC5B,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,OAA5B;AAAoC,EAAA,gBAAgB,EAAEN,OAAO,CAAC,kBAAD,EAAqB,IAArB;AAA7D,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,OAAO,MAAMO,eAAe,GAAG,MAC3B,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,OAA5B;AAAoC,EAAA,WAAW,EAAE;AAAjD,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,eAAe;AACXC,EAAAA,KAAK,EAAE,mBADI;AAEXC,EAAAA,SAAS,EAAER,MAFA;AAGXS,EAAAA,UAAU,EAAE;AACRR,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Select from './Select';\nimport notes from './Select.stories.md';\n\nexport const basic = () => (\n    <Select name=\"select\" label=\"Album\">\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport const disabled = () => (\n    <Select name=\"select\" label=\"Disabled Select\" isDisabled={boolean('isDisabled', true)}>\n        <option>Straight Outta Compton</option>\n    </Select>\n);\n\nexport const withErrorMessage = () => (\n    <Select name=\"select\" label=\"Album\" error=\"Not For Kidz\">\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport const withErrorOutline = () => (\n    <Select name=\"select\" label=\"Album\" showErrorOutline={boolean('showErrorOutline', true)}>\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport const withInfoTooltip = () => (\n    <Select name=\"select\" label=\"Album\" infoTooltip={\"Here's your favorite 90s rap albums\"}>\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport default {\n    title: 'Components|Select',\n    component: Select,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Select.stories.js"}
+{"version":3,"sources":["../../../src/components/select/Select.stories.js"],"names":["React","boolean","Select","notes","basic","disabled","withErrorMessage","withErrorOutline","withInfoTooltip","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC;AAA5B,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,OAAO,MAAMC,QAAQ,GAAG,MACpB,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,iBAA5B;AAA8C,EAAA,UAAU,EAAEJ,OAAO,CAAC,YAAD,EAAe,IAAf;AAAjE,GACI,6DADJ,CADG;AAMP,OAAO,MAAMK,gBAAgB,GAAG,MAC5B,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,OAA5B;AAAoC,EAAA,KAAK,EAAC;AAA1C,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,OAAO,MAAMC,gBAAgB,GAAG,MAC5B,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,OAA5B;AAAoC,EAAA,gBAAgB,EAAEN,OAAO,CAAC,kBAAD,EAAqB,IAArB;AAA7D,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,OAAO,MAAMO,eAAe,GAAG,MAC3B,oBAAC,MAAD;AAAQ,EAAA,IAAI,EAAC,QAAb;AAAsB,EAAA,KAAK,EAAC,OAA5B;AAAoC,EAAA,WAAW,EAAE;AAAjD,GACI,+CADJ,EAEI,8DAFJ,EAGI,qDAHJ,EAII,mDAJJ,EAKI,wDALJ,EAMI,sDANJ,EAOI,kDAPJ,EAQI,6DARJ,EASI,uDATJ,CADG;AAcP,eAAe;AACXC,EAAAA,KAAK,EAAE,mBADI;AAEXC,EAAAA,SAAS,EAAER,MAFA;AAGXS,EAAAA,UAAU,EAAE;AACRR,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Select from './Select';\nimport notes from './Select.stories.md';\n\nexport const basic = () => (\n    <Select name=\"select\" label=\"Album\">\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport const disabled = () => (\n    <Select name=\"select\" label=\"Disabled Select\" isDisabled={boolean('isDisabled', true)}>\n        <option>Straight Outta Compton</option>\n    </Select>\n);\n\nexport const withErrorMessage = () => (\n    <Select name=\"select\" label=\"Album\" error=\"Not For Kidz\">\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport const withErrorOutline = () => (\n    <Select name=\"select\" label=\"Album\" showErrorOutline={boolean('showErrorOutline', true)}>\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport const withInfoTooltip = () => (\n    <Select name=\"select\" label=\"Album\" infoTooltip={\"Here's your favorite 90s rap albums\"}>\n        <option>Illmatic</option>\n        <option>The Marshall Mathers LP</option>\n        <option>All Eyez on Me</option>\n        <option>Ready To Die</option>\n        <option>Enter the Wu-Tang</option>\n        <option>The Eminem Show</option>\n        <option>The Chronic</option>\n        <option>Straight Outta Compton</option>\n        <option>Reasonable Doubt</option>\n    </Select>\n);\n\nexport default {\n    title: 'Components/Select',\n    component: Select,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Select.stories.js"}

package/es/components/select-button/SelectButton.stories.js

@@ -16,7 +16,7 @@ export const withError = () => React.createElement(SelectButton, {
   isDisabled: false
 }, "Click Here");
 export default {
-  title: 'Components|SelectButton',
+  title: 'Components/SelectButton',
   component: SelectButton,
   parameters: {
     notes

package/es/components/select-button/SelectButton.stories.js.flow

@@ -24,7 +24,7 @@ export const withError = () => (
 );
 
 export default {
-    title: 'Components|SelectButton',
+    title: 'Components/SelectButton',
     component: SelectButton,
     parameters: {
         notes,

package/es/components/select-button/SelectButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select-button/SelectButton.stories.js"],"names":["React","boolean","SelectButton","notes","regular","disabled","withError","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,YAAD;AAAc,EAAA,SAAS,EAAC,EAAxB;AAA2B,EAAA,UAAU,EAAEH,OAAO,CAAC,YAAD,EAAe,KAAf;AAA9C,gBADG;AAMP,OAAO,MAAMI,QAAQ,GAAG,MACpB,oBAAC,YAAD;AAAc,EAAA,SAAS,EAAC,EAAxB;AAA2B,EAAA,UAAU;AAArC,gBADG;AAMP,OAAO,MAAMC,SAAS,GAAG,MACrB,oBAAC,YAAD;AAAc,EAAA,SAAS,EAAC,EAAxB;AAA2B,EAAA,KAAK,EAAC,YAAjC;AAA8C,EAAA,UAAU,EAAE;AAA1D,gBADG;AAMP,eAAe;AACXC,EAAAA,KAAK,EAAE,yBADI;AAEXC,EAAAA,SAAS,EAAEN,YAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport SelectButton from './SelectButton';\nimport notes from './SelectButton.stories.md';\n\nexport const regular = () => (\n    <SelectButton className=\"\" isDisabled={boolean('isDisabled', false)}>\n        Click Here\n    </SelectButton>\n);\n\nexport const disabled = () => (\n    <SelectButton className=\"\" isDisabled>\n        Click Here\n    </SelectButton>\n);\n\nexport const withError = () => (\n    <SelectButton className=\"\" error=\"Error text\" isDisabled={false}>\n        Click Here\n    </SelectButton>\n);\n\nexport default {\n    title: 'Components|SelectButton',\n    component: SelectButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"SelectButton.stories.js"}
+{"version":3,"sources":["../../../src/components/select-button/SelectButton.stories.js"],"names":["React","boolean","SelectButton","notes","regular","disabled","withError","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,YAAD;AAAc,EAAA,SAAS,EAAC,EAAxB;AAA2B,EAAA,UAAU,EAAEH,OAAO,CAAC,YAAD,EAAe,KAAf;AAA9C,gBADG;AAMP,OAAO,MAAMI,QAAQ,GAAG,MACpB,oBAAC,YAAD;AAAc,EAAA,SAAS,EAAC,EAAxB;AAA2B,EAAA,UAAU;AAArC,gBADG;AAMP,OAAO,MAAMC,SAAS,GAAG,MACrB,oBAAC,YAAD;AAAc,EAAA,SAAS,EAAC,EAAxB;AAA2B,EAAA,KAAK,EAAC,YAAjC;AAA8C,EAAA,UAAU,EAAE;AAA1D,gBADG;AAMP,eAAe;AACXC,EAAAA,KAAK,EAAE,yBADI;AAEXC,EAAAA,SAAS,EAAEN,YAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport SelectButton from './SelectButton';\nimport notes from './SelectButton.stories.md';\n\nexport const regular = () => (\n    <SelectButton className=\"\" isDisabled={boolean('isDisabled', false)}>\n        Click Here\n    </SelectButton>\n);\n\nexport const disabled = () => (\n    <SelectButton className=\"\" isDisabled>\n        Click Here\n    </SelectButton>\n);\n\nexport const withError = () => (\n    <SelectButton className=\"\" error=\"Error text\" isDisabled={false}>\n        Click Here\n    </SelectButton>\n);\n\nexport default {\n    title: 'Components/SelectButton',\n    component: SelectButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"SelectButton.stories.js"}

package/es/components/selector-dropdown/SelectorDropdown.stories.js

@@ -4,7 +4,7 @@ import SelectorDropdown from './SelectorDropdown';
 import notes from './SelectorDropdown.stories.md';
 export const basic = () => React.createElement(SelectorDropdownExamples, null);
 export default {
-  title: 'Components|SelectorDropdown',
+  title: 'Components/SelectorDropdown',
   component: SelectorDropdown,
   parameters: {
     notes

package/es/components/selector-dropdown/SelectorDropdown.stories.js.flow

@@ -8,7 +8,7 @@ import notes from './SelectorDropdown.stories.md';
 export const basic = () => <SelectorDropdownExamples />;
 
 export default {
-    title: 'Components|SelectorDropdown',
+    title: 'Components/SelectorDropdown',
     component: SelectorDropdown,
     parameters: {
         notes,

package/es/components/selector-dropdown/SelectorDropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/selector-dropdown/SelectorDropdown.stories.js"],"names":["React","SelectorDropdownExamples","SelectorDropdown","notes","basic","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,wBAAP,MAAqC,gDAArC;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,KAAP,MAAkB,+BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM,oBAAC,wBAAD,OAApB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,6BADI;AAEXC,EAAAA,SAAS,EAAEJ,gBAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\n\nimport SelectorDropdownExamples from '../../../examples/src/SelectorDropdownExamples';\nimport SelectorDropdown from './SelectorDropdown';\nimport notes from './SelectorDropdown.stories.md';\n\nexport const basic = () => <SelectorDropdownExamples />;\n\nexport default {\n    title: 'Components|SelectorDropdown',\n    component: SelectorDropdown,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"SelectorDropdown.stories.js"}
+{"version":3,"sources":["../../../src/components/selector-dropdown/SelectorDropdown.stories.js"],"names":["React","SelectorDropdownExamples","SelectorDropdown","notes","basic","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,wBAAP,MAAqC,gDAArC;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,KAAP,MAAkB,+BAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM,oBAAC,wBAAD,OAApB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,6BADI;AAEXC,EAAAA,SAAS,EAAEJ,gBAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\n\nimport SelectorDropdownExamples from '../../../examples/src/SelectorDropdownExamples';\nimport SelectorDropdown from './SelectorDropdown';\nimport notes from './SelectorDropdown.stories.md';\n\nexport const basic = () => <SelectorDropdownExamples />;\n\nexport default {\n    title: 'Components/SelectorDropdown',\n    component: SelectorDropdown,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"SelectorDropdown.stories.js"}

package/es/components/sidebar-toggle-button/SidebarToggleButton.stories.js

@@ -19,7 +19,7 @@ export const leftFacing = () => React.createElement(IntlProvider, {
   isOpen: true
 }));
 export default {
-  title: 'Components|SidebarToggleButton',
+  title: 'Components/SidebarToggleButton',
   component: SidebarToggleButton,
   parameters: {
     notes

package/es/components/sidebar-toggle-button/SidebarToggleButton.stories.js.flow

@@ -24,7 +24,7 @@ export const leftFacing = () => (
 );
 
 export default {
-    title: 'Components|SidebarToggleButton',
+    title: 'Components/SidebarToggleButton',
     component: SidebarToggleButton,
     parameters: {
         notes,

package/es/components/sidebar-toggle-button/SidebarToggleButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/sidebar-toggle-button/SidebarToggleButton.stories.js"],"names":["React","IntlProvider","SidebarToggleButton","notes","open","closed","leftFacing","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,KAAP,MAAkB,kCAAlB;AAEA,OAAO,MAAMC,IAAI,GAAG,MAChB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,mBAAD;AAAqB,EAAA,MAAM;AAA3B,EADJ,CADG;AAMP,OAAO,MAAMC,MAAM,GAAG,MAClB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,mBAAD;AAAqB,EAAA,MAAM,EAAE;AAA7B,EADJ,CADG;AAMP,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,mBAAD;AAAqB,EAAA,SAAS,EAAC,MAA/B;AAAsC,EAAA,MAAM;AAA5C,EADJ,CADG;AAMP,eAAe;AACXC,EAAAA,KAAK,EAAE,gCADI;AAEXC,EAAAA,SAAS,EAAEN,mBAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport SidebarToggleButton from './SidebarToggleButton';\nimport notes from './SidebarToggleButton.stories.md';\n\nexport const open = () => (\n    <IntlProvider locale=\"en\">\n        <SidebarToggleButton isOpen />\n    </IntlProvider>\n);\n\nexport const closed = () => (\n    <IntlProvider locale=\"en\">\n        <SidebarToggleButton isOpen={false} />\n    </IntlProvider>\n);\n\nexport const leftFacing = () => (\n    <IntlProvider locale=\"en\">\n        <SidebarToggleButton direction=\"left\" isOpen />\n    </IntlProvider>\n);\n\nexport default {\n    title: 'Components|SidebarToggleButton',\n    component: SidebarToggleButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"SidebarToggleButton.stories.js"}
+{"version":3,"sources":["../../../src/components/sidebar-toggle-button/SidebarToggleButton.stories.js"],"names":["React","IntlProvider","SidebarToggleButton","notes","open","closed","leftFacing","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,YAA7B;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,KAAP,MAAkB,kCAAlB;AAEA,OAAO,MAAMC,IAAI,GAAG,MAChB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,mBAAD;AAAqB,EAAA,MAAM;AAA3B,EADJ,CADG;AAMP,OAAO,MAAMC,MAAM,GAAG,MAClB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,mBAAD;AAAqB,EAAA,MAAM,EAAE;AAA7B,EADJ,CADG;AAMP,OAAO,MAAMC,UAAU,GAAG,MACtB,oBAAC,YAAD;AAAc,EAAA,MAAM,EAAC;AAArB,GACI,oBAAC,mBAAD;AAAqB,EAAA,SAAS,EAAC,MAA/B;AAAsC,EAAA,MAAM;AAA5C,EADJ,CADG;AAMP,eAAe;AACXC,EAAAA,KAAK,EAAE,gCADI;AAEXC,EAAAA,SAAS,EAAEN,mBAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { IntlProvider } from 'react-intl';\n\nimport SidebarToggleButton from './SidebarToggleButton';\nimport notes from './SidebarToggleButton.stories.md';\n\nexport const open = () => (\n    <IntlProvider locale=\"en\">\n        <SidebarToggleButton isOpen />\n    </IntlProvider>\n);\n\nexport const closed = () => (\n    <IntlProvider locale=\"en\">\n        <SidebarToggleButton isOpen={false} />\n    </IntlProvider>\n);\n\nexport const leftFacing = () => (\n    <IntlProvider locale=\"en\">\n        <SidebarToggleButton direction=\"left\" isOpen />\n    </IntlProvider>\n);\n\nexport default {\n    title: 'Components/SidebarToggleButton',\n    component: SidebarToggleButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"SidebarToggleButton.stories.js"}

package/es/components/tab-view/TabView.stories.js

@@ -109,7 +109,7 @@ export const dynamicWithLinks = () => React.createElement(TabView, {
   title: "Box.com 16"
 }));
 export default {
-  title: 'Components|TabView',
+  title: 'Components/TabView',
   component: TabView,
   parameters: {
     notes

package/es/components/tab-view/TabView.stories.js.flow

@@ -159,7 +159,7 @@ export const dynamicWithLinks = () => (
 );
 
 export default {
-    title: 'Components|TabView',
+    title: 'Components/TabView',
     component: TabView,
     parameters: {
         notes,

package/es/components/tab-view/TabView.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tab-view/TabView.stories.js"],"names":["React","Tab","TabView","notes","basic","withCallback","cb","selectedIndex","alert","withLink","dynamic","dynamicWithLinks","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\n\nimport Tab from './Tab';\n\nimport TabView from './TabView';\nimport notes from './TabView.stories.md';\n\nexport const basic = () => (\n    <TabView defaultSelectedIndex={1}>\n        <Tab title=\"Item 1\">\n            Bonbon sweet jujubes chocolate cake cupcake brownie ice cream apple pie. Sesame snaps chocolate bar pie\n            halvah jujubes candy muffin cake soufflé. Tart dragée bear claw cookie. Sweet roll muffin jelly-o.\n        </Tab>\n        <Tab title=\"Item 2\">\n            Bear claw brownie gingerbread sugar plum marzipan. Liquorice apple pie pastry cake lemon drops. Danish\n            tootsie roll chocolate sesame snaps bonbon apple pie sesame snaps. Sweet roll marshmallow candy canes oat\n            cake fruitcake donut jelly-o dragée.{' '}\n        </Tab>\n    </TabView>\n);\n\nexport const withCallback = () => {\n    // eslint-disable-next-line no-alert\n    const cb = selectedIndex => alert(selectedIndex);\n    return (\n        <TabView defaultSelectedIndex={1} onTabSelect={cb}>\n            <Tab title=\"Item 1\">\n                Jujubes pie apple pie pie caramels gummies sesame snaps sweet roll chocolate bar. Powder macaroon halvah\n                oat cake. Icing lollipop cookie. Cookie chocolate bar sweet roll danish chocolate jujubes cake halvah\n                ice cream.{' '}\n            </Tab>\n            <Tab title=\"Item 2\">\n                Muffin oat cake donut biscuit lemon drops sweet tootsie roll chupa chups. Lemon drops liquorice\n                chocolate. Cake cake halvah lemon drops candy danish apple pie. Lollipop caramels tootsie roll dragée\n                lemon drops wafer.{' '}\n            </Tab>\n        </TabView>\n    );\n};\n\nexport const withLink = () => (\n    <TabView defaultSelectedIndex={0}>\n        <Tab title=\"Item 1\">\n            Topping marzipan ice cream. Candy canes ice cream oat cake. Gummi bears toffee sweet roll chocolate bar.\n            Sesame snaps cake chocolate bar powder.\n        </Tab>\n        <Tab href=\"https://www.box.com/\" title=\"Box.com\" />\n    </TabView>\n);\n\nexport const dynamic = () => (\n    <TabView defaultSelectedIndex={7} isDynamic>\n        <Tab title=\"Item with very long name 1\">\n            Powder apple pie brownie macaroon. Donut gummies apple pie danish chocolate bar cupcake carrot cake muffin\n            caramels. Chupa chups sesame snaps brownie. Liquorice gingerbread marshmallow topping chocolate bar.\n            Lollipop jelly beans tootsie roll. Candy liquorice danish cookie fruitcake cake. Caramels cupcake powder\n            candy tart biscuit. Ice cream danish brownie chocolate. Brownie muffin jelly-o bear claw ice cream.\n            Chocolate cake icing oat cake pudding cheesecake wafer pie topping. Powder tootsie roll gingerbread cake\n            soufflé. Tart biscuit cookie pie chocolate cake dessert jelly beans lemon drops muffin.\n        </Tab>\n        <Tab title=\"Item with another very long name 2\">\n            Danish cheesecake tart cotton candy pie jelly. Apple pie sweet roll jelly. Liquorice pudding danish lollipop\n            halvah chupa chups cupcake caramels dragée. Toffee tootsie roll cake pastry tootsie roll cake. Gingerbread\n            gummi bears candy croissant croissant dessert macaroon pie toffee. Oat cake donut cotton candy gummies. Tart\n            pudding jelly icing jelly cake muffin. Tart marzipan carrot cake icing. Sesame snaps chocolate bar ice cream\n            chocolate cake candy apple pie pastry. Carrot cake cookie chocolate cake donut tiramisu brownie. Wafer\n            cotton candy danish jujubes macaroon. Bonbon icing cake. Candy canes tiramisu powder topping sweet roll\n            cake. Tart chupa chups donut bear claw croissant.\n        </Tab>\n        <Tab title=\"Item with another very very long name 3\">\n            Bonbon chocolate bar chocolate cake. Muffin sweet roll cheesecake pie icing. Fruitcake dessert jujubes\n            liquorice chupa chups powder candy canes gingerbread. Pastry powder dragée caramels chupa chups gummies\n            dragée pie. Cookie chocolate cake chocolate bar soufflé carrot cake jelly-o bear claw. Bonbon bear claw\n            gummies sweet roll oat cake topping brownie. Carrot cake cake lemon drops chocolate powder chupa chups.\n            Croissant topping powder tart pastry gummi bears jelly. Powder chocolate bar pudding apple pie dessert sweet\n            carrot cake cotton candy. Muffin candy halvah cotton candy topping brownie gummies wafer pastry. Icing gummi\n            bears biscuit. Sweet roll oat cake danish liquorice jelly-o. Toffee oat cake candy chocolate cake cupcake\n            chocolate cake candy canes tiramisu tart.\n        </Tab>\n        <Tab title=\"Item with another very very very long name 4\">\n            Gummi bears tiramisu sugar plum. Brownie apple pie jelly brownie jelly. Tiramisu carrot cake croissant\n            gummies pastry marzipan bear claw. Toffee marshmallow oat cake pastry powder. Dragée cupcake wafer jelly\n            beans liquorice jelly beans. Cake biscuit jelly topping bonbon jelly-o. Cake bonbon chupa chups jelly\n            gingerbread. Marzipan danish gummi bears. Soufflé sweet jujubes dragée pie cake. Sugar plum brownie jelly\n            jujubes danish. Croissant chocolate powder chocolate cotton candy biscuit. Dessert wafer cake apple pie\n            chupa chups cookie. Gummies jelly-o jujubes muffin soufflé pie.\n        </Tab>\n        <Tab title=\"Item 5\">\n            Sweet candy jujubes cupcake tart. Cookie brownie candy canes pastry sugar plum halvah cheesecake. Jelly\n            beans chupa chups icing pastry biscuit brownie gummi bears dessert gummies. Liquorice ice cream bonbon\n            caramels. Pudding powder topping liquorice candy canes dragée powder. Ice cream tart pudding jelly beans\n            candy canes bear claw powder icing tootsie roll. Candy canes jelly-o jelly lollipop gingerbread marzipan\n            donut pie candy. Sweet roll sweet lollipop apple pie sweet fruitcake marshmallow. Donut sugar plum gummies.\n            Gummies wafer ice cream dragée cookie jelly-o croissant tart. Dessert lollipop icing jelly macaroon topping\n            chocolate bar. Dragée jelly-o halvah toffee dessert pastry cupcake brownie cupcake.\n        </Tab>\n        <Tab title=\"Item 6\">\n            Candy sugar plum pudding bonbon biscuit jujubes. Croissant cookie soufflé cake toffee pie. Caramels apple\n            pie brownie soufflé fruitcake apple pie macaroon. Danish bonbon chocolate cake jelly cupcake. Chupa chups\n            jujubes pie fruitcake. Jelly beans jelly carrot cake candy canes ice cream. Chocolate bar oat cake lemon\n            drops chocolate cake chupa chups cake jelly-o marshmallow candy canes. Powder gummi bears caramels apple pie\n            oat cake cupcake cookie. Cake gummies tootsie roll sweet chocolate cake cheesecake chocolate bar. Croissant\n            candy canes donut cheesecake gummies cupcake cake cupcake. Jujubes gingerbread pie cake chocolate cake.\n            Marzipan sesame snaps sesame snaps cake chocolate wafer topping chupa chups.\n        </Tab>\n        <Tab title=\"Item 7\">\n            Marshmallow brownie wafer macaroon oat cake dessert candy cupcake croissant. Gummi bears cookie lemon drops\n            fruitcake lollipop lemon drops bear claw sweet. Jujubes candy candy liquorice fruitcake cake topping cake\n            jujubes. Caramels cotton candy gummi bears cake. Marshmallow fruitcake gummies gingerbread bonbon cheesecake\n            apple pie candy canes croissant. Oat cake jujubes tootsie roll topping jujubes apple pie cheesecake caramels\n            cheesecake. Powder jelly beans pastry pudding cheesecake. Pudding bear claw cookie. Jelly-o jelly cupcake\n            croissant cake sesame snaps bonbon jujubes chocolate bar. Lollipop gummies brownie dessert gummies halvah\n            sugar plum. Cookie wafer sweet roll. Chupa chups danish apple pie oat cake lollipop jujubes chocolate.\n            Jujubes caramels cake wafer sugar plum gingerbread apple pie.\n        </Tab>\n        <Tab title=\"Item 8\">\n            Muffin tart dragée icing sesame snaps <a href=\"https://www.box.com/\">cheesecake</a> marzipan. Lemon drops\n            ice cream bonbon. <input type=\"text\" /> Macaroon chocolate cake marzipan candy gummies carrot cake sweet\n            roll croissant. Apple pie marshmallow cake donut icing sweet roll gingerbread. Carrot cake sesame snaps ice\n            cream sweet roll powder bear claw. Oat cake biscuit chocolate macaroon carrot cake. Macaroon ice cream\n            liquorice halvah carrot cake bear claw toffee donut carrot cake. Apple pie cookie danish dessert soufflé\n            fruitcake topping chocolate. Fruitcake jelly-o sweet roll ice cream. Wafer chocolate chupa chups marshmallow\n            dragée carrot cake. Macaroon icing bonbon macaroon dessert chocolate bar. Cookie gingerbread croissant candy\n            canes wafer.\n        </Tab>\n        <Tab title=\"Item 9\">\n            Ice cream fruitcake oat cake gummi bears toffee sesame snaps marzipan. Chocolate bar jujubes soufflé pastry\n            chocolate. Bonbon donut cotton candy powder pudding chocolate bar marzipan pudding bear claw. Oat cake\n            dessert cupcake danish liquorice powder. Jelly-o marzipan lollipop muffin icing cake. Pastry pudding oat\n            cake soufflé chocolate. Tootsie roll macaroon cotton candy caramels chocolate bar caramels tootsie roll.\n            Chocolate gingerbread icing soufflé lollipop bear claw cupcake jelly beans. Tart powder fruitcake brownie\n            cake candy canes jelly beans liquorice macaroon. Tootsie roll cookie cupcake wafer chocolate bar gingerbread\n            apple pie tiramisu macaroon. Chocolate cake cake tootsie roll chupa chups tootsie roll brownie tootsie roll\n            liquorice bear claw. Icing caramels pudding soufflé candy canes gummi bears sugar plum jelly.\n        </Tab>\n    </TabView>\n);\n\nexport const dynamicWithLinks = () => (\n    <TabView defaultSelectedIndex={0} isDynamic>\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 1\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 2\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 3\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 4\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 5\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 6\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 7\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 8\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 9\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 10\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 11\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 12\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 13\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 14\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 15\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 16\" />\n    </TabView>\n);\n\nexport default {\n    title: 'Components|TabView',\n    component: TabView,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"TabView.stories.js"}
+{"version":3,"sources":["../../../src/components/tab-view/TabView.stories.js"],"names":["React","Tab","TabView","notes","basic","withCallback","cb","selectedIndex","alert","withLink","dynamic","dynamicWithLinks","title","component","parameters"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\n\nimport Tab from './Tab';\n\nimport TabView from './TabView';\nimport notes from './TabView.stories.md';\n\nexport const basic = () => (\n    <TabView defaultSelectedIndex={1}>\n        <Tab title=\"Item 1\">\n            Bonbon sweet jujubes chocolate cake cupcake brownie ice cream apple pie. Sesame snaps chocolate bar pie\n            halvah jujubes candy muffin cake soufflé. Tart dragée bear claw cookie. Sweet roll muffin jelly-o.\n        </Tab>\n        <Tab title=\"Item 2\">\n            Bear claw brownie gingerbread sugar plum marzipan. Liquorice apple pie pastry cake lemon drops. Danish\n            tootsie roll chocolate sesame snaps bonbon apple pie sesame snaps. Sweet roll marshmallow candy canes oat\n            cake fruitcake donut jelly-o dragée.{' '}\n        </Tab>\n    </TabView>\n);\n\nexport const withCallback = () => {\n    // eslint-disable-next-line no-alert\n    const cb = selectedIndex => alert(selectedIndex);\n    return (\n        <TabView defaultSelectedIndex={1} onTabSelect={cb}>\n            <Tab title=\"Item 1\">\n                Jujubes pie apple pie pie caramels gummies sesame snaps sweet roll chocolate bar. Powder macaroon halvah\n                oat cake. Icing lollipop cookie. Cookie chocolate bar sweet roll danish chocolate jujubes cake halvah\n                ice cream.{' '}\n            </Tab>\n            <Tab title=\"Item 2\">\n                Muffin oat cake donut biscuit lemon drops sweet tootsie roll chupa chups. Lemon drops liquorice\n                chocolate. Cake cake halvah lemon drops candy danish apple pie. Lollipop caramels tootsie roll dragée\n                lemon drops wafer.{' '}\n            </Tab>\n        </TabView>\n    );\n};\n\nexport const withLink = () => (\n    <TabView defaultSelectedIndex={0}>\n        <Tab title=\"Item 1\">\n            Topping marzipan ice cream. Candy canes ice cream oat cake. Gummi bears toffee sweet roll chocolate bar.\n            Sesame snaps cake chocolate bar powder.\n        </Tab>\n        <Tab href=\"https://www.box.com/\" title=\"Box.com\" />\n    </TabView>\n);\n\nexport const dynamic = () => (\n    <TabView defaultSelectedIndex={7} isDynamic>\n        <Tab title=\"Item with very long name 1\">\n            Powder apple pie brownie macaroon. Donut gummies apple pie danish chocolate bar cupcake carrot cake muffin\n            caramels. Chupa chups sesame snaps brownie. Liquorice gingerbread marshmallow topping chocolate bar.\n            Lollipop jelly beans tootsie roll. Candy liquorice danish cookie fruitcake cake. Caramels cupcake powder\n            candy tart biscuit. Ice cream danish brownie chocolate. Brownie muffin jelly-o bear claw ice cream.\n            Chocolate cake icing oat cake pudding cheesecake wafer pie topping. Powder tootsie roll gingerbread cake\n            soufflé. Tart biscuit cookie pie chocolate cake dessert jelly beans lemon drops muffin.\n        </Tab>\n        <Tab title=\"Item with another very long name 2\">\n            Danish cheesecake tart cotton candy pie jelly. Apple pie sweet roll jelly. Liquorice pudding danish lollipop\n            halvah chupa chups cupcake caramels dragée. Toffee tootsie roll cake pastry tootsie roll cake. Gingerbread\n            gummi bears candy croissant croissant dessert macaroon pie toffee. Oat cake donut cotton candy gummies. Tart\n            pudding jelly icing jelly cake muffin. Tart marzipan carrot cake icing. Sesame snaps chocolate bar ice cream\n            chocolate cake candy apple pie pastry. Carrot cake cookie chocolate cake donut tiramisu brownie. Wafer\n            cotton candy danish jujubes macaroon. Bonbon icing cake. Candy canes tiramisu powder topping sweet roll\n            cake. Tart chupa chups donut bear claw croissant.\n        </Tab>\n        <Tab title=\"Item with another very very long name 3\">\n            Bonbon chocolate bar chocolate cake. Muffin sweet roll cheesecake pie icing. Fruitcake dessert jujubes\n            liquorice chupa chups powder candy canes gingerbread. Pastry powder dragée caramels chupa chups gummies\n            dragée pie. Cookie chocolate cake chocolate bar soufflé carrot cake jelly-o bear claw. Bonbon bear claw\n            gummies sweet roll oat cake topping brownie. Carrot cake cake lemon drops chocolate powder chupa chups.\n            Croissant topping powder tart pastry gummi bears jelly. Powder chocolate bar pudding apple pie dessert sweet\n            carrot cake cotton candy. Muffin candy halvah cotton candy topping brownie gummies wafer pastry. Icing gummi\n            bears biscuit. Sweet roll oat cake danish liquorice jelly-o. Toffee oat cake candy chocolate cake cupcake\n            chocolate cake candy canes tiramisu tart.\n        </Tab>\n        <Tab title=\"Item with another very very very long name 4\">\n            Gummi bears tiramisu sugar plum. Brownie apple pie jelly brownie jelly. Tiramisu carrot cake croissant\n            gummies pastry marzipan bear claw. Toffee marshmallow oat cake pastry powder. Dragée cupcake wafer jelly\n            beans liquorice jelly beans. Cake biscuit jelly topping bonbon jelly-o. Cake bonbon chupa chups jelly\n            gingerbread. Marzipan danish gummi bears. Soufflé sweet jujubes dragée pie cake. Sugar plum brownie jelly\n            jujubes danish. Croissant chocolate powder chocolate cotton candy biscuit. Dessert wafer cake apple pie\n            chupa chups cookie. Gummies jelly-o jujubes muffin soufflé pie.\n        </Tab>\n        <Tab title=\"Item 5\">\n            Sweet candy jujubes cupcake tart. Cookie brownie candy canes pastry sugar plum halvah cheesecake. Jelly\n            beans chupa chups icing pastry biscuit brownie gummi bears dessert gummies. Liquorice ice cream bonbon\n            caramels. Pudding powder topping liquorice candy canes dragée powder. Ice cream tart pudding jelly beans\n            candy canes bear claw powder icing tootsie roll. Candy canes jelly-o jelly lollipop gingerbread marzipan\n            donut pie candy. Sweet roll sweet lollipop apple pie sweet fruitcake marshmallow. Donut sugar plum gummies.\n            Gummies wafer ice cream dragée cookie jelly-o croissant tart. Dessert lollipop icing jelly macaroon topping\n            chocolate bar. Dragée jelly-o halvah toffee dessert pastry cupcake brownie cupcake.\n        </Tab>\n        <Tab title=\"Item 6\">\n            Candy sugar plum pudding bonbon biscuit jujubes. Croissant cookie soufflé cake toffee pie. Caramels apple\n            pie brownie soufflé fruitcake apple pie macaroon. Danish bonbon chocolate cake jelly cupcake. Chupa chups\n            jujubes pie fruitcake. Jelly beans jelly carrot cake candy canes ice cream. Chocolate bar oat cake lemon\n            drops chocolate cake chupa chups cake jelly-o marshmallow candy canes. Powder gummi bears caramels apple pie\n            oat cake cupcake cookie. Cake gummies tootsie roll sweet chocolate cake cheesecake chocolate bar. Croissant\n            candy canes donut cheesecake gummies cupcake cake cupcake. Jujubes gingerbread pie cake chocolate cake.\n            Marzipan sesame snaps sesame snaps cake chocolate wafer topping chupa chups.\n        </Tab>\n        <Tab title=\"Item 7\">\n            Marshmallow brownie wafer macaroon oat cake dessert candy cupcake croissant. Gummi bears cookie lemon drops\n            fruitcake lollipop lemon drops bear claw sweet. Jujubes candy candy liquorice fruitcake cake topping cake\n            jujubes. Caramels cotton candy gummi bears cake. Marshmallow fruitcake gummies gingerbread bonbon cheesecake\n            apple pie candy canes croissant. Oat cake jujubes tootsie roll topping jujubes apple pie cheesecake caramels\n            cheesecake. Powder jelly beans pastry pudding cheesecake. Pudding bear claw cookie. Jelly-o jelly cupcake\n            croissant cake sesame snaps bonbon jujubes chocolate bar. Lollipop gummies brownie dessert gummies halvah\n            sugar plum. Cookie wafer sweet roll. Chupa chups danish apple pie oat cake lollipop jujubes chocolate.\n            Jujubes caramels cake wafer sugar plum gingerbread apple pie.\n        </Tab>\n        <Tab title=\"Item 8\">\n            Muffin tart dragée icing sesame snaps <a href=\"https://www.box.com/\">cheesecake</a> marzipan. Lemon drops\n            ice cream bonbon. <input type=\"text\" /> Macaroon chocolate cake marzipan candy gummies carrot cake sweet\n            roll croissant. Apple pie marshmallow cake donut icing sweet roll gingerbread. Carrot cake sesame snaps ice\n            cream sweet roll powder bear claw. Oat cake biscuit chocolate macaroon carrot cake. Macaroon ice cream\n            liquorice halvah carrot cake bear claw toffee donut carrot cake. Apple pie cookie danish dessert soufflé\n            fruitcake topping chocolate. Fruitcake jelly-o sweet roll ice cream. Wafer chocolate chupa chups marshmallow\n            dragée carrot cake. Macaroon icing bonbon macaroon dessert chocolate bar. Cookie gingerbread croissant candy\n            canes wafer.\n        </Tab>\n        <Tab title=\"Item 9\">\n            Ice cream fruitcake oat cake gummi bears toffee sesame snaps marzipan. Chocolate bar jujubes soufflé pastry\n            chocolate. Bonbon donut cotton candy powder pudding chocolate bar marzipan pudding bear claw. Oat cake\n            dessert cupcake danish liquorice powder. Jelly-o marzipan lollipop muffin icing cake. Pastry pudding oat\n            cake soufflé chocolate. Tootsie roll macaroon cotton candy caramels chocolate bar caramels tootsie roll.\n            Chocolate gingerbread icing soufflé lollipop bear claw cupcake jelly beans. Tart powder fruitcake brownie\n            cake candy canes jelly beans liquorice macaroon. Tootsie roll cookie cupcake wafer chocolate bar gingerbread\n            apple pie tiramisu macaroon. Chocolate cake cake tootsie roll chupa chups tootsie roll brownie tootsie roll\n            liquorice bear claw. Icing caramels pudding soufflé candy canes gummi bears sugar plum jelly.\n        </Tab>\n    </TabView>\n);\n\nexport const dynamicWithLinks = () => (\n    <TabView defaultSelectedIndex={0} isDynamic>\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 1\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 2\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 3\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 4\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 5\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 6\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 7\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 8\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 9\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 10\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 11\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 12\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 13\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 14\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 15\" />\n        <Tab href=\"https://www.box.com/\" title=\"Box.com 16\" />\n    </TabView>\n);\n\nexport default {\n    title: 'Components/TabView',\n    component: TabView,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"TabView.stories.js"}

package/es/components/text-input/TextInput.stories.js

@@ -71,7 +71,7 @@ export const requiredWithOnChange = () => {
   }));
 };
 export default {
-  title: 'Components|TextInput',
+  title: 'Components/TextInput',
   component: TextInput,
   parameters: {
     notes

package/es/components/text-input/TextInput.stories.js.flow

@@ -75,7 +75,7 @@ export const requiredWithOnChange = () => {
 };
 
 export default {
-    title: 'Components|TextInput',
+    title: 'Components/TextInput',
     component: TextInput,
     parameters: {
         notes,

package/es/components/text-input/TextInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/text-input/TextInput.stories.js"],"names":["React","State","Store","TextInput","notes","basic","withDescription","withLongBreakableStrings","withLongUnbreakableStrings","error","loading","valid","requiredWithOnChange","componentStore","value","state","e","set","target","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AAEA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,KAAP,MAAkB,wBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,WAAW,EAAC;AAAnE,EAApB;AAEP,OAAO,MAAMC,eAAe,GAAG,MAC3B,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,qBADhB;AAEI,EAAA,KAAK,EAAC,OAFV;AAGI,EAAA,IAAI,EAAC,WAHT;AAII,EAAA,IAAI,EAAC,OAJT;AAKI,EAAA,WAAW,EAAC;AALhB,EADG;AAUP,OAAO,MAAMC,wBAAwB,GAAG,MACpC,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,uHADhB;AAEI,EAAA,KAAK,EAAC,uHAFV;AAGI,EAAA,IAAI,EAAC,WAHT;AAII,EAAA,IAAI,EAAC,OAJT;AAKI,EAAA,WAAW,EAAC;AALhB,EADG;AAUP,OAAO,MAAMC,0BAA0B,GAAG,MACtC,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,kGADhB;AAEI,EAAA,KAAK,EAAC,kGAFV;AAGI,EAAA,IAAI,EAAC,WAHT;AAII,EAAA,IAAI,EAAC,OAJT;AAKI,EAAA,WAAW,EAAC;AALhB,EADG;AAUP,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,KAAK,EAAC,MAA7D;AAAoE,EAAA,WAAW,EAAC;AAAhF,EADG;AAIP,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,SAAS,MAAhE;AAAiE,EAAA,WAAW,EAAC;AAA7E,EADG;AAIP,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,OAAO,MAA9D;AAA+D,EAAA,WAAW,EAAC;AAA3E,EADG;AAIP,OAAO,MAAMC,oBAAoB,GAAG,MAAM;AACtC,QAAMC,cAAc,GAAG,IAAIX,KAAJ,CAAU;AAC7BO,IAAAA,KAAK,EAAE,UADsB;AAE7BK,IAAAA,KAAK,EAAE;AAFsB,GAAV,CAAvB;AAKA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAED;AAAd,KACKE,KAAK,IACF,oBAAC,SAAD;AACI,IAAA,KAAK,EAAC,OADV;AAEI,IAAA,IAAI,EAAC,WAFT;AAGI,IAAA,IAAI,EAAC,OAHT;AAII,IAAA,WAAW,EAAC,kBAJhB;AAKI,IAAA,KAAK,EAAEA,KAAK,CAACD,KALjB;AAMI,IAAA,KAAK,EAAEC,KAAK,CAACN,KANjB;AAOI,IAAA,QAAQ,EAAEO,CAAC,IACPH,cAAc,CAACI,GAAf,CAAmB;AAAER,MAAAA,KAAK,EAAEO,CAAC,CAACE,MAAF,CAASJ,KAAT,GAAiB,EAAjB,GAAsB,UAA/B;AAA2CA,MAAAA,KAAK,EAAEE,CAAC,CAACE,MAAF,CAASJ;AAA3D,KAAnB;AARR,IAFR,CADJ;AAiBH,CAvBM;AAyBP,eAAe;AACXK,EAAAA,KAAK,EAAE,sBADI;AAEXC,EAAAA,SAAS,EAAEjB,SAFA;AAGXkB,EAAAA,UAAU,EAAE;AACRjB,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport TextInput from './TextInput';\nimport notes from './TextInput.stories.md';\n\nexport const basic = () => <TextInput label=\"Email\" name=\"textinput\" type=\"email\" placeholder=\"Enter email here\" />;\n\nexport const withDescription = () => (\n    <TextInput\n        description=\"Email used for work\"\n        label=\"Email\"\n        name=\"textinput\"\n        type=\"email\"\n        placeholder=\"Enter email here\"\n    />\n);\n\nexport const withLongBreakableStrings = () => (\n    <TextInput\n        description=\"Long Long Long Long long long Long Long Long Long long longLong Long Long Long long longLong Long Long Long long long\"\n        label=\"Long Long Long Long long long Long Long Long Long long longLong Long Long Long long longLong Long Long Long long long\"\n        name=\"textinput\"\n        type=\"email\"\n        placeholder=\"Enter email here\"\n    />\n);\n\nexport const withLongUnbreakableStrings = () => (\n    <TextInput\n        description=\"longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong\"\n        label=\"longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong\"\n        name=\"textinput\"\n        type=\"email\"\n        placeholder=\"Enter email here\"\n    />\n);\n\nexport const error = () => (\n    <TextInput label=\"Email\" name=\"textinput\" type=\"email\" error=\"oops\" placeholder=\"Enter email here\" />\n);\n\nexport const loading = () => (\n    <TextInput label=\"Email\" name=\"textinput\" type=\"email\" isLoading placeholder=\"Enter email here\" />\n);\n\nexport const valid = () => (\n    <TextInput label=\"Email\" name=\"textinput\" type=\"email\" isValid placeholder=\"Enter email here\" />\n);\n\nexport const requiredWithOnChange = () => {\n    const componentStore = new Store({\n        error: 'required',\n        value: '',\n    });\n\n    return (\n        <State store={componentStore}>\n            {state => (\n                <TextInput\n                    label=\"Email\"\n                    name=\"textinput\"\n                    type=\"email\"\n                    placeholder=\"Enter email here\"\n                    value={state.value}\n                    error={state.error}\n                    onChange={e =>\n                        componentStore.set({ error: e.target.value ? '' : 'required', value: e.target.value })\n                    }\n                />\n            )}\n        </State>\n    );\n};\n\nexport default {\n    title: 'Components|TextInput',\n    component: TextInput,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"TextInput.stories.js"}
+{"version":3,"sources":["../../../src/components/text-input/TextInput.stories.js"],"names":["React","State","Store","TextInput","notes","basic","withDescription","withLongBreakableStrings","withLongUnbreakableStrings","error","loading","valid","requiredWithOnChange","componentStore","value","state","e","set","target","title","component","parameters"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,0BAA7B;AAEA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,KAAP,MAAkB,wBAAlB;AAEA,OAAO,MAAMC,KAAK,GAAG,MAAM,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,WAAW,EAAC;AAAnE,EAApB;AAEP,OAAO,MAAMC,eAAe,GAAG,MAC3B,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,qBADhB;AAEI,EAAA,KAAK,EAAC,OAFV;AAGI,EAAA,IAAI,EAAC,WAHT;AAII,EAAA,IAAI,EAAC,OAJT;AAKI,EAAA,WAAW,EAAC;AALhB,EADG;AAUP,OAAO,MAAMC,wBAAwB,GAAG,MACpC,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,uHADhB;AAEI,EAAA,KAAK,EAAC,uHAFV;AAGI,EAAA,IAAI,EAAC,WAHT;AAII,EAAA,IAAI,EAAC,OAJT;AAKI,EAAA,WAAW,EAAC;AALhB,EADG;AAUP,OAAO,MAAMC,0BAA0B,GAAG,MACtC,oBAAC,SAAD;AACI,EAAA,WAAW,EAAC,kGADhB;AAEI,EAAA,KAAK,EAAC,kGAFV;AAGI,EAAA,IAAI,EAAC,WAHT;AAII,EAAA,IAAI,EAAC,OAJT;AAKI,EAAA,WAAW,EAAC;AALhB,EADG;AAUP,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,KAAK,EAAC,MAA7D;AAAoE,EAAA,WAAW,EAAC;AAAhF,EADG;AAIP,OAAO,MAAMC,OAAO,GAAG,MACnB,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,SAAS,MAAhE;AAAiE,EAAA,WAAW,EAAC;AAA7E,EADG;AAIP,OAAO,MAAMC,KAAK,GAAG,MACjB,oBAAC,SAAD;AAAW,EAAA,KAAK,EAAC,OAAjB;AAAyB,EAAA,IAAI,EAAC,WAA9B;AAA0C,EAAA,IAAI,EAAC,OAA/C;AAAuD,EAAA,OAAO,MAA9D;AAA+D,EAAA,WAAW,EAAC;AAA3E,EADG;AAIP,OAAO,MAAMC,oBAAoB,GAAG,MAAM;AACtC,QAAMC,cAAc,GAAG,IAAIX,KAAJ,CAAU;AAC7BO,IAAAA,KAAK,EAAE,UADsB;AAE7BK,IAAAA,KAAK,EAAE;AAFsB,GAAV,CAAvB;AAKA,SACI,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAED;AAAd,KACKE,KAAK,IACF,oBAAC,SAAD;AACI,IAAA,KAAK,EAAC,OADV;AAEI,IAAA,IAAI,EAAC,WAFT;AAGI,IAAA,IAAI,EAAC,OAHT;AAII,IAAA,WAAW,EAAC,kBAJhB;AAKI,IAAA,KAAK,EAAEA,KAAK,CAACD,KALjB;AAMI,IAAA,KAAK,EAAEC,KAAK,CAACN,KANjB;AAOI,IAAA,QAAQ,EAAEO,CAAC,IACPH,cAAc,CAACI,GAAf,CAAmB;AAAER,MAAAA,KAAK,EAAEO,CAAC,CAACE,MAAF,CAASJ,KAAT,GAAiB,EAAjB,GAAsB,UAA/B;AAA2CA,MAAAA,KAAK,EAAEE,CAAC,CAACE,MAAF,CAASJ;AAA3D,KAAnB;AARR,IAFR,CADJ;AAiBH,CAvBM;AAyBP,eAAe;AACXK,EAAAA,KAAK,EAAE,sBADI;AAEXC,EAAAA,SAAS,EAAEjB,SAFA;AAGXkB,EAAAA,UAAU,EAAE;AACRjB,IAAAA;AADQ;AAHD,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { State, Store } from '@sambego/storybook-state';\n\nimport TextInput from './TextInput';\nimport notes from './TextInput.stories.md';\n\nexport const basic = () => <TextInput label=\"Email\" name=\"textinput\" type=\"email\" placeholder=\"Enter email here\" />;\n\nexport const withDescription = () => (\n    <TextInput\n        description=\"Email used for work\"\n        label=\"Email\"\n        name=\"textinput\"\n        type=\"email\"\n        placeholder=\"Enter email here\"\n    />\n);\n\nexport const withLongBreakableStrings = () => (\n    <TextInput\n        description=\"Long Long Long Long long long Long Long Long Long long longLong Long Long Long long longLong Long Long Long long long\"\n        label=\"Long Long Long Long long long Long Long Long Long long longLong Long Long Long long longLong Long Long Long long long\"\n        name=\"textinput\"\n        type=\"email\"\n        placeholder=\"Enter email here\"\n    />\n);\n\nexport const withLongUnbreakableStrings = () => (\n    <TextInput\n        description=\"longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong\"\n        label=\"longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong\"\n        name=\"textinput\"\n        type=\"email\"\n        placeholder=\"Enter email here\"\n    />\n);\n\nexport const error = () => (\n    <TextInput label=\"Email\" name=\"textinput\" type=\"email\" error=\"oops\" placeholder=\"Enter email here\" />\n);\n\nexport const loading = () => (\n    <TextInput label=\"Email\" name=\"textinput\" type=\"email\" isLoading placeholder=\"Enter email here\" />\n);\n\nexport const valid = () => (\n    <TextInput label=\"Email\" name=\"textinput\" type=\"email\" isValid placeholder=\"Enter email here\" />\n);\n\nexport const requiredWithOnChange = () => {\n    const componentStore = new Store({\n        error: 'required',\n        value: '',\n    });\n\n    return (\n        <State store={componentStore}>\n            {state => (\n                <TextInput\n                    label=\"Email\"\n                    name=\"textinput\"\n                    type=\"email\"\n                    placeholder=\"Enter email here\"\n                    value={state.value}\n                    error={state.error}\n                    onChange={e =>\n                        componentStore.set({ error: e.target.value ? '' : 'required', value: e.target.value })\n                    }\n                />\n            )}\n        </State>\n    );\n};\n\nexport default {\n    title: 'Components/TextInput',\n    component: TextInput,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"TextInput.stories.js"}

package/es/components/text-input-with-copy-button/TextInputWithCopyButton.js

@@ -48,13 +48,19 @@ class TextInputWithCopyButton extends React.PureComponent {
     });
 
     _defineProperty(this, "handleCopyEvent", event => {
-      this.animateCopyButton();
       const {
+        disabled,
         onCopySuccess
       } = this.props;
 
-      if (onCopySuccess) {
-        onCopySuccess(event);
+      if (disabled) {
+        event.preventDefault();
+      } else {
+        this.animateCopyButton();
+
+        if (onCopySuccess) {
+          onCopySuccess(event);
+        }
       }
     });
 

package/es/components/text-input-with-copy-button/TextInputWithCopyButton.js.flow

@@ -159,11 +159,16 @@ class TextInputWithCopyButton extends React.PureComponent<Props, State> {
     };
 
     handleCopyEvent = (event: SyntheticEvent<>) => {
-        this.animateCopyButton();
+        const { disabled, onCopySuccess } = this.props;
+
+        if (disabled) {
+            event.preventDefault();
+        } else {
+            this.animateCopyButton();
 
-        const { onCopySuccess } = this.props;
-        if (onCopySuccess) {
-            onCopySuccess(event);
+            if (onCopySuccess) {
+                onCopySuccess(event);
+            }
         }
     };