Export styled keys

Export styled keys for customization of the component.

src/components/AccidentalKey/AccidentalKey.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
-import keyPropTypes from '../../services/keyPropTypes'
 import styled from 'styled-components'
+import keyPropTypes from '../../services/keyPropTypes'
 
 const Base = styled('div')({
   width: '100%',

src/components/Keyboard/Keyboard.stories.tsx

@@ -4,15 +4,10 @@ import StyledAccidentalKey from '../StyledAccidentalKey/StyledAccidentalKey'
 import StyledNaturalKey from '../StyledNaturalKey/StyledNaturalKey'
 import Keyboard, { propTypes } from './Keyboard'
 
-interface WrapperProps {
-  style?: object | null
-}
-
-const Wrapper: React.FC<WrapperProps> = ({ style, ...etcProps }) => (
+const Wrapper: React.FC = (props) => (
   <div
-    {...etcProps}
+    {...props}
     style={{
-      ...style,
       // @ts-ignore
       '--color-channel-0': '#f55',
       '--color-channel-1': '#ff0',
@@ -82,13 +77,7 @@ export const WithDifferentKeyRange = (props?: Partial<Props>) => (
 )
 
 export const Styled = (props?: Partial<Props>) => (
-  <Wrapper
-    style={{
-      // @ts-ignore
-      '--color-natural-key': '#e3e3e5',
-      '--color-accidental-key': '#35313b',
-    }}
-  >
+  <Wrapper>
     <Keyboard
       {...props}
       startKey={21}

src/components/StyledAccidentalKey/StyledAccidentalKey.test.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
 import * as ReactIs from 'react-is'
-import AccidentalKey from './StyledAccidentalKey'
+import StyledAccidentalKey from './StyledAccidentalKey'
 
 it('should exist', () => {
-  expect(AccidentalKey).toBeDefined()
+  expect(StyledAccidentalKey).toBeDefined()
 })
 
 it('should be a React component', () => {
-  expect(ReactIs.isValidElementType(AccidentalKey)).toBe(true)
+  expect(ReactIs.isValidElementType(StyledAccidentalKey)).toBe(true)
 })
 
 it('should render without crashing', () => {
-  expect(() => <AccidentalKey />).not.toThrow()
+  expect(() => <StyledAccidentalKey />).not.toThrow()
 })

src/components/StyledAccidentalKey/StyledAccidentalKey.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
-import keyPropTypes from '../../services/keyPropTypes'
 import styled from 'styled-components'
+import keyPropTypes from '../../services/keyPropTypes'
 
 const Base = styled('div')({
   width: '100%',
@@ -20,13 +20,13 @@ const B2 = styled('div')`
   width: 100%;
   height: 100%;
   border-radius: 0 0 1px 1px;
-  background-color: var(--color-accidental-key, currentColor);
+  background-color: var(--color-accidental-key, #35313b);
   mask-image: linear-gradient(to bottom, white, rgba(0, 0, 0, 0.9));
 `
 const B3 = styled('div')`
   width: 100%;
   height: 100%;
-  background-color: var(--color-accidental-key, currentColor);
+  background-color: var(--color-accidental-key, #35313b);
 `
 const B4 = styled('div')`
   width: 100%;

src/components/StyledNaturalKey/StyledNaturalKey.tsx

@@ -37,7 +37,7 @@ const N3 = styled('div')`
 const N4 = styled('div')`
   width: 100%;
   height: 100%;
-  background-color: var(--color-natural-key, transparent);
+  background-color: var(--color-natural-key, #e3e3e5);
   border-radius: 0 0 1px 1px;
 `
 

src/index.ts

@@ -1,6 +1,8 @@
 import Keyboard from './components/Keyboard/Keyboard'
+import StyledNaturalKey from './components/StyledNaturalKey/StyledNaturalKey'
+import StyledAccidentalKey from './components/StyledAccidentalKey/StyledAccidentalKey'
 import keyPropTypes from './services/keyPropTypes'
 
 export default Keyboard
 
-export { keyPropTypes }
+export { keyPropTypes, StyledNaturalKey, StyledAccidentalKey }