@modernpoacher/gremlins 0.0.241 → 0.0.243

package/babel.config.cjs

@@ -40,51 +40,7 @@ const presets = [
 ]
 
 const plugins = [
-  '@babel/syntax-jsx',
-  [
-    'module-resolver', {
-      alias: {
-        /**
-         *  Jest & Storybook
-         */
-        '@modernpoacher/gremlins/common': './src/common/index.mjs',
-        '@modernpoacher/gremlins/gremlins/checkbox/field': './src/gremlins/checkbox/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/checkbox': './src/gremlins/checkbox/index.jsx',
-        '@modernpoacher/gremlins/gremlins/email/field': './src/gremlins/email/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/email': './src/gremlins/email/index.jsx',
-        '@modernpoacher/gremlins/gremlins/number/field': './src/gremlins/number/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/number': './src/gremlins/number/index.jsx',
-        '@modernpoacher/gremlins/gremlins/password/field': './src/gremlins/password/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/password': './src/gremlins/password/index.jsx',
-        '@modernpoacher/gremlins/gremlins/radio/field': './src/gremlins/radio/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/radio': './src/gremlins/radio/index.jsx',
-        '@modernpoacher/gremlins/gremlins/select/field': './src/gremlins/select/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/select': './src/gremlins/select/index.jsx',
-        '@modernpoacher/gremlins/gremlins/text/field': './src/gremlins/text/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/text': './src/gremlins/text/index.jsx',
-        '@modernpoacher/gremlins/gremlins/textarea/field': './src/gremlins/textarea/field/index.jsx',
-        '@modernpoacher/gremlins/gremlins/textarea': './src/gremlins/textarea/index.jsx',
-        '@modernpoacher/gremlins/gremlins/fieldset/group': './src/gremlins/fieldset/group/index.jsx',
-        '@modernpoacher/gremlins/gremlins/fieldset': './src/gremlins/fieldset/index.jsx',
-        '@modernpoacher/gremlins/gremlins': './src/gremlins/index.jsx',
-        '@modernpoacher/gremlins/components/common/disabled': './src/components/common/disabled/index.jsx',
-        '@modernpoacher/gremlins/components/common/readonly': './src/components/common/readonly/index.jsx',
-        '@modernpoacher/gremlins/components/common/required': './src/components/common/required/index.jsx',
-        '@modernpoacher/gremlins/components/common/text-content': './src/components/common/text-content/index.jsx',
-        '@modernpoacher/gremlins/components/field': './src/components/field/index.jsx',
-        '#stories/state/checkbox': './stories/state/checkbox/index.jsx',
-        '#stories/state/email': './stories/state/email/index.jsx',
-        '#stories/state/number': './stories/state/number/index.jsx',
-        '#stories/state/password': './stories/state/password/index.jsx',
-        '#stories/state/radio': './stories/state/radio/index.jsx',
-        '#stories/state/select': './stories/state/select/index.jsx',
-        '#stories/state/text': './stories/state/text/index.jsx',
-        '#stories/state/textarea': './stories/state/textarea/index.jsx',
-        '#stories/state': './stories/state/index.jsx',
-        '#stories': './stories'
-      }
-    }
-  ]
+  '@babel/syntax-jsx'
 ]
 
 module.exports = (api) => {
@@ -94,7 +50,7 @@ module.exports = (api) => {
     presets,
     plugins,
     ignore: [
-      /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+      /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/gremlins",
-  "version": "0.0.241",
+  "version": "0.0.243",
   "description": "Gremlins",
   "keywords": [
     "Gremlins",
@@ -8,7 +8,7 @@
   ],
   "main": "./src/index.cjs",
   "type": "module",
-  "types": "./src/index.d.cts",
+  "types": "./src/index.d.mts",
   "author": {
     "name": "Jonathan Perry for Modern Poacher Limited",
     "email": "modernpoacher@modernpoacher.com",
@@ -48,7 +48,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/register": "^7.25.9",
-    "@modernpoacher/design-system": "1.1.15",
+    "@modernpoacher/design-system": "1.1.16",
     "@storybook/addon-actions": "7.6.20",
     "@storybook/addon-essentials": "7.6.20",
     "@storybook/addon-links": "7.6.20",
@@ -58,14 +58,12 @@
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "autoprefixer": "^10.4.20",
-    "babel-plugin-module-resolver": "^5.0.2",
     "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.39.0",
     "cross-env": "^7.0.3",
     "eslint": "8.57.1",
     "eslint-config-love": "47.0.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-react": "^7.37.2",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
@@ -89,7 +87,14 @@
     "webpack-cli": "^5.1.4"
   },
   "imports": {
-    "#build/paths": "./build/paths.mjs"
+    "#build/paths": "./build/paths.mjs",
+    "#gremlins/common": "./src/common/index.mjs",
+    "#gremlins/components/*": "./src/components/*/index.jsx",
+    "#gremlins/gremlins": "./src/gremlins/index.jsx",
+    "#gremlins/gremlins/*": "./src/gremlins/*/index.jsx",
+    "#stories/*": "./stories/*/index.stories.jsx",
+    "#stories/state": "./stories/state/index.jsx",
+    "#stories/state/*": "./stories/state/*/index.jsx"
   },
   "exports": {
     ".": {
@@ -97,30 +102,8 @@
       "import": "./src/index.mjs"
     },
     "./common": "./src/common/index.mjs",
-    "./components/common/disabled": "./src/components/common/disabled/index.cjs",
-    "./components/common/readonly": "./src/components/common/readonly/index.cjs",
-    "./components/common/required": "./src/components/common/required/index.cjs",
-    "./components/common/text-content": "./src/components/common/text-content/index.cjs",
-    "./components/field": "./src/components/field/index.cjs",
-    "./components/group": "./src/components/group/index.cjs",
+    "./components/*": "./src/components/*/index.cjs",
     "./gremlins": "./src/gremlins/index.cjs",
-    "./gremlins/checkbox": "./src/gremlins/checkbox/index.cjs",
-    "./gremlins/checkbox/field": "./src/gremlins/checkbox/field/index.cjs",
-    "./gremlins/email": "./src/gremlins/email/index.cjs",
-    "./gremlins/email/field": "./src/gremlins/email/field/index.cjs",
-    "./gremlins/fieldset": "./src/gremlins/fieldset/index.cjs",
-    "./gremlins/fieldset/group": "./src/gremlins/fieldset/group/index.cjs",
-    "./gremlins/number": "./src/gremlins/number/index.cjs",
-    "./gremlins/number/field": "./src/gremlins/number/field/index.cjs",
-    "./gremlins/password": "./src/gremlins/password/index.cjs",
-    "./gremlins/password/field": "./src/gremlins/password/field/index.cjs",
-    "./gremlins/radio": "./src/gremlins/radio/index.cjs",
-    "./gremlins/radio/field": "./src/gremlins/radio/field/index.cjs",
-    "./gremlins/select": "./src/gremlins/select/index.cjs",
-    "./gremlins/select/field": "./src/gremlins/select/field/index.cjs",
-    "./gremlins/text": "./src/gremlins/text/index.cjs",
-    "./gremlins/text/field": "./src/gremlins/text/field/index.cjs",
-    "./gremlins/textarea": "./src/gremlins/textarea/index.cjs",
-    "./gremlins/textarea/field": "./src/gremlins/textarea/field/index.cjs"
+    "./gremlins/*": "./src/gremlins/*/index.cjs"
   }
 }

package/src/common/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/common' {
+  export function DEFAULT_HANDLE_CHANGE (): void
+
+  export function DEFAULT_HANDLE_CLICK (): void
+}
+
+declare module '@modernpoacher/gremlins/common' {
+  export * from '#gremlins/common'
+}

package/src/components/common/disabled/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/components/common/disabled/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/components/common/disabled' {
+  import type React from 'react'
+
+  export default function Disabled (): React.JSX.Element
+}
+
+declare module '@modernpoacher/gremlins/components/common/disabled' {
+  export { default } from '#gremlins/components/common/disabled'
+}

package/src/components/common/readonly/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/components/common/readonly/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/components/common/readonly' {
+  import type React from 'react'
+
+  export default function ReadOnly (): React.JSX.Element
+}
+
+declare module '@modernpoacher/gremlins/components/common/readonly' {
+  export { default } from '#gremlins/components/common/readonly'
+}

package/src/components/common/required/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/components/common/required/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/components/common/required' {
+  import type React from 'react'
+
+  export default function Required (): React.JSX.Element
+}
+
+declare module '@modernpoacher/gremlins/components/common/required' {
+  export { default } from '#gremlins/components/common/required'
+}

package/src/components/common/text-content/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/components/common/text-content/index.d.mts

@@ -0,0 +1,14 @@
+declare module '#gremlins/components/common/text-content' {
+  import type React from 'react'
+
+  export interface TextContentProps {
+    textContent: string
+  }
+
+  export default function TextContent (props: TextContentProps): React.JSX.Element | null
+}
+
+declare module '@modernpoacher/gremlins/components/common/text-content' {
+  export { default } from '#gremlins/components/common/text-content'
+  export * from '#gremlins/components/common/text-content'
+}

package/src/components/common/text-content/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 
 /**
  * @param {TextContentProps}
- * @returns {React.JSX.Element}
+ * @returns {React.JSX.Element | null}
  */
 export default function TextContent ({ textContent }) {
   if (textContent) {

package/src/components/field/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/components/field/index.d.mts

@@ -0,0 +1,23 @@
+declare module '#gremlins/components/field' {
+  import React from 'react'
+
+  export interface FieldProps {
+    id: string
+    name: string
+    required: boolean
+    disabled: boolean
+    readOnly: boolean
+    tabIndex: number
+    accessKey: string
+    placeholder: string
+    onChange: GremlinsTypes.OnChangeType
+    fieldRef: object
+  }
+
+  export default class Field extends React.Component<FieldProps> {}
+}
+
+declare module '@modernpoacher/gremlins/components/field' {
+  export { default } from '#gremlins/components/field'
+  export * from '#gremlins/components/field'
+}

package/src/components/field/index.jsx

@@ -7,14 +7,14 @@ import PropTypes from 'prop-types'
 import {
   DEFAULT_HANDLE_CHANGE,
   DEFAULT_HANDLE_CLICK
-} from '@modernpoacher/gremlins/common'
+} from '#gremlins/common'
 
 export default class Field extends Component {
   getClassName () {
     return 'input'
   }
 
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
       (props.id !== this.props.id) ||
       (props.required !== this.props.required) ||
@@ -81,15 +81,17 @@ Field.defaultProps = {
  * ValueField component
  */
 export class ValueField extends Field {
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
-      super.shouldComponentUpdate(props) ||
+      super.shouldComponentUpdate(props, state) ||
       (props.value !== this.props.value)
     )
   }
 
   handleChange = ({ target: { value } }) => {
-    const { onChange = DEFAULT_HANDLE_CHANGE } = this.props
+    const {
+      onChange = DEFAULT_HANDLE_CHANGE
+    } = this.props
 
     onChange(value)
   }
@@ -109,24 +111,29 @@ ValueField.defaultProps = {
  * CheckField component
  */
 export class CheckField extends Field {
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
-      super.shouldComponentUpdate(props) ||
+      super.shouldComponentUpdate(props, state) ||
+      (props.value !== this.props.value) ||
       (props.checked !== this.props.checked) ||
       (props.onClick !== this.props.onClick)
     )
   }
 
-  handleClick = ({ target: { checked } }) => {
-    const { onClick = DEFAULT_HANDLE_CLICK } = this.props
+  handleClick = ({ target: { value, checked } }) => {
+    const {
+      onClick = DEFAULT_HANDLE_CLICK
+    } = this.props
 
-    onClick(checked)
+    onClick(value, checked)
   }
 
-  handleChange = ({ target: { checked } }) => {
-    const { onChange = DEFAULT_HANDLE_CHANGE } = this.props
+  handleChange = ({ target: { value, checked } }) => {
+    const {
+      onChange = DEFAULT_HANDLE_CHANGE
+    } = this.props
 
-    onChange(checked)
+    onChange(value, checked)
   }
 }
 

package/src/components/group/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/components/group/index.d.mts

@@ -0,0 +1,16 @@
+declare module '#gremlins/components/group' {
+  import React from 'react'
+
+  export interface GroupProps {
+    onChange: GremlinsTypes.OnChangeType
+    groupRef: object
+    children: React.JSX.Element | React.JSX.Element[]
+  }
+
+  export default class Group extends React.Component<GroupProps> {}
+}
+
+declare module '@modernpoacher/gremlins/components/group' {
+  export { default } from '#gremlins/components/group'
+  export * from '#gremlins/components/group'
+}

package/src/components/group/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 
 import {
   DEFAULT_HANDLE_CHANGE
-} from '@modernpoacher/gremlins/common'
+} from '#gremlins/common'
 
 export default class Group extends Component {
   getClassName () {
@@ -20,7 +20,7 @@ export default class Group extends Component {
    * @param {GroupProps} props
    * @returns {boolean}
    */
-  shouldComponentUpdate (props) {
+  shouldComponentUpdate (props, state) {
     return (
       (props.onChange !== this.props.onChange) ||
       (props.children !== this.props.children)

package/src/gremlins/checkbox/field/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/gremlins/checkbox/field/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/gremlins/checkbox/field' {
+  import Field from '#gremlins/components/field'
+
+  export default class CheckboxField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/checkbox/field' {
+  export { default } from '#gremlins/gremlins/checkbox/field'
+}

package/src/gremlins/checkbox/field/index.jsx

@@ -5,7 +5,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { CheckField } from '@modernpoacher/gremlins/components/field'
+import { CheckField } from '#gremlins/components/field'
 
 export default class CheckboxField extends CheckField {
   getClassName () {
@@ -41,8 +41,8 @@ export default class CheckboxField extends CheckField {
             readOnly={readOnly}
             tabIndex={tabIndex}
             accessKey={accessKey}
-            onClick={this.handleClick}
             onChange={this.handleChange}
+            onClick={this.handleClick}
             className={className}
             type='checkbox'
             ref={fieldRef}
@@ -64,14 +64,14 @@ export default class CheckboxField extends CheckField {
           defaultChecked={defaultChecked}
           id={id}
           name={name}
-          checked={checked}
+          value={value}
           required={required}
           disabled={disabled}
           readOnly={readOnly}
           tabIndex={tabIndex}
           accessKey={accessKey}
-          onClick={this.handleClick}
           onChange={this.handleChange}
+          onClick={this.handleClick}
           className={className}
           type='checkbox'
           ref={fieldRef}
@@ -88,7 +88,3 @@ CheckboxField.propTypes = {
   ...CheckField.propTypes,
   value: PropTypes.string.isRequired
 }
-
-CheckboxField.defaultProps = {
-  ...CheckField.defaultProps
-}

package/src/gremlins/checkbox/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/gremlins/checkbox/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/gremlins/checkbox' {
+  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
+
+  export default class CheckboxGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/checkbox' {
+  export { default } from '#gremlins/gremlins/checkbox'
+}

package/src/gremlins/checkbox/index.jsx

@@ -5,7 +5,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { CheckGremlin } from '@modernpoacher/gremlins/gremlins'
+import { CheckGremlin } from '#gremlins/gremlins'
+
+import {
+  DEFAULT_HANDLE_CHANGE,
+  DEFAULT_HANDLE_CLICK
+} from '#gremlins/common'
 
 import Field from './field/index.jsx'
 
@@ -14,20 +19,27 @@ export default class CheckboxGremlin extends CheckGremlin {
     return classnames(super.getClassName(), 'checkbox')
   }
 
-  handleClick = (value) => {
+  handleChange = (value, checked) => {
     const {
-      onClick
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
-    onClick(value)
+    onChange(value, checked)
   }
 
-  handleChange = (value) => {
+  handleClick = (value, checked) => {
     const {
-      onChange
+      onClick = DEFAULT_HANDLE_CLICK
     } = this.props
 
-    onChange(value)
+    onClick(value, checked)
+  }
+
+  shouldComponentUpdate (props, state) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.value !== this.props.value)
+    )
   }
 
   renderField () {
@@ -60,8 +72,8 @@ export default class CheckboxGremlin extends CheckGremlin {
         tabIndex={tabIndex}
         accessKey={accessKey}
         placeholder={placeholder}
-        onClick={this.handleClick}
         onChange={this.handleChange}
+        onClick={this.handleClick}
         fieldRef={fieldRef}
       />
     )
@@ -82,7 +94,3 @@ CheckboxGremlin.propTypes = {
   ...CheckGremlin.propTypes,
   value: PropTypes.string.isRequired
 }
-
-CheckboxGremlin.defaultProps = {
-  ...CheckGremlin.defaultProps
-}

package/src/gremlins/email/field/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/gremlins/email/field/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/gremlins/email/field' {
+  import Field from '#gremlins/components/field'
+
+  export default class EmailField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/email/field' {
+  export { default } from '#gremlins/gremlins/email/field'
+}

package/src/gremlins/email/field/index.jsx

@@ -4,7 +4,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { ValueField } from '@modernpoacher/gremlins/components/field'
+import { ValueField } from '#gremlins/components/field'
 
 export default class EmailField extends ValueField {
   getClassName () {
@@ -52,7 +52,3 @@ export default class EmailField extends ValueField {
 EmailField.propTypes = {
   ...ValueField.propTypes
 }
-
-EmailField.defaultProps = {
-  ...ValueField.defaultProps
-}

package/src/gremlins/email/index.cjs

@@ -1,6 +1,6 @@
 require('@babel/register')({
   ignore: [
-    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
   ]
 })
 

package/src/gremlins/email/index.d.mts

@@ -0,0 +1,9 @@
+declare module '#gremlins/gremlins/email' {
+  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
+
+  export default class EmailGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/email' {
+  export { default } from '#gremlins/gremlins/email'
+}

package/src/gremlins/email/index.jsx

@@ -4,7 +4,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { ValueGremlin } from '@modernpoacher/gremlins/gremlins'
+import { ValueGremlin } from '#gremlins/gremlins'
+
+import {
+  DEFAULT_HANDLE_CHANGE
+} from '#gremlins/common'
 
 import Field from './field/index.jsx'
 
@@ -15,7 +19,7 @@ export default class EmailGremlin extends ValueGremlin {
 
   handleChange = (value) => {
     const {
-      onChange
+      onChange = DEFAULT_HANDLE_CHANGE
     } = this.props
 
     onChange(value)
@@ -59,7 +63,3 @@ export default class EmailGremlin extends ValueGremlin {
 EmailGremlin.propTypes = {
   ...ValueGremlin.propTypes
 }
-
-EmailGremlin.defaultProps = {
-  ...ValueGremlin.defaultProps
-}