From b84a33eb546f5cb5dcc6c400559d0d83922de0b2 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Fri, 2 Dec 2022 20:45:35 -0700
Subject: [PATCH 1/3] Adds the NumberButtonSequence component

---
 src/components/NumberButtonSequence.tsx | 25 +++++++++++++++++++++++++
 src/utils/range.ts                      |  3 +++
 2 files changed, 28 insertions(+)
 create mode 100644 src/components/NumberButtonSequence.tsx
 create mode 100644 src/utils/range.ts

diff --git a/src/components/NumberButtonSequence.tsx b/src/components/NumberButtonSequence.tsx
new file mode 100644
index 000000000..fd233f3a0
--- /dev/null
+++ b/src/components/NumberButtonSequence.tsx
@@ -0,0 +1,25 @@
+import { FC } from "react"
+import { HStack, Button } from "@threshold-network/components"
+import { range } from "../utils/range"
+
+const NumberButtonSequence: FC<{
+  numberOfButtons: number
+  selectedButtonNum: number
+  setSelectedButtonNum: (n: number) => void
+}> = ({ numberOfButtons, selectedButtonNum, setSelectedButtonNum }) => {
+  return (
+    <HStack spacing={1}>
+      {range(numberOfButtons, 1).map((n) => (
+        <Button
+          variant="sequence"
+          isSelected={n === selectedButtonNum}
+          onClick={() => setSelectedButtonNum(n)}
+        >
+          {n}
+        </Button>
+      ))}
+    </HStack>
+  )
+}
+
+export default NumberButtonSequence
diff --git a/src/utils/range.ts b/src/utils/range.ts
new file mode 100644
index 000000000..4ff7db211
--- /dev/null
+++ b/src/utils/range.ts
@@ -0,0 +1,3 @@
+export const range = (size: number, startAt = 0) => {
+  return Array.from(Array(size).keys()).map((i) => i + startAt)
+}

From 9c97e22c2f4de9d0fc40f332c2345463dd69e58a Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Fri, 2 Dec 2022 20:55:31 -0700
Subject: [PATCH 2/3] Adds stack and size props

---
 src/components/NumberButtonSequence.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/NumberButtonSequence.tsx b/src/components/NumberButtonSequence.tsx
index fd233f3a0..e218f001a 100644
--- a/src/components/NumberButtonSequence.tsx
+++ b/src/components/NumberButtonSequence.tsx
@@ -1,16 +1,28 @@
 import { FC } from "react"
-import { HStack, Button } from "@threshold-network/components"
+import { Button, HStack } from "@threshold-network/components"
 import { range } from "../utils/range"
+import { StackProps } from "@chakra-ui/react"
+import { ThemeTypings } from "@chakra-ui/styled-system"
 
-const NumberButtonSequence: FC<{
+interface NumberButtonSequenceProps extends StackProps {
   numberOfButtons: number
   selectedButtonNum: number
   setSelectedButtonNum: (n: number) => void
-}> = ({ numberOfButtons, selectedButtonNum, setSelectedButtonNum }) => {
+  size?: ThemeTypings["components"]["Button"]["sizes"]
+}
+
+const NumberButtonSequence: FC<NumberButtonSequenceProps> = ({
+  numberOfButtons,
+  selectedButtonNum,
+  setSelectedButtonNum,
+  size,
+  ...props
+}) => {
   return (
-    <HStack spacing={1}>
+    <HStack spacing={1} {...props}>
       {range(numberOfButtons, 1).map((n) => (
         <Button
+          size={size}
           variant="sequence"
           isSelected={n === selectedButtonNum}
           onClick={() => setSelectedButtonNum(n)}

From 3e7ddcd2851075470348ffb826e25a0b7e8e9798 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Mon, 5 Dec 2022 11:06:19 -0700
Subject: [PATCH 3/3] Use isActive prop instead of isSelected

---
 src/components/NumberButtonSequence.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NumberButtonSequence.tsx b/src/components/NumberButtonSequence.tsx
index e218f001a..0b0e2e40c 100644
--- a/src/components/NumberButtonSequence.tsx
+++ b/src/components/NumberButtonSequence.tsx
@@ -24,7 +24,7 @@ const NumberButtonSequence: FC<NumberButtonSequenceProps> = ({
         <Button
           size={size}
           variant="sequence"
-          isSelected={n === selectedButtonNum}
+          isActive={n === selectedButtonNum}
           onClick={() => setSelectedButtonNum(n)}
         >
           {n}