Add style, grammar, and punctuation docs page

packages/_icons/lib/icons/checkCircle.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import * as stylex from "@stylexjs/stylex";
+import type { IconProps } from "../base.tsx";
+
+const CheckCircleIcon = ({
+	extend,
+	className,
+	fill = "var(--svg-color, #FCFCFC)",
+	height = "1.25rem",
+	width = "1.25rem",
+	style,
+	ref,
+	...props
+}: ComponentProps<"svg"> & IconProps) => (
+	<svg
+		ref={ref}
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill={fill}
+		width={height}
+		height={width}
+		{...stylex.props(extend)}
+		className={className}
+		style={style}
+		{...props}
+	>
+		<title>Check</title>
+		<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM17.4571 9.45711L11 15.9142L6.79289 11.7071L8.20711 10.2929L11 13.0858L16.0429 8.04289L17.4571 9.45711Z" />
+	</svg>
+);
+CheckCircleIcon.displayName = "CheckCircleIcon";
+
+export { CheckCircleIcon };

packages/_icons/lib/icons/closeCircle.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import * as stylex from "@stylexjs/stylex";
+import type { IconProps } from "../base.tsx";
+
+const CloseCircleIcon = ({
+	extend,
+	className,
+	fill = "var(--svg-color, #FCFCFC)",
+	height = "1.25rem",
+	width = "1.25rem",
+	style,
+	ref,
+	...props
+}: ComponentProps<"svg"> & IconProps) => (
+	<svg
+		ref={ref}
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill={fill}
+		width={height}
+		height={width}
+		{...stylex.props(extend)}
+		className={className}
+		style={style}
+		{...props}
+	>
+		<title>Close</title>
+		<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z" />
+	</svg>
+);
+CloseCircleIcon.displayName = "CloseCircleIcon";
+
+export { CloseCircleIcon };

packages/_icons/lib/index.tsx

@@ -4,10 +4,14 @@ import { CloseIcon } from "./icons/close.tsx";
 import { ChevronUpIcon } from "./icons/chevronUp.tsx";
 import { ChevronDownIcon } from "./icons/chevronDown.tsx";
 import { ArrowRight } from "./icons/arrowRight.tsx";
+import { CloseCircleIcon } from "./icons/closeCircle.tsx";
+import { CheckCircleIcon } from "./icons/checkCircle.tsx";
 
 export {
 	CloseIcon,
 	ChevronUpIcon,
 	ChevronDownIcon,
 	ArrowRight,
+	CloseCircleIcon,
+	CheckCircleIcon,
 };

packages/_site/src/App.tsx

@@ -24,6 +24,7 @@ import AvatarPage from "./pages/components/avatar";
 import AccordianPage from "./pages/components/accordian";
 import Introduction from "./pages/components/introduction";
 import Tokens from "./pages/components/tokens";
+import Language from "./pages/components/language"
 import AlertPage from "./pages/components/alert";
 import AspectRatioPage from "./pages/components/aspect-ratio";
 import AlertDialogPage from "./pages/components/alert-dialog";
@@ -439,6 +440,18 @@ export default function App() {
 					path="playground"
 					element={<Playground />}
 				/>
+
+				<Route
+					path="language"
+					element={
+						<>
+							<ComponentsSidebar />
+							<div {...stylex.props(styles.sidebar_spacing)}>
+								<Language />
+							</div>
+						</>
+					}
+				/>
 			</Route>,
 		),
 	);