From 87c1c8a7a97e930ebc08e6034afc30f69934f438 Mon Sep 17 00:00:00 2001
From: Mcklien Ross Onoya <76947297+mcklien@users.noreply.github.com>
Date: Wed, 20 Nov 2024 12:11:31 +0100
Subject: [PATCH 1/3] seperate width props from input props

---
 packages/spor-react/src/input/SearchInput.tsx | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/spor-react/src/input/SearchInput.tsx b/packages/spor-react/src/input/SearchInput.tsx
index c7234f510..cd7fa549a 100644
--- a/packages/spor-react/src/input/SearchInput.tsx
+++ b/packages/spor-react/src/input/SearchInput.tsx
@@ -2,6 +2,7 @@ import {
   Input as ChakraInput,
   InputProps as ChakraInputProps,
   IconButton,
+  LayoutProps,
   forwardRef,
   useFormControlContext,
 } from "@chakra-ui/react";
@@ -33,15 +34,18 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
     const formControlProps = useFormControlContext();
     const autoGeneratedId = useId();
     const inputId = props.id ?? formControlProps?.id ?? autoGeneratedId;
+
+    const { outerProps, innerProps } = getOuterProps(props);
+
     return (
-      <InputGroup position="relative">
+      <InputGroup position="relative" {...outerProps}>
         <InputLeftElement>
           <SearchOutline24Icon />
         </InputLeftElement>
         <ChakraInput
           paddingLeft={7}
           paddingRight={7}
-          {...props}
+          {...innerProps}
           id={inputId}
           type="search"
           css={{
@@ -74,6 +78,22 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
   },
 );
 
+const getOuterProps = (props: Record<string, any>) => {
+  const layoutKeys = new Set(["w, width, maxW, minW, maxWidth, minWidth"]); // add more keys here if neccessary
+  const outerProps: LayoutProps = {};
+  const innerProps: Record<string, any> = {};
+
+  for (const key in props) {
+    if (layoutKeys.has(key)) {
+      (outerProps as any)[key] = props[key];
+    } else {
+      (innerProps as any)[key] = props[key];
+    }
+  }
+
+  return { outerProps, innerProps };
+};
+
 const texts = createTexts({
   label: {
     nb: "Søk",

From 717158c51abb5635e969938e7915b708488ab17f Mon Sep 17 00:00:00 2001
From: Mcklien Ross Onoya <76947297+mcklien@users.noreply.github.com>
Date: Wed, 20 Nov 2024 13:25:39 +0100
Subject: [PATCH 2/3] add changeset

---
 .changeset/real-pots-yell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/real-pots-yell.md

diff --git a/.changeset/real-pots-yell.md b/.changeset/real-pots-yell.md
new file mode 100644
index 000000000..08eb2eb66
--- /dev/null
+++ b/.changeset/real-pots-yell.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+Added support for width-related props

From 40b81915ff37d8e081883437de4a3c64bd949f6a Mon Sep 17 00:00:00 2001
From: Mcklien Ross Onoya <76947297+mcklien@users.noreply.github.com>
Date: Thu, 21 Nov 2024 10:16:48 +0100
Subject: [PATCH 3/3] Update .changeset/real-pots-yell.md

Co-authored-by: Alice Clausen <42611957+alicemacl@users.noreply.github.com>
---
 .changeset/real-pots-yell.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/real-pots-yell.md b/.changeset/real-pots-yell.md
index 08eb2eb66..01dbbfca0 100644
--- a/.changeset/real-pots-yell.md
+++ b/.changeset/real-pots-yell.md
@@ -2,4 +2,4 @@
 "@vygruppen/spor-react": minor
 ---
 
-Added support for width-related props
+SearchInput: Added support for width-related props