From 1a01b1ddc8f4264afebdbc331d09f74e46e18f6c Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Tue, 5 Apr 2022 00:22:47 +0500
Subject: [PATCH] try updating button-select

---
 package.json                    |  2 +-
 src/components/ButtonSelect.tsx | 50 +++++++++++++++------------------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 82d4e94..e6f30d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",
diff --git a/src/components/ButtonSelect.tsx b/src/components/ButtonSelect.tsx
index e4a9eaf..16132bc 100644
--- a/src/components/ButtonSelect.tsx
+++ b/src/components/ButtonSelect.tsx
@@ -17,33 +17,29 @@ type PickerProps<T extends string> = {
 }
 
 function ButtonSelect<L extends string>(props: PickerProps<L>) {
-    return (
-        <div className="d-inline-flex flex-row justify-content-center">
-            <div className="btn-group">
-                {props.options.map((option) => (
-                    <button
-                        key={option.value}
-                        type="button"
-                        className={classNames(
-                            "btn",
-                            "btn-outline-secondary",
-                            { active: props.value === option.value },
-                            { "btn-sm": props.small || props.xSmall }
-                        )}
-                        onClick={() => props.handleChange(option.value)}
-                        style={{
-                            ...props.xSmall ?
-                                { fontSize: "small" }: {},
-                            ...(option.color && (props.value === option.value)) ? 
-                                { backgroundColor: option.color } : {},
-                        }}
-                    >
-                        {option.label}
-                    </button>
-                ))}
-            </div>
-        </div>
-    );
+    return <div className="btn-group">
+        {props.options.map((option) => (
+            <button
+                key={option.value}
+                type="button"
+                className={classNames(
+                    "btn",
+                    "btn-outline-secondary",
+                    { active: props.value === option.value },
+                    { "btn-sm": props.small || props.xSmall }
+                )}
+                onClick={() => props.handleChange(option.value)}
+                style={{
+                    ...props.xSmall ?
+                        { fontSize: "small" }: {},
+                    ...(option.color && (props.value === option.value)) ? 
+                        { backgroundColor: option.color } : {},
+                }}
+            >
+                {option.label}
+            </button>
+        ))}
+    </div>
 }
 
 export default ButtonSelect;