From 2aff0f6800410fd5b88fa089afaaf45b424f0d24 Mon Sep 17 00:00:00 2001
From: Anthony Gallo <anthony9187@users.noreply.github.com>
Date: Wed, 21 Aug 2024 16:10:33 -0400
Subject: [PATCH] feat: add new keyboard layouts, fix KeyboardInput sizing bug
 (#36)

* feat: extract keyboard logic to KeyboardBase component

* chore: add keyboard formats file

* feat: update Keyboard simple to import KeyboardBase and pass the simple format

* feat: add discrete KeyboardEmail and KeyboardQwerty components

* feat: update KeyboardInput to leverage KeyboardQwerty component

* fix(Input): remove flex rules to fix sizing

Co-authored-by: Carolyn Moneymaker <moneymaker.carolyn@gmail.com>
---
 .../solid/components/Input/Input.styles.ts    |    2 -
 .../solid/components/Input/Input.types.ts     |    2 +-
 .../components/Keyboard/Keyboard.stories.tsx  |  713 ++--------
 .../solid/components/Keyboard/Keyboard.tsx    |   17 +-
 .../components/Keyboard/Keyboard.types.ts     |   12 +-
 .../{KeyboardSimple.tsx => KeyboardBase.tsx}  |   32 +-
 .../components/Keyboard/KeyboardCustom.tsx    |   26 +
 .../components/Keyboard/KeyboardDialpad.tsx   |   27 +
 .../Keyboard/KeyboardDialpadExtended.tsx      |   27 +
 .../components/Keyboard/KeyboardEmail.tsx     |   27 +
 .../Keyboard/KeyboardInput.stories.tsx        |   39 +-
 .../components/Keyboard/KeyboardInput.tsx     |   12 +-
 .../Keyboard/KeyboardInputEmail.stories.tsx   |  515 +------
 .../components/Keyboard/KeyboardNumber.tsx    |   27 +
 .../components/Keyboard/KeyboardQwerty.tsx    |   27 +
 packages/solid/components/Keyboard/formats.ts | 1238 +++++++++++++++++
 packages/solid/components/Keyboard/index.ts   |    9 +-
 packages/solid/components/Tile/Tile.tsx       |    2 +
 packages/solid/utils/withScrolling.ts         |    2 +-
 packages/solid/vite.config.js                 |    2 +-
 20 files changed, 1554 insertions(+), 1204 deletions(-)
 rename packages/solid/components/Keyboard/{KeyboardSimple.tsx => KeyboardBase.tsx} (90%)
 create mode 100644 packages/solid/components/Keyboard/KeyboardCustom.tsx
 create mode 100644 packages/solid/components/Keyboard/KeyboardDialpad.tsx
 create mode 100644 packages/solid/components/Keyboard/KeyboardDialpadExtended.tsx
 create mode 100644 packages/solid/components/Keyboard/KeyboardEmail.tsx
 create mode 100644 packages/solid/components/Keyboard/KeyboardNumber.tsx
 create mode 100644 packages/solid/components/Keyboard/KeyboardQwerty.tsx
 create mode 100644 packages/solid/components/Keyboard/formats.ts

diff --git a/packages/solid/components/Input/Input.styles.ts b/packages/solid/components/Input/Input.styles.ts
index 4b708fbd..74e41e59 100644
--- a/packages/solid/components/Input/Input.styles.ts
+++ b/packages/solid/components/Input/Input.styles.ts
@@ -34,8 +34,6 @@ const container: InputConfig = {
     // TODO clew uses strokeWidth, but we currently don't account for nested properties (border.width)
     width: getWidthByUpCount(4),
     height: 100,
-    display: 'flex',
-    flexDirection: 'column',
     padding: [theme.spacer.xxxl, theme.spacer.xl],
     color: theme.color.interactiveNeutral,
     contentColor: theme.color.fillInverse,
diff --git a/packages/solid/components/Input/Input.types.ts b/packages/solid/components/Input/Input.types.ts
index 157a85dc..1e671919 100644
--- a/packages/solid/components/Input/Input.types.ts
+++ b/packages/solid/components/Input/Input.types.ts
@@ -12,7 +12,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * 
+ *
  * SPDX-License-Identifier: Apache-2.0
  */
 
diff --git a/packages/solid/components/Keyboard/Keyboard.stories.tsx b/packages/solid/components/Keyboard/Keyboard.stories.tsx
index d615fda9..b2d20709 100644
--- a/packages/solid/components/Keyboard/Keyboard.stories.tsx
+++ b/packages/solid/components/Keyboard/Keyboard.stories.tsx
@@ -17,13 +17,27 @@
 
 import type { Meta, StoryObj } from 'storybook-solidjs';
 import Keyboard from './Keyboard.jsx';
-import KeyboardSimple from './KeyboardSimple.jsx';
+import { default as Custom } from './KeyboardCustom.jsx';
+import { default as Dialpad } from './KeyboardDialpad.jsx';
+import { default as DialpadExtended } from './KeyboardDialpadExtended.jsx';
+import { default as Email } from './KeyboardEmail.jsx';
+import { default as Number } from './KeyboardNumber.jsx';
+import { default as Qwerty } from './KeyboardQwerty.jsx';
 
 type Story = StoryObj<typeof Keyboard>;
+type CustomStory = StoryObj<typeof Custom>;
 
 const meta: Meta<typeof Keyboard> = {
   title: 'Components/Keyboard',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: true,
+      description: {
+        component: 'A variety of button layouts to enable text input'
+      }
+    }
+  },
   component: Keyboard,
   argTypes: {
     states: {
@@ -37,629 +51,118 @@ const meta: Meta<typeof Keyboard> = {
   }
 };
 
+const sharedArgs = {
+  states: 'focus',
+  autofocus: true,
+  centerKeys: false,
+  centerKeyboard: false,
+  width: 1280
+};
+
 export const Basic: Story = {
   render: args => {
     return <Keyboard {...args} />;
   },
-  args: {
-    states: 'focus',
-    autofocus: true,
-    centerKeyboard: false,
-    centerKeys: false,
-    width: 1280,
-    formats: {
-      default: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md'
-          }
-        ],
-        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
-        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
-        ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
-        [
-          {
-            title: 'Clear',
-            size: 'lg'
-          },
-          {
-            title: 'Space',
-            size: 'xl'
-          },
-          {
-            title: 'Done',
-            size: 'lg'
-          }
-        ]
-      ]
+  parameters: {
+    docs: {
+      description: {
+        story: 'a simple keyboard for case-insensitive input'
+      }
     }
-  }
+  },
+  args: sharedArgs
 };
 
-export const KeyboardSimple1: Story = {
+export const KeyboardEmail: Story = {
   render: args => {
-    return <KeyboardSimple {...args} />;
+    return <Email {...args} />;
   },
-  args: {
-    states: 'focus',
-    centerKeys: false,
-    centerKeyboard: false,
-    autofocus: true,
-    width: 1280,
-    formats: {
-      default: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md'
-          }
-        ],
-        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
-        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
-        ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
-        [
-          {
-            title: 'Clear',
-            size: 'lg'
-          },
-          {
-            title: 'Space',
-            size: 'xl'
-          },
-          {
-            title: 'Done',
-            size: 'lg'
-          }
-        ]
-      ]
+  parameters: {
+    docs: {
+      description: {
+        story: 'a full featured keyboard with helpful shortcuts for email addresses'
+      }
     }
-  }
+  },
+  args: sharedArgs
 };
 
-export const KeyboardEmail: Story = {
+export const KeyboardQwerty: Story = {
   render: args => {
-    return <KeyboardSimple {...args} />;
+    return <Qwerty {...args} />;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'a full featured keyboard for more complex text input'
+      }
+    }
+  },
+  args: sharedArgs
+};
+
+export const KeyboardNumber: Story = {
+  render: args => {
+    return <Number {...args} />;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'a simple keyboard for numeric input'
+      }
+    }
+  },
+  args: sharedArgs
+};
+
+export const KeyboardDialpad: Story = {
+  render: args => {
+    return <Dialpad {...args} />;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'a 3x4 numeric layout mimicking a phone keypad'
+      }
+    }
+  },
+  args: sharedArgs
+};
+
+export const KeyboardDialpadExtended: Story = {
+  render: args => {
+    return <DialpadExtended {...args} />;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'a 3x4 numeric layout mimicking a phone keypad with a clear shortcut'
+      }
+    }
+  },
+  args: sharedArgs
+};
+
+export const KeyboardCustom: CustomStory = {
+  render: args => {
+    return <Custom {...args} formats={args.formats} />;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'a custom keyboard can be created by providing a formats object'
+      }
+    }
   },
   args: {
     states: 'focus',
+    formats: {
+      default: [['A', 'B', 'C', 'D'], ['E', 'F', 'G'], ['H', 'I'], ['Z']]
+    },
     autofocus: true,
     centerKeys: false,
     centerKeyboard: false,
-    width: 1280,
-    formats: {
-      uppercase: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'Q',
-          'W',
-          'E',
-          'R',
-          'T',
-          'Y',
-          'U',
-          'I',
-          'O',
-          'P',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'A',
-          'S',
-          'D',
-          'F',
-          'G',
-          'H',
-          'J',
-          'K',
-          'L',
-          '@',
-          {
-            title: 'áöû',
-            size: 'md',
-            toggle: 'accents',
-            announce: 'accents, button',
-            keyId: 'accents'
-          }
-        ],
-        [
-          'Z',
-          'X',
-          'C',
-          'V',
-          'B',
-          'N',
-          'M',
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          { title: '_', announce: 'underscore, button' },
-          {
-            title: 'shift',
-            size: 'md',
-            toggle: 'default',
-            announce: 'shift off, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      default: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'q',
-          'w',
-          'e',
-          'r',
-          't',
-          'y',
-          'u',
-          'i',
-          'o',
-          'p',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'a',
-          's',
-          'd',
-          'f',
-          'g',
-          'h',
-          'j',
-          'k',
-          'l',
-          '@',
-          {
-            title: 'áöû',
-            size: 'md',
-            toggle: 'accents',
-            announce: 'accents, button',
-            keyId: 'accents'
-          }
-        ],
-        [
-          'z',
-          'x',
-          'c',
-          'v',
-          'b',
-          'n',
-          'm',
-          { title: '_', announce: 'underscore, button' },
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          {
-            title: 'shift',
-            size: 'md',
-            toggle: 'uppercase',
-            announce: 'shift on, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      accents: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'ä',
-          'ë',
-          'ï',
-          'ö',
-          'ü',
-          'ÿ',
-          'à',
-          'è',
-          'ì',
-          'ò',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'ù',
-          'á',
-          'é',
-          'í',
-          'ó',
-          'ú',
-          'ý',
-          'â',
-          'ê',
-          '@',
-          {
-            title: 'abc',
-            size: 'md',
-            toggle: 'default',
-            announce: 'alpha mode, button'
-          }
-        ],
-        [
-          'î',
-          'ô',
-          'û',
-          'ã',
-          'ñ',
-          { title: '_', announce: 'underscore, button' },
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          {
-            title: 'shift',
-            size: 'xl',
-            toggle: 'accentsUpper',
-            announce: 'shift off, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      accentsUpper: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'Ä',
-          'Ë',
-          'Ï',
-          'Ö',
-          'Ü',
-          'Ÿ',
-          'À',
-          'È',
-          'Ì',
-          'Ò',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'Ù',
-          'Á',
-          'É',
-          'Í',
-          'Ó',
-          'Ú',
-          'Ý',
-          'Â',
-          'Ê',
-          '@',
-          {
-            title: 'abc',
-            size: 'md',
-            toggle: 'default',
-            announce: 'alpha mode, button'
-          }
-        ],
-        [
-          'Î',
-          'Ô',
-          'Û',
-          'Ã',
-          'Ñ',
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          { title: '_', announce: 'underscore, button' },
-          {
-            title: 'shift',
-            size: 'xl',
-            toggle: 'accents',
-            announce: 'shift off, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      symbols: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          { title: '!', announce: 'exclamation, button' },
-          '@',
-          '#',
-          '$',
-          '%',
-          { title: '^', announce: 'caret circumflex, button' },
-          '&',
-          '*',
-          { title: '(', announce: 'open parenthesis, button' },
-          { title: ')', announce: 'close parenthesis, button' },
-          {
-            title: 'abc',
-            size: 'md',
-            toggle: 'default',
-            announce: 'alpha mode, button'
-          }
-        ],
-        [
-          { title: '{', announce: 'open brace, button' },
-          { title: '}', announce: 'close brace, button' },
-          { title: '[', announce: 'open bracket, button' },
-          { title: ']', announce: 'close bracket, button' },
-          { title: ';', announce: 'semicolon, button' },
-          { title: '"', announce: 'doublequote, button' },
-          { title: ',', announce: 'comma, button' },
-          { title: '|', announce: 'vertical bar, button' },
-          { title: '\\', announce: 'backslash, button' },
-          { title: '/', announce: 'forwardslash, button' },
-          {
-            title: 'áöû',
-            size: 'md',
-            toggle: 'accents',
-            announce: 'accents, button',
-            keyId: 'accents'
-          }
-        ],
-        [
-          { title: '<', announce: 'less than, button' },
-          { title: '>', announce: 'greater than, button' },
-          { title: '?', announce: 'question mark, button' },
-          { title: '=', announce: 'equal sign, button' },
-          { title: '`', announce: 'grave accent, button' },
-          { title: '~', announce: 'tilde, button' },
-          { title: '_', announce: 'underscore, button' },
-          { title: ':', announce: 'colon, button' },
-          { title: '-', announce: 'dash, button' },
-          { title: '+', announce: 'plus sign, button' }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ]
-    }
+    width: 1280
   }
 };
 
diff --git a/packages/solid/components/Keyboard/Keyboard.tsx b/packages/solid/components/Keyboard/Keyboard.tsx
index db8c530e..52951ad8 100644
--- a/packages/solid/components/Keyboard/Keyboard.tsx
+++ b/packages/solid/components/Keyboard/Keyboard.tsx
@@ -16,23 +16,12 @@
  */
 
 import { type Component } from 'solid-js';
-import styles from './Keyboard.styles.js';
-import KeyboardSimple from './KeyboardSimple.jsx';
+import KeyboardBase from './KeyboardBase.jsx';
 import type { KeyboardProps } from './Keyboard.types.js';
+import formats from './formats.js';
 
-// rows created from each array passed in
 const Keyboard: Component<KeyboardProps> = (props: KeyboardProps) => {
-  return (
-    <KeyboardSimple
-      {...props}
-      // @ts-expect-error TODO type needs to be fixed in framework
-      style={[
-        props.style, //
-        styles.Container.tones[props.tone ?? styles.tone],
-        styles.Container.base
-      ]}
-    />
-  );
+  return <KeyboardBase {...props} formats={formats.simple} />;
 };
 
 export default Keyboard;
diff --git a/packages/solid/components/Keyboard/Keyboard.types.ts b/packages/solid/components/Keyboard/Keyboard.types.ts
index 74e4f780..b9dad338 100644
--- a/packages/solid/components/Keyboard/Keyboard.types.ts
+++ b/packages/solid/components/Keyboard/Keyboard.types.ts
@@ -21,11 +21,6 @@ import type { KeyProps, KeySizes } from '../Key/Key.types.js';
 import type { Signal } from 'solid-js';
 
 export interface KeyboardProps extends UIComponentProps, KeyboardStyleProperties {
-  /**
-   * object containing arrays that represent different formats that the keyboard can be presented in. These arrays can contain strings or objects.
-   */
-  formats: KeyboardFormat;
-
   /**
    * center the keyboard within it's set width (must set the w property of Keyboard)
    */
@@ -52,6 +47,13 @@ export interface KeyboardProps extends UIComponentProps, KeyboardStyleProperties
   rowWrap: boolean;
 }
 
+export interface KeyboardBaseProps extends KeyboardProps {
+  /**
+   * object containing arrays that represent different formats that the keyboard can be presented in. These arrays can contain strings or objects.
+   */
+  formats: KeyboardFormat;
+}
+
 export type KeyboardFormat = Record<string, Array<Array<string | Partial<KeyProps>>>>;
 
 export interface KeyboardStyleProperties {
diff --git a/packages/solid/components/Keyboard/KeyboardSimple.tsx b/packages/solid/components/Keyboard/KeyboardBase.tsx
similarity index 90%
rename from packages/solid/components/Keyboard/KeyboardSimple.tsx
rename to packages/solid/components/Keyboard/KeyboardBase.tsx
index dffae795..d32c6922 100644
--- a/packages/solid/components/Keyboard/KeyboardSimple.tsx
+++ b/packages/solid/components/Keyboard/KeyboardBase.tsx
@@ -16,30 +16,30 @@
  */
 
 import { For, Show, createMemo, createSignal, type Accessor, type Component } from 'solid-js';
+import { ElementNode, View } from '@lightningtv/solid';
 import Column from '../Column/Column.jsx';
 import Row from '../Row/Row.jsx';
 import Key from '../Key/Key.jsx';
 import type { KeyProps } from '../Key/Key.types.js';
 import styles from './Keyboard.styles.js';
-import type { KeyboardProps } from './Keyboard.types.js';
-import { ElementNode, View } from '@lightningtv/solid';
+import type { KeyboardBaseProps } from './Keyboard.types.js';
 import keyStyles from '../Key/Key.styles.js';
 
-const getTone = (props: KeyboardProps) => 
-  props.tone ?? styles.tone;
+/* eslint-disable solid/reactivity */
+const getTone = (props: KeyboardBaseProps) => props.tone ?? styles.tone;
 
-const getGap = (props: KeyboardProps) =>
+const getGap = (props: KeyboardBaseProps) =>
   props.gap ??
   props.keySpacing ??
   styles.Container.tones[props.tone ?? styles.tone]?.keySpacing ??
   styles.Container.base.keySpacing;
 
-const getKeyHeight = (props: KeyboardProps) =>
+const getKeyHeight = (props: KeyboardBaseProps) =>
   props.keyHeight ??
   styles.Container.tones[props.tone ?? styles.tone]?.keyHeight ??
   styles.Container.base.keyHeight;
 
-const getTotalWidth = (props: KeyboardProps) =>
+const getTotalWidth = (props: KeyboardBaseProps) =>
   props.screenW ??
   props.width ??
   styles.Container.tones[props.tone ?? styles.tone]?.width ??
@@ -59,8 +59,9 @@ const getKeySpacing = (props: KeyProps) =>
   props.keySpacing ??
   keyStyles.Container.tones?.[props.tone ?? keyStyles.tone]?.keySpacing ??
   keyStyles.Container.base.keySpacing;
+/* eslint-enable solid/reactivity */
 
-const KeyboardSimple: Component<KeyboardProps> = (props: KeyboardProps) => {
+const KeyboardBase: Component<KeyboardBaseProps> = (props: KeyboardBaseProps) => {
   // eslint-disable-next-line solid/reactivity
   const [_, setKeySignal] = props.keySignal ?? createSignal('');
   const [activeKeyboard, setActiveKeyboard] = createSignal('default');
@@ -86,7 +87,7 @@ const KeyboardSimple: Component<KeyboardProps> = (props: KeyboardProps) => {
         setRowWidth(keyboardRefList[key.toggle]?.width ?? 0);
       };
     } else {
-      return () => setKeySignal(typeof key === 'string' ? key : key.title ?? '');
+      return () => setKeySignal(typeof key === 'string' ? key : (key.title ?? ''));
     }
   };
 
@@ -109,13 +110,16 @@ const KeyboardSimple: Component<KeyboardProps> = (props: KeyboardProps) => {
     }
     return maxRow;
   };
-
   return (
     <View
       {...props}
       forwardFocus={0}
       // @ts-expect-error TODO type needs to be fixed in framework
-      style={[props.style, styles.Container.tones[tone()], styles.Container.base]}
+      style={[
+        props.style, //
+        styles.Container.tones[tone()],
+        styles.Container.base
+      ]}
       width={totalWidth()}
       // height is defined by the height of the keys, the number of rows, as well as the gap between them
       height={undefined}
@@ -145,7 +149,7 @@ const KeyboardSimple: Component<KeyboardProps> = (props: KeyboardProps) => {
                 gap={gap()}
               >
                 <For each={props.formats[keyboard]}>
-                  {(row: (string | KeyProps)[], colIdx) => (
+                  {(row, colIdx) => (
                     <Row
                       scroll={'none'}
                       selected={selectedRowIndex()}
@@ -160,7 +164,7 @@ const KeyboardSimple: Component<KeyboardProps> = (props: KeyboardProps) => {
                           <Key
                             {...(typeof key === 'string' ? {} : key)}
                             onEnter={setOnEnter(key, rowIdx, colIdx)}
-                            title={typeof key === 'string' ? key : key.title ?? ''}
+                            title={typeof key === 'string' ? key : (key.title ?? '')}
                             height={keyHeight()}
                           />
                         )}
@@ -177,4 +181,4 @@ const KeyboardSimple: Component<KeyboardProps> = (props: KeyboardProps) => {
   );
 };
 
-export default KeyboardSimple;
+export default KeyboardBase;
diff --git a/packages/solid/components/Keyboard/KeyboardCustom.tsx b/packages/solid/components/Keyboard/KeyboardCustom.tsx
new file mode 100644
index 00000000..d47431b8
--- /dev/null
+++ b/packages/solid/components/Keyboard/KeyboardCustom.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type Component } from 'solid-js';
+import KeyboardBase from './KeyboardBase.jsx';
+import type { KeyboardBaseProps } from './Keyboard.types.js';
+
+const KeyboardCustom: Component<KeyboardBaseProps> = (props: KeyboardBaseProps) => {
+  return <KeyboardBase {...props} />;
+};
+
+export default KeyboardCustom;
diff --git a/packages/solid/components/Keyboard/KeyboardDialpad.tsx b/packages/solid/components/Keyboard/KeyboardDialpad.tsx
new file mode 100644
index 00000000..3a0ae1c1
--- /dev/null
+++ b/packages/solid/components/Keyboard/KeyboardDialpad.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type Component } from 'solid-js';
+import KeyboardBase from './KeyboardBase.jsx';
+import type { KeyboardProps } from './Keyboard.types.js';
+import formats from './formats.js';
+
+const KeyboardDialpad: Component<KeyboardProps> = (props: KeyboardProps) => {
+  return <KeyboardBase {...props} formats={formats.dialpad} />;
+};
+
+export default KeyboardDialpad;
diff --git a/packages/solid/components/Keyboard/KeyboardDialpadExtended.tsx b/packages/solid/components/Keyboard/KeyboardDialpadExtended.tsx
new file mode 100644
index 00000000..90bc63dd
--- /dev/null
+++ b/packages/solid/components/Keyboard/KeyboardDialpadExtended.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type Component } from 'solid-js';
+import KeyboardBase from './KeyboardBase.jsx';
+import type { KeyboardProps } from './Keyboard.types.js';
+import formats from './formats.js';
+
+const KeyboardDialpadExtended: Component<KeyboardProps> = (props: KeyboardProps) => {
+  return <KeyboardBase {...props} formats={formats.dialpadExtended} />;
+};
+
+export default KeyboardDialpadExtended;
diff --git a/packages/solid/components/Keyboard/KeyboardEmail.tsx b/packages/solid/components/Keyboard/KeyboardEmail.tsx
new file mode 100644
index 00000000..51b63d34
--- /dev/null
+++ b/packages/solid/components/Keyboard/KeyboardEmail.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type Component } from 'solid-js';
+import KeyboardBase from './KeyboardBase.jsx';
+import type { KeyboardProps } from './Keyboard.types.js';
+import formats from './formats.js';
+
+const KeyboardEmail: Component<KeyboardProps> = (props: KeyboardProps) => {
+  return <KeyboardBase {...props} formats={formats.email} />;
+};
+
+export default KeyboardEmail;
diff --git a/packages/solid/components/Keyboard/KeyboardInput.stories.tsx b/packages/solid/components/Keyboard/KeyboardInput.stories.tsx
index 646238ce..8c0942b1 100644
--- a/packages/solid/components/Keyboard/KeyboardInput.stories.tsx
+++ b/packages/solid/components/Keyboard/KeyboardInput.stories.tsx
@@ -49,44 +49,7 @@ export const Basic: Story = {
     autofocus: true,
     centerKeys: false,
     centerKeyboard: false,
-    width: 1280,
-    formats: {
-      default: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md'
-          }
-        ],
-        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
-        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
-        ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
-        [
-          {
-            title: 'Clear',
-            size: 'lg'
-          },
-          {
-            title: 'Space',
-            size: 'xl'
-          },
-          {
-            title: 'Done',
-            size: 'lg'
-          }
-        ]
-      ]
-    }
+    width: 1280
   }
 };
 
diff --git a/packages/solid/components/Keyboard/KeyboardInput.tsx b/packages/solid/components/Keyboard/KeyboardInput.tsx
index 81e52906..244fc45b 100644
--- a/packages/solid/components/Keyboard/KeyboardInput.tsx
+++ b/packages/solid/components/Keyboard/KeyboardInput.tsx
@@ -16,12 +16,11 @@
  */
 
 import { createSignal, type Component, type Signal } from 'solid-js';
-import Keyboard from './Keyboard.jsx';
+import { View } from '@lightningtv/solid';
+import KeyboardQwerty from './KeyboardQwerty.jsx';
+import type { KeyboardProps } from './Keyboard.types.js';
 import Column from '../Column/Column.jsx';
 import Input from '../Input/Input.jsx';
-import type { Tone } from '../../types/types.js';
-import type { KeyboardProps } from './Keyboard.types.js';
-import { View } from '@lightningtv/solid';
 
 export interface KeyboardInputProps extends KeyboardProps {
   /**
@@ -32,11 +31,8 @@ export interface KeyboardInputProps extends KeyboardProps {
    * signal passed in to represent the actual title within the input
    */
   titleSignal: Signal<string>;
-
-  tone?: Tone;
 }
 
-// rows created from each array passed in
 const KeyboardInput: Component<KeyboardInputProps> = (props: KeyboardInputProps) => {
   // signal representing a string of the key pressed and a boolean for if value has been added to the input yet
   // eslint-disable-next-line solid/reactivity
@@ -46,7 +42,7 @@ const KeyboardInput: Component<KeyboardInputProps> = (props: KeyboardInputProps)
     <View {...props} forwardFocus={0}>
       <Column selected={1} scroll={'none'}>
         <Input {...props} keyEvent={keyEvent} />
-        <Keyboard {...props} keySignal={keyEvent} />
+        <KeyboardQwerty {...props} keySignal={keyEvent} />
       </Column>
     </View>
   );
diff --git a/packages/solid/components/Keyboard/KeyboardInputEmail.stories.tsx b/packages/solid/components/Keyboard/KeyboardInputEmail.stories.tsx
index e3e6e73f..f3fe77fd 100644
--- a/packages/solid/components/Keyboard/KeyboardInputEmail.stories.tsx
+++ b/packages/solid/components/Keyboard/KeyboardInputEmail.stories.tsx
@@ -49,520 +49,7 @@ export const Email: Story = {
     autofocus: true,
     centerKeys: false,
     centerKeyboard: false,
-    width: 1280,
-    formats: {
-      uppercase: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'Q',
-          'W',
-          'E',
-          'R',
-          'T',
-          'Y',
-          'U',
-          'I',
-          'O',
-          'P',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'A',
-          'S',
-          'D',
-          'F',
-          'G',
-          'H',
-          'J',
-          'K',
-          'L',
-          '@',
-          {
-            title: 'áöû',
-            size: 'md',
-            toggle: 'accents',
-            announce: 'accents, button',
-            keyId: 'accents'
-          }
-        ],
-        [
-          'Z',
-          'X',
-          'C',
-          'V',
-          'B',
-          'N',
-          'M',
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          { title: '_', announce: 'underscore, button' },
-          {
-            title: 'shift',
-            size: 'md',
-            toggle: 'default',
-            announce: 'shift off, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      default: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'q',
-          'w',
-          'e',
-          'r',
-          't',
-          'y',
-          'u',
-          'i',
-          'o',
-          'p',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'a',
-          's',
-          'd',
-          'f',
-          'g',
-          'h',
-          'j',
-          'k',
-          'l',
-          '@',
-          {
-            title: 'áöû',
-            size: 'md',
-            toggle: 'accents',
-            announce: 'accents, button',
-            keyId: 'accents'
-          }
-        ],
-        [
-          'z',
-          'x',
-          'c',
-          'v',
-          'b',
-          'n',
-          'm',
-          { title: '_', announce: 'underscore, button' },
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          {
-            title: 'shift',
-            size: 'md',
-            toggle: 'uppercase',
-            announce: 'shift on, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      accents: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'ä',
-          'ë',
-          'ï',
-          'ö',
-          'ü',
-          'ÿ',
-          'à',
-          'è',
-          'ì',
-          'ò',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'ù',
-          'á',
-          'é',
-          'í',
-          'ó',
-          'ú',
-          'ý',
-          'â',
-          'ê',
-          '@',
-          {
-            title: 'abc',
-            size: 'md',
-            toggle: 'default',
-            announce: 'alpha mode, button'
-          }
-        ],
-        [
-          'î',
-          'ô',
-          'û',
-          'ã',
-          'ñ',
-          { title: '_', announce: 'underscore, button' },
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          {
-            title: 'shift',
-            size: 'xl',
-            toggle: 'accentsUpper',
-            announce: 'shift off, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      accentsUpper: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          'Ä',
-          'Ë',
-          'Ï',
-          'Ö',
-          'Ü',
-          'Ÿ',
-          'À',
-          'È',
-          'Ì',
-          'Ò',
-          {
-            title: '#@!',
-            size: 'md',
-            toggle: 'symbols',
-            announce: 'symbol mode, button',
-            keyId: 'symbols'
-          }
-        ],
-        [
-          'Ù',
-          'Á',
-          'É',
-          'Í',
-          'Ó',
-          'Ú',
-          'Ý',
-          'Â',
-          'Ê',
-          '@',
-          {
-            title: 'abc',
-            size: 'md',
-            toggle: 'default',
-            announce: 'alpha mode, button'
-          }
-        ],
-        [
-          'Î',
-          'Ô',
-          'Û',
-          'Ã',
-          'Ñ',
-          { title: '.', announce: 'period, button' },
-          { title: '-', announce: 'dash, button' },
-          { title: '_', announce: 'underscore, button' },
-          {
-            title: 'shift',
-            size: 'xl',
-            toggle: 'accents',
-            announce: 'shift off, button',
-            keyId: 'shift'
-          }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ],
-      symbols: [
-        [
-          '1',
-          '2',
-          '3',
-          '4',
-          '5',
-          '6',
-          '7',
-          '8',
-          '9',
-          '0',
-          {
-            title: 'Delete',
-            size: 'md',
-            keyId: 'delete',
-            announce: 'delete, button'
-          }
-        ],
-        [
-          { title: '!', announce: 'exclamation, button' },
-          '@',
-          '#',
-          '$',
-          '%',
-          { title: '^', announce: 'caret circumflex, button' },
-          '&',
-          '*',
-          { title: '(', announce: 'open parenthesis, button' },
-          { title: ')', announce: 'close parenthesis, button' },
-          {
-            title: 'abc',
-            size: 'md',
-            toggle: 'default',
-            announce: 'alpha mode, button'
-          }
-        ],
-        [
-          { title: '{', announce: 'open brace, button' },
-          { title: '}', announce: 'close brace, button' },
-          { title: '[', announce: 'open bracket, button' },
-          { title: ']', announce: 'close bracket, button' },
-          { title: ';', announce: 'semicolon, button' },
-          { title: '"', announce: 'doublequote, button' },
-          { title: ',', announce: 'comma, button' },
-          { title: '|', announce: 'vertical bar, button' },
-          { title: '\\', announce: 'backslash, button' },
-          { title: '/', announce: 'forwardslash, button' },
-          {
-            title: 'áöû',
-            size: 'md',
-            toggle: 'accents',
-            announce: 'accents, button',
-            keyId: 'accents'
-          }
-        ],
-        [
-          { title: '<', announce: 'less than, button' },
-          { title: '>', announce: 'greater than, button' },
-          { title: '?', announce: 'question mark, button' },
-          { title: '=', announce: 'equal sign, button' },
-          { title: '`', announce: 'grave accent, button' },
-          { title: '~', announce: 'tilde, button' },
-          { title: '_', announce: 'underscore, button' },
-          { title: ':', announce: 'colon, button' },
-          { title: '-', announce: 'dash, button' },
-          { title: '+', announce: 'plus sign, button' }
-        ],
-        [
-          { title: '.com', announce: 'dot, com', size: 'md' },
-          { title: '.net', announce: 'dot, net', size: 'md' },
-          { title: '.edu', announce: 'dot, edu', size: 'md' },
-          { title: '.org', announce: 'dot, org', size: 'md' },
-          { title: '.co', announce: 'dot, co', size: 'md' },
-          { title: '.uk', announce: 'dot, uk', size: 'md' }
-        ],
-        [
-          {
-            title: 'Clear',
-            size: 'lg',
-            keyId: 'clear',
-            announce: 'clear, button'
-          },
-          {
-            title: 'Space',
-            size: 'xl',
-            keyId: 'space',
-            announce: 'space, button'
-          },
-          {
-            title: 'Done',
-            size: 'lg',
-            keyId: 'done',
-            announce: 'done, button'
-          }
-        ]
-      ]
-    }
+    width: undefined
   }
 };
 
diff --git a/packages/solid/components/Keyboard/KeyboardNumber.tsx b/packages/solid/components/Keyboard/KeyboardNumber.tsx
new file mode 100644
index 00000000..531a1d36
--- /dev/null
+++ b/packages/solid/components/Keyboard/KeyboardNumber.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type Component } from 'solid-js';
+import KeyboardBase from './KeyboardBase.jsx';
+import type { KeyboardProps } from './Keyboard.types.js';
+import formats from './formats.js';
+
+const KeyboardNumber: Component<KeyboardProps> = (props: KeyboardProps) => {
+  return <KeyboardBase {...props} formats={formats.numbers} />;
+};
+
+export default KeyboardNumber;
diff --git a/packages/solid/components/Keyboard/KeyboardQwerty.tsx b/packages/solid/components/Keyboard/KeyboardQwerty.tsx
new file mode 100644
index 00000000..01a637fd
--- /dev/null
+++ b/packages/solid/components/Keyboard/KeyboardQwerty.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type Component } from 'solid-js';
+import KeyboardBase from './KeyboardBase.jsx';
+import type { KeyboardProps } from './Keyboard.types.js';
+import formats from './formats.js';
+
+const KeyboardQwerty: Component<KeyboardProps> = (props: KeyboardProps) => {
+  return <KeyboardBase {...props} formats={formats.qwerty} />;
+};
+
+export default KeyboardQwerty;
diff --git a/packages/solid/components/Keyboard/formats.ts b/packages/solid/components/Keyboard/formats.ts
new file mode 100644
index 00000000..bcf2890b
--- /dev/null
+++ b/packages/solid/components/Keyboard/formats.ts
@@ -0,0 +1,1238 @@
+import type { KeyboardFormat } from './Keyboard.types.js';
+
+const dialpad = {
+  default: [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'], ['0']]
+};
+
+const dialpadExtended = {
+  default: [
+    ['1', '2', '3'],
+    ['4', '5', '6'],
+    ['7', '8', '9'],
+    [
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ]
+  ]
+} satisfies KeyboardFormat; // fixes type issue when assigned to KeyboardBase.formats
+
+const email: KeyboardFormat = {
+  uppercase: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'Q',
+      'W',
+      'E',
+      'R',
+      'T',
+      'Y',
+      'U',
+      'I',
+      'O',
+      'P',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'A',
+      'S',
+      'D',
+      'F',
+      'G',
+      'H',
+      'J',
+      'K',
+      'L',
+      '@',
+      {
+        title: 'áöû',
+        size: 'md',
+        toggle: 'accents',
+        announce: 'accents, button',
+        keyId: 'accents'
+      }
+    ],
+    [
+      'Z',
+      'X',
+      'C',
+      'V',
+      'B',
+      'N',
+      'M',
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      { title: '_', announce: 'underscore, button' },
+      {
+        title: 'shift',
+        size: 'md',
+        toggle: 'default',
+        announce: 'shift off, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      { title: '.com', announce: 'dot, com', size: 'md' },
+      { title: '.net', announce: 'dot, net', size: 'md' },
+      { title: '.edu', announce: 'dot, edu', size: 'md' },
+      { title: '.org', announce: 'dot, org', size: 'md' },
+      { title: '.co', announce: 'dot, co', size: 'md' },
+      { title: '.uk', announce: 'dot, uk', size: 'md' }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  default: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'q',
+      'w',
+      'e',
+      'r',
+      't',
+      'y',
+      'u',
+      'i',
+      'o',
+      'p',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'a',
+      's',
+      'd',
+      'f',
+      'g',
+      'h',
+      'j',
+      'k',
+      'l',
+      '@',
+      {
+        title: 'áöû',
+        size: 'md',
+        toggle: 'accents',
+        announce: 'accents, button',
+        keyId: 'accents'
+      }
+    ],
+    [
+      'z',
+      'x',
+      'c',
+      'v',
+      'b',
+      'n',
+      'm',
+      { title: '_', announce: 'underscore, button' },
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      {
+        title: 'shift',
+        size: 'md',
+        toggle: 'uppercase',
+        announce: 'shift on, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      { title: '.com', announce: 'dot, com', size: 'md' },
+      { title: '.net', announce: 'dot, net', size: 'md' },
+      { title: '.edu', announce: 'dot, edu', size: 'md' },
+      { title: '.org', announce: 'dot, org', size: 'md' },
+      { title: '.co', announce: 'dot, co', size: 'md' },
+      { title: '.uk', announce: 'dot, uk', size: 'md' }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  accents: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'ä',
+      'ë',
+      'ï',
+      'ö',
+      'ü',
+      'ÿ',
+      'à',
+      'è',
+      'ì',
+      'ò',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'ù',
+      'á',
+      'é',
+      'í',
+      'ó',
+      'ú',
+      'ý',
+      'â',
+      'ê',
+      '@',
+      {
+        title: 'abc',
+        size: 'md',
+        toggle: 'default',
+        announce: 'alpha mode, button'
+      }
+    ],
+    [
+      'î',
+      'ô',
+      'û',
+      'ã',
+      'ñ',
+      { title: '_', announce: 'underscore, button' },
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      {
+        title: 'shift',
+        size: 'xl',
+        toggle: 'accentsUpper',
+        announce: 'shift off, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      { title: '.com', announce: 'dot, com', size: 'md' },
+      { title: '.net', announce: 'dot, net', size: 'md' },
+      { title: '.edu', announce: 'dot, edu', size: 'md' },
+      { title: '.org', announce: 'dot, org', size: 'md' },
+      { title: '.co', announce: 'dot, co', size: 'md' },
+      { title: '.uk', announce: 'dot, uk', size: 'md' }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  accentsUpper: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'Ä',
+      'Ë',
+      'Ï',
+      'Ö',
+      'Ü',
+      'Ÿ',
+      'À',
+      'È',
+      'Ì',
+      'Ò',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'Ù',
+      'Á',
+      'É',
+      'Í',
+      'Ó',
+      'Ú',
+      'Ý',
+      'Â',
+      'Ê',
+      '@',
+      {
+        title: 'abc',
+        size: 'md',
+        toggle: 'default',
+        announce: 'alpha mode, button'
+      }
+    ],
+    [
+      'Î',
+      'Ô',
+      'Û',
+      'Ã',
+      'Ñ',
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      { title: '_', announce: 'underscore, button' },
+      {
+        title: 'shift',
+        size: 'xl',
+        toggle: 'accents',
+        announce: 'shift off, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      { title: '.com', announce: 'dot, com', size: 'md' },
+      { title: '.net', announce: 'dot, net', size: 'md' },
+      { title: '.edu', announce: 'dot, edu', size: 'md' },
+      { title: '.org', announce: 'dot, org', size: 'md' },
+      { title: '.co', announce: 'dot, co', size: 'md' },
+      { title: '.uk', announce: 'dot, uk', size: 'md' }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  symbols: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      { title: '!', announce: 'exclamation, button' },
+      '@',
+      '#',
+      '$',
+      '%',
+      { title: '^', announce: 'caret circumflex, button' },
+      '&',
+      '*',
+      { title: '(', announce: 'open parenthesis, button' },
+      { title: ')', announce: 'close parenthesis, button' },
+      {
+        title: 'abc',
+        size: 'md',
+        toggle: 'default',
+        announce: 'alpha mode, button'
+      }
+    ],
+    [
+      { title: '{', announce: 'open brace, button' },
+      { title: '}', announce: 'close brace, button' },
+      { title: '[', announce: 'open bracket, button' },
+      { title: ']', announce: 'close bracket, button' },
+      { title: ';', announce: 'semicolon, button' },
+      { title: '"', announce: 'doublequote, button' },
+      { title: ',', announce: 'comma, button' },
+      { title: '|', announce: 'vertical bar, button' },
+      { title: '\\', announce: 'backslash, button' },
+      { title: '/', announce: 'forwardslash, button' },
+      {
+        title: 'áöû',
+        size: 'md',
+        toggle: 'accents',
+        announce: 'accents, button',
+        keyId: 'accents'
+      }
+    ],
+    [
+      { title: '<', announce: 'less than, button' },
+      { title: '>', announce: 'greater than, button' },
+      { title: '?', announce: 'question mark, button' },
+      { title: '=', announce: 'equal sign, button' },
+      { title: '`', announce: 'grave accent, button' },
+      { title: '~', announce: 'tilde, button' },
+      { title: '_', announce: 'underscore, button' },
+      { title: ':', announce: 'colon, button' },
+      { title: '-', announce: 'dash, button' },
+      { title: '+', announce: 'plus sign, button' }
+    ],
+    [
+      { title: '.com', announce: 'dot, com', size: 'md' },
+      { title: '.net', announce: 'dot, net', size: 'md' },
+      { title: '.edu', announce: 'dot, edu', size: 'md' },
+      { title: '.org', announce: 'dot, org', size: 'md' },
+      { title: '.co', announce: 'dot, co', size: 'md' },
+      { title: '.uk', announce: 'dot, uk', size: 'md' }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ]
+};
+const fullscreen: KeyboardFormat = {
+  letters: [
+    [
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      {
+        title: '#@!',
+        size: 'lg',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      },
+      {
+        title: 'Space',
+        size: 'lg',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      },
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      ''
+    ],
+    [
+      'A',
+      'B',
+      'C',
+      'D',
+      'E',
+      'F',
+      'G',
+      'H',
+      'I',
+      'J',
+      'K',
+      'L',
+      'M',
+      'N',
+      'O',
+      'P',
+      'Q',
+      'R',
+      'S',
+      'T',
+      'U',
+      'V',
+      'W',
+      'X',
+      'Y',
+      'Z'
+    ]
+  ],
+  symbols: [
+    [
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      {
+        title: 'ABC',
+        size: 'lg',
+        toggle: 'letters',
+        announce: 'caps on, button'
+      },
+      {
+        title: 'Space',
+        size: 'lg',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      },
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      '',
+      ''
+    ],
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      { title: '!', announce: 'exclamation, button' },
+      '@',
+      '#',
+      '$',
+      '%',
+      { title: '^', announce: 'caret circumflex, button' },
+      '&',
+      '*',
+      { title: '(', announce: 'open parenthesis, button' },
+      { title: ')', announce: 'close parenthesis, button' },
+      { title: '`', announce: 'grave accent, button' },
+      '~',
+      '_',
+      '.',
+      '-',
+      '+'
+    ]
+  ]
+};
+const numbers: KeyboardFormat = {
+  default: [['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']]
+};
+
+const qwerty: KeyboardFormat = {
+  uppercase: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'Q',
+      'W',
+      'E',
+      'R',
+      'T',
+      'Y',
+      'U',
+      'I',
+      'O',
+      'P',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'A',
+      'S',
+      'D',
+      'F',
+      'G',
+      'H',
+      'J',
+      'K',
+      'L',
+      '@',
+      {
+        title: 'áöû',
+        size: 'md',
+        toggle: 'accents',
+        announce: 'accents, button',
+        keyId: 'accents'
+      }
+    ],
+    [
+      'Z',
+      'X',
+      'C',
+      'V',
+      'B',
+      'N',
+      'M',
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      { title: '_', announce: 'underscore, button' },
+      {
+        title: 'shift',
+        size: 'md',
+        toggle: 'default',
+        announce: 'shift off, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  default: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'q',
+      'w',
+      'e',
+      'r',
+      't',
+      'y',
+      'u',
+      'i',
+      'o',
+      'p',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'a',
+      's',
+      'd',
+      'f',
+      'g',
+      'h',
+      'j',
+      'k',
+      'l',
+      '@',
+      {
+        title: 'áöû',
+        size: 'md',
+        toggle: 'accents',
+        announce: 'accents, button',
+        keyId: 'accents'
+      }
+    ],
+    [
+      'z',
+      'x',
+      'c',
+      'v',
+      'b',
+      'n',
+      'm',
+      { title: '_', announce: 'underscore, button' },
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      {
+        title: 'shift',
+        size: 'md',
+        toggle: 'uppercase',
+        announce: 'shift on, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  accents: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'ä',
+      'ë',
+      'ï',
+      'ö',
+      'ü',
+      'ÿ',
+      'à',
+      'è',
+      'ì',
+      'ò',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'ù',
+      'á',
+      'é',
+      'í',
+      'ó',
+      'ú',
+      'ý',
+      'â',
+      'ê',
+      '@',
+      {
+        title: 'abc',
+        size: 'md',
+        toggle: 'default',
+        announce: 'alpha mode, button'
+      }
+    ],
+    [
+      'î',
+      'ô',
+      'û',
+      'ã',
+      'ñ',
+      { title: '_', announce: 'underscore, button' },
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      {
+        title: 'shift',
+        size: 'xl',
+        toggle: 'accentsUpper',
+        announce: 'shift off, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  accentsUpper: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      'Ä',
+      'Ë',
+      'Ï',
+      'Ö',
+      'Ü',
+      'Ÿ',
+      'À',
+      'È',
+      'Ì',
+      'Ò',
+      {
+        title: '#@!',
+        size: 'md',
+        toggle: 'symbols',
+        announce: 'symbol mode, button',
+        keyId: 'symbols'
+      }
+    ],
+    [
+      'Ù',
+      'Á',
+      'É',
+      'Í',
+      'Ó',
+      'Ú',
+      'Ý',
+      'Â',
+      'Ê',
+      '@',
+      {
+        title: 'abc',
+        size: 'md',
+        toggle: 'default',
+        announce: 'alpha mode, button'
+      }
+    ],
+    [
+      'Î',
+      'Ô',
+      'Û',
+      'Ã',
+      'Ñ',
+      { title: '.', announce: 'period, button' },
+      { title: '-', announce: 'dash, button' },
+      { title: '_', announce: 'underscore, button' },
+      {
+        title: 'shift',
+        size: 'xl',
+        toggle: 'accents',
+        announce: 'shift off, button',
+        keyId: 'shift'
+      }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ],
+  symbols: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ],
+    [
+      { title: '!', announce: 'exclamation, button' },
+      '@',
+      '#',
+      '$',
+      '%',
+      { title: '^', announce: 'caret circumflex, button' },
+      '&',
+      '*',
+      { title: '(', announce: 'open parenthesis, button' },
+      { title: ')', announce: 'close parenthesis, button' },
+      {
+        title: 'abc',
+        size: 'md',
+        toggle: 'default',
+        announce: 'alpha mode, button'
+      }
+    ],
+    [
+      { title: '{', announce: 'open brace, button' },
+      { title: '}', announce: 'close brace, button' },
+      { title: '[', announce: 'open bracket, button' },
+      { title: ']', announce: 'close bracket, button' },
+      { title: ';', announce: 'semicolon, button' },
+      { title: '"', announce: 'doublequote, button' },
+      { title: ',', announce: 'comma, button' },
+      { title: '|', announce: 'vertical bar, button' },
+      { title: '\\', announce: 'backslash, button' },
+      { title: '/', announce: 'forwardslash, button' },
+      {
+        title: 'áöû',
+        size: 'md',
+        toggle: 'accents',
+        announce: 'accents, button',
+        keyId: 'accents'
+      }
+    ],
+    [
+      { title: '<', announce: 'less than, button' },
+      { title: '>', announce: 'greater than, button' },
+      { title: '?', announce: 'question mark, button' },
+      { title: '=', announce: 'equal sign, button' },
+      { title: '`', announce: 'grave accent, button' },
+      { title: '~', announce: 'tilde, button' },
+      { title: '_', announce: 'underscore, button' },
+      { title: ':', announce: 'colon, button' },
+      { title: '-', announce: 'dash, button' },
+      { title: '+', announce: 'plus sign, button' }
+    ],
+    [
+      {
+        title: 'Clear',
+        size: 'lg',
+        keyId: 'clear',
+        announce: 'clear, button'
+      },
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Done',
+        size: 'lg',
+        keyId: 'done',
+        announce: 'done, button'
+      }
+    ]
+  ]
+};
+const search: KeyboardFormat = {
+  uppercase: [
+    ['A', 'B', 'C', 'D', 'E', 'F'],
+    ['G', 'H', 'I', 'J', 'K', 'L'],
+    ['M', 'N', 'O', 'P', 'Q', 'R'],
+    ['S', 'T', 'U', 'V', 'W', 'X'],
+    [
+      'Y',
+      'Z',
+      { title: '1', keyId: 'number' },
+      { title: '2', keyId: 'number' },
+      { title: '3', keyId: 'number' },
+      { title: '4', keyId: 'number' }
+    ],
+    [
+      { title: '5', keyId: 'number' },
+      { title: '6', keyId: 'number' },
+      { title: '7', keyId: 'number' },
+      { title: '8', keyId: 'number' },
+      { title: '9', keyId: 'number' },
+      { title: '0', keyId: 'number' }
+    ],
+    [
+      {
+        title: 'Space',
+        size: 'xl',
+        keyId: 'space',
+        announce: 'space, button'
+      },
+      {
+        title: 'Delete',
+        size: 'md',
+        keyId: 'delete',
+        announce: 'delete, button'
+      }
+    ]
+  ]
+};
+const simple: KeyboardFormat = {
+  default: [
+    [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '0',
+      {
+        title: 'Delete',
+        size: 'md'
+      }
+    ],
+    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+    ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
+    [
+      {
+        title: 'Clear',
+        size: 'lg'
+      },
+      {
+        title: 'Space',
+        size: 'xl'
+      },
+      {
+        title: 'Done',
+        size: 'lg'
+      }
+    ]
+  ]
+};
+
+export default {
+  dialpad,
+  dialpadExtended,
+  email,
+  fullscreen,
+  numbers,
+  qwerty,
+  search,
+  simple
+};
diff --git a/packages/solid/components/Keyboard/index.ts b/packages/solid/components/Keyboard/index.ts
index 153890a4..cc5abb58 100644
--- a/packages/solid/components/Keyboard/index.ts
+++ b/packages/solid/components/Keyboard/index.ts
@@ -16,6 +16,13 @@
  */
 
 export { default as default } from './Keyboard.jsx';
+export { default as KeyboardCustom } from './KeyboardCustom.jsx';
+export { default as KeyboardDialpad } from './KeyboardDialpad.jsx';
+export { default as KeyboardDialpadExtended } from './KeyboardDialpadExtended.jsx';
+export { default as KeyboardEmail } from './KeyboardEmail.jsx';
 export { default as KeyboardInput } from './KeyboardInput.jsx';
+export { default as KeyboardNumber } from './KeyboardNumber.jsx';
+export { default as KeyboardQwerty } from './KeyboardQwerty.jsx';
 export { default as keyboardStyles } from './Keyboard.styles.js';
-export type { KeyboardProps, KeyboardStyles } from './Keyboard.types.js';
+export { default as keyboardFormats } from './formats.js';
+export type { KeyboardProps, KeyboardStyles, KeyboardFormat } from './Keyboard.types.js';
diff --git a/packages/solid/components/Tile/Tile.tsx b/packages/solid/components/Tile/Tile.tsx
index e844a1f0..6f3f069d 100644
--- a/packages/solid/components/Tile/Tile.tsx
+++ b/packages/solid/components/Tile/Tile.tsx
@@ -24,6 +24,7 @@ import type { TileProps } from './Tile.types.js';
 import styles from './Tile.styles.js';
 withPadding;
 
+/* eslint-disable solid/reactivity */
 const getTone = (props: TileProps) => props.tone ?? styles.tone;
 const getPadding = (props: TileProps) =>
   props.padding ??
@@ -45,6 +46,7 @@ const getContentSpacingY = (props: TileProps) =>
   props.contentSpacingY ??
   styles.Container.tones[props.tone ?? styles.tone]?.contentSpacingY ??
   styles.Container.base.contentSpacingY;
+/* eslint-enable solid/reactivity */
 
 const Tile: Component<TileProps> = (props: TileProps) => {
   const [isFocused, setIsFocused] = createSignal(false);
diff --git a/packages/solid/utils/withScrolling.ts b/packages/solid/utils/withScrolling.ts
index bea53dcf..983cb636 100644
--- a/packages/solid/utils/withScrolling.ts
+++ b/packages/solid/utils/withScrolling.ts
@@ -90,7 +90,7 @@ export function withScrolling(isRow: boolean) {
 
     if (componentRef[axis] !== nextPosition) {
       componentRef[axis] = nextPosition;
-      // Store the new position as animations are occuring and if user scrolls faster than animation
+      // Store the new position as animations are occurring and if user scrolls faster than animation
       // we want to use the new position.
       componentRef._targetPosition = nextPosition;
     }
diff --git a/packages/solid/vite.config.js b/packages/solid/vite.config.js
index c7caec7e..89e36456 100644
--- a/packages/solid/vite.config.js
+++ b/packages/solid/vite.config.js
@@ -31,7 +31,7 @@ const config = {
     hexColorTransform({
       include: '**/*.js',
       exclude: '**/*.stories.js'
-    }),
+    })
   ],
   base: './',
   build: {