fix(Skeleton): mark .Rect as deprecated (#1586)

- typing a subcomponent that is self-referential is sort of weird
- instead, suggest people not do that (and clarify the docs to indicate preference)
- add new snapshots

src/components/Skeleton/Skeleton.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -29,6 +30,19 @@ export const Default: StoryObj<Args> = {
   },
 };
 
+export const Rect: StoryObj<Args> = {
+  args: {
+    width: 50,
+    height: 50,
+  },
+  parameters: {
+    badges: [BADGE.DEPRECATED],
+  },
+  render: (args) => {
+    return <Skeleton.Rect {...args} />;
+  },
+};
+
 export const Circle: StoryObj<React.ComponentProps<typeof Skeleton.Circle>> = {
   args: {
     width: 100,

src/components/Skeleton/Skeleton.tsx

@@ -28,9 +28,9 @@ type SkeletonProps = BaseProps & {
  *
  * For text, Use `Skeleton.Text` and specify the height and the width (for example in 'ch' units).
  *
- * For circular objects, use `Skeleton.Circle' and specify the width (which is the same as the height).
+ * For circular objects, use `Skeleton.Circle` and specify the width (which is the same as the height).
  *
- * For all other objects, use `Skeleton.Rect` (or just `Skeleton`) and specify the width and height.
+ * For rectangular objects, just use `Skeleton` and specify the width and height.
  */
 export const Skeleton = ({
   className,
@@ -107,5 +107,6 @@ const CircleSkeleton = ({
 };
 
 Skeleton.Text = TextSkeleton;
+/** @deprecated Use `Skeleton` instead */
 Skeleton.Rect = Skeleton;
 Skeleton.Circle = CircleSkeleton;

src/components/Skeleton/__snapshots__/Skeleton.test.ts.snap

@@ -16,6 +16,14 @@ exports[`<Skeleton /> Default story renders snapshot 1`] = `
 />
 `;
 
+exports[`<Skeleton /> Rect story renders snapshot 1`] = `
+<div
+  aria-hidden="true"
+  class="skeleton skeleton--is-animating"
+  style="width: 50px; height: 50px;"
+/>
+`;
+
 exports[`<Skeleton /> Text story renders snapshot 1`] = `
 <div
   aria-hidden="true"