diff --git a/src/class.ts b/src/class.ts
index 4c2bf676..58706bb4 100644
--- a/src/class.ts
+++ b/src/class.ts
@@ -1,37 +1,17 @@
-const FLEX = 'pcui-flex';
-const GRID = 'pcui-grid';
-const HIDDEN = 'pcui-hidden';
-const SCROLLABLE = 'pcui-scrollable';
-const RESIZABLE = 'pcui-resizable';
-const READONLY = 'pcui-readonly';
-const DISABLED = 'pcui-disabled';
-const COLLAPSIBLE = 'pcui-collapsible';
-const COLLAPSED = 'pcui-collapsed';
-const FOCUS = 'pcui-focus';
-const MULTIPLE_VALUES = 'pcui-multiple-values';
-const ERROR = 'pcui-error';
-const FLASH = 'flash';
-const NOT_FLEXIBLE = 'pcui-not-flexible';
-const DEFAULT_MOUSEDOWN = 'pcui-default-mousedown';
-const FONT_REGULAR = 'font-regular';
-const FONT_BOLD = 'font-bold';
-
-export {
-    FLEX,
-    GRID,
-    HIDDEN,
-    SCROLLABLE,
-    RESIZABLE,
-    READONLY,
-    DISABLED,
-    COLLAPSIBLE,
-    COLLAPSED,
-    FOCUS,
-    MULTIPLE_VALUES,
-    ERROR,
-    FLASH,
-    NOT_FLEXIBLE,
-    DEFAULT_MOUSEDOWN,
-    FONT_REGULAR,
-    FONT_BOLD
-};
+export const CLASS_COLLAPSED = 'pcui-collapsed';
+export const CLASS_COLLAPSIBLE = 'pcui-collapsible';
+export const CLASS_DEFAULT_MOUSEDOWN = 'pcui-default-mousedown';
+export const CLASS_DISABLED = 'pcui-disabled';
+export const CLASS_ERROR = 'pcui-error';
+export const CLASS_FLASH = 'flash';
+export const CLASS_FLEX = 'pcui-flex';
+export const CLASS_FOCUS = 'pcui-focus';
+export const CLASS_FONT_REGULAR = 'font-regular';
+export const CLASS_FONT_BOLD = 'font-bold';
+export const CLASS_GRID = 'pcui-grid';
+export const CLASS_HIDDEN = 'pcui-hidden';
+export const CLASS_MULTIPLE_VALUES = 'pcui-multiple-values';
+export const CLASS_NOT_FLEXIBLE = 'pcui-not-flexible';
+export const CLASS_READONLY = 'pcui-readonly';
+export const CLASS_RESIZABLE = 'pcui-resizable';
+export const CLASS_SCROLLABLE = 'pcui-scrollable';
diff --git a/src/components/BooleanInput/index.ts b/src/components/BooleanInput/index.ts
index 2220281d..e10c9483 100644
--- a/src/components/BooleanInput/index.ts
+++ b/src/components/BooleanInput/index.ts
@@ -1,5 +1,5 @@
+import { CLASS_NOT_FLEXIBLE, CLASS_MULTIPLE_VALUES } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element';
-import * as pcuiClass from '../../class';
 
 const CLASS_BOOLEAN_INPUT = 'pcui-boolean-input';
 const CLASS_BOOLEAN_INPUT_TICKED = CLASS_BOOLEAN_INPUT + '-ticked';
@@ -40,7 +40,7 @@ class BooleanInput extends Element implements IBindable, IFocusable {
         } else {
             this.class.add(CLASS_BOOLEAN_INPUT);
         }
-        this.class.add(pcuiClass.NOT_FLEXIBLE);
+        this.class.add(CLASS_NOT_FLEXIBLE);
 
         this.dom.addEventListener('keydown', this._onKeyDown);
         this.dom.addEventListener('focus', this._onFocus);
@@ -100,7 +100,7 @@ class BooleanInput extends Element implements IBindable, IFocusable {
     };
 
     protected _updateValue(value: boolean) {
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         if (value === this.value) return false;
 
@@ -146,7 +146,7 @@ class BooleanInput extends Element implements IBindable, IFocusable {
 
         if (different) {
             this._updateValue(null);
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
             this._updateValue(values[0]);
         }
diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts
index 5709ed53..58453f58 100644
--- a/src/components/ColorPicker/index.ts
+++ b/src/components/ColorPicker/index.ts
@@ -1,10 +1,10 @@
 import { EventHandle } from '@playcanvas/observer';
 
+import { CLASS_MULTIPLE_VALUES, CLASS_NOT_FLEXIBLE } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs } from '../Element';
 import Overlay from '../Overlay';
 import NumericInput from '../NumericInput';
 import TextInput from '../TextInput';
-import * as pcuiClass from '../../class';
 import { _hsv2rgb, _rgb2hsv } from '../../Math/color-value';
 
 const CLASS_ROOT = 'pcui-color-input';
@@ -99,7 +99,7 @@ class ColorPicker extends Element implements IBindable {
     constructor(args: Readonly<ColorPickerArgs> = {}) {
         super(args);
 
-        this.class.add(CLASS_ROOT, pcuiClass.NOT_FLEXIBLE);
+        this.class.add(CLASS_ROOT, CLASS_NOT_FLEXIBLE);
 
         // this element shows the actual color. The
         // parent element shows the checkerboard pattern
@@ -451,7 +451,7 @@ class ColorPicker extends Element implements IBindable {
             }
         }
 
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         if (dirty) {
             this._setValue(value);
@@ -744,7 +744,7 @@ class ColorPicker extends Element implements IBindable {
 
         if (different) {
             this.value = null;
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
             // @ts-ignore
             this.value = values[0];
diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts
index 07c03b43..452e2d74 100644
--- a/src/components/Container/index.ts
+++ b/src/components/Container/index.ts
@@ -1,5 +1,5 @@
+import { CLASS_FLEX, CLASS_GRID, CLASS_RESIZABLE, CLASS_SCROLLABLE } from '../../class';
 import Element, { ElementArgs, IFlexArgs, IParentArgs } from '../Element';
-import * as pcuiClass from '../../class';
 
 const RESIZE_HANDLE_SIZE = 4;
 
@@ -11,7 +11,7 @@ const VALID_RESIZABLE_VALUES = [
     'left'
 ];
 
-const CLASS_RESIZING = pcuiClass.RESIZABLE + '-resizing';
+const CLASS_RESIZING = CLASS_RESIZABLE + '-resizing';
 const CLASS_RESIZABLE_HANDLE = 'pcui-resizable-handle';
 const CLASS_CONTAINER = 'pcui-container';
 
@@ -643,9 +643,9 @@ class Container extends Element {
         this._flex = value;
 
         if (value) {
-            this.class.add(pcuiClass.FLEX);
+            this.class.add(CLASS_FLEX);
         } else {
-            this.class.remove(pcuiClass.FLEX);
+            this.class.remove(CLASS_FLEX);
         }
     }
 
@@ -662,9 +662,9 @@ class Container extends Element {
         this._grid = value;
 
         if (value) {
-            this.class.add(pcuiClass.GRID);
+            this.class.add(CLASS_GRID);
         } else {
-            this.class.remove(pcuiClass.GRID);
+            this.class.remove(CLASS_GRID);
         }
     }
 
@@ -681,9 +681,9 @@ class Container extends Element {
         this._scrollable = value;
 
         if (value) {
-            this.class.add(pcuiClass.SCROLLABLE);
+            this.class.add(CLASS_SCROLLABLE);
         } else {
-            this.class.remove(pcuiClass.SCROLLABLE);
+            this.class.remove(CLASS_SCROLLABLE);
         }
 
     }
@@ -706,7 +706,7 @@ class Container extends Element {
 
         // remove old class
         if (this._resizable) {
-            this.class.remove(`${pcuiClass.RESIZABLE}-${this._resizable}`);
+            this.class.remove(`${CLASS_RESIZABLE}-${this._resizable}`);
         }
 
         this._resizable = value;
@@ -714,8 +714,8 @@ class Container extends Element {
 
         if (value) {
             // add resize class and create / append resize handle
-            this.class.add(pcuiClass.RESIZABLE);
-            this.class.add(`${pcuiClass.RESIZABLE}-${value}`);
+            this.class.add(CLASS_RESIZABLE);
+            this.class.add(`${CLASS_RESIZABLE}-${value}`);
 
             if (!this._domResizeHandle) {
                 this._createResizeHandle();
@@ -723,7 +723,7 @@ class Container extends Element {
             this._dom.appendChild(this._domResizeHandle);
         } else {
             // remove resize class and resize handle
-            this.class.remove(pcuiClass.RESIZABLE);
+            this.class.remove(CLASS_RESIZABLE);
             if (this._domResizeHandle) {
                 this._dom.removeChild(this._domResizeHandle);
             }
diff --git a/src/components/Element/index.ts b/src/components/Element/index.ts
index d590bebc..ab13d1b9 100644
--- a/src/components/Element/index.ts
+++ b/src/components/Element/index.ts
@@ -1,7 +1,7 @@
 import { EventHandle, Events, HandleEvent, Observer } from '@playcanvas/observer';
 import * as React from 'react';
-import * as pcuiClass from '../../class';
 
+import { CLASS_DISABLED, CLASS_ERROR, CLASS_FLASH, CLASS_FONT_REGULAR, CLASS_HIDDEN, CLASS_READONLY } from '../../class';
 import { BindingBase } from '../../binding';
 
 const CLASS_ELEMENT = 'pcui-element';
@@ -437,7 +437,7 @@ class Element extends Events {
         this._dom.addEventListener('mouseout', this._onMouseOut);
 
         // add css classes
-        this._dom.classList.add(CLASS_ELEMENT, pcuiClass.FONT_REGULAR);
+        this._dom.classList.add(CLASS_ELEMENT, CLASS_FONT_REGULAR);
 
         // add user classes
         if (args.class) {
@@ -575,10 +575,10 @@ class Element extends Events {
     flash() {
         if (this._flashTimeout) return;
 
-        this.class.add(pcuiClass.FLASH);
+        this.class.add(CLASS_FLASH);
         this._flashTimeout = window.setTimeout(() => {
             this._flashTimeout = null;
-            this.class.remove(pcuiClass.FLASH);
+            this.class.remove(CLASS_FLASH);
         }, 200);
     }
 
@@ -602,9 +602,9 @@ class Element extends Events {
 
     protected _onEnabledChange(enabled: boolean) {
         if (enabled) {
-            this.class.remove(pcuiClass.DISABLED);
+            this.class.remove(CLASS_DISABLED);
         } else {
-            this.class.add(pcuiClass.DISABLED);
+            this.class.add(CLASS_DISABLED);
         }
 
         this.emit(enabled ? 'enable' : 'disable');
@@ -646,9 +646,9 @@ class Element extends Events {
 
     protected _onReadOnlyChange(readOnly: boolean) {
         if (readOnly) {
-            this.class.add(pcuiClass.READONLY);
+            this.class.add(CLASS_READONLY);
         } else {
-            this.class.remove(pcuiClass.READONLY);
+            this.class.remove(CLASS_READONLY);
         }
 
         this.emit('readOnly', readOnly);
@@ -815,9 +815,9 @@ class Element extends Events {
         this._hidden = value;
 
         if (value) {
-            this.class.add(pcuiClass.HIDDEN);
+            this.class.add(CLASS_HIDDEN);
         } else {
-            this.class.remove(pcuiClass.HIDDEN);
+            this.class.remove(CLASS_HIDDEN);
         }
 
         this.emit(value ? 'hide' : 'show');
@@ -863,9 +863,9 @@ class Element extends Events {
         if (this._hasError === value) return;
         this._hasError = value;
         if (value) {
-            this.class.add(pcuiClass.ERROR);
+            this.class.add(CLASS_ERROR);
         } else {
-            this.class.remove(pcuiClass.ERROR);
+            this.class.remove(CLASS_ERROR);
         }
     }
 
diff --git a/src/components/InputElement/index.ts b/src/components/InputElement/index.ts
index 0d30a719..33dfe90c 100644
--- a/src/components/InputElement/index.ts
+++ b/src/components/InputElement/index.ts
@@ -1,5 +1,5 @@
+import { CLASS_FOCUS } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element';
-import * as pcuiClass from '../../class';
 
 const CLASS_INPUT_ELEMENT = 'pcui-input-element';
 
@@ -116,13 +116,13 @@ abstract class InputElement extends Element implements IBindable, IFocusable, IP
     }
 
     protected _onInputFocus = (evt: FocusEvent) => {
-        this.class.add(pcuiClass.FOCUS);
+        this.class.add(CLASS_FOCUS);
         this.emit('focus', evt);
         this._prevValue = this._domInput.value;
     };
 
     protected _onInputBlur = (evt: FocusEvent) => {
-        this.class.remove(pcuiClass.FOCUS);
+        this.class.remove(CLASS_FOCUS);
         this.emit('blur', evt);
     };
 
diff --git a/src/components/Label/index.ts b/src/components/Label/index.ts
index 403217a8..c27f03f6 100644
--- a/src/components/Label/index.ts
+++ b/src/components/Label/index.ts
@@ -1,4 +1,4 @@
-import * as pcuiClass from '../../class';
+import { CLASS_DEFAULT_MOUSEDOWN, CLASS_MULTIPLE_VALUES } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs, IFlexArgs, IPlaceholder, IPlaceholderArgs } from '../Element';
 
 const CLASS_LABEL = 'pcui-label';
@@ -59,7 +59,7 @@ class Label extends Element implements IPlaceholder, IBindable {
         this.text = args.text ?? args.value ?? '';
 
         if (args.allowTextSelection) {
-            this.class.add(pcuiClass.DEFAULT_MOUSEDOWN);
+            this.class.add(CLASS_DEFAULT_MOUSEDOWN);
         }
 
         if (args.nativeTooltip) {
@@ -77,7 +77,7 @@ class Label extends Element implements IPlaceholder, IBindable {
     }
 
     protected _updateText(value: string) {
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         if (this._text === value) return false;
 
@@ -127,7 +127,7 @@ class Label extends Element implements IPlaceholder, IBindable {
 
         if (different) {
             this._updateText('');
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
             this._updateText(values[0]);
         }
diff --git a/src/components/NumericInput/index.ts b/src/components/NumericInput/index.ts
index 1a56a181..894051a2 100644
--- a/src/components/NumericInput/index.ts
+++ b/src/components/NumericInput/index.ts
@@ -1,6 +1,6 @@
+import { CLASS_MULTIPLE_VALUES } from '../../class';
 import Element from '../Element';
 import InputElement, { InputElementArgs } from '../InputElement';
-import * as pcuiClass from '../../class';
 
 const CLASS_NUMERIC_INPUT = 'pcui-numeric-input';
 const CLASS_NUMERIC_INPUT_SLIDER_CONTROL = CLASS_NUMERIC_INPUT + '-slider-control';
@@ -298,7 +298,7 @@ class NumericInput extends InputElement {
             this._domInput.value = String(value);
         }
 
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         if (different) {
             this.emit('change', value);
@@ -309,7 +309,7 @@ class NumericInput extends InputElement {
 
     set value(value: number) {
         value = this._normalizeValue(value);
-        const forceUpdate = this.class.contains(pcuiClass.MULTIPLE_VALUES) && value === null && this._allowNull;
+        const forceUpdate = this.class.contains(CLASS_MULTIPLE_VALUES) && value === null && this._allowNull;
         const changed = this._updateValue(value, forceUpdate);
 
         if (changed && this.binding) {
@@ -332,7 +332,7 @@ class NumericInput extends InputElement {
 
         if (different) {
             this._updateValue(null);
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
             if (this._sliderControl) {
                 this._sliderControl.class.add(CLASS_NUMERIC_INPUT_SLIDER_CONTROL_HIDDEN);
             }
diff --git a/src/components/Panel/index.ts b/src/components/Panel/index.ts
index ca46ecc9..a82c84e1 100644
--- a/src/components/Panel/index.ts
+++ b/src/components/Panel/index.ts
@@ -1,4 +1,4 @@
-import * as pcuiClass from '../../class';
+import { CLASS_COLLAPSED, CLASS_COLLAPSIBLE, CLASS_FONT_BOLD } from '../../class';
 import Element from '../Element';
 import Container, { ContainerArgs } from '../Container';
 import Label from '../Label';
@@ -196,13 +196,13 @@ class Panel extends Container {
         this._containerHeader = new Container({
             flex: true,
             flexDirection: 'row',
-            class: [CLASS_PANEL_HEADER, pcuiClass.FONT_BOLD]
+            class: [CLASS_PANEL_HEADER, CLASS_FONT_BOLD]
         });
 
         // header title
         this._labelTitle = new Label({
             text: args.headerText,
-            class: [CLASS_PANEL_HEADER_TITLE, pcuiClass.FONT_BOLD]
+            class: [CLASS_PANEL_HEADER_TITLE, CLASS_FONT_BOLD]
         });
         this._containerHeader.append(this._labelTitle);
 
@@ -285,11 +285,11 @@ class Panel extends Container {
                 // add collapsed class after getting the width and height
                 // because if we add it before then because of overflow:hidden
                 // we might get inaccurate width/heights.
-                this.class.add(pcuiClass.COLLAPSED);
+                this.class.add(CLASS_COLLAPSED);
             } else {
                 // remove collapsed class first and the restore width and height
                 // (opposite order of collapsing)
-                this.class.remove(pcuiClass.COLLAPSED);
+                this.class.remove(CLASS_COLLAPSED);
 
                 if (this._collapseHorizontally) {
                     this.height = '';
@@ -362,9 +362,9 @@ class Panel extends Container {
         this._collapsible = value;
 
         if (value) {
-            this.class.add(pcuiClass.COLLAPSIBLE);
+            this.class.add(CLASS_COLLAPSIBLE);
         } else {
-            this.class.remove(pcuiClass.COLLAPSIBLE);
+            this.class.remove(CLASS_COLLAPSIBLE);
         }
 
         this._reflow();
diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts
index a7f7839f..60f2fc49 100644
--- a/src/components/RadioButton/index.ts
+++ b/src/components/RadioButton/index.ts
@@ -1,5 +1,5 @@
+import { CLASS_MULTIPLE_VALUES, CLASS_NOT_FLEXIBLE } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element';
-import * as pcuiClass from '../../class';
 
 const CLASS_RADIO_BUTTON = 'pcui-radio-button';
 const CLASS_RADIO_BUTTON_SELECTED = CLASS_RADIO_BUTTON + '-selected';
@@ -26,7 +26,7 @@ class RadioButton extends Element implements IBindable, IFocusable {
         super({ tabIndex: 0, ...args });
 
         this.class.add(CLASS_RADIO_BUTTON);
-        this.class.add(pcuiClass.NOT_FLEXIBLE);
+        this.class.add(CLASS_NOT_FLEXIBLE);
 
         this.dom.addEventListener('keydown', this._onKeyDown);
         this.dom.addEventListener('focus', this._onFocus);
@@ -82,7 +82,7 @@ class RadioButton extends Element implements IBindable, IFocusable {
     };
 
     protected _updateValue(value: boolean) {
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         if (value === this.value) return false;
 
@@ -128,7 +128,7 @@ class RadioButton extends Element implements IBindable, IFocusable {
 
         if (different) {
             this._updateValue(null);
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
             this._updateValue(values[0]);
         }
diff --git a/src/components/SelectInput/index.ts b/src/components/SelectInput/index.ts
index 82df3c15..48d7f709 100644
--- a/src/components/SelectInput/index.ts
+++ b/src/components/SelectInput/index.ts
@@ -1,9 +1,9 @@
+import { CLASS_FOCUS, CLASS_MULTIPLE_VALUES } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholderArgs } from '../Element';
 import Container from '../Container';
 import TextInput from '../TextInput';
 import Button from '../Button';
 import Label from '../Label';
-import * as pcuiClass from '../../class';
 import { searchItems } from '../../helpers/search';
 
 const CLASS_SELECT_INPUT = 'pcui-select-input';
@@ -818,7 +818,7 @@ class SelectInput extends Element implements IBindable, IFocusable {
     };
 
     protected _onFocus = () => {
-        this.class.add(pcuiClass.FOCUS);
+        this.class.add(CLASS_FOCUS);
         this.emit('focus');
         if (!this._input.hidden) {
             this.open();
@@ -826,7 +826,7 @@ class SelectInput extends Element implements IBindable, IFocusable {
     };
 
     protected _onBlur = () => {
-        this.class.remove(pcuiClass.FOCUS);
+        this.class.remove(CLASS_FOCUS);
         this.emit('blur');
     };
 
@@ -1145,7 +1145,7 @@ class SelectInput extends Element implements IBindable, IFocusable {
         }
         this._suspendInputChange = false;
 
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         value = this._convertValue(value);
 
@@ -1153,7 +1153,7 @@ class SelectInput extends Element implements IBindable, IFocusable {
             // if the value is null because we are showing multiple values
             // but someone wants to actually set the value of all observers to null
             // then make sure we do not return early
-            if (value !== null || !this._allowNull || !this.class.contains(pcuiClass.MULTIPLE_VALUES)) {
+            if (value !== null || !this._allowNull || !this.class.contains(CLASS_MULTIPLE_VALUES)) {
                 return;
             }
         }
@@ -1213,7 +1213,7 @@ class SelectInput extends Element implements IBindable, IFocusable {
                 }
             }
 
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
             this.value = values[0];
         }
diff --git a/src/components/SliderInput/index.ts b/src/components/SliderInput/index.ts
index 97e70155..b33ecb44 100644
--- a/src/components/SliderInput/index.ts
+++ b/src/components/SliderInput/index.ts
@@ -1,6 +1,6 @@
+import { CLASS_MULTIPLE_VALUES } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs, IFlexArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element';
 import NumericInput from '../NumericInput';
-import * as pcuiClass from '../../class';
 
 const CLASS_SLIDER = 'pcui-slider';
 const CLASS_SLIDER_CONTAINER = CLASS_SLIDER + '-container';
@@ -334,10 +334,10 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
 
     set value(value) {
         this._numericInput.value = value;
-        if (this._numericInput.class.contains(pcuiClass.MULTIPLE_VALUES)) {
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+        if (this._numericInput.class.contains(CLASS_MULTIPLE_VALUES)) {
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
-            this.class.remove(pcuiClass.MULTIPLE_VALUES);
+            this.class.remove(CLASS_MULTIPLE_VALUES);
         }
     }
 
@@ -348,10 +348,10 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
     /* eslint accessor-pairs: 0 */
     set values(values: Array<number>) {
         this._numericInput.values = values;
-        if (this._numericInput.class.contains(pcuiClass.MULTIPLE_VALUES)) {
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+        if (this._numericInput.class.contains(CLASS_MULTIPLE_VALUES)) {
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
-            this.class.remove(pcuiClass.MULTIPLE_VALUES);
+            this.class.remove(CLASS_MULTIPLE_VALUES);
         }
     }
 
diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts
index 6cbbaa08..93418566 100644
--- a/src/components/TextInput/index.ts
+++ b/src/components/TextInput/index.ts
@@ -1,6 +1,6 @@
+import { CLASS_MULTIPLE_VALUES } from '../../class';
 import Element, { IBindableArgs, IPlaceholderArgs } from '../Element';
 import InputElement, { InputElementArgs } from '../InputElement';
-import * as pcuiClass from '../../class';
 
 const CLASS_TEXT_INPUT = 'pcui-text-input';
 
@@ -58,7 +58,7 @@ class TextInput extends InputElement {
     }
 
     protected _updateValue(value: string | Array<string>) {
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         if (value && typeof (value) === 'object') {
             if (Array.isArray(value)) {
@@ -112,7 +112,7 @@ class TextInput extends InputElement {
 
         if (different) {
             this._updateValue(null);
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
             this._updateValue(values[0]);
         }
diff --git a/src/components/TreeViewItem/index.ts b/src/components/TreeViewItem/index.ts
index 715f43d5..186c1b39 100644
--- a/src/components/TreeViewItem/index.ts
+++ b/src/components/TreeViewItem/index.ts
@@ -1,8 +1,8 @@
+import { CLASS_FONT_REGULAR } from '../../class';
 import Element from '../Element';
 import Label from '../Label';
 import Container, { ContainerArgs } from '../Container';
 import TextInput from '../TextInput';
-import * as pcuiClass from '../../class';
 
 const CLASS_ROOT = 'pcui-treeview-item';
 const CLASS_ICON = CLASS_ROOT + '-icon';
@@ -359,7 +359,7 @@ class TreeViewItem extends Container {
         const textInput = new TextInput({
             renderChanges: false,
             value: this.text,
-            class: pcuiClass.FONT_REGULAR
+            class: CLASS_FONT_REGULAR
         });
 
         textInput.on('blur', () => {
diff --git a/src/components/VectorInput/index.ts b/src/components/VectorInput/index.ts
index 10cf40b4..b7f4e780 100644
--- a/src/components/VectorInput/index.ts
+++ b/src/components/VectorInput/index.ts
@@ -1,7 +1,7 @@
 import { Observer } from '@playcanvas/observer';
+import { CLASS_FOCUS, CLASS_MULTIPLE_VALUES } from '../../class';
 import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element';
 import NumericInput from '../NumericInput';
-import * as pcuiClass from '../../class';
 
 const CLASS_VECTOR_INPUT = 'pcui-vector-input';
 
@@ -76,7 +76,7 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
                 if (this._bindAllInputs) {
                     input.focus();
                     for (let i = 0; i < this._inputs.length; i++) {
-                        this._inputs[i].class.add(pcuiClass.FOCUS);
+                        this._inputs[i].class.add(CLASS_FOCUS);
                     }
 
                     if (this.binding) {
@@ -88,7 +88,7 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
                 this._onInputChange(input);
                 this._bindAllInputs = false;
                 for (let i = 0; i < this._inputs.length; i++) {
-                    this._inputs[i].class.remove(pcuiClass.FOCUS);
+                    this._inputs[i].class.remove(CLASS_FOCUS);
                 }
                 input.blur();
 
@@ -127,12 +127,12 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
         if (this._applyingChange) return;
 
         // check if any of our inputs have the MULTIPLE_VALUES class and if so inherit it for us as well
-        const multipleValues = this._inputs.some(input => input.class.contains(pcuiClass.MULTIPLE_VALUES));
+        const multipleValues = this._inputs.some(input => input.class.contains(CLASS_MULTIPLE_VALUES));
 
         if (multipleValues) {
-            this.class.add(pcuiClass.MULTIPLE_VALUES);
+            this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
-            this.class.remove(pcuiClass.MULTIPLE_VALUES);
+            this.class.remove(CLASS_MULTIPLE_VALUES);
         }
 
         if (this._bindAllInputs) {
@@ -149,7 +149,7 @@ class VectorInput extends Element implements IBindable, IFocusable, IPlaceholder
     }
 
     protected _updateValue(value: number[]) {
-        this.class.remove(pcuiClass.MULTIPLE_VALUES);
+        this.class.remove(CLASS_MULTIPLE_VALUES);
 
         if (JSON.stringify(this.value) === JSON.stringify(value)) return false;