diff --git a/.yarn/cache/@carbon-ibm-products-styles-npm-2.41.0-25232690f1-655cdfe81e.zip b/.yarn/cache/@carbon-ibm-products-styles-npm-2.41.0-25232690f1-655cdfe81e.zip
deleted file mode 100644
index 6effef859aa0..000000000000
Binary files a/.yarn/cache/@carbon-ibm-products-styles-npm-2.41.0-25232690f1-655cdfe81e.zip and /dev/null differ
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index f5169928e86d..f5b047d5292f 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -67,7 +67,6 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.30.1",
     "@carbon/styles": "1.63.1",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.5.0",
diff --git a/packages/web-components/src/components/side-panel/side-panel.mdx b/packages/web-components/src/components/side-panel/side-panel.mdx
deleted file mode 100644
index 97413418f4b0..000000000000
--- a/packages/web-components/src/components/side-panel/side-panel.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as SidePanelStories from './side-panel.stories';
-
-<Meta of={SidePanelStories} />
-
-# SidePanel
-
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
-> example implementation.
-
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
-
-Side panels keep users in-context of a page while performing tasks like
-navigating, editing, viewing details, or configuring something new.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/side-panel/index.js';
-// The following are used for slotted fields
-import '@carbon/web-components/es/components/text-input/index.js';
-import '@carbon/web-components/es/components/textarea/index.js';
-import '@carbon/web-components/es/components/button/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['side-panel'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-side-panel
-  include-overlay
-  open
-  label-text="An optional label"
-  size="md"
-  title="A title, can be omitted">
-  <!-- Content -->
-  <h5>Side panel content</h5>
-  <div class="${storyPrefix}text-inputs">
-    <cds-text-input
-      label="Input A"
-      id="side-panel-story-text-input-a"></cds-text-input>
-    <cds-text-input
-      label="Input B"
-      id="side-panel-story-text-input-b"></cds-text-input>
-  </div>
-  <div class="${storyPrefix}text-inputs">
-    <cds-text-input
-      label="Input C"
-      id="side-panel-story-text-input-c"></cds-text-input>
-    <cds-text-input
-      label="Input D"
-      id="side-panel-story-text-input-d"></cds-text-input>
-  </div>
-  <div class="${storyPrefix}textarea-container">
-    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-  </div>
-
-  <!-- subtitle optional -->
-  <div slot="subtitle">
-    Subtitle text which can provide more detail on the content being displayed.
-  </div>
-
-  <!-- Action toolbar optional -->
-  <cds-button slot="action-toolbar">Copy</cds-button>
-  <cds-button
-    slot="action-toolbar"
-    aria-label="Settings"
-    has-icon-only="true"
-    kind="${BUTTON_KIND.GHOST}"
-    size="sm"
-    tooltip-text="Settings">
-    ${Settings({ slot: 'icon' })}
-  </cds-button>
-  <cds-button
-    slot="action-toolbar"
-    aria-label="Delete"
-    has-icon-only="true"
-    kind="${BUTTON_KIND.GHOST}"
-    size="sm"
-    tooltip-text="Delete">
-    ${Trashcan({ slot: 'icon' })}
-  </cds-button>
-
-  <!-- Side panel actions optional -->
-  <cds-button slot="actions" kind="${BUTTON_KIND.GHOST}">Ghost</cds-button>
-  <cds-button slot="actions" kind="${BUTTON_KIND.PRIMARY}"></cds-button>
-</cds-side-panel>
-```
-
-## `<cds-side-panel>` attributes, properties and events
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-side-panel open>`) and `false` means not setting the attribute (e.g.
-`<cds-side-panel>` without `open` attribute).
-
-<ArgTypes of="cds-side-panel" />
diff --git a/packages/web-components/src/components/side-panel/side-panel.scss b/packages/web-components/src/components/side-panel/side-panel.scss
deleted file mode 100644
index fb5278fd2b3c..000000000000
--- a/packages/web-components/src/components/side-panel/side-panel.scss
+++ /dev/null
@@ -1,301 +0,0 @@
-/*
-* Copyright IBM Corp. 2023, 2024
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-
-$css--plex: true !default;
-
-/* Other Carbon settings. */
-@use '@carbon/styles/scss/reset';
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/utilities/ai-gradient' as *;
-@use '@carbon/styles/scss/utilities/convert' as *;
-@use 'sass:map';
-
-$pkg-prefix: 'cds';
-
-@use '@carbon/ibm-products-styles/scss/config' with (
-  $pkg-prefix: #{$pkg-prefix}
-);
-@use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
-@use '@carbon/ibm-products-styles/scss/components/SidePanel/index' as *;
-@use '@carbon/ibm-products-styles/scss/components/SidePanel/side-panel-variables'
-  as spv;
-
-$block-class: #{$pkg-prefix}--side-panel;
-$block-class-action-set: #{$pkg-prefix}--action-set;
-
-:host(#{$prefix}-side-panel) {
-  /* Replaces use of Framer for slide in / out animation */
-  --#{$block-class}--displaced: 100%;
-
-  * {
-    /* not sure why things are coming out as content-box */
-    box-sizing: border-box;
-  }
-
-  .#{$block-class} {
-    @extend .#{$block-class};
-
-    /* for actions container query - note this changes the size calculation */
-    container-name: side-panel;
-    container-type: inline-size;
-
-    &[placement='left'] {
-      --#{$block-class}--displaced: -100%;
-    }
-
-    &[opening] {
-      transform: translateX(var(--#{$block-class}--displaced));
-    }
-
-    &[open] {
-      transform: translateX(0);
-      transition: all $duration-moderate-02 motion(standard, productive);
-    }
-
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[open] {
-        transition: none;
-      }
-    }
-
-    &[closing] {
-      transform: translateX(var(--#{$block-class}--displaced));
-      transition: all $duration-moderate-01 motion(exit, productive);
-    }
-
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[closing] {
-        transition: none;
-      }
-    }
-
-    &[placement='right'] {
-      @extend .#{$block-class}--right-placement;
-
-      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
-      border-inline-end: 1px solid $border-subtle-02;
-      inset-inline-end: 0;
-    }
-
-    /* stylelint-disable-next-line no-duplicate-selectors -- disabled to keep close to 'right' setting */
-    &[placement='left'] {
-      @extend .#{$block-class}--left-placement;
-
-      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
-      border-inline-end: 1px solid $border-subtle-02;
-      inset-inline-start: 0;
-    }
-
-    @each $size, $size_value in spv.$side-panel-sizes {
-      &[size='#{$size}'] {
-        @extend .#{$block-class}--#{$size};
-      }
-    }
-
-    &[condensed-actions] {
-      @extend .#{$block-class}--condensed-actions;
-    }
-  }
-
-  #{$prefix}-layer {
-    display: contents;
-  }
-
-  .#{$block-class}__overlay {
-    &[opening] {
-      opacity: 0;
-    }
-
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[open] {
-        opacity: 1;
-        transition: none;
-      }
-    }
-
-    &[open] {
-      opacity: 1;
-      transition: all $duration-moderate-02 motion(standard, productive);
-    }
-    @media screen and (prefers-reduced-motion: reduce) {
-      &[closing] {
-        opacity: 0;
-        transition: none;
-      }
-    }
-
-    &[closing] {
-      opacity: 0;
-      transition: all $duration-moderate-01 motion(exit, productive);
-    }
-  }
-
-  .#{$block-class}__header {
-    &::before {
-      z-index: 99; /* must be higher than action toolbar */
-    }
-
-    &[detail-step] {
-      @extend .#{$block-class}__header--on-detail-step;
-    }
-
-    &[no-title-animation] {
-      @extend .#{$block-class}__header--no-title-animation;
-      // inset-block-start: 0;
-    }
-
-    &[reduced-motion] {
-      @extend .#{$block-class}__header--reduced-motion;
-    }
-
-    &[has-action-toolbar] {
-      margin-block-end: $spacing-03;
-      padding-block-end: 0;
-    }
-  }
-
-  .#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {
-    content: initial; /* remove border below */
-  }
-
-  .#{$block-class}__subtitle-text {
-    &[hidden] {
-      @extend .#{$prefix}--visually-hidden;
-    }
-  }
-
-  .#{$block-class}__action-toolbar {
-    margin-block-end: 0;
-    padding-inline-start: 0;
-
-    &[hidden] {
-      @extend .#{$prefix}--visually-hidden;
-    }
-  }
-
-  .#{$block-class} .#{$block-class}__action-toolbar[hidden] {
-    @extend .#{$prefix}--visually-hidden;
-  }
-
-  .#{$block-class}[has-slug] {
-    @extend .#{$block-class}--has-slug;
-  }
-
-  [scrolls] {
-    @extend .#{$block-class}--scrolls;
-  }
-
-  .#{$block-class}__body-content {
-    @extend .#{$block-class}__body-content;
-  }
-
-  @mixin actions-placement() {
-    --flex-direction: row;
-    /* non carbon for IBM Products adjustment */
-    flex-direction: var(--flex-direction);
-
-    ::slotted(#{$prefix}-button) {
-      flex: 0 1 25%;
-      max-inline-size: to-rem(232px);
-    }
-
-    ::slotted(#{$prefix}-button[kind='ghost']) {
-      flex: 1 1 25%;
-      max-inline-size: none;
-    }
-
-    ::slotted(#{$prefix}-button[hidden]) {
-      @extend .#{$prefix}--visually-hidden;
-
-      display: none;
-    }
-
-    // -1 in @container query is for 1px left border
-    @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
-      &:not([actions-multiple='triple']) ::slotted(#{$prefix}-button) {
-        // double and single on lg use 50%
-        flex: 0 1 50%;
-        max-inline-size: none;
-      }
-    }
-
-    // -1 in @container query is for 1px left border
-    @container (width <= #{map.get(spv.$side-panel-sizes, md)}) {
-      // md is 50% for two and 100% for one
-      // column for triple
-      &[actions-multiple] ::slotted(#{$prefix}-button) {
-        flex: 0 0 100%;
-        max-inline-size: none;
-      }
-
-      &[actions-multiple='double'] ::slotted(#{$prefix}-button) {
-        flex: 0 1 50%;
-        max-inline-size: none;
-      }
-
-      &[actions-multiple='triple'] {
-        --flex-direction: column;
-
-        ::slotted(#{$prefix}-button) {
-          flex: initial;
-          inline-size: 100%;
-          max-inline-size: none;
-        }
-      }
-    }
-
-    // -1 in @container query is for 1px left border
-    @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
-      --flex-direction: column;
-
-      ::slotted(#{$prefix}-button) {
-        flex: initial;
-        inline-size: 100%;
-        max-inline-size: none;
-      }
-    }
-  }
-
-  .#{$block-class}__actions-container {
-    @extend .#{$block-class-action-set};
-    @include actions-placement();
-
-    display: flex;
-    inline-size: 100%;
-
-    ::slotted(#{$prefix}-button) {
-      @extend .#{$block-class-action-set}__action-button;
-    }
-
-    &[hidden] {
-      @extend .#{$prefix}--visually-hidden;
-
-      display: none;
-    }
-
-    $multiples: 'single' 'double' 'triple';
-    @each $m in $multiples {
-      &[actions-multiple='#{$m}'] {
-        @extend .#{$prefix}--action-set--row-#{$m};
-      }
-    }
-
-    $sizes: 'xs' 'sm';
-    @each $s in $sizes {
-      &[size='#{$s}'] {
-        @extend .#{$block-class-action-set}--#{$s} !optional;
-      }
-    }
-  }
-
-  .sentinel {
-    @extend .#{$prefix}--visually-hidden;
-  }
-}
diff --git a/packages/web-components/src/components/side-panel/side-panel.stories.ts b/packages/web-components/src/components/side-panel/side-panel.stories.ts
index 3876bdc71831..8c32c524d4a7 100644
--- a/packages/web-components/src/components/side-panel/side-panel.stories.ts
+++ b/packages/web-components/src/components/side-panel/side-panel.stories.ts
@@ -8,507 +8,23 @@
  */
 
 import { html } from 'lit';
-import '../button/button';
-import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './side-panel';
-import './index';
-import '../text-input/index';
-import '../textarea/index';
-import Settings from '@carbon/icons/lib/settings/16';
-import Trashcan from '@carbon/icons/lib/trash-can/16';
-import { prefix } from '../../globals/settings';
 
-import styles from './story-styles.scss?lit';
-import { BUTTON_KIND } from '../button/button';
-
-const toggleButton = () => {
-  document.querySelector(`${prefix}-side-panel`)?.toggleAttribute('open');
-};
-
-const nextStep = () => {
-  document
-    .querySelector(`${prefix}-side-panel`)
-    ?.setAttribute('current-step', '1');
-};
-
-const prevStep = () => {
-  document
-    .querySelector(`${prefix}-side-panel`)
-    ?.setAttribute('current-step', '0');
-};
-
-const sizes = {
-  // 'default (md)': null,
-  [`Extra small size (${SIDE_PANEL_SIZE.EXTRA_SMALL})`]:
-    SIDE_PANEL_SIZE.EXTRA_SMALL,
-  [`Small size (${SIDE_PANEL_SIZE.SMALL})`]: SIDE_PANEL_SIZE.SMALL,
-  [`Medium size (default) (${SIDE_PANEL_SIZE.MEDIUM})`]: SIDE_PANEL_SIZE.MEDIUM,
-  [`Large size (${SIDE_PANEL_SIZE.LARGE})`]: SIDE_PANEL_SIZE.LARGE,
-  [`Extra Extra Large size (${SIDE_PANEL_SIZE.EXTRA_EXTRA_LARGE})`]:
-    SIDE_PANEL_SIZE.EXTRA_EXTRA_LARGE,
-};
-
-const placements = {
-  // 'default (right)': null,
-  left: SIDE_PANEL_PLACEMENT.LEFT,
-  'right (default)': SIDE_PANEL_PLACEMENT.RIGHT,
-};
-
-const contents = {
-  Empty: 0,
-  'Brief content': 1,
-  'Longer content': 2,
-};
-
-const storyPrefix = 'side-panel-stories__';
-
-const getContent = (index) => {
-  switch (index) {
-    case 1:
-      return html`
-        <style>
-          ${styles}
-        </style>
-        <h5>Section</h5>
-        <cds-text-input
-          label="Input A"
-          id="side-panel-story-text-input-a"
-          class="${storyPrefix}text-input"></cds-text-input>
-        <cds-text-input
-          label="Input B"
-          id="side-panel-story-text-input-b"
-          class="${storyPrefix}text-input"></cds-text-input>
-      `;
-    case 2:
-      return html`
-        <style>
-          ${styles}
-        </style>
-        <h5>Section</h5>
-        <div class="${storyPrefix}text-inputs">
-          <cds-text-input
-            label="Input A"
-            id="side-panel-story-text-input-a"></cds-text-input>
-          <cds-text-input
-            label="Input B"
-            id="side-panel-story-text-input-b"></cds-text-input>
-        </div>
-        <div class="${storyPrefix}text-inputs">
-          <cds-text-input
-            label="Input C"
-            id="side-panel-story-text-input-c"></cds-text-input>
-          <cds-text-input
-            label="Input D"
-            id="side-panel-story-text-input-d"></cds-text-input>
-        </div>
-        <div class="${storyPrefix}textarea-container">
-          <cds-textarea
-            label="Notes"
-            value="This is a text area"></cds-textarea>
-          <cds-textarea
-            label="Notes"
-            value="This is a text area"></cds-textarea>
-          <cds-textarea
-            label="Notes"
-            value="This is a text area"></cds-textarea>
-        </div>
-      `;
-
-    default:
-      return null;
-  }
-};
-
-const labels = {
-  'No label': 0,
-  'Shorter label': 1,
-  'Longer label': 2,
-};
-
-const getLabel = (index) => {
-  switch (index) {
-    case 1:
-      return 'A short label';
-    case 2:
-      return 'A longer label that might go on for a little bit';
-    default:
-      return '';
-  }
-};
-
-const subtitles = {
-  'No subtitle': 0,
-  'Short subtitle': 1,
-  'Longer subtitle': 2,
-};
-const getSubTitle = (index) => {
-  switch (index) {
-    case 1:
-      return html`<div slot="subtitle">This is your subtitle slot.</div>`;
-    case 2:
-      return html`<div slot="subtitle">
-        I am your subtitle slot for <strong>adding detail</strong> that can be
-        one or two lines.
-      </div>`;
-    default:
-      return null;
-  }
-};
-
-const actionToolbarItems = {
-  'No action toolbar': 0,
-  'With action toolbar': 1,
-};
-
-const getActionToolbarItems = (index) => {
-  switch (index) {
-    case 1:
-      return html`
-        <cds-button slot="action-toolbar">Copy</cds-button>
-        <cds-button
-          slot="action-toolbar"
-          aria-label="Settings"
-          has-icon-only="true"
-          kind=${BUTTON_KIND.GHOST}
-          size="sm"
-          tooltip-text="Settings">
-          ${Settings({ slot: 'icon' })}
-        </cds-button>
-        <cds-button
-          slot="action-toolbar"
-          aria-label="Delete"
-          has-icon-only="true"
-          kind=${BUTTON_KIND.GHOST}
-          size="sm"
-          tooltip-text="Delete">
-          ${Trashcan({ slot: 'icon' })}
-        </cds-button>
-      `;
-    default:
-      return null;
-  }
-};
-
-const actionItems = {
-  'No actions': 0,
-  'One button': 1,
-  'Two buttons with ghost': 2,
-  'Two buttons with danger': 3,
-  'Three buttons with ghost': 4,
-  'Three buttons with danger': 5,
-  'Too many buttons': 6,
-};
-
-// TODO: There are problems switching this
-const getActionItems = (index) => {
-  switch (index) {
-    case 1:
-      return html`<cds-button key="p" slot="actions" kind=${BUTTON_KIND.PRIMARY}
-        >Primary</cds-button
-      >`;
-    case 2:
-      return html`
-        <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>
-        <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
-          >Primary</cds-button
-        >
-      `;
-    case 3:
-      return html` <cds-button slot="actions" kind=${BUTTON_KIND.DANGER}
-          >Danger</cds-button
-        >
-        <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
-          >Primary</cds-button
-        >`;
-    case 4:
-      return html` <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}
-          >Ghost</cds-button
-        >
-        <cds-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
-          >Secondary</cds-button
-        >
-        <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
-          >Primary</cds-button
-        >`;
-    case 5:
-      return html`<cds-button
-          key="danger"
-          slot="actions"
-          kind=${BUTTON_KIND.DANGER}
-          >Danger</cds-button
-        >
-        <cds-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
-          >Secondary</cds-button
-        >
-        <cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
-          >Primary</cds-button
-        >`;
-    case 6:
-      return html`<cds-button
-          key="danger"
-          slot="actions"
-          kind=${BUTTON_KIND.DANGER}
-          >Danger</cds-button
-        >
-        <cds-button key="tertiary" slot="actions" kind=${BUTTON_KIND.TERTIARY}
-          >Tertiary</cds-button
-        >
-        <cds-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
-          >Secondary</cds-button
-        >
-        <cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
-          >Primary</cds-button
-        >`;
-    default:
-      return null;
-  }
-};
-
-const slugs = {
-  'No Slug': 0,
-  'With Slug': 1,
-};
-
-const getSlug = (index) => {
-  switch (index) {
-    case 1:
-      return html`<cds-slug size="xs" alignment="bottom-right">
-        <div slot="body-text">
-          <p class="secondary">AI Explained</p>
-          <h1>84%</h1>
-          <p class="secondary bold">Confidence score</p>
-          <p class="secondary">
-            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-          </p>
-          <hr />
-          <p class="secondary">Model type</p>
-          <p class="bold">Foundation model</p>
-        </div>
-      </cds-slug>`;
-    default:
-      return null;
-  }
-};
-
-const defaultTemplate = {
-  args: {
-    actionItems: getActionItems(1),
-    actionToolbarItems: getActionToolbarItems(0),
-    animateTitle: true,
-    class: 'a-user-class',
-    closeIconDescription: 'Close panel',
-    condensedActions: false,
-    content: getContent(2),
-    includeOverlay: true,
-    label: getLabel(2),
-    open: false,
-    placement: SIDE_PANEL_PLACEMENT.RIGHT,
-    preventCloseOnClickOutside: false,
-    selectorPageContent: '#page-content-selector',
-    selectorInitialFocus: '',
-    size: SIDE_PANEL_SIZE.MEDIUM,
-    slideIn: false,
-    slug: getSlug(0),
-    subtitle: getSubTitle(1),
-    title:
-      'This title is testing a very long title to see how this behaves with a longer title. It needs to be long enough to trigger overflow when collapsed.',
-  },
-  argTypes: {
-    actionItems: {
-      control: 'select',
-      description: 'Slot (actions)',
-      options: actionItems,
-    },
-    actionToolbarItems: {
-      control: 'select',
-      description: 'Slot (action-toolbar)',
-      options: actionToolbarItems,
-    },
-    animateTitle: {
-      control: 'boolean',
-      description: 'animate-title (Title animates on scroll)',
-    },
-    class: {
-      control: 'text',
-      description: 'class',
-    },
-    closeIconDescription: {
-      control: 'text',
-      description: 'Close icon description',
-    },
-    condensedActions: {
-      control: 'boolean',
-      description: 'condensed-actions',
-    },
-    content: {
-      control: 'select',
-      description: 'Slot (default), panel contents',
-      options: contents,
-    },
-    includeOverlay: {
-      control: 'boolean',
-      description: 'include-overlay',
-    },
-    label: {
-      control: 'select',
-      description: 'label',
-      options: labels,
-    },
-    open: {
-      control: 'boolean',
-      description: 'open',
-    },
-    placement: {
-      control: 'select',
-      description: 'placement',
-      options: placements,
-    },
-    preventCloseOnClickOutside: {
-      control: 'boolean',
-      description: 'prevent-close-on-click-outside',
-    },
-    selectorPageContent: {
-      control: 'text',
-      description: 'selector-page-content',
-    },
-    selectorInitialFocus: {
-      control: 'text',
-      description: 'selector-initial-focus',
-    },
-    size: {
-      control: 'select',
-      description: 'size',
-      options: sizes,
-    },
-    slideIn: {
-      control: 'boolean',
-      description: 'slide-in',
-    },
-    slug: {
-      control: 'select',
-      description: 'slug (AI slug)',
-      options: slugs,
-    },
-    subtitle: {
-      control: 'select',
-      description: 'Slot (subtitle)',
-      options: subtitles,
-    },
-    title: {
-      control: 'text',
-      description: 'title',
-    },
-  },
-  render: (args) => {
-    return html`
-      <div class="${storyPrefix}story-container">
-        <div class="${storyPrefix}story-header"></div>
-        <div id="page-content-selector" class="${storyPrefix}story-content">
-          <cds-button @click="${toggleButton}">Toggle side-panel</cds-button>
-        </div>
-      </div>
-      <cds-side-panel
-        ?animate-title=${args.animateTitle}
-        class=${args.class}
-        ?condensed-actions=${args.condensedActions}
-        current-step="0"
-        ?include-overlay=${args.includeOverlay}
-        selector-initial-focus=${args.selectorInitialFocus}
-        label-text="${args.label}"
-        ?open=${args.open}
-        placement=${args.placement}
-        ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
-        selector-page-content=${args.selectorPageContent}
-        size=${args.size}
-        ?slide-in=${args.slideIn}
-        title=${args.title}
-        @cds-side-panel-navigate-back=${prevStep}>
-        <!-- default slotted content -->
-        ${args.content}
-        <cds-button @click="${nextStep}">Step two</cds-button>
-
-        <!-- slotted subtitle slotted content -->
-        ${args.subtitle}
-
-        <!-- slotted action toolbar cds-buttons -->
-        ${args.actionToolbarItems}
-
-        <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
-
-        <!-- slotted slug -->
-        ${args.slug}
-      </cds-side-panel>
-    `;
-  },
-};
-
-export const SlideOver = {
-  ...defaultTemplate,
-};
-
-export const SlideIn = {
-  ...defaultTemplate,
-  args: {
-    ...defaultTemplate.args,
-    slideIn: true,
-  },
-};
-
-export const WithActionToolbar = {
-  ...defaultTemplate,
-  args: {
-    ...defaultTemplate.args,
-    actionToolbarItems: getActionToolbarItems(1),
-  },
-};
-
-export const SpecifyElementToHaveFocus = {
-  ...defaultTemplate,
-  args: {
-    ...defaultTemplate.args,
-    focusSelector: '#side-panel-story-text-input-a',
-    label: getLabel(0),
-  },
-  argTypes: {
-    ...defaultTemplate.argTypes,
-    focusSelector: {
-      control: 'text',
-      description: 'selector-primary-focus',
-    },
-  },
-};
-
-export const WithStaticTitle = {
-  ...defaultTemplate,
-  args: {
-    ...defaultTemplate.args,
-    animateTitle: false,
-    label: getLabel(0),
-  },
-};
-
-export const WithStaticTitleAndActionToolbar = {
-  ...defaultTemplate,
-  args: {
-    ...defaultTemplate.args,
-    actionToolbarItems: getActionToolbarItems(1),
-    animateTitle: false,
-    label: getLabel(0),
-  },
-};
-
-export const WithoutTitle = {
-  ...defaultTemplate,
-  args: {
-    ...defaultTemplate.args,
-    label: getLabel(0),
-    title: '',
-  },
+export const Default = {
+  render: () => html`
+    This component has been deprecated in
+    <code>@carbon/web-components</code> and will instead be maintained in
+    <nobr
+      ><a
+        href="https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components"
+        >@carbon/ibm-products-web-components</a
+      ></nobr
+    >.
+  `,
 };
 
 const meta = {
-  title: 'Experimental/SidePanel',
+  title: 'Deprecated/SidePanel',
+  tags: ['!autodocs'],
 };
 
 export default meta;
diff --git a/packages/web-components/src/components/side-panel/side-panel.ts b/packages/web-components/src/components/side-panel/side-panel.ts
index b8b7e6a64516..2d075cca64c0 100644
--- a/packages/web-components/src/components/side-panel/side-panel.ts
+++ b/packages/web-components/src/components/side-panel/side-panel.ts
@@ -18,7 +18,6 @@ import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';
-import styles from './side-panel.scss?lit';
 import { selectorTabbable } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16';
@@ -92,6 +91,10 @@ function tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {
 /**
  * SidePanel.
  *
+ * @deprecated Use Carbon for IBM Products `side-panel` component.
+ *   This component has been deprecated in `@carbon/web-components` and will instead be maintained
+ *   in the Carbon for IBM Products library:
+ *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components
  * @element cds-side-panel
  * @csspart dialog The dialog.
  * @fires cds-side-panel-beingclosed
@@ -965,8 +968,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
   static get eventNavigateBack() {
     return `${prefix}-side-panel-navigate-back`;
   }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 export default CDSSidePanel;
diff --git a/packages/web-components/src/components/side-panel/story-styles.scss b/packages/web-components/src/components/side-panel/story-styles.scss
deleted file mode 100644
index 1bf12373ef50..000000000000
--- a/packages/web-components/src/components/side-panel/story-styles.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-* Copyright IBM Corp. 2023, 2024
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-@use '@carbon/styles/scss/theme' as *;
-
-$story-prefix: 'side-panel-stories__';
-
-.#{$story-prefix}body-content {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  gap: 1rem;
-}
-
-.#{$story-prefix}text-inputs {
-  display: flex;
-  gap: 1rem;
-
-  > * {
-    flex-basis: 50%;
-  }
-}
-
-.#{$story-prefix}story-container {
-  position: fixed;
-  display: grid;
-  block-size: 100vh;
-  grid-template-rows: 3rem 1fr;
-  inline-size: 100vw;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
-
-.#{$story-prefix}story-header {
-  background: $background-inverse;
-}
-
-.#{$story-prefix}story-content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/packages/web-components/src/components/tearsheet/story-styles.scss b/packages/web-components/src/components/tearsheet/story-styles.scss
deleted file mode 100644
index 0384a186098c..000000000000
--- a/packages/web-components/src/components/tearsheet/story-styles.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-* Copyright IBM Corp. 2023, 2024
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/config' as *;
-
-$story-prefix: 'tearsheet-stories';
-
-@use '@carbon/styles/scss/spacing' as *;
-
-#page-content-selector {
-  position: absolute;
-  z-index: 9999;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-}
-
-.#{$story-prefix}__tabs .#{$prefix}--tab-content {
-  display: none;
-}
diff --git a/packages/web-components/src/components/tearsheet/tearsheet.mdx b/packages/web-components/src/components/tearsheet/tearsheet.mdx
deleted file mode 100644
index 06c4528cd6ce..000000000000
--- a/packages/web-components/src/components/tearsheet/tearsheet.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import * as TearsheetStories from './tearsheet.stories';
-
-<Meta of={TearsheetStories} />
-
-# Tearsheet
-
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
-> example implementation.
-
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
-
-Tearsheets keep users in-context of a page while performing tasks like
-navigating, editing, viewing details, or configuring something new.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/tearsheet/index.js';
-// The following are used for slotted fields
-import '@carbon/web-components/es/components/text-input/index.js';
-import '@carbon/web-components/es/components/textarea/index.js';
-import '@carbon/web-components/es/components/button/index.js';
-```
-
-<Markdown>{`${cdnJs({ components: ['tearsheet'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-### HTML
-
-```html
-<cds-tearsheet>
-  <!-- Content -->
-  <h5>Tearsheet content</h5>
-  <div class="${storyPrefix}text-inputs">
-    <cds-text-input
-      label="Input A"
-      id="tearsheet-story-text-input-a"></cds-text-input>
-    <cds-text-input
-      label="Input B"
-      id="tearsheet-story-text-input-b"></cds-text-input>
-  </div>
-  <div class="${storyPrefix}text-inputs">
-    <cds-text-input
-      label="Input C"
-      id="tearsheet-story-text-input-c"></cds-text-input>
-    <cds-text-input
-      label="Input D"
-      id="tearsheet-story-text-input-d"></cds-text-input>
-  </div>
-  <div class="${storyPrefix}textarea-container">
-    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-  </div>
-
-  <!-- subtitle optional -->
-  <div slot="subtitle">
-    Subtitle text which can provide more detail on the content being displayed.
-  </div>
-
-  <!-- Action toolbar optional -->
-  <cds-button slot="action-toolbar">Copy</cds-button>
-  <cds-button
-    slot="action-toolbar"
-    aria-label="Settings"
-    has-icon-only="true"
-    kind="${BUTTON_KIND.GHOST}"
-    size="sm"
-    tooltip-text="Settings">
-    ${Settings({ slot: 'icon' })}
-  </cds-button>
-  <cds-button
-    slot="action-toolbar"
-    aria-label="Delete"
-    has-icon-only="true"
-    kind="${BUTTON_KIND.GHOST}"
-    size="sm"
-    tooltip-text="Delete">
-    ${Trashcan({ slot: 'icon' })}
-  </cds-button>
-
-  <!-- Tearsheet actions optional -->
-  <cds-button slot="actions" kind="${BUTTON_KIND.GHOST}">Ghost</cds-button>
-  <cds-button slot="actions" kind="${BUTTON_KIND.PRIMARY}"></cds-button>
-</cds-tearsheet>
-```
-
-## `<cds-tearsheet>` attributes, properties and events
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-tearsheet open>`) and `false` means not setting the attribute (e.g.
-`<cds-tearsheet>` without `open` attribute).
-
-<ArgTypes of="cds-tearsheet" />
diff --git a/packages/web-components/src/components/tearsheet/tearsheet.scss b/packages/web-components/src/components/tearsheet/tearsheet.scss
deleted file mode 100644
index b2a782098b49..000000000000
--- a/packages/web-components/src/components/tearsheet/tearsheet.scss
+++ /dev/null
@@ -1,321 +0,0 @@
-/*
-* Copyright IBM Corp. 2023, 2024
-*
-* This source code is licensed under the Apache-2.0 license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-
-$css--plex: true !default;
-
-/* Other Carbon settings. */
-@use '@carbon/styles/scss/reset';
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/utilities';
-@use '@carbon/styles/scss/utilities/ai-gradient' as *;
-@use '@carbon/styles/scss/components/modal' as *;
-@use '@carbon/styles/scss/utilities/convert' as *;
-@use 'sass:map';
-
-$pkg-prefix: 'cds';
-
-@use '@carbon/ibm-products-styles/scss/config' with (
-  $pkg-prefix: #{$pkg-prefix}
-);
-@use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
-@use '@carbon/ibm-products-styles/scss/components/Tearsheet/index' as *;
-
-$block-class: #{$pkg-prefix}--tearsheet;
-$block-class-action-set: #{$pkg-prefix}--action-set;
-$motion-duration: $duration-moderate-02;
-
-:host(#{$prefix}-tearsheet) {
-  --content-padding: #{$spacing-05};
-
-  @extend .#{$prefix}--modal;
-  @extend .#{$prefix}--tearsheet;
-
-  .#{$block-class}__header,
-  .#{$block-class}__content,
-  .#{$block-class}__influencer {
-    padding: var(--content-padding);
-  }
-
-  .#{$block-class}__container {
-    /* lower prop is deprecated but the default in ibm products */
-    @extend .#{$block-class}__container--lower;
-
-    max-block-size: calc(100% - (#{$spacing-09} + #{$spacing-08}));
-  }
-
-  .#{$block-class}__container[stack-position='1'][stack-depth='2'],
-  .#{$block-class}__container[stack-position='2'][stack-depth='3'] {
-    max-block-size: calc(
-      100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05}
-    );
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-single));
-  }
-
-  .#{$block-class}__container[stack-position='1'][stack-depth='3'] {
-    max-block-size: calc(
-      100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
-    );
-    transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
-  }
-
-  .#{$block-class}__buttons {
-    @extend .#{$block-class}__button-container;
-    @extend .#{$block-class-action-set};
-
-    display: flex;
-    background: $background;
-    inline-size: 100%;
-  }
-
-  .#{$block-class}__buttons[hidden] {
-    @extend .#{$prefix}--visually-hidden;
-
-    display: none;
-  }
-
-  .#{$block-class}__buttons ::slotted(#{$prefix}-button) {
-    @extend .#{$block-class-action-set}__action-button;
-
-    flex: 0 1 25%;
-    block-size: $spacing-11;
-    max-inline-size: to-rem(232px);
-  }
-
-  .#{$block-class}__buttons ::slotted(#{$prefix}-button[kind='ghost']) {
-    flex: 1 1 25%;
-    max-inline-size: none;
-  }
-
-  .#{$block-class}__buttons ::slotted(#{$prefix}-button[hidden]) {
-    @extend .#{$prefix}--visually-hidden;
-
-    display: none;
-  }
-
-  .#{$block-class}__influencer[wide] {
-    @extend .#{$block-class}__influencer--wide;
-  }
-}
-
-:host(#{$prefix}-tearsheet[open]) {
-  --overlay-color: #{$overlay};
-  --overlay-opacity: 1;
-
-  z-index: utilities.z('modal');
-  align-items: flex-end;
-  background: initial;
-  opacity: 1;
-
-  transition: visibility 0s linear;
-  visibility: inherit;
-
-  .#{$prefix}--tearsheet__container {
-    transform: translate3d(0, 0, 0);
-    transition: transform $duration-moderate-02 motion(entrance, expressive);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-
-  &::before {
-    position: absolute;
-    display: block;
-    background: var(--overlay-color);
-    content: '';
-    inset: 0;
-    opacity: var(--overlay-opacity);
-
-    transition: background-color $motion-duration motion(exit, expressive),
-      opacity $motion-duration motion(exit, expressive);
-
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-
-    &[stack-position='1'][stack-depth='2'] {
-      --overlay-opacity: 0.67;
-    }
-
-    &[stack-position='1'][stack-depth='3'] {
-      --overlay-opacity: 0.22;
-    }
-
-    &[stack-position='2'][stack-depth='3'] {
-      --overlay-opacity: 0.5;
-    }
-
-    &[stack-position='2'][stack-depth='2'],
-    &[stack-position='3'][stack-depth='3'] {
-      --overlay-opacity: 0.5;
-    }
-  }
-}
-
-:host(#{$prefix}-tearsheet[hidden]) {
-  @extend .#{$prefix}--visually-hidden;
-}
-
-:host(#{$prefix}-tearsheet[slug]) {
-  --overlay-color: #{$ai-overlay};
-
-  .#{$block-class}__container {
-    border: 1px solid transparent;
-
-    /* override carbon ai removing background gradient */
-    background: linear-gradient(to top, var(--cds-layer), var(--cds-layer))
-        padding-box,
-      linear-gradient(
-          to bottom,
-          var(--cds-ai-border-start, #78a9ff),
-          var(--cds-ai-border-end, #d0e2ff)
-        )
-        border-box,
-      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
-    border-block-end: 0;
-    box-shadow: 0 24px 40px -24px $ai-drop-shadow;
-  }
-
-  .#{$block-class}__content {
-    @include utilities.ai-popover-gradient('default', 0);
-
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
-  }
-}
-
-:host(#{$prefix}-tearsheet[slug])
-  .#{$prefix}--tearsheet__header[has-actions]
-  ::slotted(#{$prefix}-slug) {
-  inset-inline-end: 0;
-}
-
-:host(#{$prefix}-tearsheet[stack-position='1'][stack-depth='2']),
-:host(#{$prefix}-tearsheet[stack-position='2'][stack-depth='3']) {
-  z-index: utilities.z('modal') - 1;
-}
-
-:host(#{$prefix}-tearsheet[stack-position='1'][stack-depth='3']) {
-  z-index: utilities.z('modal') - 2;
-}
-
-:host(#{$prefix}-tearsheet[width='narrow']) {
-  .#{$block-class}__header {
-    margin: 0;
-    background-color: $layer;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  .#{$block-class}__header-description {
-    margin-block-start: $spacing-03;
-    max-inline-size: 80%;
-  }
-
-  .#{$block-class}__main {
-    background-color: $layer;
-  }
-}
-
-:host(#{$prefix}-tearsheet[width='wide']) {
-  --content-padding: #{$spacing-06 $spacing-07};
-
-  .#{$block-class}__header {
-    margin: 0;
-    background-color: $layer;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  .#{$block-class}__header[has-navigation] {
-    padding-block-end: 0;
-  }
-
-  .#{$block-class}__container {
-    inline-size: 100%;
-
-    @include breakpoint(md) {
-      inline-size: calc(100% - (2 * #{$spacing-10}));
-    }
-  }
-
-  .#{$prefix}--modal-header__heading.#{$block-class}__heading {
-    @include type.type-style('heading-04');
-  }
-
-  .#{$block-class}__header[has-close-icon],
-  .#{$block-class}__header[has-slug] {
-    padding-inline-end: $spacing-11;
-  }
-
-  .#{$block-class}__header[has-close-icon][has-slug] {
-    padding-inline-end: calc(#{$spacing-11 + $spacing-09});
-  }
-
-  .#{$block-class}__header-navigation {
-    margin-inline-start: calc(-1 * #{$spacing-05});
-    max-block-size: $spacing-08; /* #{$prefix}-tabs too tall */
-  }
-
-  .#{$block-class}__content {
-    // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
-    .#{$prefix}--pagination,
-    .#{$prefix}--pagination__control-buttons,
-    .#{$prefix}--text-input,
-    .#{$prefix}--text-area,
-    .#{$prefix}--search-input,
-    .#{$prefix}--select-input,
-    .#{$prefix}--dropdown,
-    .#{$prefix}--dropdown-list,
-    .#{$prefix}--number input[type='number'],
-    .#{$prefix}--date-picker__input {
-      background-color: $field;
-    }
-
-    .#{$prefix}--select--inline .#{$prefix}--select-input {
-      background-color: transparent;
-    }
-
-    // and restore the 'light' prop in case light fields are wanted
-    .#{$prefix}--text-input--light,
-  .#{$prefix}--text-area--light,
-  .#{$prefix}--search--light .#{$prefix}--search-input,
-  .#{$prefix}--select--light .#{$prefix}--select-input,
-  .#{$prefix}--dropdown--light,
-  .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list,
-  /* stylelint-disable-next-line prettier/prettier */
-  .#{$prefix}--number--light input[type='number'],
-  .#{$prefix}--date-picker--light
-    .#{$prefix}--date-picker__input {
-      background-color: $field-02;
-    }
-  }
-
-  .#{$pkg-prefix}--action-set
-    .#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive {
-    block-size: $spacing-11;
-  }
-}
-
-:host(#{$prefix}-tearsheet[width='narrow'])
-  .#{$block-class}__buttons[actions-multiple='single']
-  ::slotted(#{$prefix}-button),
-:host(#{$prefix}-tearsheet[width='narrow'])
-  .#{$block-class}__buttons[actions-multiple='double']
-  ::slotted(#{$prefix}-button) {
-  // double and single on lg use 50%
-  flex: 0 1 50%;
-  max-inline-size: none;
-}
-
-:host(#{$prefix}-tearsheet[width='narrow'])
-  .#{$block-class}__buttons
-  ::slotted(#{$prefix}-button) {
-  block-size: $spacing-10;
-}
diff --git a/packages/web-components/src/components/tearsheet/tearsheet.stories.ts b/packages/web-components/src/components/tearsheet/tearsheet.stories.ts
index 58ca72f77a6c..51890409e2ce 100644
--- a/packages/web-components/src/components/tearsheet/tearsheet.stories.ts
+++ b/packages/web-components/src/components/tearsheet/tearsheet.stories.ts
@@ -8,667 +8,23 @@
  */
 
 import { html } from 'lit';
-import '../button/button';
-import {
-  TEARSHEET_INFLUENCER_PLACEMENT,
-  TEARSHEET_INFLUENCER_WIDTH,
-  TEARSHEET_WIDTH,
-} from './tearsheet';
-import './index';
-import '../text-input/index';
-import '../textarea/index';
-import { prefix } from '../../globals/settings';
-
-import styles from './story-styles.scss';
-import { BUTTON_KIND } from '../button/button';
-const toggleButton = () => {
-  document.querySelector(`${prefix}-tearsheet`)?.toggleAttribute('open');
-};
-
-const widths = {
-  // 'default (narrow)': null,
-  [`Narrow (${TEARSHEET_WIDTH.NARROW})`]: TEARSHEET_WIDTH.NARROW,
-  [`Wide (${TEARSHEET_WIDTH.WIDE})`]: TEARSHEET_WIDTH.WIDE,
-};
-
-const influencerWidths = {
-  // 'default (narrow)': null,
-  [`Narrow (${TEARSHEET_INFLUENCER_WIDTH.NARROW})`]:
-    TEARSHEET_INFLUENCER_WIDTH.NARROW,
-  [`Wide (${TEARSHEET_INFLUENCER_WIDTH.WIDE})`]:
-    TEARSHEET_INFLUENCER_WIDTH.WIDE,
-};
-
-const influencerPlacements = {
-  // 'default (right)': null,
-  [`Left (${TEARSHEET_INFLUENCER_PLACEMENT.LEFT})`]:
-    TEARSHEET_INFLUENCER_PLACEMENT.LEFT,
-  [`right (${TEARSHEET_INFLUENCER_PLACEMENT.RIGHT})`]:
-    TEARSHEET_INFLUENCER_PLACEMENT.RIGHT,
-};
-
-const influencers = {
-  'No influencer': 0,
-  'Simple influencer': 1,
-  'Progress influencer': 2,
-};
-
-const getInfluencer = (index) => {
-  switch (index) {
-    case 1:
-      return html`<div
-        slot="influencer"
-        class=${`${storyPrefix}__dummy-content-block`}>
-        Influencer
-      </div>`;
-    case 2:
-      return html` <cds-progress-indicator
-        vertical
-        slot="influencer"
-        class=${`${storyPrefix}__dummy-content-block`}>
-        <cds-progress-step
-          state="complete"
-          label="First step"
-          secondary-label="Optional label"
-          description="Step 1: Getting started with Carbon Design System"></cds-progress-step>
-        <cds-progress-step
-          label="Second step with tooltip"
-          state="current"></cds-progress-step>
-        <cds-progress-step
-          label="Third step with tooltip"
-          state="incomplete"></cds-progress-step>
-        <cds-progress-step
-          label="Fourth step"
-          secondary-label="Example invalid step"
-          state="invalid"></cds-progress-step>
-        <cds-progress-step
-          disabled
-          label="Fifth step"
-          state="incomplete"></cds-progress-step>
-      </cds-progress-indicator>`;
-    default:
-      return null;
-  }
-};
-
-const contents = {
-  Empty: 0,
-  'Brief content': 1,
-  'Longer content': 2,
-};
-
-const storyPrefix = 'tearsheet-stories';
-
-const getContent = (index) => {
-  switch (index) {
-    case 1:
-      return html`
-        <style>
-          ${styles}
-        </style>
-        <div class=${`${storyPrefix}__dummy-content-block`}>
-          <h5>Section</h5>
-          <cds-text-input
-            label="Input A"
-            id="tearsheet-story-text-input-a"
-            class="${storyPrefix}text-input"></cds-text-input>
-          <cds-text-input
-            label="Input B"
-            id="tearsheet-story-text-input-b"
-            class="${storyPrefix}text-input"></cds-text-input>
-        </div>
-      `;
-    case 2:
-      return html` <style>
-          ${styles}
-        </style>
-        <div class=${`${storyPrefix}__dummy-content-block`}>
-          <h5>Section</h5>
-          <div class="${storyPrefix}text-inputs">
-            <cds-text-input
-              label="Input A"
-              id="tearsheet-story-text-input-a"></cds-text-input>
-            <cds-text-input
-              label="Input B"
-              id="tearsheet-story-text-input-b"></cds-text-input>
-          </div>
-          <div class="${storyPrefix}text-inputs">
-            <cds-text-input
-              label="Input C"
-              id="tearsheet-story-text-input-c"></cds-text-input>
-            <cds-text-input
-              label="Input D"
-              id="tearsheet-story-text-input-d"></cds-text-input>
-          </div>
-          <div class="${storyPrefix}textarea-container">
-            <cds-textarea
-              label="Notes"
-              value="This is a text area"></cds-textarea>
-            <cds-textarea
-              label="Notes"
-              value="This is a text area"></cds-textarea>
-            <cds-textarea
-              label="Notes"
-              value="This is a text area"></cds-textarea>
-          </div>
-        </div>`;
-    default:
-      return null;
-  }
-};
-
-const labels = {
-  'No label': 0,
-  'Shorter label': 1,
-  'Longer label': 2,
-};
-
-const getLabel = (index) => {
-  switch (index) {
-    case 1:
-      return html`<span slot="label">Optional label for context</span>`;
-    case 2:
-      return html`<span slot="label"
-        >A longer label giving a bit more context
-      </span>`;
-    default:
-      return null;
-  }
-};
-
-const headerActions = {
-  'No header actions': 0,
-  'Drop down': 1,
-  Buttons: 2,
-};
-
-const getActionToolbarItems = (index) => {
-  switch (index) {
-    case 1:
-      return html`<cds-dropdown slot="header-actions">
-        ${['option 1', 'option 2', 'option 3', 'option 4'].map(
-          (option) => html` <cds-dropdown-item value="${option}"
-            >${option}</cds-dropdown-item
-          >`
-        )}
-      </cds-dropdown>`;
-    case 2:
-      return html`
-        <cds-button
-          slot="header-actions"
-          kind=${BUTTON_KIND.SECONDARY}
-          size="sm"
-          style="width: initial">
-          Secondary
-        </cds-button>
-        <cds-button
-          slot="header-actions"
-          kind=${BUTTON_KIND.PRIMARY}
-          size="sm"
-          style="width: initial">
-          Primary
-        </cds-button>
-      `;
-    default:
-      return null;
-  }
-};
-
-const actionItems = {
-  'No actions': 0,
-  'One button': 1,
-  'Two buttons with ghost': 2,
-  'Two buttons with danger': 3,
-  'Three buttons with ghost': 4,
-  'Three buttons with danger': 5,
-  'Four buttons with ghost': 6,
-  'Four buttons with danger': 7,
-  'Too many buttons': 8,
-};
-
-const toActions = (kinds: BUTTON_KIND[]) => {
-  return kinds?.map((kind) => {
-    return html`<cds-button key=${kind} slot="actions" kind=${kind}>
-      ${kind.charAt(0).toUpperCase() + kind.slice(1)}
-    </cds-button>`;
-  });
-};
-
-// TODO: There are problems switching this
-const getActionItems = (index) => {
-  switch (index) {
-    case 1:
-      return toActions([BUTTON_KIND.PRIMARY]);
-    case 2:
-      return toActions([BUTTON_KIND.GHOST, BUTTON_KIND.PRIMARY]);
-    case 3:
-      return toActions([BUTTON_KIND.DANGER, BUTTON_KIND.PRIMARY]);
-    case 4:
-      return toActions([
-        BUTTON_KIND.GHOST,
-        BUTTON_KIND.SECONDARY,
-        BUTTON_KIND.PRIMARY,
-      ]);
-    case 5:
-      return toActions([
-        BUTTON_KIND.DANGER,
-        BUTTON_KIND.SECONDARY,
-        BUTTON_KIND.PRIMARY,
-      ]);
-    case 6:
-      return toActions([
-        BUTTON_KIND.GHOST,
-        BUTTON_KIND.TERTIARY,
-        BUTTON_KIND.SECONDARY,
-        BUTTON_KIND.PRIMARY,
-      ]);
-    case 7:
-      return toActions([
-        BUTTON_KIND.DANGER,
-        BUTTON_KIND.TERTIARY,
-        BUTTON_KIND.SECONDARY,
-        BUTTON_KIND.PRIMARY,
-      ]);
-    case 8:
-      return toActions([
-        BUTTON_KIND.GHOST,
-        BUTTON_KIND.DANGER,
-        BUTTON_KIND.TERTIARY,
-        BUTTON_KIND.SECONDARY,
-        BUTTON_KIND.PRIMARY,
-      ]);
-    default:
-      return null;
-  }
-};
-
-const navigation = {
-  'No navigation': 0,
-  'With navigation': 1,
-};
-
-const getNavigation = (index) => {
-  switch (index) {
-    case 1:
-      return html` <div
-        className="tearsheet-stories__tabs"
-        slot="header-navigation">
-        <cds-tabs value="1">
-          <cds-tab value="1">Tab 1</cds-tab>
-          <cds-tab value="2">Tab 2</cds-tab>
-          <cds-tab value="3">Tab 3</cds-tab>
-          <cds-tab value="4">Tab 4</cds-tab>
-        </cds-tabs>
-      </div>`;
-    default:
-      return null;
-  }
-};
-
-const slugs = {
-  'No Slug': 0,
-  'With Slug': 1,
-};
-
-const getSlug = (index) => {
-  switch (index) {
-    case 1:
-      return html`<cds-slug size="xs" alignment="bottom-right">
-        <div slot="body-text">
-          <p class="secondary">AI Explained</p>
-          <h1>84%</h1>
-          <p class="secondary bold">Confidence score</p>
-          <p class="secondary">
-            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-          </p>
-          <hr />
-          <p class="secondary">Model type</p>
-          <p class="bold">Foundation model</p>
-        </div>
-      </cds-slug>`;
-    default:
-      return null;
-  }
-};
 
 export const Default = {
-  args: {
-    actionItems: getActionItems(4),
-    headerActions: getActionToolbarItems(0),
-    content: getContent(2),
-    label: getLabel(1),
-    open: false,
-    influencerWidth: TEARSHEET_INFLUENCER_WIDTH.NARROW,
-    influencerPlacement: TEARSHEET_INFLUENCER_PLACEMENT.LEFT,
-    influencer: getInfluencer(0),
-    preventCloseOnClickOutside: false,
-    selectorInitialFocus: '',
-    width: TEARSHEET_WIDTH.WIDE,
-    slug: getSlug(0),
-    description: 'Description used to describe the flow if need be.',
-    title: 'Title used to designate the overarching flow of the tearsheet.',
-    headerNavigation: getNavigation(0),
-  },
-  argTypes: {
-    actionItems: {
-      control: 'select',
-      description: 'Slot (actions)',
-      options: actionItems,
-    },
-    headerActions: {
-      control: 'select',
-      description: 'Slot (header-toolbar)',
-      options: headerActions,
-    },
-    content: {
-      control: 'select',
-      description: 'Slot (default), panel contents',
-      options: contents,
-    },
-    label: {
-      control: 'select',
-      description: 'label',
-      options: labels,
-    },
-    open: {
-      control: 'boolean',
-      description: 'open',
-    },
-    influencerWidth: {
-      control: 'select',
-      description: 'influencer-width',
-      options: influencerWidths,
-    },
-    influencerPlacement: {
-      control: 'select',
-      description: 'influencer-placement',
-      options: influencerPlacements,
-    },
-    influencer: {
-      control: 'select',
-      description: 'influencer (slot)',
-      options: influencers,
-    },
-    preventCloseOnClickOutside: {
-      control: 'boolean',
-      description: 'prevent-close-on-click-outside',
-    },
-    selectorInitialFocus: {
-      control: 'text',
-      description: 'selector-initial-focus',
-    },
-    width: {
-      control: 'select',
-      description: 'width',
-      options: widths,
-    },
-    slug: {
-      control: 'select',
-      description: 'slug (AI slug)',
-      options: slugs,
-    },
-    description: {
-      control: 'text',
-      description: 'description',
-    },
-    title: {
-      control: 'text',
-      description: 'title',
-    },
-    headerNavigation: {
-      control: 'select',
-      description: 'header-navigation',
-      options: navigation,
-    },
-  },
-  render: (args) => {
-    return html`
-      <div class="${storyPrefix}story-container">
-        <div class="${storyPrefix}story-header"></div>
-        <div id="page-content-selector" class="${storyPrefix}story-content">
-          <cds-button @click="${toggleButton}">Toggle tearsheet</cds-button>
-        </div>
-      </div>
-      <cds-tearsheet
-        class=${args.class}
-        selector-initial-focus=${args.selectorInitialFocus}
-        ?open=${args.open}
-        influencer-placement=${args.influencerPlacement}
-        influencer-width=${args.influencerWidth}
-        ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
-        width=${args.width}>
-        <!-- default slotted content -->
-        ${args.content}
-
-        <!-- slotted header label -->
-        ${args.label}
-
-        <!-- slotted header title -->
-        ${args.title ? html`<span slot="title">${args.title}</span>` : ''}
-
-        <!-- slotted header description -->
-        ${args.description
-          ? html`<span slot="description">${args.description}</span>`
-          : ''}
-
-        <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
-
-        <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
-
-        <!-- slotted slug -->
-        ${args.slug}
-
-        <!-- slotted header-navigation -->
-        ${args.headerNavigation}
-
-        <!-- slotted influencer -->
-        ${args.influencer}
-      </cds-tearsheet>
-    `;
-  },
-};
-
-export const WithNavigation = {
-  ...Default,
-  args: {
-    ...Default.args,
-    headerNavigation: getNavigation(1),
-  },
-};
-
-export const WithInfluencer = {
-  ...Default,
-  args: {
-    ...Default.args,
-    influencer: getInfluencer(2),
-  },
-};
-
-export const WithAllHeaderItemsAndInfluencer = {
-  ...Default,
-  args: {
-    ...Default.args,
-    headerActions: getActionToolbarItems(2),
-    influencer: getInfluencer(2),
-  },
-};
-
-export const Narrow = {
-  ...Default,
-  args: {
-    ...Default.args,
-    label: getLabel(0),
-    width: TEARSHEET_WIDTH.NARROW,
-  },
-};
-
-export const NarrowWithAllHeaderItems = {
-  ...Default,
-  args: {
-    ...Default.args,
-    width: TEARSHEET_WIDTH.NARROW,
-  },
-};
-
-export const StackingTemplate = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  render: (args) => {
-    const toggleButton = (index) => {
-      const tearsheet = document.querySelector(`[data-index="${index}"]`);
-      tearsheet?.toggleAttribute('open');
-    };
-
-    return html`
-      <div class="${storyPrefix}story-container">
-        <div class="${storyPrefix}story-header"></div>
-        <div id="page-content-selector" class="${storyPrefix}story-content">
-          <cds-button-set-base z-index="9999">
-            <cds-button @click="${() => toggleButton('one')}"
-              >Toggle tearsheet one</cds-button
-            >
-            <cds-button @click="${() => toggleButton('two')}"
-              >Toggle tearsheet two</cds-button
-            >
-            <cds-button @click="${() => toggleButton('three')}"
-              >Toggle tearsheet three</cds-button
-            >
-          </cds-button-set-base>
-        </div>
-      </div>
-      <cds-tearsheet
-        data-index="one"
-        class=${args.class}
-        selector-initial-focus=${args.selectorInitialFocus}
-        ?open=${args.open}
-        influencer-placement=${args.influencerPlacement}
-        influencer-width=${args.influencerWidth}
-        ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
-        width=${args.width}>
-        <!-- default slotted content -->
-        <cds-button @click="${() => toggleButton('two')}"
-          >Toggle tearsheet two</cds-button
-        >
-        ${args.content}
-
-        <!-- slotted header label -->
-        ${args.label}
-
-        <!-- slotted header title -->
-        ${args.title ? html`<span slot="title">One ${args.title}</span>` : ''}
-
-        <!-- slotted header description -->
-        ${args.description
-          ? html`<span slot="description">${args.description}</span>`
-          : ''}
-
-        <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
-
-        <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
-
-        <!-- slotted slug -->
-        ${args.slug}
-
-        <!-- slotted header-navigation -->
-        ${args.headerNavigation}
-
-        <!-- slotted influencer -->
-        ${args.influencer}
-      </cds-tearsheet>
-      <cds-tearsheet
-        data-index="two"
-        class=${args.class}
-        selector-initial-focus=${args.selectorInitialFocus}
-        has-close-icon
-        ?open=${args.open}
-        influencer-placement=${args.influencerPlacement}
-        influencer-width=${args.influencerWidth}
-        ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
-        width=${args.width}>
-        <!-- default slotted content -->
-        <cds-button @click="${() => toggleButton('three')}"
-          >Toggle tearsheet three</cds-button
-        >
-        ${args.content}
-
-        <!-- slotted header label -->
-        ${args.label}
-
-        <!-- slotted header title -->
-        ${args.title ? html`<span slot="title">Two ${args.title}</span>` : ''}
-
-        <!-- slotted header description -->
-        ${args.description
-          ? html`<span slot="description">${args.description}</span>`
-          : ''}
-
-        <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
-
-        <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
-
-        <!-- slotted slug -->
-        ${args.slug}
-
-        <!-- slotted header-navigation -->
-        ${args.headerNavigation}
-
-        <!-- slotted influencer -->
-        ${args.influencer}
-      </cds-tearsheet>
-      <cds-tearsheet
-        data-index="three"
-        class=${args.class}
-        selector-initial-focus=${args.selectorInitialFocus}
-        has-close-icon
-        ?open=${args.open}
-        influencer-placement=${args.influencerPlacement}
-        influencer-width=${args.influencerWidth}
-        ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
-        width=${args.width}>
-        <!-- default slotted content -->
-        ${args.content}
-
-        <!-- slotted header label -->
-        ${args.label}
-
-        <!-- slotted header title -->
-        ${args.title ? html`<span slot="title">Three ${args.title}</span>` : ''}
-
-        <!-- slotted header description -->
-        ${args.description
-          ? html`<span slot="description">${args.description}</span>`
-          : ''}
-
-        <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
-
-        <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
-
-        <!-- slotted slug -->
-        ${args.slug}
-
-        <!-- slotted header-navigation -->
-        ${args.headerNavigation}
-
-        <!-- slotted influencer -->
-        ${args.influencer}
-      </cds-tearsheet>
-    `;
-  },
+  render: () => html`
+    This component has been deprecated in
+    <code>@carbon/web-components</code> and will instead be maintained in
+    <nobr
+      ><a
+        href="https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components"
+        >@carbon/ibm-products-web-components</a
+      ></nobr
+    >.
+  `,
 };
 
 const meta = {
-  title: 'Experimental/Tearsheet',
+  title: 'Deprecated/Tearsheet',
+  tags: ['!autodocs'],
 };
 
 export default meta;
diff --git a/packages/web-components/src/components/tearsheet/tearsheet.ts b/packages/web-components/src/components/tearsheet/tearsheet.ts
index 9b38f8ef5c17..212b412558af 100644
--- a/packages/web-components/src/components/tearsheet/tearsheet.ts
+++ b/packages/web-components/src/components/tearsheet/tearsheet.ts
@@ -17,7 +17,6 @@ import {
 import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
-import styles from './tearsheet.scss?lit';
 import { selectorTabbable } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import '../button/index';
@@ -85,6 +84,10 @@ function tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {
 /**
  * Tearsheet.
  *
+ * @deprecated Use Carbon for IBM Products `tearsheet` component.
+ *   This component has been deprecated in `@carbon/web-components` and will instead be maintained
+ *   in the Carbon for IBM Products library:
+ *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components
  * @element cds-tearsheet
  * @csspart dialog The dialog.
  * @fires cds-tearsheet-beingclosed
@@ -766,8 +769,6 @@ class CDSTearsheet extends HostListenerMixin(LitElement) {
   static get eventNavigateBack() {
     return `${prefix}-tearsheet-header-navigate-back`;
   }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 export default CDSTearsheet;
diff --git a/yarn.lock b/yarn.lock
index 3714ea1b776a..c3983619d99c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1855,21 +1855,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibm-products-styles@npm:^2.30.1":
-  version: 2.41.0
-  resolution: "@carbon/ibm-products-styles@npm:2.41.0"
-  dependencies:
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  peerDependencies:
-    "@carbon/grid": ^11.22.0
-    "@carbon/layout": ^11.21.0
-    "@carbon/motion": ^11.17.0
-    "@carbon/themes": ^11.34.0
-    "@carbon/type": ^11.26.0
-  checksum: 10/655cdfe81e31ba949ae3c3eb6805a153382b0e404f978e2a07ebdc5e4756fdd8f9fff0da7a4fe8068ccbad09e961ee8d5b21acae556044e92fe3e1e4fd73576b
-  languageName: node
-  linkType: hard
-
 "@carbon/icon-build-helpers@npm:^1.31.0, @carbon/icon-build-helpers@workspace:packages/icon-build-helpers":
   version: 0.0.0-use.local
   resolution: "@carbon/icon-build-helpers@workspace:packages/icon-build-helpers"
@@ -2319,7 +2304,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@carbon/web-components@workspace:packages/web-components"
   dependencies:
-    "@carbon/ibm-products-styles": "npm:^2.30.1"
     "@carbon/icon-helpers": "npm:10.47.0"
     "@carbon/icons": "npm:^11.51.0"
     "@carbon/layout": "npm:^11.27.0"