@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.5

package/lib/components/index.js

@@ -117,6 +117,12 @@ Object.defineProperty(exports, "EditTearsheetNarrow", {
     return _EditTearsheetNarrow.EditTearsheetNarrow;
   }
 });
+Object.defineProperty(exports, "EditUpdateCards", {
+  enumerable: true,
+  get: function get() {
+    return _EditUpdateCards.EditUpdateCards;
+  }
+});
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
   get: function get() {
@@ -502,4 +508,6 @@ var _EditTearsheet = require("./EditTearsheet");
 
 var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
 
-var _EditFullPage = require("./EditFullPage");
+var _EditFullPage = require("./EditFullPage");
+
+var _EditUpdateCards = require("./EditUpdateCards");

package/lib/global/js/hooks/useResetCreateComponent.js

@@ -7,6 +7,8 @@ exports.useResetCreateComponent = void 0;
 
 var _react = require("react");
 
+var _getNumberOfHiddenSteps = require("../utils/getNumberOfHiddenSteps");
+
 /**
  * Copyright IBM Corp. 2021, 2022
  *
@@ -21,6 +23,7 @@ var _react = require("react");
  * @param {object} useResetCreateComponent.previousState
  * @param {boolean} useResetCreateComponent.open
  * @param {Function} useResetCreateComponent.setCurrentStep
+ * @param {object} useResetCreateComponent.stepData
  * @param {number} useResetCreateComponent.initialStep
  * @param {number} useResetCreateComponent.totalSteps
  * @param {string} useResetCreateComponent.componentName
@@ -30,13 +33,15 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
       previousState = _ref.previousState,
       open = _ref.open,
       setCurrentStep = _ref.setCurrentStep,
+      stepData = _ref.stepData,
       initialStep = _ref.initialStep,
       totalSteps = _ref.totalSteps,
       componentName = _ref.componentName;
   (0, _react.useEffect)(function () {
     if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
-        setCurrentStep(Number(initialStep));
+        var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
+        setCurrentStep(Number(initialStep + numberOfHiddenSteps));
       } else {
         // default should be fist includedStep instead of just 1
         setCurrentStep(firstIncludedStep);
@@ -47,7 +52,7 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
         console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
       }
     }
-  }, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+  }, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
 };
 
 exports.useResetCreateComponent = useResetCreateComponent;

package/lib/global/js/package-settings.js

@@ -73,7 +73,8 @@ var defaults = {
     Datagrid: false,
     EditTearsheet: false,
     EditTearsheetNarrow: false,
-    EditFullPage: false
+    EditFullPage: false,
+    EditUpdateCards: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/global/js/utils/getBezierValues.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBezierValues = void 0;
+
+var _motion = require("@carbon/motion");
+
+/**
+ * This function turns a cubic-bezier() string to an
+ * array of values that we can use with framer-motion
+ * @param {string} type - The carbon motion type, either 'standard', 'entrance', or 'exit'
+ * @param {string} mode - The carbon motion mode, either 'productive', or 'expressive'
+ */
+var getBezierValues = function getBezierValues(type, mode) {
+  var cubicBezier = (0, _motion.motion)(type, mode);
+  var extractStringFromParens = /\(([^)]+)\)/;
+  var desiredBezierStrings = extractStringFromParens.exec(cubicBezier)[1];
+  var formattedDesiredBezierStrings = desiredBezierStrings.trim().split(',').map(Number);
+
+  if (Array.isArray(formattedDesiredBezierStrings)) {
+    return formattedDesiredBezierStrings;
+  }
+
+  return [];
+};
+
+exports.getBezierValues = getBezierValues;

package/lib/global/js/utils/getNumberOfHiddenSteps.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNumberOfHiddenSteps = void 0;
+
+/**
+ * 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.
+ */
+var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
+  var numberOfHiddenSteps = 0;
+  stepData.forEach(function (step, stepIndex) {
+    if (stepIndex + 1 > initialStep) {
+      return;
+    }
+
+    if (step.shouldIncludeStep === false) {
+      numberOfHiddenSteps += 1;
+    }
+  });
+  return numberOfHiddenSteps;
+};
+
+exports.getNumberOfHiddenSteps = getNumberOfHiddenSteps;

package/lib/global/js/utils/motionConstants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EASINGS = exports.DURATIONS = void 0;
+
+var _getBezierValues = require("./getBezierValues");
+
+var _motion = require("@carbon/motion");
+
+/**
+ * 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.
+ */
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(_motion.fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(_motion.fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(_motion.moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(_motion.moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(_motion.slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(_motion.slow02) // '700ms'
+
+};
+exports.DURATIONS = DURATIONS;
+var EASINGS = {
+  productive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'productive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'productive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'productive')
+  },
+  expressive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'expressive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'expressive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'expressive')
+  }
+};
+exports.EASINGS = EASINGS;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.5",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,11 +36,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "run-s clean build-first build-all",
+    "build": "run-s clean build-first build-all build-css-update-maps",
     "build-all": "run-p 'build:*'",
     "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
     "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
     "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
+    "build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
     "build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
     "build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
     "build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
@@ -75,6 +76,7 @@
   "dependencies": {
     "@babel/runtime": "^7.18.9",
     "@carbon/telemetry": "^0.1.0",
+    "framer-motion": "^6.5.1",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
@@ -92,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "5bffa40c7782ff89a267cd2f2f727b223a12ba50"
+  "gitHead": "53c78f2c4c8144b4fbedd9ba12c119c8bc2b8bda"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -484,7 +484,7 @@ button.#{$block-class}__global-filter-toggle {
   margin-top: $spacing-03;
 }
 
-.#{$carbon-prefix}--tooltip,
-.#{$carbon-prefix}--overflow-menu-options {
+.#{$block-class} .#{$carbon-prefix}--tooltip,
+.#{$block-class} .#{$carbon-prefix}--overflow-menu-options {
   z-index: 9000;
 }

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

@@ -93,3 +93,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.#{$block-class}-story__hidden-column-id-snippet {
+  padding-top: $spacing-07;
+}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -64,6 +64,10 @@ $row-heights: (
   }
 }
 
+.#{variables.$block-class} {
+  --#{variables.$block-class}--grid-header-height: 0;
+}
+
 .#{variables.$block-class}__inline-edit-cell {
   display: flex;
   height: 100%;
@@ -249,7 +253,9 @@ $row-heights: (
   bottom: 0;
   left: 0;
   width: 2px;
-  height: calc(100% - 50px);
+  height: calc(
+    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
+  );
   background-color: $link-inverse;
   content: '';
 }
@@ -261,15 +267,16 @@ $row-heights: (
   right: 0;
   bottom: 0;
   width: 2px;
-  height: calc(100% - 50px);
+  height: calc(
+    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
+  );
   background-color: $link-inverse;
   content: '';
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-grid-active
-  .#{variables.$block-class}__table-grid-active
-  thead::before {
+  .#{c4p-settings.$carbon-prefix}--data-table-content::before {
   position: absolute;
   z-index: 2;
   top: 0;
@@ -284,7 +291,9 @@ $row-heights: (
   .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::before,
 .#{variables.$block-class}
   .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::after {
-  height: calc(100% - 2px);
+  height: calc(
+    100% - 2px - var(--#{variables.$block-class}--grid-header-height)
+  );
 }
 
 .#{variables.$block-class}
@@ -294,6 +303,12 @@ $row-heights: (
   outline-offset: -2px;
 }
 
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-inline-edit
+  .#{variables.$block-class}__table-container {
+  padding-top: $spacing-01;
+}
+
 .#{variables.$block-class}
   .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
   [data-invalid]

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss

@@ -65,6 +65,7 @@
 .#{variables.$block-class}__customize-columns-select-all {
   display: flex;
   height: $spacing-09;
+  align-items: center;
   padding-left: $spacing-08;
   border-bottom: 1px solid $layer-active;
   background-color: $layer-01;
@@ -75,6 +76,7 @@
 .#{variables.$block-class}__customize-columns-select-all-selected {
   display: flex;
   height: $spacing-09;
+  align-items: center;
   padding-left: $spacing-08;
   border-bottom: 1px solid $layer-active;
   background-color: $layer-selected-01;

package/scss/components/EditUpdateCards/_carbon-imports.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.
+//
+
+// Import any Carbon component styles used from EditUpdateCards in this file.
+// EditUpdateCards uses the following Carbon components:

package/scss/components/EditUpdateCards/_edit-update-cards.scss

@@ -0,0 +1,85 @@
+//
+// 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.
+//
+
+// Standard imports.
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+@use '@carbon/colors/' as *;
+@use '@carbon/motion/' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// EditUpdateCards uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by EditUpdateCards
+
+// EditUpdateCards uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by EditUpdateCards
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+/* stylelint-disable max-nesting-depth */
+$block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
+
+.#{$block-class} {
+  &##{$block-class}--edit {
+    /* Used id for overriding the SVG path fill */
+
+    .#{c4p-settings.$pkg-prefix}--card__header,
+    .#{c4p-settings.$pkg-prefix}--card__footer {
+      button {
+        &:hover {
+          // stylelint-disable-next-line carbon/theme-token-use
+          background-color: $blue-60-hover;
+        }
+
+        &:focus {
+          box-shadow: none;
+        }
+
+        svg {
+          path {
+            // stylelint-disable-next-line carbon/theme-token-use
+            fill: $white-0;
+          }
+        }
+
+        &.#{c4p-settings.$pkg-prefix}--loading {
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+    .#{c4p-settings.$pkg-prefix}--card__footer {
+      // stylelint-disable-next-line carbon/theme-token-use
+      background-color: $blue-60;
+      // stylelint-disable-next-line carbon/theme-token-use
+      color: $white-0;
+    }
+    .#{c4p-settings.$pkg-prefix}--loading {
+      animation-duration: $duration-slow-02;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-name: rotate;
+      animation-timing-function: motion(standard, productive);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+  &:not(.#{$block-class}__actions-bottom) {
+    &##{$block-class}--edit {
+      .#{c4p-settings.$pkg-prefix}--card__header {
+        // stylelint-disable-next-line carbon/theme-token-use
+        background-color: $blue-60;
+        // stylelint-disable-next-line carbon/theme-token-use
+        color: $white-0;
+      }
+    }
+  }
+}

package/scss/components/EditUpdateCards/_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 './edit-update-cards';

package/scss/components/EditUpdateCards/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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 './edit-update-cards';

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

@@ -0,0 +1,55 @@
+//
+// 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/colors/' as *;
+@use '@carbon/type/' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// make the root full width to get a better idea of how the cards
+// look in a real grid situation
+/* stylelint-disable max-nesting-depth */
+#root {
+  width: 100%;
+}
+
+$block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
+
+.#{$block-class} {
+  textarea,
+  input,
+  select {
+    width: 100%;
+    height: auto;
+    padding: 0;
+    // stylelint-disable-next-line
+    font-size: type-scale(3);
+    letter-spacing: 0;
+    // stylelint-disable-next-line carbon/type-token-use
+    line-height: 1.5;
+  }
+}
+.#{$block-class}--items {
+  margin-bottom: $spacing-06;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.#{$block-class}--icon-text {
+  display: flex;
+  align-items: center;
+
+  svg {
+    margin-right: $spacing-01;
+
+    path {
+      // stylelint-disable-next-line carbon/theme-token-use
+      fill: $green-50;
+    }
+  }
+}

package/scss/components/PageHeader/_page-header.scss

@@ -466,6 +466,10 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     vertical-align: middle;
   }
 
+  .#{$block-class}__title-wrapper {
+    @include type.type-style('productive-heading-04');
+  }
+
   .#{$block-class}__page-actions {
     flex: 0 0 100%;
     margin-top: $spacing-05;

package/scss/components/SidePanel/_side-panel.scss

@@ -26,49 +26,6 @@
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
-@mixin sidePanelEntranceRight($size: map-get($side-panel-sizes, md)) {
-  @keyframes side-panel-entrance-right {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX(#{$size}); // the size width of the side panel
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-}
-
-@mixin sidePanelEntranceLeft($size: map-get($side-panel-sizes, md)) {
-  @keyframes side-panel-entrance-left {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateX(-#{$size}); // the size width of the side panel
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-}
-
-@mixin sidePanelEntrance(
-  $placement: 'right',
-  $size: map-get($side-panel-sizes, md)
-) {
-  width: $size;
-  max-width: 100%;
-  @if $placement == right {
-    @include sidePanelEntranceRight($size);
-  } @else {
-    @include sidePanelEntranceLeft($size);
-  }
-}
-
 @mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
   width: $size;
   max-width: 100%;
@@ -93,32 +50,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   -webkit-line-clamp: 2;
 }
 
-@keyframes side-panel-exit-left {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  100% {
-    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateX(calc(-1 * #{map-get($side-panel-sizes, md)}));
-  }
-}
-
-@keyframes side-panel-exit-right {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  100% {
-    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateX(map-get($side-panel-sizes, md));
-  }
-}
-
 .#{$block-class}__container {
   --#{$block-class}--subtitle-opacity: 1;
   --#{$block-class}--title-container-height: 0;
@@ -140,7 +71,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   box-sizing: border-box;
   background-color: $layer-01;
   color: $text-primary;
-  transition: transform $duration-moderate-02 motion(standard);
   @each $size, $size_value in $side-panel-sizes {
     &.#{$block-class}__container--#{$size} {
       @include setPanelSize($size_value);
@@ -152,14 +82,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       }
     }
     &.#{$block-class}__container-right-placement.#{$block-class}__container--#{$size} {
-      @include sidePanelEntrance(right, $size_value);
-
       right: 0;
       border-left: 1px solid $border-subtle-02;
     }
     &.#{$block-class}__container-left-placement.#{$block-class}__container--#{$size} {
-      @include sidePanelEntrance(left, $size_value);
-
       left: 0;
       border-right: 1px solid $border-subtle-02;
     }
@@ -283,7 +209,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     // stylelint-disable-next-line carbon/layout-token-use
     top: calc(
       var(--#{$block-class}--title-text-height) +
-        var(--#{$block-class}--label-text-height) + #{$spacing-09}
+        var(--#{$block-class}--label-text-height)
     );
     background-color: $layer-01;
   }
@@ -303,7 +229,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation {
     position: fixed;
-    top: $spacing-09;
     height: calc(
       var(--#{$block-class}--title-text-height) +
         var(--#{$block-class}--label-text-height)
@@ -358,7 +283,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     // stylelint-disable-next-line carbon/layout-token-use
     top: calc(
       var(--#{$block-class}--title-text-height) +
-        var(--#{$block-class}--subtitle-container-height) + #{$spacing-09}
+        var(--#{$block-class}--subtitle-container-height)
     );
     width: 100%;
     border-bottom: 1px solid $layer-active-01;
@@ -533,5 +458,4 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   width: 100%;
   height: 100%;
   background-color: $overlay;
-  transition: background-color $duration-moderate-02 motion(standard);
 }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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.
@@ -7,6 +7,7 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/themes/scss/themes';
 @use '@carbon/styles/scss/type';
 
 $story-prefix: side-panel-stories__;
@@ -38,3 +39,7 @@ $story-prefix: side-panel-stories__;
     margin: $spacing-05 0 $spacing-04;
   }
 }
+
+.#{$story-prefix}header {
+  @include theme(themes.$g100);
+}

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

@@ -45,3 +45,4 @@
 @use './InlineEdit/index-with-carbon' as *;
 @use './DataSpreadsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
+@use './EditUpdateCards/index-with-carbon' as *;