From 6dfcf3688eea381578603634b22e8e700057ae25 Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Wed, 8 Apr 2015 09:13:56 -0600
Subject: [PATCH] [changed] Internal variables classSet to classNames

This has been causing a lot of confusion for folks since React has
depricated `classSet`. We felt at the time that changing the require
call to `require('classnames')` withing changing the variable name would
be enough. It hasn't due to the confusion people are seeing.

Fixes #489
---
 docs/examples/.eslintrc               |  2 +-
 docs/examples/CollapsableParagraph.js |  2 +-
 docs/src/ReactPlayground.js           |  6 +++---
 src/Affix.js                          |  4 ++--
 src/Alert.js                          |  4 ++--
 src/Badge.js                          |  4 ++--
 src/Button.js                         |  8 ++++----
 src/ButtonGroup.js                    |  4 ++--
 src/ButtonToolbar.js                  |  4 ++--
 src/Carousel.js                       |  4 ++--
 src/CarouselItem.js                   |  4 ++--
 src/Col.js                            |  4 ++--
 src/CollapsableNav.js                 |  4 ++--
 src/DropdownButton.js                 |  6 +++---
 src/DropdownMenu.js                   |  4 ++--
 src/FormGroup.js                      |  4 ++--
 src/Glyphicon.js                      |  4 ++--
 src/Grid.js                           |  4 ++--
 src/Input.js                          | 18 +++++++++---------
 src/Jumbotron.js                      |  4 ++--
 src/Label.js                          |  4 ++--
 src/ListGroup.js                      |  4 ++--
 src/ListGroupItem.js                  |  8 ++++----
 src/MenuItem.js                       |  4 ++--
 src/Modal.js                          | 10 +++++-----
 src/Nav.js                            |  6 +++---
 src/NavItem.js                        |  4 ++--
 src/Navbar.js                         |  8 ++++----
 src/PageHeader.js                     |  4 ++--
 src/PageItem.js                       |  4 ++--
 src/Pager.js                          |  4 ++--
 src/Panel.js                          | 10 +++++-----
 src/PanelGroup.js                     |  4 ++--
 src/Popover.js                        |  4 ++--
 src/ProgressBar.js                    |  8 ++++----
 src/Row.js                            |  4 ++--
 src/SplitButton.js                    |  6 +++---
 src/SubNav.js                         |  4 ++--
 src/TabPane.js                        |  4 ++--
 src/Table.js                          |  4 ++--
 src/Tooltip.js                        |  4 ++--
 src/Well.js                           |  4 ++--
 test/CollapsableMixinSpec.js          |  4 ++--
 43 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
index 558f5a24c4..2db814d319 100644
--- a/docs/examples/.eslintrc
+++ b/docs/examples/.eslintrc
@@ -6,7 +6,7 @@
   "globals": {
     "mountNode",
     "React",
-    "classSet",
+    "classNames",
     "Accordion",
     "Alert",
     "Badge",
diff --git a/docs/examples/CollapsableParagraph.js b/docs/examples/CollapsableParagraph.js
index 8ab37508ef..9e45532e3b 100644
--- a/docs/examples/CollapsableParagraph.js
+++ b/docs/examples/CollapsableParagraph.js
@@ -20,7 +20,7 @@ const CollapsableParagraph = React.createClass({
     return (
       <div>
         <Button onClick={this.onHandleToggle}>{text} Content</Button>
-        <div ref='panel' className={classSet(styles)}>
+        <div ref='panel' className={classNames(styles)}>
           {this.props.children}
         </div>
       </div>
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index b04caa6289..12294337e9 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import Accordion from '../../src/Accordion';
 import Alert from '../../src/Alert';
 import Badge from '../../src/Badge';
@@ -198,11 +198,11 @@ const ReactPlayground = React.createClass({
     }
     return (
       <div className='playground'>
-        <div className={classSet(classes)}>
+        <div className={classNames(classes)}>
           <div ref='mount' />
         </div>
         {editor}
-        <a className={classSet(toggleClasses)} onClick={this.handleCodeModeToggle} href='#'>{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
+        <a className={classNames(toggleClasses)} onClick={this.handleCodeModeToggle} href='#'>{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
       </div>
       );
   },
diff --git a/src/Affix.js b/src/Affix.js
index 544245c978..0a902a5bfb 100644
--- a/src/Affix.js
+++ b/src/Affix.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import AffixMixin from './AffixMixin';
 import domUtils from './utils/domUtils';
 
@@ -15,7 +15,7 @@ const Affix = React.createClass({
 
     return (
       <div {...this.props}
-        className={classSet(this.props.className, this.state.affixClass)}
+        className={classNames(this.props.className, this.state.affixClass)}
         style={holderStyle}>
         {this.props.children}
       </div>
diff --git a/src/Alert.js b/src/Alert.js
index bd28543cee..419b1e6613 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Alert = React.createClass({
@@ -36,7 +36,7 @@ const Alert = React.createClass({
     classes['alert-dismissable'] = isDismissable;
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)}>
+      <div {...this.props} className={classNames(this.props.className, classes)}>
         {isDismissable ? this.renderDismissButton() : null}
         {this.props.children}
       </div>
diff --git a/src/Badge.js b/src/Badge.js
index 06e027163e..910d6d3603 100644
--- a/src/Badge.js
+++ b/src/Badge.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ValidComponentChildren from './utils/ValidComponentChildren';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 
 const Badge = React.createClass({
@@ -22,7 +22,7 @@ const Badge = React.createClass({
     return (
       <span
         {...this.props}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/Button.js b/src/Button.js
index d594f54486..27f1fa31e4 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Button = React.createClass({
@@ -54,7 +54,7 @@ const Button = React.createClass({
       <Component
         {...this.props}
         href={href}
-        className={classSet(this.props.className, classes)}
+        className={classNames(this.props.className, classes)}
         role="button">
         {this.props.children}
       </Component>
@@ -67,7 +67,7 @@ const Button = React.createClass({
     return (
       <Component
         {...this.props}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </Component>
     );
@@ -79,7 +79,7 @@ const Button = React.createClass({
     };
 
     return (
-      <li className={classSet(liClasses)}>
+      <li className={classNames(liClasses)}>
         {this.renderAnchor(classes)}
       </li>
     );
diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js
index 5e4f8c21a5..1492ae7bce 100644
--- a/src/ButtonGroup.js
+++ b/src/ButtonGroup.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const ButtonGroup = React.createClass({
@@ -25,7 +25,7 @@ const ButtonGroup = React.createClass({
     return (
       <div
         {...this.props}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/ButtonToolbar.js b/src/ButtonToolbar.js
index b8b86e117f..e4dcb97473 100644
--- a/src/ButtonToolbar.js
+++ b/src/ButtonToolbar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const ButtonToolbar = React.createClass({
@@ -18,7 +18,7 @@ const ButtonToolbar = React.createClass({
       <div
         {...this.props}
         role="toolbar"
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/Carousel.js b/src/Carousel.js
index 8084803986..458a5f65a4 100644
--- a/src/Carousel.js
+++ b/src/Carousel.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
@@ -142,7 +142,7 @@ const Carousel = React.createClass({
     return (
       <div
         {...this.props}
-        className={classSet(this.props.className, classes)}
+        className={classNames(this.props.className, classes)}
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}>
         {this.props.indicators ? this.renderIndicators() : null}
diff --git a/src/CarouselItem.js b/src/CarouselItem.js
index 0a76a3edfb..7ac5e6c5f3 100644
--- a/src/CarouselItem.js
+++ b/src/CarouselItem.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import TransitionEvents from './utils/TransitionEvents';
 
 const CarouselItem = React.createClass({
@@ -73,7 +73,7 @@ const CarouselItem = React.createClass({
     }
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)}>
+      <div {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
         {this.props.caption ? this.renderCaption() : null}
       </div>
diff --git a/src/Col.js b/src/Col.js
index 4155b04616..23ae471ad1 100644
--- a/src/Col.js
+++ b/src/Col.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import constants from './constants';
 
 const Col = React.createClass({
@@ -62,7 +62,7 @@ const Col = React.createClass({
     }, this);
 
     return (
-      <ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
+      <ComponentClass {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/CollapsableNav.js b/src/CollapsableNav.js
index a14f51fea4..727cd7f87e 100644
--- a/src/CollapsableNav.js
+++ b/src/CollapsableNav.js
@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
 import CollapsableMixin from './CollapsableMixin';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import domUtils from './utils/domUtils';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -52,7 +52,7 @@ const CollapsableNav = React.createClass({
     }
 
     return (
-      <div eventKey={this.props.eventKey} className={classSet(this.props.className, classes)} >
+      <div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
         {ValidComponentChildren.map(this.props.children, this.props.collapsable ? this.renderCollapsableNavChildren : this.renderChildren )}
       </div>
     );
diff --git a/src/DropdownButton.js b/src/DropdownButton.js
index 29d3326a29..4f3d5c3d9c 100644
--- a/src/DropdownButton.js
+++ b/src/DropdownButton.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import createChainedFunction from './utils/createChainedFunction';
 import BootstrapMixin from './BootstrapMixin';
@@ -64,7 +64,7 @@ const DropdownButton = React.createClass({
     return (
       <ButtonGroup
         bsSize={this.props.bsSize}
-        className={classSet(this.props.className, groupClasses)}>
+        className={classNames(this.props.className, groupClasses)}>
         {children}
       </ButtonGroup>
     );
@@ -78,7 +78,7 @@ const DropdownButton = React.createClass({
       };
 
     return (
-      <li className={classSet(this.props.className, classes)}>
+      <li className={classNames(this.props.className, classes)}>
         {children}
       </li>
     );
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
index f9c940ed34..1d3b3daae2 100644
--- a/src/DropdownMenu.js
+++ b/src/DropdownMenu.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import createChainedFunction from './utils/createChainedFunction';
 import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -19,7 +19,7 @@ const DropdownMenu = React.createClass({
     return (
         <ul
           {...this.props}
-          className={classSet(this.props.className, classes)}
+          className={classNames(this.props.className, classes)}
           role="menu">
           {ValidComponentChildren.map(this.props.children, this.renderMenuItem)}
         </ul>
diff --git a/src/FormGroup.js b/src/FormGroup.js
index 0bde453978..9e6eeb0725 100644
--- a/src/FormGroup.js
+++ b/src/FormGroup.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 class FormGroup extends React.Component {
   render() {
@@ -12,7 +12,7 @@ class FormGroup extends React.Component {
     };
 
     return (
-      <div className={classSet(classes, this.props.groupClassName)}>
+      <div className={classNames(classes, this.props.groupClassName)}>
         {this.props.children}
       </div>
     );
diff --git a/src/Glyphicon.js b/src/Glyphicon.js
index 7e5871ac9a..bb3e41ea19 100644
--- a/src/Glyphicon.js
+++ b/src/Glyphicon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import constants from './constants';
 
@@ -22,7 +22,7 @@ const Glyphicon = React.createClass({
     classes['glyphicon-' + this.props.glyph] = true;
 
     return (
-      <span {...this.props} className={classSet(this.props.className, classes)}>
+      <span {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/Grid.js b/src/Grid.js
index a5fe731a7b..17c4ed5ccf 100644
--- a/src/Grid.js
+++ b/src/Grid.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const Grid = React.createClass({
   propTypes: {
@@ -20,7 +20,7 @@ const Grid = React.createClass({
     return (
       <ComponentClass
         {...this.props}
-        className={classSet(this.props.className, className)}>
+        className={classNames(this.props.className, className)}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/Input.js b/src/Input.js
index 062de9d5e8..e257156ca0 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import Button from './Button';
 import FormGroup from './FormGroup';
 
@@ -90,17 +90,17 @@ const Input = React.createClass({
     switch (this.props.type) {
       case 'select':
         input = (
-          <select {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input">
+          <select {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input">
             {this.props.children}
           </select>
         );
         break;
       case 'textarea':
-        input = <textarea {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input" />;
+        input = <textarea {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input" />;
         break;
       case 'static':
         input = (
-          <p {...this.props} className={classSet(this.props.className, 'form-control-static')} ref="input" key="input">
+          <p {...this.props} className={classNames(this.props.className, 'form-control-static')} ref="input" key="input">
             {this.props.value}
           </p>
         );
@@ -112,7 +112,7 @@ const Input = React.createClass({
         break;
       default:
         let className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
-        input = <input {...this.props} className={classSet(this.props.className, className)} ref="input" key="input" />;
+        input = <input {...this.props} className={classNames(this.props.className, className)} ref="input" key="input" />;
     }
 
     return input;
@@ -150,7 +150,7 @@ const Input = React.createClass({
     }
 
     return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
-      <div className={classSet(inputGroupClassName, 'input-group')} key="input-group">
+      <div className={classNames(inputGroupClassName, 'input-group')} key="input-group">
         {addonBefore}
         {buttonBefore}
         {children}
@@ -170,7 +170,7 @@ const Input = React.createClass({
     };
 
     return this.props.hasFeedback ? (
-      <span className={classSet(classes)} key="icon" />
+      <span className={classNames(classes)} key="icon" />
     ) : null;
   },
 
@@ -189,7 +189,7 @@ const Input = React.createClass({
     };
 
     return (
-      <div className={classSet(classes)} key="checkboxRadioWrapper">
+      <div className={classNames(classes)} key="checkboxRadioWrapper">
         {children}
       </div>
     );
@@ -210,7 +210,7 @@ const Input = React.createClass({
     classes[this.props.labelClassName] = this.props.labelClassName;
 
     return this.props.label ? (
-      <label htmlFor={this.props.id} className={classSet(classes)} key="label">
+      <label htmlFor={this.props.id} className={classNames(classes)} key="label">
         {children}
         {this.props.label}
       </label>
diff --git a/src/Jumbotron.js b/src/Jumbotron.js
index c196677524..41af93dd0a 100644
--- a/src/Jumbotron.js
+++ b/src/Jumbotron.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const Jumbotron = React.createClass({
   render() {
     return (
-      <div {...this.props} className={classSet(this.props.className, 'jumbotron')}>
+      <div {...this.props} className={classNames(this.props.className, 'jumbotron')}>
         {this.props.children}
       </div>
     );
diff --git a/src/Label.js b/src/Label.js
index 7d0efe398d..6cbf8839a9 100644
--- a/src/Label.js
+++ b/src/Label.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Label = React.createClass({
@@ -16,7 +16,7 @@ const Label = React.createClass({
     let classes = this.getBsClassSet();
 
     return (
-      <span {...this.props} className={classSet(this.props.className, classes)}>
+      <span {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </span>
     );
diff --git a/src/ListGroup.js b/src/ListGroup.js
index 484d287fd1..d2662a11fb 100644
--- a/src/ListGroup.js
+++ b/src/ListGroup.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
 class ListGroup extends React.Component {
@@ -10,7 +10,7 @@ class ListGroup extends React.Component {
     );
 
     return (
-      <div className={classSet(this.props.className, 'list-group')}>
+      <div className={classNames(this.props.className, 'list-group')}>
         {items}
       </div>
     );
diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js
index d0d7b8f171..d1039adee4 100644
--- a/src/ListGroupItem.js
+++ b/src/ListGroupItem.js
@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 
 const ListGroupItem = React.createClass({
@@ -38,7 +38,7 @@ const ListGroupItem = React.createClass({
 
   renderSpan(classes) {
     return (
-      <span {...this.props} className={classSet(this.props.className, classes)}>
+      <span {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </span>
     );
@@ -48,7 +48,7 @@ const ListGroupItem = React.createClass({
     return (
       <a
         {...this.props}
-        className={classSet(this.props.className, classes)}
+        className={classNames(this.props.className, classes)}
       >
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </a>
@@ -60,7 +60,7 @@ const ListGroupItem = React.createClass({
     if (React.isValidElement(this.props.header)) {
       header = cloneElement(this.props.header, {
         key: 'header',
-        className: classSet(this.props.header.props.className, 'list-group-item-heading')
+        className: classNames(this.props.header.props.className, 'list-group-item-heading')
       });
     } else {
       header = (
diff --git a/src/MenuItem.js b/src/MenuItem.js
index d1a8ac54fb..8c0f7c9f56 100644
--- a/src/MenuItem.js
+++ b/src/MenuItem.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const MenuItem = React.createClass({
   propTypes: {
@@ -48,7 +48,7 @@ const MenuItem = React.createClass({
 
     return (
       <li {...this.props} role="presentation" title={null} href={null}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {children}
       </li>
     );
diff --git a/src/Modal.js b/src/Modal.js
index 659852d2b1..ef344409e7 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
 import domUtils from './utils/domUtils';
@@ -52,10 +52,10 @@ const Modal = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={classSet(this.props.className, classes)}
+        className={classNames(this.props.className, classes)}
         onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
         ref="modal">
-        <div className={classSet(dialogClasses)}>
+        <div className={classNames(dialogClasses)}>
           <div className="modal-content" style={{overflow: 'hidden'}}>
             {this.props.title ? this.renderHeader() : null}
             {this.props.children}
@@ -81,7 +81,7 @@ const Modal = React.createClass({
 
     return (
       <div>
-        <div className={classSet(classes)} ref="backdrop" onClick={onClick} />
+        <div className={classNames(classes)} ref="backdrop" onClick={onClick} />
         {modal}
       </div>
     );
@@ -102,7 +102,7 @@ const Modal = React.createClass({
     classes['bg-' + style] = style;
     classes['text-' + style] = style;
 
-    let className = classSet(classes);
+    let className = classNames(classes);
 
     return (
       <div className={className}>
diff --git a/src/Nav.js b/src/Nav.js
index 7ecf9a4ebe..4272ee1756 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
 import CollapsableMixin from './CollapsableMixin';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import domUtils from './utils/domUtils';
 
 
@@ -53,7 +53,7 @@ const Nav = React.createClass({
     }
 
     return (
-      <nav {...this.props} className={classSet(this.props.className, classes)}>
+      <nav {...this.props} className={classNames(this.props.className, classes)}>
         {this.renderUl()}
       </nav>
     );
@@ -69,7 +69,7 @@ const Nav = React.createClass({
     classes['navbar-right'] = this.props.right;
 
     return (
-      <ul {...this.props} className={classSet(this.props.className, classes)} ref="ul">
+      <ul {...this.props} className={classNames(this.props.className, classes)} ref="ul">
         {ValidComponentChildren.map(this.props.children, this.renderNavItem)}
       </ul>
     );
diff --git a/src/NavItem.js b/src/NavItem.js
index bae6df5ebd..5364413220 100644
--- a/src/NavItem.js
+++ b/src/NavItem.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const NavItem = React.createClass({
@@ -47,7 +47,7 @@ const NavItem = React.createClass({
     }
 
     return (
-      <li {...props} className={classSet(props.className, classes)}>
+      <li {...props} className={classNames(props.className, classes)}>
         <a {...linkProps}>
           { children }
         </a>
diff --git a/src/Navbar.js b/src/Navbar.js
index 76f3b716b6..a0e81ba31d 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
@@ -73,7 +73,7 @@ const Navbar = React.createClass({
     classes['navbar-inverse'] = this.props.inverse;
 
     return (
-      <ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
+      <ComponentClass {...this.props} className={classNames(this.props.className, classes)}>
         <div className={this.props.fluid ? 'container-fluid' : 'container'}>
           {(this.props.brand || this.props.toggleButton || this.props.toggleNavKey != null) ? this.renderHeader() : null}
           {ValidComponentChildren.map(this.props.children, this.renderChild)}
@@ -97,7 +97,7 @@ const Navbar = React.createClass({
     if (this.props.brand) {
       if (React.isValidElement(this.props.brand)) {
         brand = cloneElement(this.props.brand, {
-          className: classSet(this.props.brand.props.className, 'navbar-brand')
+          className: classNames(this.props.brand.props.className, 'navbar-brand')
         });
       } else {
         brand = <span className="navbar-brand">{this.props.brand}</span>;
@@ -118,7 +118,7 @@ const Navbar = React.createClass({
     if (React.isValidElement(this.props.toggleButton)) {
 
       return cloneElement(this.props.toggleButton, {
-        className: classSet(this.props.toggleButton.props.className, 'navbar-toggle'),
+        className: classNames(this.props.toggleButton.props.className, 'navbar-toggle'),
         onClick: createChainedFunction(this.handleToggle, this.props.toggleButton.props.onClick)
       });
     }
diff --git a/src/PageHeader.js b/src/PageHeader.js
index cc20349658..3628a033ce 100644
--- a/src/PageHeader.js
+++ b/src/PageHeader.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const PageHeader = React.createClass({
   render() {
     return (
-      <div {...this.props} className={classSet(this.props.className, 'page-header')}>
+      <div {...this.props} className={classNames(this.props.className, 'page-header')}>
         <h1>{this.props.children}</h1>
       </div>
     );
diff --git a/src/PageItem.js b/src/PageItem.js
index 90ce6e6857..72a2079cbc 100644
--- a/src/PageItem.js
+++ b/src/PageItem.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const PageItem = React.createClass({
 
@@ -29,7 +29,7 @@ const PageItem = React.createClass({
     return (
       <li
         {...this.props}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         <a
           href={this.props.href}
           title={this.props.title}
diff --git a/src/Pager.js b/src/Pager.js
index fcc7b2db1f..8b1689961c 100644
--- a/src/Pager.js
+++ b/src/Pager.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
@@ -14,7 +14,7 @@ const Pager = React.createClass({
     return (
       <ul
         {...this.props}
-        className={classSet(this.props.className, 'pager')}>
+        className={classNames(this.props.className, 'pager')}>
         {ValidComponentChildren.map(this.props.children, this.renderPageItem)}
       </ul>
     );
diff --git a/src/Panel.js b/src/Panel.js
index d8652bf64a..f56af7ae3d 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import BootstrapMixin from './BootstrapMixin';
 import CollapsableMixin from './CollapsableMixin';
@@ -58,7 +58,7 @@ const Panel = React.createClass({
 
     return (
       <div {...this.props}
-        className={classSet(this.props.className, classes)}
+        className={classNames(this.props.className, classes)}
         id={this.props.collapsable ? null : this.props.id} onSelect={null}>
         {this.renderHeading()}
         {this.props.collapsable ? this.renderCollapsableBody() : this.renderBody()}
@@ -72,7 +72,7 @@ const Panel = React.createClass({
 
     return (
       <div
-        className={classSet(this.getCollapsableClassSet(collapseClass))}
+        className={classNames(this.getCollapsableClassSet(collapseClass))}
         id={this.props.id}
         ref='panel'
         aria-expanded={this.isExpanded() ? 'true' : 'false'}>
@@ -155,13 +155,13 @@ const Panel = React.createClass({
     } else if (this.props.collapsable) {
 
       header = cloneElement(header, {
-        className: classSet(this.prefixClass('title')),
+        className: classNames(this.prefixClass('title')),
         children: this.renderAnchor(header.props.children)
       });
     } else {
 
       header = cloneElement(header, {
-        className: classSet(this.prefixClass('title'))
+        className: classNames(this.prefixClass('title'))
       });
     }
 
diff --git a/src/PanelGroup.js b/src/PanelGroup.js
index 737baec55a..5f2cbd8f58 100644
--- a/src/PanelGroup.js
+++ b/src/PanelGroup.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import BootstrapMixin from './BootstrapMixin';
 import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -31,7 +31,7 @@ const PanelGroup = React.createClass({
   render() {
     let classes = this.getBsClassSet();
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)} onSelect={null}>
+      <div {...this.props} className={classNames(this.props.className, classes)} onSelect={null}>
         {ValidComponentChildren.map(this.props.children, this.renderPanel)}
       </div>
     );
diff --git a/src/Popover.js b/src/Popover.js
index 0782a350ae..c899b86bc2 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Popover = React.createClass({
@@ -39,7 +39,7 @@ const Popover = React.createClass({
     };
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)} style={style} title={null}>
+      <div {...this.props} className={classNames(this.props.className, classes)} style={style} title={null}>
         <div className="arrow" style={arrowStyle} />
         {this.props.title ? this.renderTitle() : null}
         <div className="popover-content">
diff --git a/src/ProgressBar.js b/src/ProgressBar.js
index 73a3fc6034..0b981070c8 100644
--- a/src/ProgressBar.js
+++ b/src/ProgressBar.js
@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 import Interpolate from './Interpolate';
 import BootstrapMixin from './BootstrapMixin';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
@@ -45,7 +45,7 @@ const ProgressBar = React.createClass({
     if (!ValidComponentChildren.hasValidComponent(this.props.children)) {
       if (!this.props.isChild) {
         return (
-          <div {...this.props} className={classSet(this.props.className, classes)}>
+          <div {...this.props} className={classNames(this.props.className, classes)}>
             {this.renderProgressBar()}
           </div>
         );
@@ -56,7 +56,7 @@ const ProgressBar = React.createClass({
       }
     } else {
       return (
-        <div {...this.props} className={classSet(this.props.className, classes)}>
+        <div {...this.props} className={classNames(this.props.className, classes)}>
           {ValidComponentChildren.map(this.props.children, this.renderChildBar)}
         </div>
       );
@@ -92,7 +92,7 @@ const ProgressBar = React.createClass({
     let classes = this.getBsClassSet();
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)} role="progressbar"
+      <div {...this.props} className={classNames(this.props.className, classes)} role="progressbar"
         style={{width: percentage + '%'}}
         aria-valuenow={this.props.now}
         aria-valuemin={this.props.min}
diff --git a/src/Row.js b/src/Row.js
index 239f9403c7..35e3364a8b 100644
--- a/src/Row.js
+++ b/src/Row.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const Row = React.createClass({
   propTypes: {
@@ -16,7 +16,7 @@ const Row = React.createClass({
     let ComponentClass = this.props.componentClass;
 
     return (
-      <ComponentClass {...this.props} className={classSet(this.props.className, 'row')}>
+      <ComponentClass {...this.props} className={classNames(this.props.className, 'row')}>
         {this.props.children}
       </ComponentClass>
     );
diff --git a/src/SplitButton.js b/src/SplitButton.js
index 4fb12a9823..313c3193c8 100644
--- a/src/SplitButton.js
+++ b/src/SplitButton.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import DropdownStateMixin from './DropdownStateMixin';
 import Button from './Button';
@@ -48,7 +48,7 @@ const SplitButton = React.createClass({
       <Button
         {...this.props}
         ref="dropdownButton"
-        className={classSet(this.props.className, 'dropdown-toggle')}
+        className={classNames(this.props.className, 'dropdown-toggle')}
         onClick={this.handleDropdownClick}
         title={null}
         href={null}
@@ -63,7 +63,7 @@ const SplitButton = React.createClass({
     return (
       <ButtonGroup
         bsSize={this.props.bsSize}
-        className={classSet(groupClasses)}
+        className={classNames(groupClasses)}
         id={this.props.id}>
         {button}
         {dropdownButton}
diff --git a/src/SubNav.js b/src/SubNav.js
index 5ff4e18bbe..0b3673b886 100644
--- a/src/SubNav.js
+++ b/src/SubNav.js
@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
@@ -97,7 +97,7 @@ const SubNav = React.createClass({
     };
 
     return (
-      <li {...this.props} className={classSet(this.props.className, classes)}>
+      <li {...this.props} className={classNames(this.props.className, classes)}>
         <a
           href={this.props.href}
           title={this.props.title}
diff --git a/src/TabPane.js b/src/TabPane.js
index 95bf2edccc..2a030e27a6 100644
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import TransitionEvents from './utils/TransitionEvents';
 
 const TabPane = React.createClass({
@@ -75,7 +75,7 @@ const TabPane = React.createClass({
     };
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)}>
+      <div {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/src/Table.js b/src/Table.js
index ee1f2e3e7b..a9c149cadc 100644
--- a/src/Table.js
+++ b/src/Table.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const Table = React.createClass({
   propTypes: {
@@ -19,7 +19,7 @@ const Table = React.createClass({
       'table-hover': this.props.hover
     };
     let table = (
-      <table {...this.props} className={classSet(this.props.className, classes)}>
+      <table {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </table>
     );
diff --git a/src/Tooltip.js b/src/Tooltip.js
index 879d4609bf..cb536097ea 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Tooltip = React.createClass({
@@ -37,7 +37,7 @@ const Tooltip = React.createClass({
     };
 
     return (
-        <div {...this.props} className={classSet(this.props.className, classes)} style={style}>
+        <div {...this.props} className={classNames(this.props.className, classes)} style={style}>
           <div className="tooltip-arrow" style={arrowStyle} />
           <div className="tooltip-inner">
             {this.props.children}
diff --git a/src/Well.js b/src/Well.js
index 2ae40831b9..20398b040e 100644
--- a/src/Well.js
+++ b/src/Well.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Well = React.createClass({
@@ -15,7 +15,7 @@ const Well = React.createClass({
     let classes = this.getBsClassSet();
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)}>
+      <div {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </div>
     );
diff --git a/test/CollapsableMixinSpec.js b/test/CollapsableMixinSpec.js
index 579f4d6a91..3323bdcbe7 100644
--- a/test/CollapsableMixinSpec.js
+++ b/test/CollapsableMixinSpec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import CollapsableMixin from '../src/CollapsableMixin';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 describe('CollapsableMixin', function () {
 
@@ -23,7 +23,7 @@ describe('CollapsableMixin', function () {
         let styles = this.getCollapsableClassSet();
         return (
           <div>
-            <div ref="panel" className={classSet(styles)}>
+            <div ref="panel" className={classNames(styles)}>
               {this.props.children}
             </div>
           </div>