Reverted back Open sans import due to issues with globalStyles

lib/src/HalstackContext.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import Color from "color";
-import { createGlobalStyle } from "styled-components";
+import styled from "styled-components";
 import {
   AdvancedTheme,
   OpinionatedTheme,
@@ -395,19 +395,20 @@ type HalstackProviderPropsType = {
 const HalstackProvider = ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType): JSX.Element => {
   const parsedTheme = useMemo(
     () => (theme ? parseTheme(theme) : advancedTheme ? parseAdvancedTheme(advancedTheme) : componentTokens),
-    [theme, advancedTheme],
+    [theme, advancedTheme]
   );
   const parsedLabels = useMemo(() => (labels ? parseLabels(labels) : defaultTranslatedComponentLabels), [labels]);
 
   return (
-    <HalstackContext.Provider value={parsedTheme}>
-      <GlobalStyle />
-      <HalstackLanguageContext.Provider value={parsedLabels}>{children}</HalstackLanguageContext.Provider>
-    </HalstackContext.Provider>
+    <Halstack>
+      <HalstackContext.Provider value={parsedTheme}>
+        <HalstackLanguageContext.Provider value={parsedLabels}>{children}</HalstackLanguageContext.Provider>
+      </HalstackContext.Provider>
+    </Halstack>
   );
 };
 
-const GlobalStyle = createGlobalStyle`
+const Halstack = styled.div`
   @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
 `;