Remove all default exports

src/binding/BindingBase/index.ts

@@ -288,4 +288,4 @@ class BindingBase extends Events {
     }
 }
 
-export default BindingBase;
+export { BindingBase };

src/binding/BindingElementToObservers/index.ts

@@ -1,5 +1,5 @@
 import { Observer } from '@playcanvas/observer';
-import BindingBase from '../BindingBase';
+import { BindingBase } from '../BindingBase';
 
 /**
  * Provides one way binding between an {@link IBindable} element and Observers. Any changes from
@@ -340,4 +340,4 @@ class BindingElementToObservers extends BindingBase {
     }
 }
 
-export default BindingElementToObservers;
+export { BindingElementToObservers };

src/binding/BindingObserversToElement/index.ts

@@ -1,6 +1,6 @@
 import { EventHandle, Observer } from '@playcanvas/observer';
 import { IBindable } from '../../components';
-import BindingBase, { BindingBaseArgs } from '../BindingBase';
+import { BindingBase, BindingBaseArgs } from '../BindingBase';
 
 export interface BindingObserversToElementArgs extends BindingBaseArgs {
     /**
@@ -131,4 +131,4 @@ class BindingObserversToElement extends BindingBase {
     }
 }
 
-export default BindingObserversToElement;
+export { BindingObserversToElement };

src/binding/BindingTwoWay/index.ts

@@ -1,6 +1,6 @@
-import BindingBase, { BindingBaseArgs } from '../BindingBase';
-import BindingElementToObservers from '../BindingElementToObservers';
-import BindingObserversToElement from '../BindingObserversToElement';
+import { BindingBase, BindingBaseArgs } from '../BindingBase';
+import { BindingElementToObservers } from '../BindingElementToObservers';
+import { BindingObserversToElement } from '../BindingObserversToElement';
 import { Observer } from '@playcanvas/observer';
 import { IBindable } from '../../components/Element';
 
@@ -153,4 +153,4 @@ class BindingTwoWay extends BindingBase {
     }
 }
 
-export default BindingTwoWay;
+export { BindingTwoWay };

src/binding/index.ts

@@ -1,7 +1,7 @@
-import BindingBase, { BindingBaseArgs } from './BindingBase';
-import BindingElementToObservers from './BindingElementToObservers';
-import BindingObserversToElement, { BindingObserversToElementArgs } from './BindingObserversToElement';
-import BindingTwoWay, { BindingTwoWayArgs } from './BindingTwoWay';
+import { BindingBase, BindingBaseArgs } from './BindingBase';
+import { BindingElementToObservers } from './BindingElementToObservers';
+import { BindingObserversToElement, BindingObserversToElementArgs } from './BindingObserversToElement';
+import { BindingTwoWay, BindingTwoWayArgs } from './BindingTwoWay';
 
 export {
     BindingBase,

src/components/ArrayInput/component.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import ArrayInput from './component';
+import { ArrayInput } from './component';
 
 import '../../scss/index.js';
 

src/components/ArrayInput/component.tsx

@@ -1,20 +1,20 @@
-import Element, { ArrayInputArgs } from './index';
-import BaseComponent from '../Element/component';
+import { ArrayInput as ArrayInputClass, ArrayInputArgs } from './index';
+import { Element } from '../Element/component';
 
 /**
  * Element that allows editing an array of values.
  */
-class Component extends BaseComponent <ArrayInputArgs, any> {
+class ArrayInput extends Element<ArrayInputArgs, any> {
     constructor(props: ArrayInputArgs) {
         super(props);
-        this.elementClass = Element;
+        this.elementClass = ArrayInputClass;
     }
 
     render() {
         return super.render();
     }
 }
 
-Component.ctor = Element;
+ArrayInput.ctor = ArrayInputClass;
 
-export default Component;
+export { ArrayInput };

src/components/ArrayInput/index.ts

@@ -1,10 +1,10 @@
 import { Observer } from '@playcanvas/observer';
 import * as utils from '../../helpers/utils';
-import Element, { ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element';
-import Container from '../Container';
-import Panel from '../Panel';
-import NumericInput from '../NumericInput';
-import Button from '../Button';
+import { Button } from '../Button';
+import { Container } from '../Container';
+import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element';
+import { NumericInput } from '../NumericInput';
+import { Panel } from '../Panel';
 
 const CLASS_ARRAY_INPUT = 'pcui-array-input';
 const CLASS_ARRAY_EMPTY = 'pcui-array-empty';
@@ -16,7 +16,7 @@ const CLASS_ARRAY_DELETE = CLASS_ARRAY_ELEMENT + '-delete';
 /**
  * The arguments for the {@link ArrayInput} constructor.
  */
-export interface ArrayInputArgs extends ElementArgs, IBindableArgs {
+interface ArrayInputArgs extends ElementArgs, IBindableArgs {
     /**
      * The type of values that the array can hold. Can be one of the following:
      *
@@ -602,4 +602,4 @@ for (const type in ArrayInput.DEFAULTS) {
 }
 Element.register('array:select', ArrayInput, { type: 'select', renderChanges: true });
 
-export default ArrayInput;
+export { ArrayInput, ArrayInputArgs };

src/components/BooleanInput/component.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import BooleanInput from './component';
+import { BooleanInput } from './component';
 
 import '../../scss/index.js';
 

src/components/BooleanInput/component.tsx

@@ -1,20 +1,20 @@
-import Element, { BooleanInputArgs } from './index';
-import BaseComponent from '../Element/component';
+import { BooleanInput as BooleanInputClass, BooleanInputArgs } from './index';
+import { Element } from '../Element/component';
 
 /**
  * A checkbox element.
  */
-class Component extends BaseComponent <BooleanInputArgs, any> {
+class BooleanInput extends Element<BooleanInputArgs, any> {
     constructor(props: BooleanInputArgs = {}) {
         super(props);
-        this.elementClass = Element;
+        this.elementClass = BooleanInputClass;
     }
 
     render() {
         return super.render();
     }
 }
 
-Component.ctor = Element;
+BooleanInput.ctor = BooleanInputClass;
 
-export default Component;
+export { BooleanInput };

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 { Element, ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element';
 
 const CLASS_BOOLEAN_INPUT = 'pcui-boolean-input';
 const CLASS_BOOLEAN_INPUT_TICKED = CLASS_BOOLEAN_INPUT + '-ticked';
@@ -8,7 +8,7 @@ const CLASS_BOOLEAN_INPUT_TOGGLE = CLASS_BOOLEAN_INPUT + '-toggle';
 /**
  * The arguments for the {@link BooleanInput} constructor.
  */
-export interface BooleanInputArgs extends ElementArgs, IBindableArgs {
+interface BooleanInputArgs extends ElementArgs, IBindableArgs {
     /**
      * Sets the tabIndex of the {@link BooleanInput}. Defaults to 0.
      */
@@ -163,4 +163,4 @@ class BooleanInput extends Element implements IBindable, IFocusable {
 
 Element.register('boolean', BooleanInput, { renderChanges: true });
 
-export default BooleanInput;
+export { BooleanInput, BooleanInputArgs };

src/components/Button/component.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import Button from './component';
+import { Button } from './component';
 
 import '../../scss/index.js';
 

src/components/Button/component.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import Element, { ButtonArgs } from './index';
-import BaseComponent from '../Element/component';
+import { Button as ButtonClass, ButtonArgs } from './index';
+import { Element } from '../Element/component';
 
 /**
  * User input with click interaction
  */
-class Component extends BaseComponent <ButtonArgs, any> {
+class Button extends Element<ButtonArgs, any> {
     constructor(props: ButtonArgs = {}) {
         super(props);
-        this.elementClass = Element;
+        this.elementClass = ButtonClass;
     }
 
     render() {
@@ -17,6 +17,6 @@ class Component extends BaseComponent <ButtonArgs, any> {
     }
 }
 
-Component.ctor = Element;
+Button.ctor = ButtonClass;
 
-export default Component;
+export { Button };

src/components/Button/index.ts

@@ -1,11 +1,11 @@
-import Element, { ElementArgs } from '../Element';
+import { Element, ElementArgs } from '../Element';
 
 const CLASS_BUTTON = 'pcui-button';
 
 /**
  * The arguments for the {@link Button} constructor.
  */
-export interface ButtonArgs extends ElementArgs {
+interface ButtonArgs extends ElementArgs {
     /**
      * If `true`, the {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML innerHTML} property will be
      * used to set the text. Otherwise, {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent textContent}
@@ -156,4 +156,4 @@ class Button extends Element {
 
 Element.register('button', Button);
 
-export default Button;
+export { Button, ButtonArgs };

src/components/Canvas/component.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Canvas from './component';
+import { Canvas } from './component';
 
 import '../../scss/index.js';
 

src/components/Canvas/component.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import Element, { CanvasArgs } from './index';
-import BaseComponent from '../Element/component';
+import { Canvas as CanvasClass, CanvasArgs } from './index';
+import { Element } from '../Element/component';
 
 /**
  * Represents a Canvas
  */
-class Component extends BaseComponent <CanvasArgs, any> {
+class Canvas extends Element<CanvasArgs, any> {
     constructor(props: CanvasArgs = {}) {
         super(props);
-        this.elementClass = Element;
+        this.elementClass = CanvasClass;
     }
 
     render() {
@@ -17,6 +17,6 @@ class Component extends BaseComponent <CanvasArgs, any> {
     }
 }
 
-Component.ctor = Element;
+Canvas.ctor = CanvasClass;
 
-export default Component;
+export { Canvas };

src/components/Canvas/index.ts

@@ -1,11 +1,11 @@
-import Element, { ElementArgs } from '../Element';
+import { Element, ElementArgs } from '../Element';
 
 const CLASS_ROOT = 'pcui-canvas';
 
 /**
  * The arguments for the {@link Canvas} constructor.
  */
-export interface CanvasArgs extends ElementArgs {
+interface CanvasArgs extends ElementArgs {
     /**
      * Whether the canvas should use the {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio devicePixelRatio}.
      * Defaults to `false`.
@@ -135,4 +135,4 @@ class Canvas extends Element {
 
 Element.register('canvas', Canvas);
 
-export default Canvas;
+export { Canvas, CanvasArgs };

src/components/Code/component.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Code from './component';
+import { Code } from './component';
 
 import '../../scss/index.js';
 

src/components/Code/component.tsx

@@ -1,22 +1,22 @@
-import Element, { CodeArgs } from './index';
-import BaseComponent from '../Element/component';
+import { Code as CodeClass, CodeArgs } from './index';
+import { Element } from '../Element/component';
 
 /**
  * Represents a code block.
  */
-class Component extends BaseComponent <CodeArgs, any> {
+class Code extends Element<CodeArgs, any> {
     static defaultProps: CodeArgs;
 
     constructor(props: CodeArgs) {
         super(props);
-        this.elementClass = Element;
+        this.elementClass = CodeClass;
     }
 
     render() {
         return super.render();
     }
 }
 
-Component.ctor = Element;
+Code.ctor = CodeClass;
 
-export default Component;
+export { Code };

src/components/Code/index.ts

@@ -1,14 +1,14 @@
-import Element from '../Element';
-import Container, { ContainerArgs } from '../Container';
-import Label from '../Label';
+import { Container, ContainerArgs } from '../Container';
+import { Element } from '../Element';
+import { Label } from '../Label';
 
 const CLASS_ROOT = 'pcui-code';
 const CLASS_INNER = CLASS_ROOT + '-inner';
 
 /**
  * The arguments for the {@link Code} constructor.
  */
-export interface CodeArgs extends ContainerArgs {
+interface CodeArgs extends ContainerArgs {
     /**
      * Sets the text to display in the code block.
      */
@@ -61,4 +61,4 @@ class Code extends Container {
 
 Element.register('code', Code);
 
-export default Code;
+export { Code, CodeArgs };

src/components/ColorPicker/component.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import ColorPicker from './component';
+import { ColorPicker } from './component';
 
 import '../../scss/index.js';