remove styled macro

Parts/Button.js

@@ -1,6 +1,6 @@
 import React from "react"
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 import { colors, colorsDisabled, colorsHover } from "./Colors"
 
 const BtnCreator = function ({ children, type, ...props }) {

Parts/Card.js

@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)
 

Parts/Colors.js

@@ -1,6 +1,6 @@
 
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 
 export let colors = {

Parts/DropDown.js

@@ -3,7 +3,7 @@ import { createPopper } from "@popperjs/core";
 import { usePopper } from 'react-popper';
 
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 
 import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
 

Parts/Input.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import tw, { styled } from "twin.macro";
-import "styled-components/macro";
+ ;
 //import { useField as useFormikField, useFormikContext } from "formik";
 const useFormikField = null;
 const useFormikContext = ()=>{};

Parts/Layout.js

@@ -1,11 +1,11 @@
 import React from "react"
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 const Full = styled.div(tw`w-full lg:px-2 py-2`)
 export {Full}
 
-const Half = styled.div(tw`w-full lg:w-6/12 lg:px-2 py-2`)
+const Half = styled.div(tw`w-full lg:w-8/12 xl:w-6/12 lg:px-2 py-2`)
 export {Half}
 
 const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `)
@@ -14,7 +14,7 @@ export {Quarter}
 const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `)
 export {Sixth}
 
-const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `)
+const Third = styled.div(tw`w-full lg:w-8/12 xl:w-4/12 lg:px-2 py-2 `)
 export {Third}
 
 const TwoThird = styled.div(tw`w-full lg:w-8/12 lg:px-2 py-2 `)

Parts/Modal.js

@@ -2,7 +2,7 @@ import React from "react"
 import { Half, Third } from "./Layout"
 
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 
 function Modal({ isOpen, onBackdropClick, ...props }) {
   if (isOpen) {

Parts/Pagination.js

@@ -1,6 +1,6 @@
 import Button from "./Button";
 import tw, { styled } from "twin.macro";
-import "styled-components/macro";
+ ;
 
 const Btn = styled(Button)(({ active }) => [tw`rounded-none mx-0`, active && tw`bg-accent`]);
 

Parts/RangeSlider.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from "react";
 import styles from "./RangeSlider.scss"
 
 import tw from "twin.macro"
-import "styled-components/macro"
+ 
 
 
 export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {

Parts/Table.js

@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 export function Table(props) {
   return <div tw="block w-full overflow-x-auto text-secondary">

Parts/Text.js

@@ -1,6 +1,6 @@
 import React from "react"
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 import { textColors, textColorsHover } from "./Colors"
 
 

globalStyle.js

@@ -1,4 +1,3 @@
-import React, { useState } from "react"
 import { createGlobalStyle } from "styled-components"
 import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
 

styledRegistry.js

@@ -0,0 +1,25 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({ children }) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}