feat(Skeleton)!: deprecate .Rect subcomponent mapping (#1864)

- `Skeleton` provides the same functionality as `.Rect` so simplify by
  removing this abstraction.

In each case, `Skeleton.Rect` can be replaced with `Skeleton` and retain
the same functionality.

- update storybook doc.s

src/components/Skeleton/Skeleton.stories.tsx

@@ -1,4 +1,3 @@
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -7,11 +6,6 @@ import { Skeleton } from './Skeleton';
 export default {
   title: 'Components/Skeleton',
   component: Skeleton,
-  subcomponents: {
-    'Skeleton.Circle': Skeleton.Circle,
-    'Skeleton.Rect': Skeleton.Rect,
-    'Skeleton.Text': Skeleton.Text,
-  },
   parameters: {
     badges: ['1.2'],
     layout: 'centered',
@@ -23,26 +17,19 @@ export default {
 
 type Args = React.ComponentProps<typeof Skeleton>;
 
+/**
+ * The default shape for a skeleton is a Rounded rectangle with an optional animation.
+ */
 export const Default: StoryObj<Args> = {
   args: {
     width: 100,
     height: 100,
   },
 };
 
-export const Rect: StoryObj<Args> = {
-  args: {
-    width: 50,
-    height: 50,
-  },
-  parameters: {
-    badges: [BADGE.DEPRECATED],
-  },
-  render: (args) => {
-    return <Skeleton.Rect {...args} />;
-  },
-};
-
+/**
+ * It's also possible to use a fully-rounded circle for components like `Avatar`. Only `width` is defined for `.Circle`.
+ */
 export const Circle: StoryObj<React.ComponentProps<typeof Skeleton.Circle>> = {
   args: {
     width: 100,
@@ -52,6 +39,10 @@ export const Circle: StoryObj<React.ComponentProps<typeof Skeleton.Circle>> = {
   },
 };
 
+/**
+ * You can also use a specific variant for handling text. It is recommended to use charactor spacing units,
+ * representing the length in a way that mimics expected/maximum character length.
+ */
 export const Text: StoryObj<React.ComponentProps<typeof Skeleton.Text>> = {
   args: {
     width: '30ch',

src/components/Skeleton/Skeleton.tsx

@@ -23,14 +23,6 @@ type SkeletonProps = BaseProps & {
  * `import {Skeleton} from "@chanzuckerberg/eds";`
  *
  * Skeleton states inform users about the wait time, reason, and status of ongoing processes, showing the expected layout
- *
- * Examples:
- *
- * 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 rectangular objects, just use `Skeleton` and specify the width and height.
  */
 export const Skeleton = ({
   className,
@@ -111,6 +103,4 @@ TextSkeleton.displayName = 'Skeleton.Text';
 CircleSkeleton.displayName = 'Skeleton.Circle';
 
 Skeleton.Text = TextSkeleton;
-/** @deprecated Use `Skeleton` instead */
-Skeleton.Rect = Skeleton;
 Skeleton.Circle = CircleSkeleton;

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

@@ -16,14 +16,6 @@ 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"