1 files changed, 54 insertions, 0 deletions
diff --git a/src/frontend/components/Input/Input.styled.ts b/src/frontend/components/Input/Input.styled.ts
new file mode 100644
index 0000000..d2078d1
--- /dev/null
+++ b/src/frontend/components/Input/Input.styled.ts
@@ -0,0 +1,54 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Input = styled.input`
+  width: -webkit-fill-available;
+  border: none;
+  padding: 16px;
+  outline: none;
+
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+
+  border-radius: 10px;
+  background: #f9f9f9;
+  border: 1px solid #cacaca;
+`;
+
+export const InputLabel = styled.p`
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+  font-weight: ${({ theme }) => theme.fonts.semiBold};
+  margin: 0;
+  margin-bottom: 15px;
+`;
+
+export const Select = styled.select`
+  width: 100%;
+  border: none;
+
+  padding: 16px;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+
+  border-radius: 10px;
+  background: #f9f9f9;
+  border: 1px solid #cacaca;
+`;
+
+export const InputRow = styled.div`
+  position: relative;
+  margin-bottom: 24px;
+`;
+
+export const Arrow = styled.img.attrs({
+  src: '/icons/Chevron.svg',
+  alt: 'arrow',
+})`
+  position: absolute;
+  right: 20px;
+  width: 10px;
+  height: 5px;
+  top: 64px;
+`;