@carbon/ibm-products 1.25.1 → 2.0.0-rc.0

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -6,94 +6,88 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-@import '../SidePanel/side-panel-variables';
-
-// CreateSidePanel uses the following Carbon components:
-// Form
-@import 'carbon-components/scss/components/form/form';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../SidePanel/side-panel-variables' as side-panel-vars;
 
 // CreateSidePanel uses the following IBM Products components:
 // SidePanel
-@import '../SidePanel/side-panel';
-
-@mixin create-side-panel {
-  $block-class: #{$pkg-prefix}--create-side-panel;
-  $side-panel-block-class: #{$pkg-prefix}--side-panel;
+@use '../SidePanel/side-panel';
 
-  .#{$block-class}.#{$side-panel-block-class}__container
-    .#{$block-class}__content-text {
-    padding-right: calc(20% - #{$spacing-05});
-  }
+$create-side-panel-block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
+$side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 
-  @each $size, $value in $side-panel-sizes {
-    .#{$block-class}.#{$side-panel-block-class}__container--#{$size}
-      .#{$side-panel-block-class}__title-text {
-      width: calc(#{$value} - #{$spacing-05});
-      // stylelint-disable-next-line carbon/layout-token-use
-      padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-      margin-bottom: $spacing-02;
-    }
-    .#{$block-class}.#{$side-panel-block-class}__container--#{$size}
-      .#{$side-panel-block-class}__subtitle-text {
-      width: calc(#{$value} - #{$spacing-05});
-      // stylelint-disable-next-line carbon/layout-token-use
-      padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-      padding-bottom: $spacing-05;
-      border-bottom: 1px solid $ui-03;
-      color: $text-02;
-    }
-  }
+.#{$create-side-panel-block-class}.#{$side-panel-block-class}__container
+  .#{$create-side-panel-block-class}__content-text {
+  padding-right: calc(20% - #{$spacing-05});
+}
 
-  .#{$carbon-prefix}--form.#{$block-class}__form {
-    padding-top: $spacing-05;
+@each $size, $value in side-panel-vars.$side-panel-sizes {
+  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
+    .#{$side-panel-block-class}__title-text {
+    width: calc(#{$value} - #{$spacing-05});
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
+    margin-bottom: $spacing-02;
   }
-
-  .#{$block-class}__form.#{$carbon-prefix}--fieldset {
-    padding-top: $spacing-03;
+  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
+    .#{$side-panel-block-class}__subtitle-text {
+    width: calc(#{$value} - #{$spacing-05});
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
+    padding-bottom: $spacing-05;
+    border-bottom: 1px solid $layer-accent-01;
+    color: $text-secondary;
   }
+}
 
-  .#{$block-class}__form > * {
-    margin-bottom: $spacing-05;
-  }
+.#{c4p-settings.$carbon-prefix}--form.#{$create-side-panel-block-class}__form {
+  padding-top: $spacing-05;
+}
 
-  .#{$block-class}__form-title-text {
-    @include carbon--type-style('productive-heading-02');
+.#{$create-side-panel-block-class}__form.#{c4p-settings.$carbon-prefix}--fieldset {
+  padding-top: $spacing-03;
+}
 
-    padding-bottom: $spacing-03;
-  }
+.#{$create-side-panel-block-class}__form > * {
+  margin-bottom: $spacing-05;
+}
 
-  .#{$block-class}__form-description-text {
-    @include carbon--type-style('body-long-01');
-  }
+.#{$create-side-panel-block-class}__form-title-text {
+  @include type.type-style('productive-heading-02');
 
-  .#{$block-class}.#{$side-panel-block-class}
-    .#{$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
-    display: none;
-  }
+  padding-bottom: $spacing-03;
+}
 
-  .#{$block-class}__title {
-    @include carbon--type-style('productive-heading-03');
+.#{$create-side-panel-block-class}__form-description-text {
+  @include type.type-style('body-long-01');
+}
 
-    margin-bottom: $spacing-02;
-  }
+.#{$create-side-panel-block-class}.#{$side-panel-block-class}
+  .#{c4p-settings.$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
+  display: none;
+}
 
-  .#{$block-class}__subtitle {
-    @include carbon--type-style('body-short-01');
+.#{$create-side-panel-block-class}__title {
+  @include type.type-style('productive-heading-03');
 
-    margin-bottom: $spacing-03;
-    color: $text-02;
-  }
-  .#{$side-panel-block-class} .#{$block-class}__actions-container {
-    position: absolute;
-    z-index: 4;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin-bottom: 0;
-  }
+  margin-bottom: $spacing-02;
 }
 
-@include exports('create-side-panel') {
-  @include create-side-panel;
+.#{$create-side-panel-block-class}__subtitle {
+  @include type.type-style('body-short-01');
+
+  margin-bottom: $spacing-03;
+  color: $text-secondary;
+}
+.#{$side-panel-block-class}
+  .#{$create-side-panel-block-class}__actions-container {
+  position: absolute;
+  z-index: 4;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  margin-bottom: 0;
 }

package/scss/components/CreateSidePanel/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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-imports';
+@use './create-side-panel';

package/scss/components/CreateSidePanel/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './create-side-panel';
+@use './create-side-panel';

package/scss/components/CreateSidePanel/_storybook-styles.scss

@@ -5,23 +5,25 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing';
 
-$block-class: #{$pkg-prefix}--create-side-panel;
+$block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
 $story-prefix: create-side-panel-stories__;
 
 .#{$story-prefix}example-container {
   display: grid;
   align-items: flex-end;
-  grid-gap: $spacing-04;
+  grid-gap: spacing.$spacing-04;
   grid-template-columns: 1fr 1fr;
 }
 
-.#{$story-prefix}example-form-group .#{$carbon-prefix}--label {
+.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
   margin-bottom: 0;
 }
 
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::before,
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }

package/scss/components/CreateTearsheet/_carbon-imports.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// CreateTearsheet uses the following Carbon components:
+// ProgressIndicator, ProgressStep
+@use '@carbon/react/scss/components/progress-indicator';

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -5,129 +5,147 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// Standard imports.
-@import '../../global/styles/project-settings';
-
 // Other Carbon settings.
-@import 'carbon-components/scss/globals/grid/grid';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/components/button/tokens' as *;
+@use '@carbon/react/scss/grid' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
 
-// CreateTearsheet uses the following Carbon components:
-// ProgressIndicator, ProgressStep, Toggle, SideNav, SideNavItems, SideNavLink
-@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
-@import 'carbon-components/scss/components/toggle/toggle';
-@import 'carbon-components/scss/components/ui-shell/side-nav';
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
 
 // CreateTearsheet uses the following IBM Products components:
 // TearsheetShell
-@import '../Tearsheet/tearsheet';
-@import '../CreateInfluencer/index';
-
-@mixin create-tearsheet {
-  @keyframes step-content-entrance {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateY(-0.75rem);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  $block-class: #{$pkg-prefix}--tearsheet-create;
-  $step-block-class: #{$pkg-prefix}--tearsheet-create__step;
-  $section-block-class: #{$pkg-prefix}--tearsheet-create__section;
-  $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-create__section--divider;
-  $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-create__step--fieldset;
+@use '../Tearsheet/tearsheet';
+@use '../CreateInfluencer';
 
-  .#{$block-class} {
-    --#{$block-class}--total-width: 0;
+@keyframes step-content-entrance {
+  0% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateY(-0.75rem);
   }
 
-  .#{$block-class} .#{$step-block-class}__step--hidden-step {
-    display: none;
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  .#{$block-class} .#{$step-block-class}__step--visible-step {
-    animation: step-content-entrance $duration--slow-01;
-    animation-fill-mode: forwards;
-    animation-timing-function: $carbon--standard-easing;
-    opacity: 0;
-  }
+$create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
+$step-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step;
+$section-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section;
+$tearsheet-divider-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section--divider;
+$tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--fieldset;
+
+.#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+  animation: step-content-entrance $duration-slow-01;
+  animation-fill-mode: forwards;
+  animation-timing-function: $standard-easing;
+  opacity: 0;
+}
 
-  @media (prefers-reduced-motion) {
-    .#{$block-class} .#{$step-block-class}__step--visible-step {
-      animation: none;
-      opacity: 1;
-    }
-  }
+.#{$create-tearsheet-block-class} {
+  --#{$create-tearsheet-block-class}--total-width: 0;
+}
 
-  .#{$block-class} .#{$block-class}__content {
-    height: 100%;
-    padding: $spacing-06;
-    overflow-x: hidden;
-  }
+.#{$step-block-class} .#{c4p-settings.$carbon-prefix}--css-grid {
+  padding-left: 0;
+  margin-left: 0;
+}
 
-  .#{$block-class} .#{$block-class}__content .#{$carbon-prefix}--grid {
-    padding: 0;
-    margin: 0;
-  }
+.#{$create-tearsheet-block-class} .#{$step-block-class}__step--hidden-step {
+  display: none;
+}
 
-  .#{$block-class} .#{$block-class}__step--heading {
-    padding-bottom: $spacing-06;
-  }
+.#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+  animation: step-content-entrance $duration-slow-01;
+  animation-fill-mode: forwards;
+  animation-timing-function: $standard-easing;
+  opacity: 0;
+}
 
-  .#{$block-class}
-    .#{$carbon-prefix}--btn-set
-    .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--disabled {
-    box-shadow: -0.0625rem 0 0 0 $button-separator;
+@media (prefers-reduced-motion) {
+  .#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+    animation: none;
+    opacity: 1;
   }
+}
 
-  .#{$block-class} .#{$carbon-prefix}--side-nav--ux {
-    position: initial;
-    background-color: transparent;
-  }
+.#{$create-tearsheet-block-class} .#{$create-tearsheet-block-class}__content {
+  height: 100%;
+  padding: $spacing-06;
+  overflow-x: hidden;
+}
 
-  .#{$block-class} .#{$block-class}__section--divider {
-    position: relative;
-    display: block;
-    width: var(--#{$block-class}--total-width);
-    height: 1px;
-    margin: $spacing-06 calc(-1 * #{$spacing-08}) $spacing-07
-      calc(-1 * #{$spacing-06});
-    background-color: $ui-03;
-  }
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__content
+  .#{c4p-settings.$carbon-prefix}--grid {
+  padding: 0;
+  margin: 0;
+}
 
-  .#{$block-class} .#{$block-class}__step--title,
-  .#{$block-class} .#{$block-class}__section--title {
-    margin-bottom: $spacing-05;
-  }
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--heading {
+  padding-bottom: $spacing-06;
+}
 
-  .#{$block-class} .#{$block-class}__section--subtitle,
-  .#{$block-class} .#{$block-class}__step--subtitle {
-    @include carbon--type-style('productive-heading-01');
+.#{$create-tearsheet-block-class}
+  .#{c4p-settings.$carbon-prefix}--btn-set
+  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--disabled {
+  box-shadow: -0.0625rem 0 0 0 $button-separator;
+}
 
-    margin-bottom: $spacing-03;
-  }
+.#{$create-tearsheet-block-class}
+  .#{c4p-settings.$carbon-prefix}--side-nav--ux {
+  position: initial;
+  background-color: transparent;
+}
 
-  .#{$block-class} .#{$block-class}__section--description,
-  .#{$block-class} .#{$block-class}__step--description {
-    @include carbon--type-style('body-long-01');
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--divider {
+  position: relative;
+  display: block;
+  width: var(--#{$create-tearsheet-block-class}--total-width);
+  height: 1px;
+  margin: $spacing-06 calc(-1 * #{$spacing-08}) $spacing-07
+    calc(-1 * #{$spacing-06});
+  background-color: $layer-accent-01;
+}
 
-    margin-bottom: $spacing-06;
-  }
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--title,
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--title {
+  margin-bottom: $spacing-05;
+}
 
-  .#{$block-class} .#{$carbon-prefix}--fieldset {
-    margin-bottom: 0;
-  }
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--subtitle,
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--subtitle {
+  @include type.type-style('productive-heading-01');
 
-  .#{$block-class} .#{$block-class}__step--fieldset > * {
-    margin-bottom: $spacing-05;
-  }
+  margin-bottom: $spacing-03;
+}
+
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__section--description,
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--description {
+  @include type.type-style('body-long-01');
+
+  margin-bottom: $spacing-06;
+}
+
+.#{$create-tearsheet-block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-bottom: 0;
 }
 
-@include exports('create-tearsheet') {
-  @include create-tearsheet;
+.#{$create-tearsheet-block-class}
+  .#{$create-tearsheet-block-class}__step--fieldset
+  > * {
+  margin-bottom: $spacing-05;
 }

package/scss/components/CreateTearsheet/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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-imports';
+@use './create-tearsheet';

package/scss/components/CreateTearsheet/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './create-tearsheet';
+@use './create-tearsheet';

package/scss/components/CreateTearsheet/_storybook-styles.scss

@@ -5,12 +5,15 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family';
+@use '@carbon/styles/scss/spacing' as *;
 
-$preview-block-class: #{$pkg-prefix}--tearsheet-create-multi-step;
+$preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step;
 
 .#{$preview-block-class}__description {
-  @include carbon--type-style('body-short-01');
+  @include type.type-style('body-short-01');
 
   padding-bottom: $spacing-04;
 }
@@ -20,33 +23,33 @@ p.#{$preview-block-class}__description:last-of-type {
 }
 
 .#{$preview-block-class}__heading {
-  @include carbon--font-weight('semibold');
+  @include font-family.font-weight('semibold');
 }
 
 .#{$preview-block-class}
-  .#{$pkg-prefix}--tearsheet__content
-  .#{$carbon-prefix}--form-item {
+  .#{c4p-settings.$pkg-prefix}--tearsheet__content
+  .#{c4p-settings.$carbon-prefix}--form-item {
   margin-bottom: $spacing-05;
 }
 
-.#{$prefix}--tile-group div {
+.#{c4p-settings.$carbon-prefix}--tile-group div {
   display: flex;
   flex-wrap: wrap;
 }
 
-.#{$pkg-prefix}--tearsheet-create-multi-step--custom-tile {
+.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile {
   width: 280px;
   height: 240px;
   margin-right: $spacing-05;
 }
 
-.#{$pkg-prefix}--tearsheet-create-multi-step--custom-tile
-  .#{$pkg-prefix}--empty-state__illustration.#{$pkg-prefix}--empty-state__illustration--lg {
+.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile
+  .#{c4p-settings.$pkg-prefix}--empty-state__illustration.#{c4p-settings.$pkg-prefix}--empty-state__illustration--lg {
   min-width: 120px;
   height: 120px;
 }
 
-.#{$pkg-prefix}--tearsheet-create-multi-step--custom-tile-label {
+.#{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step--custom-tile-label {
   position: absolute;
   bottom: $spacing-05;
   left: $spacing-05;

package/scss/components/CreateTearsheetNarrow/_carbon-imports.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// CreateTearsheetNarrow uses the following Carbon components:
+// Form
+@use '@carbon/react/scss/components/form';

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -6,64 +6,56 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// CreateTearsheetNarrow uses the following Carbon components:
-// Form
-@import 'carbon-components/scss/components/form/form';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
 
 // CreateTearsheetNarrow uses the following IBM Products components:
 // TearsheetNarrow
-@import '../Tearsheet/tearsheet';
+@use '../Tearsheet/tearsheet';
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin create-tearsheet-narrow {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--create-tearsheet-narrow;
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow;
 
-  .#{$block-class} .#{$carbon-prefix}--modal-header__heading,
-  .#{$block-class} .#{$carbon-prefix}--modal-header__label,
-  .#{$block-class} .#{$pkg-prefix}--tearsheet__header-description {
-    max-width: 100%;
-    padding-right: calc(20% - #{$spacing-05});
-  }
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__heading,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-header__label,
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
+  max-width: 100%;
+  padding-right: calc(20% - #{$spacing-05});
+}
 
-  .#{$block-class} .#{$pkg-prefix}--tearsheet__header-description {
-    margin-top: $spacing-02;
-  }
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header-description {
+  margin-top: $spacing-02;
+}
 
-  .#{$block-class} .#{$pkg-prefix}--tearsheet__header {
-    border-bottom: 1px solid $decorative-01;
-  }
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__header {
+  border-bottom: 1px solid $border-subtle-02;
+}
 
-  .#{$block-class} .#{$pkg-prefix}--tearsheet__content {
-    padding: $spacing-05;
-  }
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--tearsheet__content {
+  padding: $spacing-05;
+}
 
-  .#{$block-class} .#{$block-class}__form {
-    padding-top: $spacing-05;
-  }
+.#{$block-class} .#{$block-class}__form {
+  padding-top: $spacing-05;
+}
 
-  .#{$block-class} .#{$block-class}__form > * {
-    margin-bottom: $spacing-05;
+.#{$block-class} .#{$block-class}__form > * {
+  margin-bottom: $spacing-05;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:last-child {
+    margin-bottom: 0;
   }
+}
 
-  .#{$block-class} .#{$block-class}__form-title-text {
-    @include carbon--type-style('productive-heading-02');
-
-    padding-bottom: $spacing-03;
-  }
+.#{$block-class} .#{$block-class}__form-title-text {
+  @include type.type-style('productive-heading-02');
 
-  .#{$block-class} .#{$block-class}__form-description-text {
-    @include carbon--type-style('body-long-01');
-  }
+  padding-bottom: $spacing-03;
 }
 
-@include exports('create-tearsheet-narrow') {
-  @include create-tearsheet-narrow;
+.#{$block-class} .#{$block-class}__form-description-text {
+  @include type.type-style('body-long-01');
 }