@carbon/react 1.27.0 → 1.28.0

package/lib/components/Grid/CSSGrid.js

@@ -22,30 +22,21 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "children", "className", "condensed", "fullWidth", "narrow"],
-    _excluded2 = ["as", "className", "children", "mode"];
-
 function CSSGrid(_ref) {
-  var _cx;
-
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      children = _ref.children,
-      customClassName = _ref.className,
-      _ref$condensed = _ref.condensed,
-      condensed = _ref$condensed === void 0 ? false : _ref$condensed,
-      _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-      _ref$narrow = _ref.narrow,
-      narrow = _ref$narrow === void 0 ? false : _ref$narrow,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useGridSettings = GridContext.useGridSettings(),
-      subgrid = _useGridSettings.subgrid;
-
-  var mode = 'wide';
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className: customClassName,
+    condensed = false,
+    fullWidth = false,
+    narrow = false,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const {
+    subgrid
+  } = GridContext.useGridSettings();
+  let mode = 'wide';
 
   if (narrow) {
     mode = 'narrow';
@@ -64,9 +55,14 @@ function CSSGrid(_ref) {
     }, rest), children));
   }
 
-  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx)); // cast as any to let TypeScript allow passing in attributes to base component
+  const className = cx__default["default"](customClassName, {
+    [`${prefix}--css-grid`]: true,
+    [`${prefix}--css-grid--condensed`]: mode === 'condensed',
+    [`${prefix}--css-grid--narrow`]: mode === 'narrow',
+    [`${prefix}--css-grid--full-width`]: fullWidth
+  }); // cast as any to let TypeScript allow passing in attributes to base component
 
-  var BaseComponentAsAny = BaseComponent;
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
     mode: "css-grid",
     subgrid: true
@@ -109,18 +105,21 @@ CSSGrid.propTypes = {
   narrow: PropTypes__default["default"].bool
 };
 
-var Subgrid = function Subgrid(_ref2) {
-  var _cx2;
-
-  var _ref2$as = _ref2.as,
-      BaseComponent = _ref2$as === void 0 ? 'div' : _ref2$as,
-      customClassName = _ref2.className,
-      children = _ref2.children,
-      mode = _ref2.mode,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](customClassName, (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--subgrid--wide"), mode === 'wide'), _cx2));
+const Subgrid = _ref2 => {
+  let {
+    as: BaseComponent = 'div',
+    className: customClassName,
+    children,
+    mode,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](customClassName, {
+    [`${prefix}--subgrid`]: true,
+    [`${prefix}--subgrid--condensed`]: mode === 'condensed',
+    [`${prefix}--subgrid--narrow`]: mode === 'narrow',
+    [`${prefix}--subgrid--wide`]: mode === 'wide'
+  });
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
@@ -147,6 +146,6 @@ Subgrid.propTypes = {
    */
   mode: PropTypes__default["default"].oneOf(['wide', 'narrow', 'condensed'])
 };
-var CSSGridComponent = CSSGrid;
+const CSSGridComponent = CSSGrid;
 
 exports.CSSGrid = CSSGridComponent;

package/lib/components/Grid/Column.js

@@ -42,25 +42,22 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "children", "className", "sm", "md", "lg", "xlg", "max"],
-    _excluded2 = ["as", "children", "className", "sm", "md", "lg", "xlg", "max", "span"];
-
 function Column(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      children = _ref.children,
-      customClassName = _ref.className,
-      sm = _ref.sm,
-      md = _ref.md,
-      lg = _ref.lg,
-      xlg = _ref.xlg,
-      max = _ref.max,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var _useGridSettings = GridContext.useGridSettings(),
-      mode = _useGridSettings.mode;
-
-  var prefix = usePrefix.usePrefix();
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className: customClassName,
+    sm,
+    md,
+    lg,
+    xlg,
+    max,
+    ...rest
+  } = _ref;
+  const {
+    mode
+  } = GridContext.useGridSettings();
+  const prefix = usePrefix.usePrefix();
 
   if (mode === 'css-grid') {
     return /*#__PURE__*/React__default["default"].createElement(CSSGridColumn, _rollupPluginBabelHelpers["extends"]({
@@ -74,17 +71,19 @@ function Column(_ref) {
     }, rest), children);
   }
 
-  var columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
-  var className = cx__default["default"](customClassName, columnClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0)); // cast as any to let TypeScript allow passing in attributes to base component
+  const columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
+  const className = cx__default["default"](customClassName, columnClassName, {
+    [`${prefix}--col`]: columnClassName.length === 0
+  }); // cast as any to let TypeScript allow passing in attributes to base component
 
-  var BaseComponentAsAny = BaseComponent;
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
 }
 
-var percentSpanType = PropTypes__default["default"].oneOf(['25%', '50%', '75%', '100%']);
-var spanPropType = FeatureFlags__namespace.enabled('enable-css-grid') ? PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].shape({
+const percentSpanType = PropTypes__default["default"].oneOf(['25%', '50%', '75%', '100%']);
+const spanPropType = FeatureFlags__namespace.enabled('enable-css-grid') ? PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].shape({
   span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
   offset: PropTypes__default["default"].number,
   start: PropTypes__default["default"].number,
@@ -151,22 +150,24 @@ Column.propTypes = {
 };
 
 function CSSGridColumn(_ref2) {
-  var _ref2$as = _ref2.as,
-      BaseComponent = _ref2$as === void 0 ? 'div' : _ref2$as,
-      children = _ref2.children,
-      containerClassName = _ref2.className,
-      sm = _ref2.sm,
-      md = _ref2.md,
-      lg = _ref2.lg,
-      xlg = _ref2.xlg,
-      max = _ref2.max,
-      span = _ref2.span,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix.usePrefix();
-  var breakpointClassName = getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix);
-  var spanClassName = getClassNameForSpan(span, prefix);
-  var className = cx__default["default"](containerClassName, breakpointClassName, spanClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--css-grid-column"), true));
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className: containerClassName,
+    sm,
+    md,
+    lg,
+    xlg,
+    max,
+    span,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const breakpointClassName = getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix);
+  const spanClassName = getClassNameForSpan(span, prefix);
+  const className = cx__default["default"](containerClassName, breakpointClassName, spanClassName, {
+    [`${prefix}--css-grid-column`]: true
+  });
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
@@ -238,7 +239,7 @@ CSSGridColumn.propTypes = {
    */
   xlg: spanPropType
 };
-var breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
+const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
 /**
  * @typedef {object} Breakpoint
  * @property {boolean|number} [span]
@@ -252,59 +253,61 @@ var breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
  */
 
 function getClassNameForBreakpoints(breakpoints, prefix) {
-  var classNames = [];
+  const classNames = [];
 
-  for (var i = 0; i < breakpoints.length; i++) {
-    var breakpoint = breakpoints[i];
+  for (let i = 0; i < breakpoints.length; i++) {
+    const breakpoint = breakpoints[i];
 
     if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
 
-    var name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    const name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
     // should be "auto" at this size
 
     if (breakpoint === true) {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-span-auto"));
+      classNames.push(`${prefix}--${name}:col-span-auto`);
       continue;
     } // If our breakpoint is a string, the user has specified a percent
     // they'd like this column to span.
 
 
     if (typeof breakpoint === 'string') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(breakpoint.slice(0, -1)));
+      classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
       continue;
     } // If our breakpoint is a number, the user has specified the number of
     // columns they'd like this column to span
 
 
     if (typeof breakpoint === 'number') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(breakpoint));
+      classNames.push(`${prefix}--${name}:col-span-${breakpoint}`);
       continue;
     }
 
-    if (_rollupPluginBabelHelpers["typeof"](breakpoint) === 'object') {
-      var span = breakpoint.span,
-          offset = breakpoint.offset,
-          start = breakpoint.start,
-          end = breakpoint.end;
+    if (typeof breakpoint === 'object') {
+      const {
+        span,
+        offset,
+        start,
+        end
+      } = breakpoint;
 
       if (typeof offset === 'number' && offset > 0) {
-        classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(offset + 1));
+        classNames.push(`${prefix}--${name}:col-start-${offset + 1}`);
       }
 
       if (typeof start === 'number') {
-        classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(start));
+        classNames.push(`${prefix}--${name}:col-start-${start}`);
       }
 
       if (typeof end === 'number') {
-        classNames.push("".concat(prefix, "--").concat(name, ":col-end-").concat(end));
+        classNames.push(`${prefix}--${name}:col-end-${end}`);
       }
 
       if (typeof span === 'number') {
-        classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span));
+        classNames.push(`${prefix}--${name}:col-span-${span}`);
       } else if (typeof span === 'string') {
-        classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span.slice(0, -1)));
+        classNames.push(`${prefix}--${name}:col-span-${span.slice(0, -1)}`);
         continue;
       }
     }
@@ -320,44 +323,46 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
 
 
 function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
-  var classNames = [];
+  const classNames = [];
 
-  for (var i = 0; i < breakpoints.length; i++) {
-    var breakpoint = breakpoints[i];
+  for (let i = 0; i < breakpoints.length; i++) {
+    const breakpoint = breakpoints[i];
 
     if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
 
-    var name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    const name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
     // should be "auto" at this size
 
     if (breakpoint === true) {
-      classNames.push("".concat(prefix, "--col-").concat(name));
+      classNames.push(`${prefix}--col-${name}`);
       continue;
     } // If our breakpoint is a number, the user has specified the number of
     // columns they'd like this column to span
 
 
     if (typeof breakpoint === 'number') {
-      classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(breakpoint));
+      classNames.push(`${prefix}--col-${name}-${breakpoint}`);
       continue;
     }
 
-    if (_rollupPluginBabelHelpers["typeof"](breakpoint) === 'object') {
-      var span = breakpoint.span,
-          offset = breakpoint.offset;
+    if (typeof breakpoint === 'object') {
+      const {
+        span,
+        offset
+      } = breakpoint;
 
       if (typeof span === 'number') {
-        classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(span));
+        classNames.push(`${prefix}--col-${name}-${span}`);
       }
 
       if (span === true) {
-        classNames.push("".concat(prefix, "--col-").concat(name));
+        classNames.push(`${prefix}--col-${name}`);
       }
 
       if (typeof offset === 'number') {
-        classNames.push("".concat(prefix, "--offset-").concat(name, "-").concat(offset));
+        classNames.push(`${prefix}--offset-${name}-${offset}`);
       }
     }
   }
@@ -370,25 +375,27 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
 
 
 function getClassNameForSpan(value, prefix) {
-  var classNames = [];
+  const classNames = [];
 
   if (typeof value === 'number' || typeof value === 'string') {
-    classNames.push("".concat(prefix, "--col-span-").concat(value));
-  } else if (_rollupPluginBabelHelpers["typeof"](value) === 'object') {
-    var span = value.span,
-        start = value.start,
-        end = value.end;
+    classNames.push(`${prefix}--col-span-${value}`);
+  } else if (typeof value === 'object') {
+    const {
+      span,
+      start,
+      end
+    } = value;
 
     if (span !== undefined && span !== null) {
-      classNames.push("".concat(prefix, "--col-span-").concat(span));
+      classNames.push(`${prefix}--col-span-${span}`);
     }
 
     if (start !== undefined && start !== null) {
-      classNames.push("".concat(prefix, "--col-start-").concat(start));
+      classNames.push(`${prefix}--col-start-${start}`);
     }
 
     if (end !== undefined && end !== null) {
-      classNames.push("".concat(prefix, "--col-end-").concat(end));
+      classNames.push(`${prefix}--col-end-${end}`);
     }
   }
 

package/lib/components/Grid/ColumnHang.js

@@ -21,23 +21,21 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "className", "children"];
-
 /**
  * Helper component for rendering content that hangs on the column. Useful when
  * trying to align content across different grid modes
  */
 function ColumnHang(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      customClassName = _ref.className,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](customClassName, "".concat(prefix, "--grid-column-hang")); // cast as any to let TypeScript allow passing in attributes to base component
-
-  var BaseComponentAsAny = BaseComponent;
+  let {
+    as: BaseComponent = 'div',
+    className: customClassName,
+    children,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](customClassName, `${prefix}--grid-column-hang`); // cast as any to let TypeScript allow passing in attributes to base component
+
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
@@ -59,6 +57,6 @@ ColumnHang.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var ColumnHangComponent = ColumnHang;
+const ColumnHangComponent = ColumnHang;
 
 exports.ColumnHang = ColumnHangComponent;

package/lib/components/Grid/FlexGrid.js

@@ -22,27 +22,25 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "condensed", "narrow", "fullWidth", "className", "children"];
-
 function FlexGrid(_ref) {
-  var _cx;
-
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      _ref$condensed = _ref.condensed,
-      condensed = _ref$condensed === void 0 ? false : _ref$condensed,
-      _ref$narrow = _ref.narrow,
-      narrow = _ref$narrow === void 0 ? false : _ref$narrow,
-      _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-      containerClassName = _ref.className,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx)); // cast as any to let TypeScript allow passing in attributes to base component
-
-  var BaseComponentAsAny = BaseComponent;
+  let {
+    as: BaseComponent = 'div',
+    condensed = false,
+    narrow = false,
+    fullWidth = false,
+    className: containerClassName,
+    children,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](containerClassName, {
+    [`${prefix}--grid`]: true,
+    [`${prefix}--grid--condensed`]: condensed,
+    [`${prefix}--grid--narrow`]: narrow,
+    [`${prefix}--grid--full-width`]: fullWidth
+  }); // cast as any to let TypeScript allow passing in attributes to base component
+
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
     mode: "flexbox",
     subgrid: false
@@ -84,6 +82,6 @@ FlexGrid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
-var FlexGridComponent = FlexGrid;
+const FlexGridComponent = FlexGrid;
 
 exports.FlexGrid = FlexGridComponent;

package/lib/components/Grid/Grid.js

@@ -21,7 +21,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Grid(props) {
-  var enableCSSGrid = index.useFeatureFlag('enable-css-grid');
+  const enableCSSGrid = index.useFeatureFlag('enable-css-grid');
 
   if (enableCSSGrid) {
     return /*#__PURE__*/React__default["default"].createElement(CSSGrid.CSSGrid, props);
@@ -63,6 +63,6 @@ Grid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
-var GridAsGridComponent = Grid;
+const GridAsGridComponent = Grid;
 
 exports.Grid = GridAsGridComponent;

package/lib/components/Grid/GridContext.js

@@ -39,26 +39,27 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  * Provides a grid context for communication the grid "mode" (flexbox or
  * css-grid) along with subgrid information.
  */
-var GridSettingsContext = /*#__PURE__*/React__namespace.createContext({
+const GridSettingsContext = /*#__PURE__*/React__namespace.createContext({
   mode: 'flexbox',
   subgrid: false
 });
-var GridSettings = function GridSettings(_ref) {
-  var children = _ref.children,
-      mode = _ref.mode,
-      _ref$subgrid = _ref.subgrid,
-      subgrid = _ref$subgrid === void 0 ? false : _ref$subgrid;
-  var value = React__namespace.useMemo(function () {
+const GridSettings = _ref => {
+  let {
+    children,
+    mode,
+    subgrid = false
+  } = _ref;
+  const value = React__namespace.useMemo(() => {
     return {
-      mode: mode,
-      subgrid: subgrid
+      mode,
+      subgrid
     };
   }, [mode, subgrid]);
   return /*#__PURE__*/React__namespace.createElement(GridSettingsContext.Provider, {
     value: value
   }, children);
 };
-var gridModes = ['flexbox', 'css-grid'];
+const gridModes = ['flexbox', 'css-grid'];
 GridSettings.propTypes = {
   /**
    * Pass in components which will be rendered within the `GridSettings`
@@ -80,7 +81,7 @@ GridSettings.propTypes = {
  * Helper function for accessing the GridContext value
  */
 
-var useGridSettings = function useGridSettings() {
+const useGridSettings = () => {
   return React__namespace.useContext(GridSettingsContext);
 };
 

package/lib/components/Grid/Row.js

@@ -21,25 +21,23 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "condensed", "narrow", "className", "children"];
-
 function Row(_ref) {
-  var _cx;
-
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      _ref$condensed = _ref.condensed,
-      condensed = _ref$condensed === void 0 ? false : _ref$condensed,
-      _ref$narrow = _ref.narrow,
-      narrow = _ref$narrow === void 0 ? false : _ref$narrow,
-      containerClassName = _ref.className,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx)); // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
-
-  var BaseComponentAsAny = BaseComponent;
+  let {
+    as: BaseComponent = 'div',
+    condensed = false,
+    narrow = false,
+    className: containerClassName,
+    children,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](containerClassName, {
+    [`${prefix}--row`]: true,
+    [`${prefix}--row--condensed`]: condensed,
+    [`${prefix}--row--narrow`]: narrow
+  }); // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
+
+  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);

package/lib/components/Heading/index.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 
@@ -18,18 +17,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "level", "children"];
-var HeadingContext = /*#__PURE__*/React__default["default"].createContext(1);
+const HeadingContext = /*#__PURE__*/React__default["default"].createContext(1);
 
 function Section(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'section' : _ref$as,
-      levelOverride = _ref.level,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var parentLevel = React__default["default"].useContext(HeadingContext);
-  var level = typeof levelOverride !== 'undefined' ? levelOverride : parentLevel + 1;
+  let {
+    as: BaseComponent = 'section',
+    level: levelOverride,
+    children,
+    ...rest
+  } = _ref;
+  const parentLevel = React__default["default"].useContext(HeadingContext);
+  const level = typeof levelOverride !== 'undefined' ? levelOverride : parentLevel + 1;
   return /*#__PURE__*/React__default["default"].createElement(HeadingContext.Provider, {
     value: Math.min(level, 6)
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, rest, children));
@@ -59,8 +57,8 @@ Section.propTypes = {
 };
 
 function Heading(props) {
-  var level = React__default["default"].useContext(HeadingContext);
-  return /*#__PURE__*/React__default["default"].createElement("h".concat(level), props);
+  const level = React__default["default"].useContext(HeadingContext);
+  return /*#__PURE__*/React__default["default"].createElement(`h${level}`, props);
 }
 
 Heading.propTypes = {