chore(col): replace ml-* with ms-* (#643)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: huyenltnguyen <[email protected]>

Author: Copilot

src/col/col.test.tsx

@@ -11,13 +11,13 @@ describe("<Col />", () => {
 			</Col>,
 		);
 		expect(screen.getByText("Learn to code for free.")).toHaveClass(
-			"min-h-[1px] px-[15px] w-full md:w-5/6 min-[1200px]:w-2/3 md:ml-[8.3%] min-[1200px]:ml-[16.6%]",
+			"min-h-[1px] px-[15px] w-full md:w-5/6 min-[1200px]:w-2/3 md:ms-[8.3%] min-[1200px]:ms-[16.6%]",
 		);
 	});
 	it("should have lgOffSet 0 when it is passed to the component", () => {
 		render(<Col lgOffset={0}>Learn to code for free.</Col>);
 		expect(screen.getByText("Learn to code for free.")).toHaveClass(
-			"min-h-[1px] px-[15px] min-[1200px]:ml-0",
+			"min-h-[1px] px-[15px] min-[1200px]:ms-0",
 		);
 	});
 	it("should add className to it", () => {

src/col/col.tsx

@@ -18,18 +18,18 @@ const ExtraSmallClasses = {
 };
 
 const ExtraSmallOffsetClasses = {
-	1: "ml-[8.3%]",
-	2: "ml-[16.6%]",
-	3: "ml-[25%]",
-	4: "ml-[33.3%]",
-	5: "ml-[41.7%]",
-	6: "ml-[50%]",
-	7: "ml-[58.3%]",
-	8: "ml-[66.7%]",
-	9: "ml-[75%]",
-	10: "ml-[83.3%]",
-	11: "ml-[91.7%]",
-	12: "ml-[100%]",
+	1: "ms-[8.3%]",
+	2: "ms-[16.6%]",
+	3: "ms-[25%]",
+	4: "ms-[33.3%]",
+	5: "ms-[41.7%]",
+	6: "ms-[50%]",
+	7: "ms-[58.3%]",
+	8: "ms-[66.7%]",
+	9: "ms-[75%]",
+	10: "ms-[83.3%]",
+	11: "ms-[91.7%]",
+	12: "ms-[100%]",
 };
 
 const SmallClasses = {
@@ -48,18 +48,18 @@ const SmallClasses = {
 };
 
 const SmallOffsetClasses = {
-	1: "md:ml-[8.3%]",
-	2: "md:ml-[16.6%]",
-	3: "md:ml-[25%]",
-	4: "md:ml-[33.3%]",
-	5: "md:ml-[41.7%]",
-	6: "md:ml-[50%]",
-	7: "md:ml-[58.3%]",
-	8: "md:ml-[66.7%]",
-	9: "md:ml-[75%]",
-	10: "md:ml-[83.3%]",
-	11: "md:ml-[91.7%]",
-	12: "md:ml-[100%]",
+	1: "md:ms-[8.3%]",
+	2: "md:ms-[16.6%]",
+	3: "md:ms-[25%]",
+	4: "md:ms-[33.3%]",
+	5: "md:ms-[41.7%]",
+	6: "md:ms-[50%]",
+	7: "md:ms-[58.3%]",
+	8: "md:ms-[66.7%]",
+	9: "md:ms-[75%]",
+	10: "md:ms-[83.3%]",
+	11: "md:ms-[91.7%]",
+	12: "md:ms-[100%]",
 };
 
 const MediumClasses = {
@@ -78,18 +78,18 @@ const MediumClasses = {
 };
 
 const MediumOffsetClasses = {
-	1: "min-[992px]:ml-[8.3%]",
-	2: "min-[992px]:ml-[16.6%]",
-	3: "min-[992px]:ml-[25%]",
-	4: "min-[992px]:ml-[33.3%]",
-	5: "min-[992px]:ml-[41.7%]",
-	6: "min-[992px]:ml-[50%]",
-	7: "min-[992px]:ml-[58.3%]",
-	8: "min-[992px]:ml-[66.7%]",
-	9: "min-[992px]:ml-[75%]",
-	10: "min-[992px]:ml-[83.3%]",
-	11: "min-[992px]:ml-[91.7%]",
-	12: "min-[992px]:ml-[100%]",
+	1: "min-[992px]:ms-[8.3%]",
+	2: "min-[992px]:ms-[16.6%]",
+	3: "min-[992px]:ms-[25%]",
+	4: "min-[992px]:ms-[33.3%]",
+	5: "min-[992px]:ms-[41.7%]",
+	6: "min-[992px]:ms-[50%]",
+	7: "min-[992px]:ms-[58.3%]",
+	8: "min-[992px]:ms-[66.7%]",
+	9: "min-[992px]:ms-[75%]",
+	10: "min-[992px]:ms-[83.3%]",
+	11: "min-[992px]:ms-[91.7%]",
+	12: "min-[992px]:ms-[100%]",
 };
 
 const LargeClasses = {
@@ -108,19 +108,19 @@ const LargeClasses = {
 };
 
 const LargeOffsetClasses = {
-	0: "min-[1200px]:ml-0",
-	1: "min-[1200px]:ml-[8.3%]",
-	2: "min-[1200px]:ml-[16.6%]",
-	3: "min-[1200px]:ml-[25%]",
-	4: "min-[1200px]:ml-[33.3%]",
-	5: "min-[1200px]:ml-[41.7%]",
-	6: "min-[1200px]:ml-[50%]",
-	7: "min-[1200px]:ml-[58.3%]",
-	8: "min-[1200px]:ml-[66.7%]",
-	9: "min-[1200px]:ml-[75%]",
-	10: "min-[1200px]:ml-[83.3%]",
-	11: "min-[1200px]:ml-[91.7%]",
-	12: "min-[1200px]:ml-[100%]",
+	0: "min-[1200px]:ms-0",
+	1: "min-[1200px]:ms-[8.3%]",
+	2: "min-[1200px]:ms-[16.6%]",
+	3: "min-[1200px]:ms-[25%]",
+	4: "min-[1200px]:ms-[33.3%]",
+	5: "min-[1200px]:ms-[41.7%]",
+	6: "min-[1200px]:ms-[50%]",
+	7: "min-[1200px]:ms-[58.3%]",
+	8: "min-[1200px]:ms-[66.7%]",
+	9: "min-[1200px]:ms-[75%]",
+	10: "min-[1200px]:ms-[83.3%]",
+	11: "min-[1200px]:ms-[91.7%]",
+	12: "min-[1200px]:ms-[100%]",
 };
 
 export const Col = ({