@carbon/ibm-products 2.0.0-rc.29 → 2.0.0-rc.32

package/lib/global/js/utils/wait.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 // utility function for an async timeout
+
 function wait(ms) {
   return new Promise(function (resolve) {
     return setTimeout(resolve, ms);
   });
 }
-
 var _default = wait;
 exports.default = _default;

package/lib/global/js/utils/wrapFocus.js

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.elementOrParentIsFloatingMenu = elementOrParentIsFloatingMenu;
-
 var _keyboardNavigation = require("./keyboardNavigation");
-
 var _settings = require("../../../settings");
-
 /**
  * Copyright IBM Corp. 2020
  *
@@ -24,13 +21,13 @@ var _settings = require("../../../settings");
  */
 function elementOrParentIsFloatingMenu(node) {
   var selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [".".concat(_settings.carbon.prefix, "--overflow-menu-options"), ".".concat(_settings.carbon.prefix, "--tooltip"), '.flatpickr-calendar'];
-
   if (node && typeof node.closest === 'function') {
     return selectorsFloatingMenus.some(function (selector) {
       return node.closest(selector);
     });
   }
 }
+
 /**
  * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
  * @param {object} options The options.
@@ -41,26 +38,21 @@ function elementOrParentIsFloatingMenu(node) {
  * @param {Node} options.oldActiveNode The DOM node that previously had focus.
  * @param {Node} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
  */
-
-
 function wrapFocus(_ref) {
   var bodyNode = _ref.bodyNode,
-      startTrapNode = _ref.startTrapNode,
-      endTrapNode = _ref.endTrapNode,
-      currentActiveNode = _ref.currentActiveNode,
-      oldActiveNode = _ref.oldActiveNode,
-      selectorsFloatingMenus = _ref.selectorsFloatingMenus;
-
+    startTrapNode = _ref.startTrapNode,
+    endTrapNode = _ref.endTrapNode,
+    currentActiveNode = _ref.currentActiveNode,
+    oldActiveNode = _ref.oldActiveNode,
+    selectorsFloatingMenus = _ref.selectorsFloatingMenus;
   if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
     var comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
-
     if (currentActiveNode === startTrapNode || comparisonResult & _keyboardNavigation.DOCUMENT_POSITION_BROAD_PRECEDING) {
       var arrayNodes = Array.from(bodyNode.querySelectorAll(_keyboardNavigation.selectorTabbable));
       arrayNodes.reverse();
       var tabbable = arrayNodes.find(function (elem) {
         return Boolean(elem.offsetParent);
       });
-
       if (tabbable) {
         tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {
@@ -70,7 +62,6 @@ function wrapFocus(_ref) {
       var _tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(_keyboardNavigation.selectorTabbable), function (elem) {
         return Boolean(elem.offsetParent);
       });
-
       if (_tabbable) {
         _tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {
@@ -79,6 +70,5 @@ function wrapFocus(_ref) {
     }
   }
 }
-
 var _default = wrapFocus;
 exports.default = _default;

package/lib/index.js

@@ -12,11 +12,8 @@ Object.defineProperty(exports, "pkg", {
     return _settings.pkg;
   }
 });
-
 var _settings = require("./settings");
-
 var _components = require("./components");
-
 Object.keys(_components).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;

package/lib/settings.js

@@ -1,99 +1,88 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pkg = exports.carbon = void 0;
-
 var _Canary = require("./components/_Canary");
-
 var _packageSettings = _interopRequireDefault(require("./global/js/package-settings"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _themes = require("@carbon/themes");
-
 var _pconsole = _interopRequireDefault(require("./global/js/utils/pconsole"));
-
 var carbon = {
   get themes() {
     return _themes.themes;
   },
-
   prefix: 'cds'
 };
 exports.carbon = carbon;
-
 var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
   return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
 };
-
 _packageSettings.default.logDeprecated = function (component, name) {
   if (component !== null && component !== void 0 && component.deprecated) {
     var _pconsole$level;
-
     var _component$deprecated = component.deprecated,
-        level = _component$deprecated.level,
-        details = _component$deprecated.details;
+      level = _component$deprecated.level,
+      details = _component$deprecated.details;
     var logUsing = (_pconsole$level = _pconsole.default === null || _pconsole.default === void 0 ? void 0 : _pconsole.default[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : _pconsole.default.error;
     logUsing(componentDeprecatedWarning(name || component.displayName, details));
   }
-}; // Check that a component is enabled. This function returns a stub which checks
+};
+
+// Check that a component is enabled. This function returns a stub which checks
 // the component status on first use and then renders as the component or as
 // a Canary placeholder initialized with the name of the replaced component.
 // Note that the returned stub carries any other properties which had already
 // been assigned (eg propTypes, displayName, etc).
-
-
 _packageSettings.default.checkComponentEnabled = function (component, name) {
   if (component.render) {
     // The component is a forward-ref, so make a stub forward-ref.
     var forward = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _packageSettings.default.logDeprecated(component, name); // may log don't care about result
       // Replace the stub's render fn so this test only happens once.
-
-
-      return (forward.render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+      return (forward.render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ?
+      // If the component is enabled, or if it's not a public component,
       // replace the stub's render fn with the component's render fn.
-      component.render : // Note that Canary is a direct render fn (not a forward-ref) and
+      component.render :
+      // Note that Canary is a direct render fn (not a forward-ref) and
       // will ignore the passed props and ref (if any)
       _Canary.Canary.bind(undefined, {
         componentName: name
-      }))( // Call it now (after this it will be directly called).
+      }))(
+      // Call it now (after this it will be directly called).
       props, ref);
-    }); // Transfer object properties already assigned (eg propTypes, displayName)
+    });
+
+    // Transfer object properties already assigned (eg propTypes, displayName)
     // then merge in the stub forward-ref which checks the component status
     // when first used.
-
-
     return Object.assign({}, component, forward);
   } else {
     // The component is a direct render fn, so make a stub render fn.
     var _render = function render(props) {
       _packageSettings.default.logDeprecated(component, name); // may log don't care about result
       // Replace the stub render fn so this test only happens once.
-
-
-      return (_render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+      return (_render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ?
+      // If the component is enabled, or if it's not a public component,
       // replace the stub render fn with the component render fn.
-      component : // Replace the stub render fn with the Canary render fn, which will
+      component :
+      // Replace the stub render fn with the Canary render fn, which will
       // ignore the passed props.
       _Canary.Canary.bind(undefined, {
         componentName: name
-      }))( // Call it now (after this it will be directly called).
+      }))(
+      // Call it now (after this it will be directly called).
       props);
-    }; // Transfer object properties already assigned (eg propTypes, displayName)
+    };
+    // Transfer object properties already assigned (eg propTypes, displayName)
     // to a function which calls the stub render fn which checks the component
     // status when first used.
-
-
     return Object.assign(function (props) {
       return _render(props);
     }, component);
   }
 };
-
 var pkg = _packageSettings.default;
 exports.pkg = pkg;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.29",
+  "version": "2.0.0-rc.32",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -10,10 +10,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/carbon-design-system/ibm-cloud-cognitive.git",
+    "url": "https://github.com/carbon-design-system/ibm-products.git",
     "directory": "packages/ibm-products"
   },
-  "bugs": "https://github.com/carbon-design-system/ibm-cloud-cognitive/issues",
+  "bugs": "https://github.com/carbon-design-system/ibm-products/issues",
   "sideEffects": [
     "**/global/js/utils/props-helper.js",
     "**/*.css",
@@ -54,44 +54,45 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.13",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.19",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.30",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "fs-extra": "^10.1.0",
-    "glob": "^8.0.3",
-    "jest": "^29.0.1",
-    "jest-config-ibm-cloud-cognitive": "^0.24.5",
-    "jest-environment-jsdom": "^29.0.1",
+    "fs-extra": "^11.1.1",
+    "glob": "^10.2.3",
+    "jest": "^29.4.2",
+    "jest-config-ibm-cloud-cognitive": "^0.24.17",
+    "jest-environment-jsdom": "^29.4.2",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.0.6",
+    "npm-check-updates": "^16.10.12",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^3.0.2",
-    "sass": "^1.54.8",
-    "yargs": "^17.5.1"
+    "rimraf": "^5.0.0",
+    "sass": "^1.62.1",
+    "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.20.13",
     "@carbon/telemetry": "^0.1.0",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
+    "lodash": "^4.17.21",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
     "react-table": "^7.8.0",
-    "react-window": "^1.8.7"
+    "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.12.0",
-    "@carbon/layout": "^11.12.0",
+    "@carbon/grid": "^11.13.0",
+    "@carbon/layout": "^11.13.0",
     "@carbon/motion": "^11.10.0",
-    "@carbon/react": "~1.15.0",
-    "@carbon/themes": "^11.17.0",
-    "@carbon/type": "^11.16.0",
+    "@carbon/react": "~1.28.0",
+    "@carbon/themes": "^11.18.0",
+    "@carbon/type": "^11.17.0",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "16ba4d09a98be1ea3c64f6ee4323d08529e12a34"
+  "gitHead": "bee35ad1b671b94cf54542b9dcffcd298d34b198"
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -88,23 +88,8 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .#{$block-class} .#{$block-class}__footer {
-  position: relative;
-  height: calc(
-    #{$spacing-05} + #{$spacing-02} + #{$spacing-06} + #{$spacing-07}
-  );
-  flex-direction: column;
-  justify-content: center;
+  display: block;
+  height: auto;
+  padding: $spacing-05;
   background-color: $layer-02;
 }
-
-.#{$block-class} .#{$block-class}__footer-label {
-  @include type.type-style('label-01');
-
-  padding: $spacing-05 0 0 $spacing-05;
-  margin-bottom: $spacing-02;
-  color: $text-secondary;
-}
-
-.#{$block-class} .#{$block-class}__footer-content {
-  padding: 0 0 $spacing-05 $spacing-05;
-}

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

@@ -5,10 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../global/styles/project-settings' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
-
-// Standard imports.
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/ui-shell' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -20,3 +20,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
   margin-right: $spacing-03;
   object-fit: contain;
 }
+
+.#{$block-class}__footer-label {
+  @include type.type-style('label-01');
+
+  margin-bottom: $spacing-02;
+  color: $text-secondary;
+}

package/scss/components/ActionSet/_action-set.scss

@@ -68,7 +68,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 // or row-double in medium or large,
 // buttons are 50% width
 .#{$action-set-block-class}.#{$action-set-block-class}--row-single.#{$action-set-block-class}--lg
-  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
 .#{$action-set-block-class}.#{$action-set-block-class}--row-double.#{$action-set-block-class}--md
   .#{$action-set-block-class}__action-button,
 .#{$action-set-block-class}.#{$action-set-block-class}--row-double.#{$action-set-block-class}--lg
@@ -90,13 +92,21 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 // or row-quadruple (non-ghost),
 // buttons are 25% width with a 2xl of 232px
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-triple.#{$action-set-block-class}--lg
-  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--xl
-  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--2xl
-  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost),
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ),
 .#{$action-set-block-class}.#{c4p-settings.$carbon-prefix}--btn-set.#{$action-set-block-class}--row-quadruple
-  .#{$action-set-block-class}__action-button:not(.#{$action-set-block-class}__action-button--ghost) {
+  .#{$action-set-block-class}__action-button:not(
+    .#{$action-set-block-class}__action-button--ghost
+  ) {
   max-width: rem(232px);
   flex: 0 1 25%;
 }

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

@@ -29,10 +29,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 /* stylelint-disable max-nesting-depth */
 .#{$block-class}__selections {
-  &.#{$carbon-prefix}--structured-list {
-    margin-bottom: 0;
-  }
-
   &-wrapper {
     display: block;
   }
@@ -64,11 +60,18 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     justify-content: center;
   }
 
-  &-row--selected.#{$carbon-prefix}--structured-list-row {
-    border-bottom: 1px solid $layer-selected-01;
+  &-dropdown .cds--dropdown {
+    background: transparent;
+  }
+
+  &-row--selected {
     background-color: $layer-selected-01;
   }
 
+  &-row--active {
+    background-color: $layer-active-01;
+  }
+
   &-form-control {
     display: flex;
     align-items: center;
@@ -103,7 +106,9 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 }
 
 .#{$block-class} .#{$block-class}__selections-row:hover {
-  .#{$block-class}__selections-radio {
+  background: $layer-hover-01;
+
+  .#{$block-class}__selections-cell-title {
     color: $interactive;
   }
 
@@ -128,16 +133,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 }
 
-.#{$block-class} .#{$carbon-prefix}--structured-list-row {
-  border-bottom: 0;
-}
-
-.#{$block-class}
-  .#{$carbon-prefix}--structured-list--selection
-  .#{$carbon-prefix}--structured-list-row:hover:not(.#{$carbon-prefix}--structured-list-row--header-row):not(.#{$carbon-prefix}--structured-list-row--selected) {
-  border-bottom: 0;
-}
-
 // sidebar
 
 .#{$block-class}__sidebar-header {
@@ -205,7 +200,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     margin-left: $spacing-03;
   }
 
-  .#{$block-class}__selections-row.#{$carbon-prefix}--structured-list-row {
+  .#{$block-class}__selections-row {
     border-left: 0;
   }
 
@@ -214,7 +209,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   .#{$block-class}__selections-cell-wrapper {
-    height: auto;
+    height: 2rem;
     padding: 0 $spacing-03;
   }
 
@@ -226,10 +221,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   .#{$block-class}__selections-wrapper-multi {
     padding: 0;
   }
-
-  .#{$block-class}__selections.#{$carbon-prefix}--structured-list {
-    border-top: 0;
-  }
 }
 
 .#{$block-class}__selections-wrapper-multi .#{$block-class}__selections-cell {
@@ -371,6 +362,13 @@ button.#{$block-class}__global-filter-toggle {
 // the influencer sidebar needs to be even with the buttons
 .#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__influencer {
   flex-basis: 22.5rem;
+  background: $layer-01;
+}
+
+.#{$block-class}.#{$tearsheet-class}.#{$tearsheet-class}--wide
+  .#{$tearsheet-class}__content
+  .cds--dropdown {
+  background-color: transparent;
 }
 
 .#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__header-description {
@@ -399,13 +397,6 @@ button.#{$block-class}__global-filter-toggle {
   padding-right: 0;
 }
 
-// TODO check if we can remove – C10/C11 conflict
-.#{$block-class} .#{$carbon-prefix}--structured-list-td {
-  height: 4rem;
-  padding: $spacing-05;
-  vertical-align: middle;
-}
-
 .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
   margin: 0 $spacing-05 0 0;
 }

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

@@ -110,7 +110,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   display: inline-block;
   padding: 0 $spacing-03;
   border: 2px solid transparent;
+  border-radius: $spacing-02;
   margin-right: $spacing-03;
   background-color: $field-01;
-  border-radius: $spacing-02;
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -414,10 +414,6 @@
     border-bottom: 1px solid $layer-03;
   }
 
-  .#{$block-class}__table-container {
-    overflow: hidden;
-  }
-
   .#{c4p-settings.$pkg-prefix}--datagrid__table-simple {
     height: 100%;
   }
@@ -495,12 +491,16 @@
 }
 
 .#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
+  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(
+    .#{$block-class}__active-row
+  ) {
   position: relative;
 }
 
 .#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
+  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(
+    .#{$block-class}__active-row
+  )::before {
   position: absolute;
   top: 0;
   left: 0;

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

@@ -116,7 +116,9 @@ $row-heights: (
     justify-content: flex-start;
   }
   // Always show renderIcon if inline edit columns are less than half of total columns
-  &:not(.#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols) {
+  &:not(
+      .#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
+    ) {
     .#{variables.$block-class}__inline-edit-button-icon {
       display: none;
     }
@@ -131,7 +133,9 @@ $row-heights: (
 }
 
 .#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button:not([data-disabled='true']):hover {
+  .#{variables.$block-class}__inline-edit-button:not(
+    [data-disabled='true']
+  ):hover {
   background-color: $layer-active;
   color: $text-primary;
   .#{variables.$block-class}__inline-edit-button-icon {
@@ -140,7 +144,9 @@ $row-heights: (
 }
 
 .#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active:not([data-disabled='true']) {
+  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active:not(
+    [data-disabled='true']
+  ) {
   background-color: $layer-active;
   color: $text-primary;
   cursor: text;
@@ -152,7 +158,9 @@ $row-heights: (
 }
 
 .#{variables.$block-class}__inline-edit--outer-cell-button
-  .#{variables.$block-class}__inline-edit-button--disabled:not(.#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols) {
+  .#{variables.$block-class}__inline-edit-button--disabled:not(
+    .#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
+  ) {
   color: $button-disabled;
   cursor: not-allowed;
 }

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -70,15 +70,17 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
 
 .#{$block-class} .#{$block-class}__content {
   height: 100%;
-  padding: $spacing-06;
+  padding-top: $spacing-06;
+  padding-bottom: $spacing-06;
   overflow-x: hidden;
 }
 
 .#{$block-class}
   .#{$block-class}__content
-  .#{c4p-settings.$carbon-prefix}--grid {
-  padding: 0;
-  margin: 0;
+  .#{c4p-settings.$carbon-prefix}--css-grid {
+  padding-right: $spacing-03;
+  padding-left: $spacing-03;
+  margin-left: 0;
 }
 
 .#{$block-class} .#{$block-class}__form--heading {

package/scss/components/EmptyStates/_empty-state.scss

@@ -14,6 +14,7 @@
 $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
 
 .#{$block-class} {
+  display: flex;
   color: $text-primary;
 
   .#{$block-class}__header {
@@ -43,20 +44,39 @@ $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
 .#{$block-class}__illustration {
   height: auto;
   margin-bottom: $spacing-05;
+
   &.#{$block-class}__illustration--lg {
     min-width: $spacing-11;
     max-width: $spacing-11;
   }
+
   &.#{$block-class}__illustration--sm {
     min-width: $spacing-10;
     max-width: $spacing-10;
   }
 }
 
+.#{$block-class}-position--top {
+  flex-direction: column;
+}
+
+.#{$block-class}-position--right {
+  flex-direction: row-reverse;
+}
+
+.#{$block-class}-position--bottom {
+  flex-direction: column-reverse;
+}
+
+.#{$block-class}-position--left {
+  flex-direction: row;
+}
+
 .#{$block-class} .#{$block-class}__action-button {
   display: block;
   margin-bottom: $spacing-05;
 }
+
 .#{$block-class} .#{$block-class}__link {
   display: block;
 }