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,47 @@
+import { Close } from '@carbon/icons-react';
+import { css} from '@emotion/react';
+import styled from '@emotion/styled';
+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 const Flag = styled.span<{ country: string }>`
+//   display: inline-block;
+//   width: 20px;
+//   height: 15px;
+//   box-shadow: 0px 0px 1px 0px #888;
+//   background-image: url(${getSrcPath(flagImage)});
+//   background-repeat: no-repeat;
+
+//   ${getStyle};
+
+//   @media only screen and (-webkit-min-device-pixel-ratio: 2),
+//     only screen and (min--moz-device-pixel-ratio: 2),
+//     only screen and (-o-min-device-pixel-ratio: 2 / 1),
+//     only screen and (min-device-pixel-ratio: 2),
+//     only screen and (min-resolution: 192dpi),
+//     only screen and (min-resolution: 2dppx) {
+//     background-image: url(${getSrcPath(flagImage2x)});
+//     background-size: 5630px 15px;
+//   }
+// `;
+
+export interface Props {
+  displayFlag?: boolean;
+}
+
+export const PhoneInput = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & Props
+>(({displayFlag, ...props}, ref) => (
+  <InputWithIcons {...props} ref={ref}>
+    {displayFlag && }
+    <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';