From 17fafe81ae27275938b999b2d927588630935959 Mon Sep 17 00:00:00 2001
From: eatyourpeas <simon@eatyourpeas.co.uk>
Date: Thu, 13 Jun 2024 20:46:47 +0100
Subject: [PATCH 1/3] make styled-component props activeColour, inactiveColour
 and enabled props transient

---
 src/SubComponents/StyledErrorButton.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/SubComponents/StyledErrorButton.tsx b/src/SubComponents/StyledErrorButton.tsx
index 7faf5de..00df52a 100644
--- a/src/SubComponents/StyledErrorButton.tsx
+++ b/src/SubComponents/StyledErrorButton.tsx
@@ -1,19 +1,19 @@
 import styled from 'styled-components';
 
 export const StyledErrorButton = styled.button<{
-    activeColour: string;
-    inactiveColour: string;
+    $activeColour: string;
+    $inactiveColour: string;
     fontFamily: string;
     fontSize: number;
     fontWeight: string;
     fontStyle: string;
     color: string;
-    enabled: boolean;
+    $enabled: boolean;
     margin?: string;
 }>`
     align-self: flex-end;
-    background-color: ${({inactiveColour, activeColour, enabled }) => (enabled ? activeColour : inactiveColour)};
-    border: 2px solid ${({enabled, activeColour, inactiveColour}) => (enabled ? activeColour : inactiveColour)};
+    background-color: ${({$inactiveColour, $activeColour, $enabled }) => ($enabled ? $activeColour : $inactiveColour)};
+    border: 2px solid ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
     font-family: Arial;
     font-size: 14px;
     min-height: 30px;
@@ -23,12 +23,12 @@ export const StyledErrorButton = styled.button<{
     font-style: ${({ fontStyle }) => fontStyle};
     color: ${({ color }) => color};
     &:hover {
-        background-color: ${({enabled, activeColour, inactiveColour}) => (enabled ? activeColour : inactiveColour)};
+        background-color: ${({$enabled, $activeColour, $inactiveColour}) => ($enabled ? $activeColour : $inactiveColour)};
         color: ${({ color }) => color};
-        border: 2px solid ${({enabled, inactiveColour, activeColour}) => (enabled ? activeColour : inactiveColour)};
-        outline: ${({enabled, activeColour}) => (enabled ? activeColour : 'transparent')} solid 2px;
+        border: 2px solid ${({$enabled, $inactiveColour, $activeColour}) => ($enabled ? $activeColour : $inactiveColour)};
+        outline: ${({$enabled, $activeColour}) => ($enabled ? $activeColour : 'transparent')} solid 2px;
     }
     &:focus {
-        outline: ${(props) => (props.enabled ? props.activeColour : 'transparent')} solid 2px;
+        outline: ${(props) => (props.$enabled ? props.$activeColour : 'transparent')} solid 2px;
     }
 `;
\ No newline at end of file

From f58da1147cd3f28ae9ca9ad82e27c1ac828955cc Mon Sep 17 00:00:00 2001
From: eatyourpeas <simon@eatyourpeas.co.uk>
Date: Thu, 13 Jun 2024 21:11:00 +0100
Subject: [PATCH 2/3] update margin styled-component prop to transient

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

diff --git a/src/SubComponents/StyledErrorButton.tsx b/src/SubComponents/StyledErrorButton.tsx
index 00df52a..88e1e42 100644
--- a/src/SubComponents/StyledErrorButton.tsx
+++ b/src/SubComponents/StyledErrorButton.tsx
@@ -9,7 +9,7 @@ export const StyledErrorButton = styled.button<{
     fontStyle: string;
     color: string;
     $enabled: boolean;
-    margin?: string;
+    $margin?: string;
 }>`
     align-self: flex-end;
     background-color: ${({$inactiveColour, $activeColour, $enabled }) => ($enabled ? $activeColour : $inactiveColour)};

From 8d18f14f856597e45b22b140644e5ba00c060747 Mon Sep 17 00:00:00 2001
From: eatyourpeas <simon@eatyourpeas.co.uk>
Date: Thu, 13 Jun 2024 22:07:16 +0100
Subject: [PATCH 3/3] patch

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0f7ba4c..9cebd4c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rcpch/digital-growth-charts-react-component-library",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "A React component library for the RCPCH digital growth charts using Rollup, TypeScript and Styled-Components",
   "main": "build/index.js",
   "module": "build/esm.index.js",