@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/Grid/Column.js

@@ -0,0 +1,392 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+var GridContext = require('./GridContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+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();
+
+  if (mode === 'css-grid') {
+    return /*#__PURE__*/React__default["default"].createElement(CSSGridColumn, _rollupPluginBabelHelpers["extends"]({
+      as: BaseComponent,
+      className: customClassName,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xlg: xlg,
+      max: max
+    }, 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));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _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({
+  span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
+  offset: PropTypes__default["default"].number,
+  start: PropTypes__default["default"].number,
+  end: PropTypes__default["default"].number
+}), percentSpanType]) : PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].shape({
+  span: PropTypes__default["default"].number,
+  offset: PropTypes__default["default"].number
+})]);
+Column.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Column`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `Column`
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+   * This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  lg: spanPropType,
+
+  /**
+   * Specify column span for the `max` breakpoint. This breakpoint supports 16
+   * columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  max: spanPropType,
+
+  /**
+   * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+   * This breakpoint supports 8 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  md: spanPropType,
+
+  /**
+   * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+   * This breakpoint supports 4 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  sm: spanPropType,
+
+  /**
+   * Specify column span for the `xlg` breakpoint (Default breakpoint up to
+   * 1584px) This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  xlg: spanPropType
+};
+
+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));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest), children);
+}
+
+CSSGridColumn.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Column`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `Column`
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+   * This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  lg: spanPropType,
+
+  /**
+   * Specify column span for the `max` breakpoint. This breakpoint supports 16
+   * columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  max: spanPropType,
+
+  /**
+   * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+   * This breakpoint supports 8 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  md: spanPropType,
+
+  /**
+   * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+   * This breakpoint supports 4 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  sm: spanPropType,
+
+  /**
+   * Specify constant column span, start,  or end values that will not change
+   * based on breakpoint
+   */
+  span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType, PropTypes__default["default"].shape({
+    span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
+    start: PropTypes__default["default"].number,
+    end: PropTypes__default["default"].number
+  })]),
+
+  /**
+   * Specify column span for the `xlg` breakpoint (Default breakpoint up to
+   * 1584px) This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  xlg: spanPropType
+};
+var breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
+/**
+ * @typedef {object} Breakpoint
+ * @property {boolean|number} [span]
+ * @property {number} [offset]
+ */
+
+/**
+ * Build the appropriate className for the given set of breakpoints.
+ * @param {Array<boolean|number|Breakpoint>} breakpoints
+ * @returns {string}
+ */
+
+function getClassNameForBreakpoints(breakpoints, prefix) {
+  var classNames = [];
+
+  for (var i = 0; i < breakpoints.length; i++) {
+    var 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
+    // should be "auto" at this size
+
+    if (breakpoint === true) {
+      classNames.push("".concat(prefix, "--").concat(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)));
+      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));
+      continue;
+    }
+
+    var span = breakpoint.span,
+        offset = breakpoint.offset,
+        start = breakpoint.start,
+        end = breakpoint.end;
+
+    if (typeof offset === 'number' && offset > 0) {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(offset + 1));
+    }
+
+    if (typeof start === 'number') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(start));
+    }
+
+    if (typeof end === 'number') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-end-").concat(end));
+    }
+
+    if (typeof span === 'number') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span));
+    } else if (typeof span === 'string') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span.slice(0, -1)));
+      continue;
+    }
+  }
+
+  return classNames.join(' ');
+}
+/**
+ * Build the appropriate className for the given set of breakpoints.
+ * @param {Array<boolean|number|Breakpoint>} breakpoints
+ * @returns {string}
+ */
+
+
+function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
+  var classNames = [];
+
+  for (var i = 0; i < breakpoints.length; i++) {
+    var 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
+    // should be "auto" at this size
+
+    if (breakpoint === true) {
+      classNames.push("".concat(prefix, "--col-").concat(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));
+      continue;
+    }
+
+    var span = breakpoint.span,
+        offset = breakpoint.offset;
+
+    if (typeof span === 'number') {
+      classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(span));
+    }
+
+    if (span === true) {
+      classNames.push("".concat(prefix, "--col-").concat(name));
+    }
+
+    if (typeof offset === 'number') {
+      classNames.push("".concat(prefix, "--offset-").concat(name, "-").concat(offset));
+    }
+  }
+
+  return classNames.join(' ');
+}
+/**
+ * Build the appropriate className for a span value
+ */
+
+
+function getClassNameForSpan(value, prefix) {
+  var 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;
+
+    if (span !== undefined && span !== null) {
+      classNames.push("".concat(prefix, "--col-span-").concat(span));
+    }
+
+    if (start !== undefined && start !== null) {
+      classNames.push("".concat(prefix, "--col-start-").concat(start));
+    }
+
+    if (end !== undefined && end !== null) {
+      classNames.push("".concat(prefix, "--col-end-").concat(end));
+    }
+  }
+
+  return classNames.join('');
+}
+
+exports["default"] = Column;

package/lib/components/Grid/ColumnHang.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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"));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: className
+  }), children);
+}
+
+ColumnHang.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Grid`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `Grid`
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports.ColumnHang = ColumnHang;

package/lib/components/Grid/FlexGrid.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+var GridContext = require('./GridContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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));
+  return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
+    mode: "flexbox",
+    subgrid: false
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest), children));
+}
+
+FlexGrid.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `FlexGrid`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `FlexGrid`
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Collapse the gutter to 1px. Useful for fluid layouts.
+   * Rows have 1px of margin between them to match gutter.
+   */
+  condensed: PropTypes__default["default"].bool,
+
+  /**
+   * Remove the default max width that the grid has set
+   */
+  fullWidth: PropTypes__default["default"].bool,
+
+  /**
+   * Container hangs 16px into the gutter. Useful for
+   * typographic alignment with and without containers.
+   */
+  narrow: PropTypes__default["default"].bool
+};
+
+exports.FlexGrid = FlexGrid;

package/lib/components/Grid/Grid.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+var React = require('react');
+var index = require('../FeatureFlags/index.js');
+var CSSGrid = require('./CSSGrid.js');
+var FlexGrid = require('./FlexGrid.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Grid(props) {
+  var enableCSSGrid = index.useFeatureFlag('enable-css-grid');
+
+  if (enableCSSGrid) {
+    return /*#__PURE__*/React__default["default"].createElement(CSSGrid.CSSGrid, props);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(FlexGrid.FlexGrid, props);
+}
+
+Grid.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Grid`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `Grid`
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify how many columns wide the Grid should span
+   */
+  columns: PropTypes__default["default"].number,
+
+  /**
+   * Collapse the gutter to 1px. Useful for fluid layouts.
+   * Rows have 1px of margin between them to match gutter.
+   */
+  condensed: PropTypes__default["default"].bool,
+
+  /**
+   * Remove the default max width that the grid has set
+   */
+  fullWidth: PropTypes__default["default"].bool,
+
+  /**
+   * Container hangs 16px into the gutter. Useful for
+   * typographic alignment with and without containers.
+   */
+  narrow: PropTypes__default["default"].bool
+};
+
+exports.Grid = Grid;

package/lib/components/Grid/GridContext.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+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({
+  mode: 'flexbox',
+  subgrid: false
+});
+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 () {
+    return {
+      mode: mode,
+      subgrid: subgrid
+    };
+  }, [mode, subgrid]);
+  return /*#__PURE__*/React__namespace.createElement(GridSettingsContext.Provider, {
+    value: value
+  }, children);
+}
+GridSettings.propTypes = {
+  /**
+   * Pass in components which will be rendered within the `GridSettings`
+   * component
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify the grid mode for the GridContext
+   */
+  mode: PropTypes__default["default"].oneOf(['flexbox', 'css-grid']).isRequired,
+
+  /**
+   * Specify whether subgrid should be enabled
+   */
+  subgrid: PropTypes__default["default"].bool
+};
+/**
+ * Helper function for accessing the GridContext value
+ */
+
+function useGridSettings() {
+  return React__namespace.useContext(GridSettingsContext);
+}
+
+exports.GridSettings = GridSettings;
+exports.useGridSettings = useGridSettings;