Bump (#642)

* Packages Bump

* Code Updated

* More API Changes

* Working updates

* Updated Tailwind Config

* SWR API updates

* More changes

* Commercejs Types

* Commercejs Types

* Commercejs Types

components/ui/Button/Button.tsx

@@ -21,6 +21,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean
 }
 
+// eslint-disable-next-line react/display-name
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,

components/ui/Collapse/Collapse.tsx

@@ -10,7 +10,7 @@ export interface CollapseProps {
   children: ReactNode
 }
 
-const Collapse: FC<CollapseProps> = React.memo(({ title, children }) => {
+const Collapse: FC<CollapseProps> = ({ title, children }) => {
   const [isActive, setActive] = useState(false)
   const [ref, { height: viewHeight }] = useMeasure()
 
@@ -41,6 +41,6 @@ const Collapse: FC<CollapseProps> = React.memo(({ title, children }) => {
       </a.div>
     </div>
   )
-})
+}
 
-export default Collapse
+export default React.memo(Collapse)

components/ui/Grid/Grid.module.css

@@ -1,53 +1,25 @@
 .root {
   @apply grid grid-cols-1 gap-0;
-
-  @screen lg {
-    @apply grid-cols-3 grid-rows-2;
-  }
-
-  & > * {
-    @apply row-span-1 bg-transparent box-border overflow-hidden;
-    height: 500px;
-    max-height: 800px;
-
-    @screen lg {
-      @apply col-span-1;
-      height: inherit;
-    }
-  }
+}
+.root > * {
+  @apply row-span-1 bg-transparent box-border overflow-hidden;
+  height: 500px;
+  max-height: 800px;
 }
 
-.default {
-  & > * {
-    @apply bg-transparent;
-  }
+.default > * {
+  @apply bg-transparent;
 }
 
 .layoutNormal {
   @apply gap-3;
 }
 
-@screen md {
-  .layoutNormal > * {
-    max-height: min-content !important;
-  }
-}
-
-@screen lg {
-  .layoutNormal > * {
-    max-height: 400px;
-  }
-}
-
 .layoutA {
   & > *:nth-child(6n + 1),
   & > *:nth-child(6n + 5) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -72,12 +44,8 @@
 .layoutB {
   & > *:nth-child(6n + 2),
   & > *:nth-child(6n + 4) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -102,12 +70,8 @@
 .layoutC {
   & > *:nth-child(12n + 1),
   & > *:nth-child(12n + 8) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -130,12 +94,8 @@
 .layoutD {
   & > *:nth-child(12n + 2),
   & > *:nth-child(12n + 7) {
-    @apply row-span-2;
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
   }
 
   &.filled {
@@ -152,3 +112,24 @@
     }
   }
 }
+
+@screen md {
+  .layoutNormal > * {
+    max-height: min-content !important;
+  }
+}
+
+@screen lg {
+  .root {
+    @apply grid-cols-3 grid-rows-2;
+  }
+
+  .root > * {
+    @apply col-span-1;
+    height: inherit;
+  }
+
+  .layoutNormal > * {
+    max-height: 400px;
+  }
+}