box-ui-elements 14.0.0 → 14.1.0-beta.11

package/es/components/loading-indicator/Crawler.scss

@@ -16,7 +16,7 @@
     width: 2px;
     height: 10px;
     background-color: $primary-color;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
     -webkit-animation: crawler .66s infinite ease-in-out;
     animation: crawler .66s infinite ease-in-out;
 }

package/es/components/modal/Modal.scss

@@ -1,4 +1,5 @@
 @import '../../styles/variables';
+@import '../../styles/mixins/buttons';
 
 /**************************************
  * Modal
@@ -59,8 +60,7 @@
     padding: 30px;
     background-color: $white;
     background-clip: padding-box;
-    border: 1px solid $bdl-gray-30;
-    border-radius: $bdl-border-radius-size;
+    border-radius: $bdl-border-radius-size-xlarge;
     box-shadow: 0 1px 1px 1px fade-out($black, .95);
 }
 
@@ -70,6 +70,7 @@
     max-width: 100%;
     margin: 0;
     overflow: hidden;
+    font-weight: bold;
     font-size: 16px;
     line-height: inherit;
     word-wrap: break-word;
@@ -116,6 +117,8 @@
     }
 
     .btn {
+        @include bdl-Button--large;
+
         margin-top: 0;
         margin-bottom: 0;
     }

package/es/components/modal/ModalDialog.js

@@ -29,7 +29,7 @@ import classNames from 'classnames';
 import omit from 'lodash/omit';
 import uniqueId from 'lodash/uniqueId';
 import { defineMessages, injectIntl } from 'react-intl';
-import IconClose from '../../icons/general/IconClose';
+import IconClose from '../../icon/fill/X16';
 var ALERT_TYPE = 'alert';
 var DIALOG_TYPE = 'dialog';
 var messages = defineMessages({

package/es/components/modal/ModalDialog.js.flow

@@ -5,7 +5,7 @@ import omit from 'lodash/omit';
 import uniqueId from 'lodash/uniqueId';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconClose from '../../icons/general/IconClose';
+import IconClose from '../../icon/fill/X16';
 
 const ALERT_TYPE = 'alert';
 const DIALOG_TYPE = 'dialog';

package/es/components/modal/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modal/ModalDialog.js"],"names":["React","classNames","omit","uniqueId","defineMessages","injectIntl","IconClose","ALERT_TYPE","DIALOG_TYPE","messages","closeModalText","ModalDialog","event","onRequestClose","props","closeButtonProps","intl","formatMessage","onCloseButtonClick","children","type","elements","Children","toArray","length","Error","modalID","className","modalRef","title","rest","isAlertType","divProps","role","renderCloseButton","renderContent","Component","ModalDialogBase"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\nimport uniqueId from 'lodash/uniqueId';\nimport { defineMessages, injectIntl } from 'react-intl';\n\nimport IconClose from '../../icons/general/IconClose';\n\nconst ALERT_TYPE = 'alert';\nconst DIALOG_TYPE = 'dialog';\n\nconst messages = defineMessages({\n    closeModalText: {\n        defaultMessage: 'Close Modal',\n        description: 'Button to close modal',\n        id: 'boxui.modalDialog.closeModalText',\n    },\n});\n\ntype Props = {\n    children: React.Node,\n    className?: string,\n    closeButtonProps: Object,\n    intl: Object,\n    modalRef?: Function,\n    onRequestClose?: Function,\n    title?: React.Node,\n    type?: 'alert' | 'dialog',\n};\n\nclass ModalDialog extends React.Component<Props> {\n    static defaultProps = {\n        type: DIALOG_TYPE,\n        closeButtonProps: {},\n    };\n\n    /**\n     * Handles clicking on the close button\n     * @param {SyntheticMouseEvent} event\n     * @return {void}\n     */\n    onCloseButtonClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {\n        const { onRequestClose } = this.props;\n        if (onRequestClose) {\n            onRequestClose(event);\n        }\n    };\n\n    modalID: string = uniqueId('modal');\n\n    /**\n     * Renders a button if onRequestClose is passed in\n     * @return {ReactElement|null} - Returns the button, or null if the button shouldn't be rendered\n     */\n    renderCloseButton() {\n        const { closeButtonProps, onRequestClose, intl } = this.props;\n        const { formatMessage } = intl;\n        if (!onRequestClose) {\n            return null;\n        }\n\n        return (\n            // eslint-disable-next-line react/button-has-type\n            <button\n                {...closeButtonProps}\n                aria-label={formatMessage(messages.closeModalText)}\n                className=\"modal-close-button\"\n                onClick={this.onCloseButtonClick}\n            >\n                <IconClose color=\"#909090\" height={18} width={18} />\n            </button>\n        );\n    }\n\n    renderContent() {\n        const { children, type } = this.props;\n\n        if (type !== ALERT_TYPE) {\n            return <div className=\"modal-content\">{children}</div>;\n        }\n\n        const elements = React.Children.toArray(children);\n        if (elements.length !== 2) {\n            throw new Error('Alert modal must have exactly two children: A message and <ModalActions>');\n        }\n\n        return (\n            <div className=\"modal-content\">\n                <p id={`${this.modalID}-desc`}>{elements[0]}</p>\n                {elements[1]}\n            </div>\n        );\n    }\n\n    render() {\n        const {\n            className,\n            modalRef,\n            title,\n            type,\n            ...rest // Useful for resin tagging, and other misc tags such as a11y\n        } = this.props;\n        const isAlertType = type === ALERT_TYPE;\n        const divProps = omit(rest, ['children', 'closeButtonProps', 'onRequestClose', 'intl']);\n\n        divProps.role = isAlertType ? 'alertdialog' : 'dialog';\n        divProps['aria-labelledby'] = `${this.modalID}-label`;\n        if (isAlertType) {\n            divProps['aria-describedby'] = `${this.modalID}-desc`;\n        }\n\n        return (\n            <div ref={modalRef} className={classNames('modal-dialog', className)} {...divProps}>\n                <div className=\"modal-header\">\n                    <h2 className=\"modal-title\" id={`${this.modalID}-label`}>\n                        {title}\n                    </h2>\n                </div>\n                {this.renderCloseButton()}\n                {this.renderContent()}\n            </div>\n        );\n    }\n}\n\nexport { ModalDialog as ModalDialogBase };\nexport default injectIntl(ModalDialog);\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/components/modal/ModalDialog.js"],"names":["React","classNames","omit","uniqueId","defineMessages","injectIntl","IconClose","ALERT_TYPE","DIALOG_TYPE","messages","closeModalText","ModalDialog","event","onRequestClose","props","closeButtonProps","intl","formatMessage","onCloseButtonClick","children","type","elements","Children","toArray","length","Error","modalID","className","modalRef","title","rest","isAlertType","divProps","role","renderCloseButton","renderContent","Component","ModalDialogBase"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,SAASC,cAAT,EAAyBC,UAAzB,QAA2C,YAA3C;AAEA,OAAOC,SAAP,MAAsB,qBAAtB;AAEA,IAAMC,UAAU,GAAG,OAAnB;AACA,IAAMC,WAAW,GAAG,QAApB;AAEA,IAAMC,QAAQ,GAAGL,cAAc,CAAC;AAC5BM,EAAAA,cAAc;AAAA;AAAA;AAAA;AADc,CAAD,CAA/B;;IAmBMC,W;;;;;;;;;;;;;;;;;;yEAWmB,UAACC,KAAD,EAAmD;AAAA,UAC5DC,cAD4D,GACzC,MAAKC,KADoC,CAC5DD,cAD4D;;AAEpE,UAAIA,cAAJ,EAAoB;AAChBA,QAAAA,cAAc,CAACD,KAAD,CAAd;AACH;AACJ,K;;8DAEiBT,QAAQ,CAAC,OAAD,C;;;;;;;;AAE1B;;;;wCAIoB;AAAA,wBACmC,KAAKW,KADxC;AAAA,UACRC,gBADQ,eACRA,gBADQ;AAAA,UACUF,cADV,eACUA,cADV;AAAA,UAC0BG,IAD1B,eAC0BA,IAD1B;AAAA,UAERC,aAFQ,GAEUD,IAFV,CAERC,aAFQ;;AAGhB,UAAI,CAACJ,cAAL,EAAqB;AACjB,eAAO,IAAP;AACH;;AAED,aACI;AACA,mDACQE,gBADR;AAEI,wBAAYE,aAAa,CAACR,QAAQ,CAACC,cAAV,CAF7B;AAGI,UAAA,SAAS,EAAC,oBAHd;AAII,UAAA,OAAO,EAAE,KAAKQ;AAJlB,YAMI,oBAAC,SAAD;AAAW,UAAA,KAAK,EAAC,SAAjB;AAA2B,UAAA,MAAM,EAAE,EAAnC;AAAuC,UAAA,KAAK,EAAE;AAA9C,UANJ;AAFJ;AAWH;;;oCAEe;AAAA,yBACe,KAAKJ,KADpB;AAAA,UACJK,QADI,gBACJA,QADI;AAAA,UACMC,IADN,gBACMA,IADN;;AAGZ,UAAIA,IAAI,KAAKb,UAAb,EAAyB;AACrB,eAAO;AAAK,UAAA,SAAS,EAAC;AAAf,WAAgCY,QAAhC,CAAP;AACH;;AAED,UAAME,QAAQ,GAAGrB,KAAK,CAACsB,QAAN,CAAeC,OAAf,CAAuBJ,QAAvB,CAAjB;;AACA,UAAIE,QAAQ,CAACG,MAAT,KAAoB,CAAxB,EAA2B;AACvB,cAAM,IAAIC,KAAJ,CAAU,0EAAV,CAAN;AACH;;AAED,aACI;AAAK,QAAA,SAAS,EAAC;AAAf,SACI;AAAG,QAAA,EAAE,YAAK,KAAKC,OAAV;AAAL,SAAgCL,QAAQ,CAAC,CAAD,CAAxC,CADJ,EAEKA,QAAQ,CAAC,CAAD,CAFb,CADJ;AAMH;;;6BAEQ;AAAA,yBAOD,KAAKP,KAPJ;AAAA,UAEDa,SAFC,gBAEDA,SAFC;AAAA,UAGDC,QAHC,gBAGDA,QAHC;AAAA,UAIDC,KAJC,gBAIDA,KAJC;AAAA,UAKDT,IALC,gBAKDA,IALC;AAAA,UAMEU,IANF;;AAQL,UAAMC,WAAW,GAAGX,IAAI,KAAKb,UAA7B;AACA,UAAMyB,QAAQ,GAAG9B,IAAI,CAAC4B,IAAD,EAAO,CAAC,UAAD,EAAa,kBAAb,EAAiC,gBAAjC,EAAmD,MAAnD,CAAP,CAArB;AAEAE,MAAAA,QAAQ,CAACC,IAAT,GAAgBF,WAAW,GAAG,aAAH,GAAmB,QAA9C;AACAC,MAAAA,QAAQ,CAAC,iBAAD,CAAR,aAAiC,KAAKN,OAAtC;;AACA,UAAIK,WAAJ,EAAiB;AACbC,QAAAA,QAAQ,CAAC,kBAAD,CAAR,aAAkC,KAAKN,OAAvC;AACH;;AAED,aACI;AAAK,QAAA,GAAG,EAAEE,QAAV;AAAoB,QAAA,SAAS,EAAE3B,UAAU,CAAC,cAAD,EAAiB0B,SAAjB;AAAzC,SAA0EK,QAA1E,GACI;AAAK,QAAA,SAAS,EAAC;AAAf,SACI;AAAI,QAAA,SAAS,EAAC,aAAd;AAA4B,QAAA,EAAE,YAAK,KAAKN,OAAV;AAA9B,SACKG,KADL,CADJ,CADJ,EAMK,KAAKK,iBAAL,EANL,EAOK,KAAKC,aAAL,EAPL,CADJ;AAWH;;;;EA5FqBnC,KAAK,CAACoC,S;;gBAA1BzB,W,kBACoB;AAClBS,EAAAA,IAAI,EAAEZ,WADY;AAElBO,EAAAA,gBAAgB,EAAE;AAFA,C;;AA8F1B,SAASJ,WAAW,IAAI0B,eAAxB;AACA,eAAehC,UAAU,CAACM,WAAD,CAAzB","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport omit from 'lodash/omit';\nimport uniqueId from 'lodash/uniqueId';\nimport { defineMessages, injectIntl } from 'react-intl';\n\nimport IconClose from '../../icon/fill/X16';\n\nconst ALERT_TYPE = 'alert';\nconst DIALOG_TYPE = 'dialog';\n\nconst messages = defineMessages({\n    closeModalText: {\n        defaultMessage: 'Close Modal',\n        description: 'Button to close modal',\n        id: 'boxui.modalDialog.closeModalText',\n    },\n});\n\ntype Props = {\n    children: React.Node,\n    className?: string,\n    closeButtonProps: Object,\n    intl: Object,\n    modalRef?: Function,\n    onRequestClose?: Function,\n    title?: React.Node,\n    type?: 'alert' | 'dialog',\n};\n\nclass ModalDialog extends React.Component<Props> {\n    static defaultProps = {\n        type: DIALOG_TYPE,\n        closeButtonProps: {},\n    };\n\n    /**\n     * Handles clicking on the close button\n     * @param {SyntheticMouseEvent} event\n     * @return {void}\n     */\n    onCloseButtonClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {\n        const { onRequestClose } = this.props;\n        if (onRequestClose) {\n            onRequestClose(event);\n        }\n    };\n\n    modalID: string = uniqueId('modal');\n\n    /**\n     * Renders a button if onRequestClose is passed in\n     * @return {ReactElement|null} - Returns the button, or null if the button shouldn't be rendered\n     */\n    renderCloseButton() {\n        const { closeButtonProps, onRequestClose, intl } = this.props;\n        const { formatMessage } = intl;\n        if (!onRequestClose) {\n            return null;\n        }\n\n        return (\n            // eslint-disable-next-line react/button-has-type\n            <button\n                {...closeButtonProps}\n                aria-label={formatMessage(messages.closeModalText)}\n                className=\"modal-close-button\"\n                onClick={this.onCloseButtonClick}\n            >\n                <IconClose color=\"#909090\" height={18} width={18} />\n            </button>\n        );\n    }\n\n    renderContent() {\n        const { children, type } = this.props;\n\n        if (type !== ALERT_TYPE) {\n            return <div className=\"modal-content\">{children}</div>;\n        }\n\n        const elements = React.Children.toArray(children);\n        if (elements.length !== 2) {\n            throw new Error('Alert modal must have exactly two children: A message and <ModalActions>');\n        }\n\n        return (\n            <div className=\"modal-content\">\n                <p id={`${this.modalID}-desc`}>{elements[0]}</p>\n                {elements[1]}\n            </div>\n        );\n    }\n\n    render() {\n        const {\n            className,\n            modalRef,\n            title,\n            type,\n            ...rest // Useful for resin tagging, and other misc tags such as a11y\n        } = this.props;\n        const isAlertType = type === ALERT_TYPE;\n        const divProps = omit(rest, ['children', 'closeButtonProps', 'onRequestClose', 'intl']);\n\n        divProps.role = isAlertType ? 'alertdialog' : 'dialog';\n        divProps['aria-labelledby'] = `${this.modalID}-label`;\n        if (isAlertType) {\n            divProps['aria-describedby'] = `${this.modalID}-desc`;\n        }\n\n        return (\n            <div ref={modalRef} className={classNames('modal-dialog', className)} {...divProps}>\n                <div className=\"modal-header\">\n                    <h2 className=\"modal-title\" id={`${this.modalID}-label`}>\n                        {title}\n                    </h2>\n                </div>\n                {this.renderCloseButton()}\n                {this.renderContent()}\n            </div>\n        );\n    }\n}\n\nexport { ModalDialog as ModalDialogBase };\nexport default injectIntl(ModalDialog);\n"],"file":"ModalDialog.js"}

package/es/components/notification/Notification.js

@@ -23,12 +23,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import classNames from 'classnames';
-import { bdlGray } from '../../styles/variables';
-import IconAlertCircle from '../../icons/general/IconAlertCircle';
-import IconBell from '../../icons/general/IconBell';
-import IconClose from '../../icons/general/IconClose';
-import IconInfoThin from '../../icons/general/IconInfoThin';
-import IconSync from '../../icons/general/IconSync';
+import InfoBadge16 from '../../icon/line/InfoBadge16';
+import CircleCheck16 from '../../icon/line/CircleCheck16';
+import TriangleAlert16 from '../../icon/line/TriangleAlert16';
+import XBadge16 from '../../icon/line/XBadge16';
+import X16 from '../../icon/fill/X16';
 import './Notification.scss'; // @NOTE: We can't import these constants from ./constant.js because `react-docgen`
 // can't handle imported variables appear in propTypes
 // see https://github.com/reactjs/react-docgen/issues/33
@@ -42,13 +41,13 @@ var TYPE_WARN = 'warn';
 var TYPE_ERROR = 'error';
 var DURATION_TIMES = (_DURATION_TIMES = {}, _defineProperty(_DURATION_TIMES, DURATION_SHORT, 5000), _defineProperty(_DURATION_TIMES, DURATION_LONG, 10000), _DURATION_TIMES);
 var ICON_RENDERER = (_ICON_RENDERER = {}, _defineProperty(_ICON_RENDERER, TYPE_DEFAULT, function () {
-  return React.createElement(IconBell, null);
+  return React.createElement(InfoBadge16, null);
 }), _defineProperty(_ICON_RENDERER, TYPE_ERROR, function () {
-  return React.createElement(IconAlertCircle, null);
+  return React.createElement(XBadge16, null);
 }), _defineProperty(_ICON_RENDERER, TYPE_INFO, function () {
-  return React.createElement(IconSync, null);
+  return React.createElement(CircleCheck16, null);
 }), _defineProperty(_ICON_RENDERER, TYPE_WARN, function () {
-  return React.createElement(IconInfoThin, null);
+  return React.createElement(TriangleAlert16, null);
 }), _ICON_RENDERER);
 var messages = defineMessages({
   clearNotificationButtonText: {
@@ -117,7 +116,7 @@ function (_React$Component) {
       return React.createElement("div", {
         className: classes
       }, React.cloneElement(ICON_RENDERER[type](), {
-        color: bdlGray,
+        color: '#fff',
         height: 20,
         width: 20
       }), contents, React.createElement("button", {
@@ -125,11 +124,7 @@ function (_React$Component) {
         className: "close-btn",
         onClick: this.onClose,
         type: "button"
-      }, React.createElement(IconClose, {
-        color: bdlGray,
-        height: 18,
-        width: 18
-      })));
+      }, React.createElement(X16, null)));
     }
   }]);
 

package/es/components/notification/Notification.js.flow

@@ -3,13 +3,11 @@ import * as React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 
-import { bdlGray } from '../../styles/variables';
-
-import IconAlertCircle from '../../icons/general/IconAlertCircle';
-import IconBell from '../../icons/general/IconBell';
-import IconClose from '../../icons/general/IconClose';
-import IconInfoThin from '../../icons/general/IconInfoThin';
-import IconSync from '../../icons/general/IconSync';
+import InfoBadge16 from '../../icon/line/InfoBadge16';
+import CircleCheck16 from '../../icon/line/CircleCheck16';
+import TriangleAlert16 from '../../icon/line/TriangleAlert16';
+import XBadge16 from '../../icon/line/XBadge16';
+import X16 from '../../icon/fill/X16';
 
 import type { NotificationType } from '../../common/types/core';
 
@@ -32,10 +30,10 @@ const DURATION_TIMES = {
 };
 
 const ICON_RENDERER: { [string]: Function } = {
-    [TYPE_DEFAULT]: () => <IconBell />,
-    [TYPE_ERROR]: () => <IconAlertCircle />,
-    [TYPE_INFO]: () => <IconSync />,
-    [TYPE_WARN]: () => <IconInfoThin />,
+    [TYPE_DEFAULT]: () => <InfoBadge16 />,
+    [TYPE_ERROR]: () => <XBadge16 />,
+    [TYPE_INFO]: () => <CircleCheck16 />,
+    [TYPE_WARN]: () => <TriangleAlert16 />,
 };
 
 const messages = defineMessages({
@@ -109,7 +107,7 @@ class Notification extends React.Component<Props> {
         return (
             <div className={classes}>
                 {React.cloneElement(ICON_RENDERER[type](), {
-                    color: bdlGray,
+                    color: '#fff',
                     height: 20,
                     width: 20,
                 })}
@@ -120,7 +118,7 @@ class Notification extends React.Component<Props> {
                     onClick={this.onClose}
                     type="button"
                 >
-                    <IconClose color={bdlGray} height={18} width={18} />
+                    <X16 />
                 </button>
             </div>
         );

package/es/components/notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/notification/Notification.js"],"names":["React","defineMessages","injectIntl","classNames","bdlGray","IconAlertCircle","IconBell","IconClose","IconInfoThin","IconSync","DURATION_SHORT","DURATION_LONG","OVERFLOW_WRAP","TYPE_DEFAULT","TYPE_INFO","TYPE_WARN","TYPE_ERROR","DURATION_TIMES","ICON_RENDERER","messages","clearNotificationButtonText","Notification","event","onClose","props","timeout","clearTimeout","duration","setTimeout","children","contents","getChildren","intl","type","overflow","formatMessage","classes","cloneElement","color","height","width","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\nimport classNames from 'classnames';\n\nimport { bdlGray } from '../../styles/variables';\n\nimport IconAlertCircle from '../../icons/general/IconAlertCircle';\nimport IconBell from '../../icons/general/IconBell';\nimport IconClose from '../../icons/general/IconClose';\nimport IconInfoThin from '../../icons/general/IconInfoThin';\nimport IconSync from '../../icons/general/IconSync';\n\nimport type { NotificationType } from '../../common/types/core';\n\nimport './Notification.scss';\n\n// @NOTE: We can't import these constants from ./constant.js because `react-docgen`\n// can't handle imported variables appear in propTypes\n// see https://github.com/reactjs/react-docgen/issues/33\nconst DURATION_SHORT = 'short';\nconst DURATION_LONG = 'long';\nconst OVERFLOW_WRAP = 'wrap';\nconst TYPE_DEFAULT = 'default';\nconst TYPE_INFO = 'info';\nconst TYPE_WARN = 'warn';\nconst TYPE_ERROR = 'error';\n\nconst DURATION_TIMES = {\n    [DURATION_SHORT]: 5000,\n    [DURATION_LONG]: 10000,\n};\n\nconst ICON_RENDERER: { [string]: Function } = {\n    [TYPE_DEFAULT]: () => <IconBell />,\n    [TYPE_ERROR]: () => <IconAlertCircle />,\n    [TYPE_INFO]: () => <IconSync />,\n    [TYPE_WARN]: () => <IconInfoThin />,\n};\n\nconst messages = defineMessages({\n    clearNotificationButtonText: {\n        defaultMessage: 'Clear Notification',\n        description: 'Button to clear notification',\n        id: 'boxui.notification.clearNotification',\n    },\n});\n\ntype Props = {\n    /**\n     * The contents of the `Notification`.\n     * - Notification text must be wrapped in a `<span />` tag.\n     * - Notification buttons must be the `<Button />` component.\n     */\n    children: React.Node,\n    /** Function that gets executed when close button is clicked or when duration expires. */\n    duration?: 'short' | 'long',\n    /** `duration`: When set, dictates how long the notification will exist before calling `onClose`.\n     *  If unset, the notification will not automatically call `onClose`.\n     * - `short`: 5s\n     * - `long`: 10s */\n    intl: Object,\n    onClose?: Function,\n    /**\n     * Determines notification colors\n     * - `default`: black\n     * - `info`: green\n     * - `warn`: yellow\n     * - `error`: red\n     */\n    overflow?: 'wrap' | 'ellipsis',\n    type: NotificationType,\n};\n\nclass Notification extends React.Component<Props> {\n    static defaultProps = {\n        overflow: OVERFLOW_WRAP,\n        type: TYPE_DEFAULT,\n    };\n\n    componentDidMount() {\n        const { duration, onClose } = this.props;\n        this.timeout = duration && onClose ? setTimeout(onClose, DURATION_TIMES[duration]) : null;\n    }\n\n    onClose = event => {\n        const { onClose } = this.props;\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n        }\n        if (onClose) {\n            onClose(event);\n        }\n    };\n\n    getChildren() {\n        const { children } = this.props;\n        return typeof children === 'string' ? <span>{children}</span> : children;\n    }\n\n    timeout: TimeoutID | null;\n\n    render() {\n        const contents = this.getChildren();\n        const { intl, type, overflow } = this.props;\n        const { formatMessage } = intl;\n        const classes = classNames('notification', type, overflow);\n\n        return (\n            <div className={classes}>\n                {React.cloneElement(ICON_RENDERER[type](), {\n                    color: bdlGray,\n                    height: 20,\n                    width: 20,\n                })}\n                {contents}\n                <button\n                    aria-label={formatMessage(messages.clearNotificationButtonText)}\n                    className=\"close-btn\"\n                    onClick={this.onClose}\n                    type=\"button\"\n                >\n                    <IconClose color={bdlGray} height={18} width={18} />\n                </button>\n            </div>\n        );\n    }\n}\n\nexport default injectIntl(Notification);\n"],"file":"Notification.js"}
+{"version":3,"sources":["../../../src/components/notification/Notification.js"],"names":["React","defineMessages","injectIntl","classNames","InfoBadge16","CircleCheck16","TriangleAlert16","XBadge16","X16","DURATION_SHORT","DURATION_LONG","OVERFLOW_WRAP","TYPE_DEFAULT","TYPE_INFO","TYPE_WARN","TYPE_ERROR","DURATION_TIMES","ICON_RENDERER","messages","clearNotificationButtonText","Notification","event","onClose","props","timeout","clearTimeout","duration","setTimeout","children","contents","getChildren","intl","type","overflow","formatMessage","classes","cloneElement","color","height","width","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\nimport classNames from 'classnames';\n\nimport InfoBadge16 from '../../icon/line/InfoBadge16';\nimport CircleCheck16 from '../../icon/line/CircleCheck16';\nimport TriangleAlert16 from '../../icon/line/TriangleAlert16';\nimport XBadge16 from '../../icon/line/XBadge16';\nimport X16 from '../../icon/fill/X16';\n\nimport type { NotificationType } from '../../common/types/core';\n\nimport './Notification.scss';\n\n// @NOTE: We can't import these constants from ./constant.js because `react-docgen`\n// can't handle imported variables appear in propTypes\n// see https://github.com/reactjs/react-docgen/issues/33\nconst DURATION_SHORT = 'short';\nconst DURATION_LONG = 'long';\nconst OVERFLOW_WRAP = 'wrap';\nconst TYPE_DEFAULT = 'default';\nconst TYPE_INFO = 'info';\nconst TYPE_WARN = 'warn';\nconst TYPE_ERROR = 'error';\n\nconst DURATION_TIMES = {\n    [DURATION_SHORT]: 5000,\n    [DURATION_LONG]: 10000,\n};\n\nconst ICON_RENDERER: { [string]: Function } = {\n    [TYPE_DEFAULT]: () => <InfoBadge16 />,\n    [TYPE_ERROR]: () => <XBadge16 />,\n    [TYPE_INFO]: () => <CircleCheck16 />,\n    [TYPE_WARN]: () => <TriangleAlert16 />,\n};\n\nconst messages = defineMessages({\n    clearNotificationButtonText: {\n        defaultMessage: 'Clear Notification',\n        description: 'Button to clear notification',\n        id: 'boxui.notification.clearNotification',\n    },\n});\n\ntype Props = {\n    /**\n     * The contents of the `Notification`.\n     * - Notification text must be wrapped in a `<span />` tag.\n     * - Notification buttons must be the `<Button />` component.\n     */\n    children: React.Node,\n    /** Function that gets executed when close button is clicked or when duration expires. */\n    duration?: 'short' | 'long',\n    /** `duration`: When set, dictates how long the notification will exist before calling `onClose`.\n     *  If unset, the notification will not automatically call `onClose`.\n     * - `short`: 5s\n     * - `long`: 10s */\n    intl: Object,\n    onClose?: Function,\n    /**\n     * Determines notification colors\n     * - `default`: black\n     * - `info`: green\n     * - `warn`: yellow\n     * - `error`: red\n     */\n    overflow?: 'wrap' | 'ellipsis',\n    type: NotificationType,\n};\n\nclass Notification extends React.Component<Props> {\n    static defaultProps = {\n        overflow: OVERFLOW_WRAP,\n        type: TYPE_DEFAULT,\n    };\n\n    componentDidMount() {\n        const { duration, onClose } = this.props;\n        this.timeout = duration && onClose ? setTimeout(onClose, DURATION_TIMES[duration]) : null;\n    }\n\n    onClose = event => {\n        const { onClose } = this.props;\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n        }\n        if (onClose) {\n            onClose(event);\n        }\n    };\n\n    getChildren() {\n        const { children } = this.props;\n        return typeof children === 'string' ? <span>{children}</span> : children;\n    }\n\n    timeout: TimeoutID | null;\n\n    render() {\n        const contents = this.getChildren();\n        const { intl, type, overflow } = this.props;\n        const { formatMessage } = intl;\n        const classes = classNames('notification', type, overflow);\n\n        return (\n            <div className={classes}>\n                {React.cloneElement(ICON_RENDERER[type](), {\n                    color: '#fff',\n                    height: 20,\n                    width: 20,\n                })}\n                {contents}\n                <button\n                    aria-label={formatMessage(messages.clearNotificationButtonText)}\n                    className=\"close-btn\"\n                    onClick={this.onClose}\n                    type=\"button\"\n                >\n                    <X16 />\n                </button>\n            </div>\n        );\n    }\n}\n\nexport default injectIntl(Notification);\n"],"file":"Notification.js"}

package/es/components/notification/Notification.scss

@@ -23,22 +23,26 @@
     overflow: hidden;
     color: $bdl-gray;
     font-weight: bold;
-    background-color: $bdl-gray-40;
-    border-radius: 4px;
+    background-color: $bdl-gray-10;
+    border: 2px solid $bdl-gray;
+    border-radius: $bdl-border-radius-size-large;
     box-shadow: 0 2px 6px fade-out($black, .85);
-    opacity: .9;
+    opacity: 1;
     transition: opacity .1s ease-out;
 
     &.info {
-        background-color: $bdl-green-light-50;
+        background-color: $bdl-green-light-20;
+        border-color: $bdl-green-light;
     }
 
     &.warn {
-        background-color: $bdl-yellorange-50;
+        background-color: $bdl-yellorange-20;
+        border-color: $bdl-yellorange;
     }
 
     &.error {
-        background-color: $bdl-watermelon-red-50;
+        background-color: $bdl-watermelon-red-20;
+        border-color: $bdl-watermelon-red;
     }
 
     &.is-hidden {
@@ -72,26 +76,27 @@
     a {
         flex: none;
         color: $bdl-gray;
-        border-color: $bdl-gray;
+        font-weight: bold;
 
         &.btn.is-disabled,
         &.btn:not(.is-disabled) {
             margin: 0 5px;
             padding: 7px 13px;
             background-color: transparent;
-            border-color: inherit;
+            border-color: $bdl-gray;
         }
 
         &.close-btn {
             display: flex;
-            padding: 2px 7px;
-            font-weight: bold;
-            font-size: 14px;
+            align-items: center;
             background: none;
             border: none;
             outline: none;
             cursor: pointer;
-            opacity: .6;
+
+            & path {
+                fill: $bdl-gray;
+            }
         }
     }
 }

package/es/components/pill-selector-dropdown/PillSelector.scss

@@ -25,7 +25,7 @@
         overflow-y: auto;
         background-color: $white;
         border: 1px solid darken($white, 20%);
-        border-radius: $bdl-border-radius-size;
+        border-radius: $bdl-border-radius-size-med;
         box-shadow: inset 0 1px 1px fade-out($black, .92);
         cursor: text;
         transition: border-color linear .15s, box-shadow linear .15s;

package/es/components/plain-button/PlainButton.stories.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { boolean } from '@storybook/addon-knobs';
+import Icon from '../../icons/general/IconCopy';
+import * as vars from '../../styles/variables';
 import PlainButton from './PlainButton';
 import { ButtonType } from '../button';
 import notes from './PlainButton.stories.md';
@@ -14,8 +16,37 @@ export var disabled = function disabled() {
     isDisabled: true
   }, "Click Here");
 };
+export var fixingMargins = function fixingMargins() {
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    style: {
+      backgroundColor: vars.bdlLightBlue20,
+      display: 'inline-block'
+    }
+  }, React.createElement(PlainButton, null, React.createElement(Icon, null))), React.createElement("p", null, "By default the PlainButton component has margins set to 0."), React.createElement("style", null, "\n                .bdl-SpecialButtonBug {\n                    margin: 8px;\n                }\n            "), React.createElement("p", {
+    style: {
+      backgroundColor: vars.bdlWatermelonRed10,
+      display: 'inline-block'
+    }
+  }, React.createElement(PlainButton, {
+    className: "bdl-SpecialButtonBug"
+  }, React.createElement(Icon, null))), React.createElement("p", null, "The layout jumps on hover if margin overrides are not set for the :active and :hover states.", React.createElement("pre", null, React.createElement("code", null, "\n            .bdl-SpecialButtonBug {\n                margin: $bdl-grid-unit*2;\n            }\n                "))), React.createElement("style", null, "\n                .bdl-SpecialButtonFix,\n                .bdl-SpecialButtonFix:hover,\n                .bdl-SpecialButtonFix:active {\n                    margin: 8px;\n                }\n            "), React.createElement("p", {
+    style: {
+      backgroundColor: vars.bdlGreenLight10,
+      display: 'inline-block'
+    }
+  }, React.createElement(PlainButton, {
+    className: "bdl-SpecialButtonFix"
+  }, React.createElement(Icon, null))), React.createElement("p", null, "Workaround - use bdl-Button-margins mixin to define margins.", React.createElement("pre", null, React.createElement("code", null, "\n            .bdl-SpecialButtonFix {\n                @include bdl-Button-margins($bdl-grid-unit*2);\n            }\n                "))), React.createElement("style", null, "\n                .bdl-SpecialButtonFix2,\n                .bdl-SpecialButtonFix2:hover,\n                .bdl-SpecialButtonFix2:active {\n                    margin: 8px 12px 0 16px;\n                }\n            "), React.createElement("p", {
+    style: {
+      backgroundColor: vars.bdlGreenLight10,
+      display: 'inline-block'
+    }
+  }, React.createElement(PlainButton, {
+    className: "bdl-SpecialButtonFix2"
+  }, React.createElement(Icon, null))), React.createElement("p", null, "You can set all 4 margins inline using shorthand property syntax.", React.createElement("pre", null, React.createElement("code", null, "\n            .bdl-SpecialButtonFix2 {\n                @include bdl-Button-margins($bdl-grid-unit*2 $bdl-grid-unit*3 0 $bdl-grid-unit*4);\n            }\n                "))), React.createElement("p", null, React.createElement("b", null, "Why not fix this?"), " We will eventually, but since this behavior is relied upon in many places it is a breaking change that needs to be rolled out strategically."));
+};
 export default {
-  title: 'Components|PlainButton',
+  title: 'Components|Buttons/PlainButton',
   component: PlainButton,
   parameters: {
     notes: notes

package/es/components/plain-button/PlainButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/plain-button/PlainButton.stories.tsx"],"names":["React","boolean","PlainButton","ButtonType","notes","regular","BUTTON","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,WAAP,MAAwB,eAAxB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB,oBAAC,WAAD;AAAa,IAAA,UAAU,EAAEJ,OAAO,CAAC,YAAD,EAAe,KAAf,CAAhC;AAAuD,IAAA,IAAI,EAAEE,UAAU,CAACG;AAAxE,kBADmB;AAAA,CAAhB;AAMP,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,SAAM,oBAAC,WAAD;AAAa,IAAA,UAAU;AAAvB,kBAAN;AAAA,CAAjB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,wBADI;AAEXC,EAAAA,SAAS,EAAEP,WAFA;AAGXQ,EAAAA,UAAU,EAAE;AACRN,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport PlainButton from './PlainButton';\nimport { ButtonType } from '../button';\nimport notes from './PlainButton.stories.md';\n\nexport const regular = () => (\n    <PlainButton isDisabled={boolean('isDisabled', false)} type={ButtonType.BUTTON}>\n        Click Here\n    </PlainButton>\n);\n\nexport const disabled = () => <PlainButton isDisabled>Click Here</PlainButton>;\n\nexport default {\n    title: 'Components|PlainButton',\n    component: PlainButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"PlainButton.stories.js"}
+{"version":3,"sources":["../../../src/components/plain-button/PlainButton.stories.tsx"],"names":["React","boolean","Icon","vars","PlainButton","ButtonType","notes","regular","BUTTON","disabled","fixingMargins","backgroundColor","bdlLightBlue20","display","bdlWatermelonRed10","bdlGreenLight10","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,IAAP,MAAiB,8BAAjB;AACA,OAAO,KAAKC,IAAZ,MAAsB,wBAAtB;AAEA,OAAOC,WAAP,MAAwB,eAAxB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,OAAOC,KAAP,MAAkB,0BAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB,oBAAC,WAAD;AAAa,IAAA,UAAU,EAAEN,OAAO,CAAC,YAAD,EAAe,KAAf,CAAhC;AAAuD,IAAA,IAAI,EAAEI,UAAU,CAACG;AAAxE,kBADmB;AAAA,CAAhB;AAMP,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,SAAM,oBAAC,WAAD;AAAa,IAAA,UAAU;AAAvB,kBAAN;AAAA,CAAjB;AAEP,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SACzB,0CACI;AAAK,IAAA,KAAK,EAAE;AAAEC,MAAAA,eAAe,EAAER,IAAI,CAACS,cAAxB;AAAwCC,MAAAA,OAAO,EAAE;AAAjD;AAAZ,KACI,oBAAC,WAAD,QACI,oBAAC,IAAD,OADJ,CADJ,CADJ,EAMI,4FANJ,EAQI,kJARJ,EAeI;AAAG,IAAA,KAAK,EAAE;AAAEF,MAAAA,eAAe,EAAER,IAAI,CAACW,kBAAxB;AAA4CD,MAAAA,OAAO,EAAE;AAArD;AAAV,KACI,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACI,oBAAC,IAAD,OADJ,CADJ,CAfJ,EAoBI,+HAEI,iCACI,sJADJ,CAFJ,CApBJ,EAgCI,+OAhCJ,EAyCI;AAAG,IAAA,KAAK,EAAE;AAAEF,MAAAA,eAAe,EAAER,IAAI,CAACY,eAAxB;AAAyCF,MAAAA,OAAO,EAAE;AAAlD;AAAV,KACI,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACI,oBAAC,IAAD,OADJ,CADJ,CAzCJ,EA8CI,+FAEI,iCACI,2KADJ,CAFJ,CA9CJ,EA0DI,8PA1DJ,EAmEI;AAAG,IAAA,KAAK,EAAE;AAAEF,MAAAA,eAAe,EAAER,IAAI,CAACY,eAAxB;AAAyCF,MAAAA,OAAO,EAAE;AAAlD;AAAV,KACI,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACI,oBAAC,IAAD,OADJ,CADJ,CAnEJ,EAwEI,oGAEI,iCACI,gNADJ,CAFJ,CAxEJ,EAoFI,+BACI,mDADJ,kJApFJ,CADyB;AAAA,CAAtB;AA4FP,eAAe;AACXG,EAAAA,KAAK,EAAE,gCADI;AAEXC,EAAAA,SAAS,EAAEb,WAFA;AAGXc,EAAAA,UAAU,EAAE;AACRZ,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport Icon from '../../icons/general/IconCopy';\nimport * as vars from '../../styles/variables';\n\nimport PlainButton from './PlainButton';\nimport { ButtonType } from '../button';\nimport notes from './PlainButton.stories.md';\n\nexport const regular = () => (\n    <PlainButton isDisabled={boolean('isDisabled', false)} type={ButtonType.BUTTON}>\n        Click Here\n    </PlainButton>\n);\n\nexport const disabled = () => <PlainButton isDisabled>Click Here</PlainButton>;\n\nexport const fixingMargins = () => (\n    <>\n        <div style={{ backgroundColor: vars.bdlLightBlue20, display: 'inline-block' }}>\n            <PlainButton>\n                <Icon />\n            </PlainButton>\n        </div>\n        <p>By default the PlainButton component has margins set to 0.</p>\n\n        <style>\n            {`\n                .bdl-SpecialButtonBug {\n                    margin: 8px;\n                }\n            `}\n        </style>\n        <p style={{ backgroundColor: vars.bdlWatermelonRed10, display: 'inline-block' }}>\n            <PlainButton className=\"bdl-SpecialButtonBug\">\n                <Icon />\n            </PlainButton>\n        </p>\n        <p>\n            The layout jumps on hover if margin overrides are not set for the :active and :hover states.\n            <pre>\n                <code>\n                    {`\n            .bdl-SpecialButtonBug {\n                margin: $bdl-grid-unit*2;\n            }\n                `}\n                </code>\n            </pre>\n        </p>\n        <style>\n            {`\n                .bdl-SpecialButtonFix,\n                .bdl-SpecialButtonFix:hover,\n                .bdl-SpecialButtonFix:active {\n                    margin: 8px;\n                }\n            `}\n        </style>\n        <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>\n            <PlainButton className=\"bdl-SpecialButtonFix\">\n                <Icon />\n            </PlainButton>\n        </p>\n        <p>\n            Workaround - use bdl-Button-margins mixin to define margins.\n            <pre>\n                <code>\n                    {`\n            .bdl-SpecialButtonFix {\n                @include bdl-Button-margins($bdl-grid-unit*2);\n            }\n                `}\n                </code>\n            </pre>\n        </p>\n        <style>\n            {`\n                .bdl-SpecialButtonFix2,\n                .bdl-SpecialButtonFix2:hover,\n                .bdl-SpecialButtonFix2:active {\n                    margin: 8px 12px 0 16px;\n                }\n            `}\n        </style>\n        <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>\n            <PlainButton className=\"bdl-SpecialButtonFix2\">\n                <Icon />\n            </PlainButton>\n        </p>\n        <p>\n            You can set all 4 margins inline using shorthand property syntax.\n            <pre>\n                <code>\n                    {`\n            .bdl-SpecialButtonFix2 {\n                @include bdl-Button-margins($bdl-grid-unit*2 $bdl-grid-unit*3 0 $bdl-grid-unit*4);\n            }\n                `}\n                </code>\n            </pre>\n        </p>\n        <p>\n            <b>Why not fix this?</b> We will eventually, but since this behavior is relied upon in many places it is a\n            breaking change that needs to be rolled out strategically.\n        </p>\n    </>\n);\n\nexport default {\n    title: 'Components|Buttons/PlainButton',\n    component: PlainButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"PlainButton.stories.js"}

package/es/components/primary-button/PrimaryButton.stories.js

@@ -21,7 +21,7 @@ export var disabled = function disabled() {
   }, "Click Here");
 };
 export default {
-  title: 'Components|PrimaryButton',
+  title: 'Components|Buttons/PrimaryButton',
   component: PrimaryButton,
   parameters: {
     notes: notes

package/es/components/primary-button/PrimaryButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/primary-button/PrimaryButton.stories.tsx"],"names":["React","action","boolean","PrimaryButton","notes","regular","loading","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,4BAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB,oBAAC,aAAD;AACI,IAAA,UAAU,EAAEH,OAAO,CAAC,YAAD,EAAe,KAAf,CADvB;AAEI,IAAA,SAAS,EAAEA,OAAO,CAAC,WAAD,EAAc,KAAd,CAFtB;AAGI,IAAA,OAAO,EAAED,MAAM,CAAC,gBAAD;AAHnB,kBADmB;AAAA,CAAhB;AAUP,OAAO,IAAMK,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,aAAD;AAAe,IAAA,SAAS;AAAxB,kBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,SAAM,oBAAC,aAAD;AAAe,IAAA,UAAU;AAAzB,kBAAN;AAAA,CAAjB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAEN,aAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport PrimaryButton from './PrimaryButton';\nimport notes from './PrimaryButton.stories.md';\n\nexport const regular = () => (\n    <PrimaryButton\n        isDisabled={boolean('isDisabled', false)}\n        isLoading={boolean('isLoading', false)}\n        onClick={action('onClick called')}\n    >\n        Click Here\n    </PrimaryButton>\n);\n\nexport const loading = () => <PrimaryButton isLoading>Click Here</PrimaryButton>;\n\nexport const disabled = () => <PrimaryButton isDisabled>Click Here</PrimaryButton>;\n\nexport default {\n    title: 'Components|PrimaryButton',\n    component: PrimaryButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"PrimaryButton.stories.js"}
+{"version":3,"sources":["../../../src/components/primary-button/PrimaryButton.stories.tsx"],"names":["React","action","boolean","PrimaryButton","notes","regular","loading","disabled","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,4BAAlB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB,oBAAC,aAAD;AACI,IAAA,UAAU,EAAEH,OAAO,CAAC,YAAD,EAAe,KAAf,CADvB;AAEI,IAAA,SAAS,EAAEA,OAAO,CAAC,WAAD,EAAc,KAAd,CAFtB;AAGI,IAAA,OAAO,EAAED,MAAM,CAAC,gBAAD;AAHnB,kBADmB;AAAA,CAAhB;AAUP,OAAO,IAAMK,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,aAAD;AAAe,IAAA,SAAS;AAAxB,kBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW;AAAA,SAAM,oBAAC,aAAD;AAAe,IAAA,UAAU;AAAzB,kBAAN;AAAA,CAAjB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,kCADI;AAEXC,EAAAA,SAAS,EAAEN,aAFA;AAGXO,EAAAA,UAAU,EAAE;AACRN,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\n\nimport PrimaryButton from './PrimaryButton';\nimport notes from './PrimaryButton.stories.md';\n\nexport const regular = () => (\n    <PrimaryButton\n        isDisabled={boolean('isDisabled', false)}\n        isLoading={boolean('isLoading', false)}\n        onClick={action('onClick called')}\n    >\n        Click Here\n    </PrimaryButton>\n);\n\nexport const loading = () => <PrimaryButton isLoading>Click Here</PrimaryButton>;\n\nexport const disabled = () => <PrimaryButton isDisabled>Click Here</PrimaryButton>;\n\nexport default {\n    title: 'Components|Buttons/PrimaryButton',\n    component: PrimaryButton,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"PrimaryButton.stories.js"}

package/es/components/select-field/SelectField.scss

@@ -27,6 +27,7 @@
     display: flex;
     align-items: center;
     white-space: nowrap;
+    border-radius: 0;
 }
 
 .select-option.is-clear-option {
@@ -54,7 +55,9 @@
 .bdl-SelectFieldDropdown {
     z-index: 4;
     min-width: 100%;
+    margin-top: $bdl-grid-unit * 2;
     overflow-x: hidden;
+    border-radius: $bdl-border-radius-size-med;
 }
 
 .bdl-SelectField-optionText {

package/es/components/selector-dropdown/SelectorDropdown.scss

@@ -1,4 +1,5 @@
 @import '../../styles/variables';
+@import '../../styles/mixins/overlay';
 
 /**************************************
  * Selector Dropdown
@@ -8,6 +9,10 @@
     position: relative;
     z-index: 3; /* increase z-index based on max-height of dropdown wrapper */
 
+    .overlay {
+        @include bdl-Overlay-container;
+    }
+
     .overlay-wrapper,
     .overlay {
         display: block;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import SelectorDropdownExamples from '../../../examples/src/SelectorDropdownExamples';
+import SelectorDropdown from './SelectorDropdown';
+import notes from './SelectorDropdown.stories.md';
+export var basic = function basic() {
+  return React.createElement(SelectorDropdownExamples, null);
+};
+export default {
+  title: 'Components|SelectorDropdown',
+  component: SelectorDropdown,
+  parameters: {
+    notes: notes
+  }
+};
+//# sourceMappingURL=SelectorDropdown.stories.js.map

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

@@ -0,0 +1,16 @@
+// @flow
+import * as React from 'react';
+
+import SelectorDropdownExamples from '../../../examples/src/SelectorDropdownExamples';
+import SelectorDropdown from './SelectorDropdown';
+import notes from './SelectorDropdown.stories.md';
+
+export const basic = () => <SelectorDropdownExamples />;
+
+export default {
+    title: 'Components|SelectorDropdown',
+    component: SelectorDropdown,
+    parameters: {
+        notes,
+    },
+};

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

@@ -0,0 +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,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,wBAAD,OAAN;AAAA,CAAd;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,6BADI;AAEXC,EAAAA,SAAS,EAAEJ,gBAFA;AAGXK,EAAAA,UAAU,EAAE;AACRJ,IAAAA,KAAK,EAALA;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/tab-view/Tabs.scss

@@ -58,6 +58,7 @@
         line-height: 40px;
         letter-spacing: .035em;
         border-bottom: 1px solid $bdl-gray-10;
+        border-radius: 0;
 
         &.single-tab-showing {
             width: 100%;

package/es/components/text-area/TextArea.js

@@ -23,7 +23,8 @@ var TextArea = function TextArea(_ref) {
       isResizable = _ref.isResizable,
       label = _ref.label,
       textareaRef = _ref.textareaRef,
-      rest = _objectWithoutProperties(_ref, ["className", "description", "error", "errorTooltipPosition", "hideLabel", "hideOptionalLabel", "isRequired", "isResizable", "label", "textareaRef"]);
+      tooltipTetherClassName = _ref.tooltipTetherClassName,
+      rest = _objectWithoutProperties(_ref, ["className", "description", "error", "errorTooltipPosition", "hideLabel", "hideOptionalLabel", "isRequired", "isResizable", "label", "textareaRef", "tooltipTetherClassName"]);
 
   var hasError = !!error;
   var classes = classNames(className, 'text-area-container', {
@@ -49,6 +50,7 @@ var TextArea = function TextArea(_ref) {
   }, description), React.createElement(Tooltip, {
     isShown: hasError,
     position: errorTooltipPosition || 'bottom-left',
+    tetherElementClassName: tooltipTetherClassName,
     text: error || '',
     theme: "error"
   }, React.createElement("textarea", _extends({

package/es/components/text-area/TextArea.js.flow

@@ -26,6 +26,8 @@ type Props = {
     /** Label displayed for the text area */
     label: React.Node,
     textareaRef?: Function, // @TODO: eventually rename to innerRef for consistancy across all form elements
+    /** A CSS class for the tooltip's tether element component */
+    tooltipTetherClassName?: string,
 };
 
 const TextArea = ({
@@ -39,6 +41,7 @@ const TextArea = ({
     isResizable,
     label,
     textareaRef,
+    tooltipTetherClassName,
     ...rest
 }: Props) => {
     const hasError = !!error;
@@ -67,6 +70,7 @@ const TextArea = ({
                 <Tooltip
                     isShown={hasError}
                     position={errorTooltipPosition || 'bottom-left'}
+                    tetherElementClassName={tooltipTetherClassName}
                     text={error || ''}
                     theme="error"
                 >

package/es/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/text-area/TextArea.js"],"names":["React","classNames","uniqueId","Label","Tooltip","TextArea","className","description","error","errorTooltipPosition","hideLabel","hideOptionalLabel","isRequired","isResizable","label","textareaRef","rest","hasError","classes","errorMessageID","useRef","current","descriptionID","ariaAttrs","undefined","resize","displayName"],"mappings":";;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAEA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAGA,OAAO,iBAAP;;AAqBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAYJ;AAAA,4BAXTC,SAWS;AAAA,MAXTA,SAWS,+BAXG,EAWH;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,KASS,QATTA,KASS;AAAA,MARTC,oBAQS,QARTA,oBAQS;AAAA,MAPTC,SAOS,QAPTA,SAOS;AAAA,MANTC,iBAMS,QANTA,iBAMS;AAAA,MALTC,UAKS,QALTA,UAKS;AAAA,MAJTC,WAIS,QAJTA,WAIS;AAAA,MAHTC,KAGS,QAHTA,KAGS;AAAA,MAFTC,WAES,QAFTA,WAES;AAAA,MADNC,IACM;;AACT,MAAMC,QAAQ,GAAG,CAAC,CAACT,KAAnB;AACA,MAAMU,OAAO,GAAGjB,UAAU,CAACK,SAAD,EAAY,qBAAZ,EAAmC;AACzD,kBAAcW;AAD2C,GAAnC,CAA1B;AAIA,MAAME,cAAc,GAAGnB,KAAK,CAACoB,MAAN,CAAalB,QAAQ,CAAC,cAAD,CAArB,EAAuCmB,OAA9D;AACA,MAAMC,aAAa,GAAGtB,KAAK,CAACoB,MAAN,CAAalB,QAAQ,CAAC,aAAD,CAArB,EAAsCmB,OAA5D;AAEA,MAAME,SAAS,GAAG;AACd,oBAAgBN,QADF;AAEd,qBAAiBL,UAFH;AAGd,yBAAqBO,cAHP;AAId,wBAAoBZ,WAAW,GAAGe,aAAH,GAAmBE;AAJpC,GAAlB;AAOA,SACI;AAAK,IAAA,SAAS,EAAEN;AAAhB,KACI,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAER,SAAlB;AAA6B,IAAA,gBAAgB,EAAE,CAACC,iBAAD,IAAsB,CAACC,UAAtE;AAAkF,IAAA,IAAI,EAAEE;AAAxF,KACK,CAAC,CAACP,WAAF,IACG;AAAK,IAAA,EAAE,EAAEe,aAAT;AAAwB,IAAA,SAAS,EAAC;AAAlC,KACKf,WADL,CAFR,EAMI,oBAAC,OAAD;AACI,IAAA,OAAO,EAAEU,QADb;AAEI,IAAA,QAAQ,EAAER,oBAAoB,IAAI,aAFtC;AAGI,IAAA,IAAI,EAAED,KAAK,IAAI,EAHnB;AAII,IAAA,KAAK,EAAC;AAJV,KAMI;AACI,IAAA,GAAG,EAAEO,WADT;AAEI,IAAA,QAAQ,EAAEH,UAFd;AAGI,IAAA,KAAK,EAAE;AAAEa,MAAAA,MAAM,EAAEZ,WAAW,GAAG,EAAH,GAAQ;AAA7B;AAHX,KAIQU,SAJR,EAKQP,IALR,EANJ,CANJ,EAoBI;AAAM,IAAA,EAAE,EAAEG,cAAV;AAA0B,IAAA,SAAS,EAAC,sBAApC;AAA2D,IAAA,IAAI,EAAC;AAAhE,KACKX,KADL,CApBJ,CADJ,CADJ;AA4BH,CAxDD;;AA0DAH,QAAQ,CAACqB,WAAT,GAAuB,UAAvB;AAGA,eAAerB,QAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport uniqueId from 'lodash/uniqueId';\n\nimport Label from '../label';\nimport Tooltip from '../tooltip';\nimport type { Position } from '../tooltip';\n\nimport './TextArea.scss';\n\ntype Props = {\n    className?: string,\n    description?: React.Node,\n    error?: React.Node,\n    /** Renders error tooltip at the specified position (positions are those from Tooltip) */\n    errorTooltipPosition?: Position,\n    /** Hides the label */\n    hideLabel?: boolean,\n    /** Hides (optional) text from the label */\n    hideOptionalLabel?: boolean,\n    /** Makes the text area value required */\n    isRequired?: boolean,\n    /** Is text area resizable */\n    isResizable?: boolean,\n    /** Label displayed for the text area */\n    label: React.Node,\n    textareaRef?: Function, // @TODO: eventually rename to innerRef for consistancy across all form elements\n};\n\nconst TextArea = ({\n    className = '',\n    description,\n    error,\n    errorTooltipPosition,\n    hideLabel,\n    hideOptionalLabel,\n    isRequired,\n    isResizable,\n    label,\n    textareaRef,\n    ...rest\n}: Props) => {\n    const hasError = !!error;\n    const classes = classNames(className, 'text-area-container', {\n        'show-error': hasError,\n    });\n\n    const errorMessageID = React.useRef(uniqueId('errorMessage')).current;\n    const descriptionID = React.useRef(uniqueId('description')).current;\n\n    const ariaAttrs = {\n        'aria-invalid': hasError,\n        'aria-required': isRequired,\n        'aria-errormessage': errorMessageID,\n        'aria-describedby': description ? descriptionID : undefined,\n    };\n\n    return (\n        <div className={classes}>\n            <Label hideLabel={hideLabel} showOptionalText={!hideOptionalLabel && !isRequired} text={label}>\n                {!!description && (\n                    <div id={descriptionID} className=\"text-area-description\">\n                        {description}\n                    </div>\n                )}\n                <Tooltip\n                    isShown={hasError}\n                    position={errorTooltipPosition || 'bottom-left'}\n                    text={error || ''}\n                    theme=\"error\"\n                >\n                    <textarea\n                        ref={textareaRef}\n                        required={isRequired}\n                        style={{ resize: isResizable ? '' : 'none' }}\n                        {...ariaAttrs}\n                        {...rest}\n                    />\n                </Tooltip>\n                <span id={errorMessageID} className=\"accessibility-hidden\" role=\"alert\">\n                    {error}\n                </span>\n            </Label>\n        </div>\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport type TextAreaProps = Props;\nexport default TextArea;\n"],"file":"TextArea.js"}
+{"version":3,"sources":["../../../src/components/text-area/TextArea.js"],"names":["React","classNames","uniqueId","Label","Tooltip","TextArea","className","description","error","errorTooltipPosition","hideLabel","hideOptionalLabel","isRequired","isResizable","label","textareaRef","tooltipTetherClassName","rest","hasError","classes","errorMessageID","useRef","current","descriptionID","ariaAttrs","undefined","resize","displayName"],"mappings":";;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAEA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAGA,OAAO,iBAAP;;AAuBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAaJ;AAAA,4BAZTC,SAYS;AAAA,MAZTA,SAYS,+BAZG,EAYH;AAAA,MAXTC,WAWS,QAXTA,WAWS;AAAA,MAVTC,KAUS,QAVTA,KAUS;AAAA,MATTC,oBASS,QATTA,oBASS;AAAA,MARTC,SAQS,QARTA,SAQS;AAAA,MAPTC,iBAOS,QAPTA,iBAOS;AAAA,MANTC,UAMS,QANTA,UAMS;AAAA,MALTC,WAKS,QALTA,WAKS;AAAA,MAJTC,KAIS,QAJTA,KAIS;AAAA,MAHTC,WAGS,QAHTA,WAGS;AAAA,MAFTC,sBAES,QAFTA,sBAES;AAAA,MADNC,IACM;;AACT,MAAMC,QAAQ,GAAG,CAAC,CAACV,KAAnB;AACA,MAAMW,OAAO,GAAGlB,UAAU,CAACK,SAAD,EAAY,qBAAZ,EAAmC;AACzD,kBAAcY;AAD2C,GAAnC,CAA1B;AAIA,MAAME,cAAc,GAAGpB,KAAK,CAACqB,MAAN,CAAanB,QAAQ,CAAC,cAAD,CAArB,EAAuCoB,OAA9D;AACA,MAAMC,aAAa,GAAGvB,KAAK,CAACqB,MAAN,CAAanB,QAAQ,CAAC,aAAD,CAArB,EAAsCoB,OAA5D;AAEA,MAAME,SAAS,GAAG;AACd,oBAAgBN,QADF;AAEd,qBAAiBN,UAFH;AAGd,yBAAqBQ,cAHP;AAId,wBAAoBb,WAAW,GAAGgB,aAAH,GAAmBE;AAJpC,GAAlB;AAOA,SACI;AAAK,IAAA,SAAS,EAAEN;AAAhB,KACI,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAET,SAAlB;AAA6B,IAAA,gBAAgB,EAAE,CAACC,iBAAD,IAAsB,CAACC,UAAtE;AAAkF,IAAA,IAAI,EAAEE;AAAxF,KACK,CAAC,CAACP,WAAF,IACG;AAAK,IAAA,EAAE,EAAEgB,aAAT;AAAwB,IAAA,SAAS,EAAC;AAAlC,KACKhB,WADL,CAFR,EAMI,oBAAC,OAAD;AACI,IAAA,OAAO,EAAEW,QADb;AAEI,IAAA,QAAQ,EAAET,oBAAoB,IAAI,aAFtC;AAGI,IAAA,sBAAsB,EAAEO,sBAH5B;AAII,IAAA,IAAI,EAAER,KAAK,IAAI,EAJnB;AAKI,IAAA,KAAK,EAAC;AALV,KAOI;AACI,IAAA,GAAG,EAAEO,WADT;AAEI,IAAA,QAAQ,EAAEH,UAFd;AAGI,IAAA,KAAK,EAAE;AAAEc,MAAAA,MAAM,EAAEb,WAAW,GAAG,EAAH,GAAQ;AAA7B;AAHX,KAIQW,SAJR,EAKQP,IALR,EAPJ,CANJ,EAqBI;AAAM,IAAA,EAAE,EAAEG,cAAV;AAA0B,IAAA,SAAS,EAAC,sBAApC;AAA2D,IAAA,IAAI,EAAC;AAAhE,KACKZ,KADL,CArBJ,CADJ,CADJ;AA6BH,CA1DD;;AA4DAH,QAAQ,CAACsB,WAAT,GAAuB,UAAvB;AAGA,eAAetB,QAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport uniqueId from 'lodash/uniqueId';\n\nimport Label from '../label';\nimport Tooltip from '../tooltip';\nimport type { Position } from '../tooltip';\n\nimport './TextArea.scss';\n\ntype Props = {\n    className?: string,\n    description?: React.Node,\n    error?: React.Node,\n    /** Renders error tooltip at the specified position (positions are those from Tooltip) */\n    errorTooltipPosition?: Position,\n    /** Hides the label */\n    hideLabel?: boolean,\n    /** Hides (optional) text from the label */\n    hideOptionalLabel?: boolean,\n    /** Makes the text area value required */\n    isRequired?: boolean,\n    /** Is text area resizable */\n    isResizable?: boolean,\n    /** Label displayed for the text area */\n    label: React.Node,\n    textareaRef?: Function, // @TODO: eventually rename to innerRef for consistancy across all form elements\n    /** A CSS class for the tooltip's tether element component */\n    tooltipTetherClassName?: string,\n};\n\nconst TextArea = ({\n    className = '',\n    description,\n    error,\n    errorTooltipPosition,\n    hideLabel,\n    hideOptionalLabel,\n    isRequired,\n    isResizable,\n    label,\n    textareaRef,\n    tooltipTetherClassName,\n    ...rest\n}: Props) => {\n    const hasError = !!error;\n    const classes = classNames(className, 'text-area-container', {\n        'show-error': hasError,\n    });\n\n    const errorMessageID = React.useRef(uniqueId('errorMessage')).current;\n    const descriptionID = React.useRef(uniqueId('description')).current;\n\n    const ariaAttrs = {\n        'aria-invalid': hasError,\n        'aria-required': isRequired,\n        'aria-errormessage': errorMessageID,\n        'aria-describedby': description ? descriptionID : undefined,\n    };\n\n    return (\n        <div className={classes}>\n            <Label hideLabel={hideLabel} showOptionalText={!hideOptionalLabel && !isRequired} text={label}>\n                {!!description && (\n                    <div id={descriptionID} className=\"text-area-description\">\n                        {description}\n                    </div>\n                )}\n                <Tooltip\n                    isShown={hasError}\n                    position={errorTooltipPosition || 'bottom-left'}\n                    tetherElementClassName={tooltipTetherClassName}\n                    text={error || ''}\n                    theme=\"error\"\n                >\n                    <textarea\n                        ref={textareaRef}\n                        required={isRequired}\n                        style={{ resize: isResizable ? '' : 'none' }}\n                        {...ariaAttrs}\n                        {...rest}\n                    />\n                </Tooltip>\n                <span id={errorMessageID} className=\"accessibility-hidden\" role=\"alert\">\n                    {error}\n                </span>\n            </Label>\n        </div>\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport type TextAreaProps = Props;\nexport default TextArea;\n"],"file":"TextArea.js"}

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

@@ -28,7 +28,8 @@ var TextInput = function TextInput(_ref) {
       isValid = _ref.isValid,
       label = _ref.label,
       labelTooltip = _ref.labelTooltip,
-      rest = _objectWithoutProperties(_ref, ["className", "description", "error", "errorPosition", "hideLabel", "hideOptionalLabel", "icon", "inputRef", "isLoading", "isRequired", "isValid", "label", "labelTooltip"]);
+      tooltipTetherClassName = _ref.tooltipTetherClassName,
+      rest = _objectWithoutProperties(_ref, ["className", "description", "error", "errorPosition", "hideLabel", "hideOptionalLabel", "icon", "inputRef", "isLoading", "isRequired", "isValid", "label", "labelTooltip", "tooltipTetherClassName"]);
 
   var hasError = !!error;
   var classes = classNames(className, 'text-input-container', {
@@ -53,6 +54,7 @@ var TextInput = function TextInput(_ref) {
   }, description), React.createElement(Tooltip, {
     isShown: hasError,
     position: errorPosition || 'middle-right',
+    tetherElementClassName: tooltipTetherClassName,
     text: error || '',
     theme: "error"
   }, React.createElement("input", _extends({