From 2c8f7edc0a87126d3cf9f3f27c0f31111deb8303 Mon Sep 17 00:00:00 2001
From: Mauro Reis Vieira <mauroreisvieira@gmail.com>
Date: Thu, 26 Dec 2024 16:54:31 +0000
Subject: [PATCH] docs: container padding

---
 src/stories/ecommerce/examples/collections/Collections.tsx | 7 +++----
 .../ecommerce/examples/collections/components/Header.tsx   | 4 ++--
 .../examples/collections/components/ProductItem.tsx        | 1 +
 .../ecommerce/examples/collections/components/Products.tsx | 1 +
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/stories/ecommerce/examples/collections/Collections.tsx b/src/stories/ecommerce/examples/collections/Collections.tsx
index 9546b2a3..1ccc2d4e 100644
--- a/src/stories/ecommerce/examples/collections/Collections.tsx
+++ b/src/stories/ecommerce/examples/collections/Collections.tsx
@@ -1,16 +1,15 @@
 import React, { useMemo, useReducer } from "react";
 // UI Components
-import { Text, Container, Stack, Box, Accordion, Grid, Checkbox } from "@stewed/react";
+import { Text, Container, Stack, Box, Accordion, Grid, Checkbox, Separator } from "@stewed/react";
+// Partials
 import { Products } from "./components/Products";
+import { Header } from "./components/Header";
 // Hooks
 import { useFetchImages } from "../../../../api/useFetchImages";
 // Icons
 import { HiMinusSm, HiOutlinePlusSm } from "react-icons/hi";
 // Data
 import { FILTERS, PRODUCTS } from "./components/data";
-import { Header } from "./components/Header";
-import { Separator } from "@stewed/react";
-import { Slider } from "@stewed/react";
 
 interface Filters {
   tag: string[];
diff --git a/src/stories/ecommerce/examples/collections/components/Header.tsx b/src/stories/ecommerce/examples/collections/components/Header.tsx
index ddd75761..df48edf6 100644
--- a/src/stories/ecommerce/examples/collections/components/Header.tsx
+++ b/src/stories/ecommerce/examples/collections/components/Header.tsx
@@ -18,8 +18,8 @@ interface HeaderProps {
 
 export function Header({ sort, setSort }: HeaderProps): React.ReactElement {
   return (
-    <Box skin="neutral-faded" padding={{ block: "4xl", inline: "lg" }}>
-      <Container screen="xl" alignment="center" padding={{ block: "7xl" }}>
+    <Box skin="neutral-faded" padding={{ block: "4xl" }}>
+      <Container screen="xl" alignment="center" padding={{ block: "7xl", inline: "lg" }}>
         <Stack justify="between" items="baseline">
           <div>
             <Text as="h1" size="3xl" weight="medium">
diff --git a/src/stories/ecommerce/examples/collections/components/ProductItem.tsx b/src/stories/ecommerce/examples/collections/components/ProductItem.tsx
index d0bef8e2..8be950f0 100644
--- a/src/stories/ecommerce/examples/collections/components/ProductItem.tsx
+++ b/src/stories/ecommerce/examples/collections/components/ProductItem.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+// UI Components
 import { Hoverable, MotionProps, Text, Card, Motion, Box, Stack, Button } from "@stewed/react";
 // Icons
 import { IoEyeOutline, IoHeartOutline, IoStar } from "react-icons/io5";
diff --git a/src/stories/ecommerce/examples/collections/components/Products.tsx b/src/stories/ecommerce/examples/collections/components/Products.tsx
index 3b2e5f86..a6d265de 100644
--- a/src/stories/ecommerce/examples/collections/components/Products.tsx
+++ b/src/stories/ecommerce/examples/collections/components/Products.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 // UI Components
 import { Box, Grid, Stack, Text } from "@stewed/react";
+// Partials
 import { ProductItem, type ProductItemProps } from "./ProductItem";
 
 interface ProductsProps {