feat(PhoneInput): add tkv3 phone input

Completes #111

system/react/src/components/PhoneInput.stories.tsx

@@ -0,0 +1,28 @@
+import { Story, Meta } from '@storybook/react';
+
+import { classlessSelector, classySelector, PhoneInput } from './PhoneInput';
+
+const contentVariants = [
+  {},
+  { 'data-disabled': true },
+  { 'data-stretch': true },
+  { 'data-error': true }
+];
+
+export default {
+  title: 'TableKit/PhoneInput',
+  component: PhoneInput,
+  parameters: {
+    variants: contentVariants,
+    classlessSelector,
+    classySelector
+  }
+} as Meta;
+
+export const Variants: Story = () => (
+  <>
+    {contentVariants.map((props) => (
+      <PhoneInput {...props} />
+    ))}
+  </>
+);

system/react/src/components/PhoneInput.tsx

@@ -0,0 +1,24 @@
+import { Close } from '@carbon/icons-react';
+import { css } from '@emotion/react';
+import * as React from 'react';
+
+import { Input, InputWithIcons } from './Input';
+
+export const classlessSelector = 'input[type="tel"]';
+export const classySelector = '.phone-input';
+
+export const baseStyles = css``;
+
+export interface Props {
+  // phone specific props
+}
+
+export const PhoneInput = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & Props
+>((props, ref) => (
+  <InputWithIcons {...props} ref={ref}>
+    <Input placeholder="09000789" type="tel" />
+    <Close size={16} />
+  </InputWithIcons>
+));

system/react/src/index.ts

@@ -26,6 +26,8 @@ export {
   baseStylesObject as menuListStylesObject,
   MenuList
 } from './components/MenuList';
+export { PhoneInput } from './components/PhoneInput';
+export type { Props as PhoneInputProps } from './components/PhoneInput';
 export { Radio } from './components/Radio';
 export { ScrollShadow } from './components/ScrollShadow';
 export { globalThemeVars, Select } from './components/Select';