@splunk/react-ui 4.21.0 → 4.22.0

package/ColumnLayout.js

@@ -1,368 +1,407 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  Column: () => (/* reexport */ ColumnLayout_Column),
-  Row: () => (/* reexport */ ColumnLayout_Row),
-  "default": () => (/* reexport */ ColumnLayout_ColumnLayout)
-});
-
-;// CONCATENATED MODULE: external "react"
-const external_react_namespaceObject = require("react");
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
-;// CONCATENATED MODULE: external "prop-types"
-const external_prop_types_namespaceObject = require("prop-types");
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
-const useSplunkTheme_namespaceObject = require("@splunk/themes/useSplunkTheme");
-var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_namespaceObject);
-;// CONCATENATED MODULE: external "lodash/defaults"
-const defaults_namespaceObject = require("lodash/defaults");
-var defaults_default = /*#__PURE__*/__webpack_require__.n(defaults_namespaceObject);
-;// CONCATENATED MODULE: external "styled-components"
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/themes"
-const themes_namespaceObject = require("@splunk/themes");
-;// CONCATENATED MODULE: ./src/ColumnLayout/ColumnStyles.ts
-
-
-var Styled = external_styled_components_default().div.withConfig({
-  displayName: "ColumnStyles__Styled",
-  componentId: "sc-1pchz98-0"
-})(["", ";"], themes_namespaceObject.mixins.reset('block'));
-
-;// CONCATENATED MODULE: ./src/utils/types.ts
-// see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 for details
-// regarding the css prop. certain (versions of) libraries included in the compilation
-// - such as storybook->emotion - introduce the css prop using a global augmentation,
-// which causes the prop to end up in our declaration files (via JSX.IntrinsicElements).
-// it's difficult to control all nested dependencies and their types, which is why the
-// css prop is omitted in the two prop helpers above - this ensures the css prop isn't
-// erroneously included in react-ui's public api.
-// see https://github.com/microsoft/TypeScript/pull/12253
-// see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html
-function assertDefined(val, msg) {
-  if (val === undefined || val === null) {
-    throw new Error(msg !== null && msg !== void 0 ? msg : 'Unexpected undefined or null');
-  }
-}
-
-
-;// CONCATENATED MODULE: ./src/ColumnLayout/Column.tsx
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-
-
-
-
-
-var propTypes = {
-  children: (external_prop_types_default()).node,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-
-  /** @private. */
-  gutter: (external_prop_types_default()).number,
-
-  /** @private. */
-  isFirstChild: (external_prop_types_default()).bool,
-
-  /** @private. */
-  isLastChild: (external_prop_types_default()).bool,
-  span: (external_prop_types_default()).number,
-
-  /** @private. */
-  style: (external_prop_types_default()).object
-};
-
-function Column(_ref) {
-  var children = _ref.children,
-      elementRef = _ref.elementRef,
-      gutter = _ref.gutter,
-      _ref$span = _ref.span,
-      span = _ref$span === void 0 ? 1 : _ref$span,
-      isFirstChild = _ref.isFirstChild,
-      isLastChild = _ref.isLastChild,
-      style = _ref.style,
-      otherProps = _objectWithoutProperties(_ref, ["children", "elementRef", "gutter", "span", "isFirstChild", "isLastChild", "style"]);
-
-  // @docs-props-type ColumnPropsBase
-  var width = gutter ? "calc((100% - ".concat(11 * gutter, "px) * ").concat(span / 12, " + (").concat(gutter, "px * ").concat(span - 1, "))") : "".concat(100 / 12 * span, "%");
-  assertDefined(gutter);
-  var calcStyle = {
-    marginLeft: isFirstChild ? undefined : gutter / 2,
-    marginRight: isLastChild ? undefined : gutter / 2,
-    flex: "".concat(span, " ").concat(span, " auto"),
-    // may accommodate small rounding errors and dividers
-    width: width
-  };
-  return /*#__PURE__*/external_react_default().createElement(Styled, _extends({
-    "data-test": "column",
-    ref: elementRef,
-    style: defaults_default()({}, style, calcStyle)
-  }, otherProps), children);
-}
-
-Column.propTypes = propTypes;
-/* harmony default export */ const ColumnLayout_Column = (Column);
-;// CONCATENATED MODULE: ./src/ColumnLayout/RowStyles.ts
-
-
-var RowStyles_Styled = external_styled_components_default().div.withConfig({
-  displayName: "RowStyles__Styled",
-  componentId: "sc-121ntds-0"
-})(["", ";flex-flow:row nowrap;&[data-align-items='start']{align-items:flex-start;}&[data-align-items='end']{align-items:flex-end;}&[data-align-items='center']{align-items:center;}&[data-align-items='stretch']{align-items:stretch;}"], themes_namespaceObject.mixins.reset('flex'));
-var StyledDivider = external_styled_components_default().div.withConfig({
-  displayName: "RowStyles__StyledDivider",
-  componentId: "sc-121ntds-1"
-})(["border-left:1px solid ", ";flex:0 0 1;align-self:stretch;"], (0,themes_namespaceObject.pick)({
-  prisma: themes_namespaceObject.variables.neutral200,
-  enterprise: {
-    light: themes_namespaceObject.variables.gray92,
-    dark: themes_namespaceObject.variables.gray60
-  }
-}));
-
-;// CONCATENATED MODULE: ./src/ColumnLayout/Row.tsx
-function Row_extends() { Row_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Row_extends.apply(this, arguments); }
-
-function Row_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Row_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function Row_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-
-
-
-
-
-var Row_propTypes = {
-  alignItems: external_prop_types_default().oneOf(['start', 'end', 'center', 'stretch']),
-  children: (external_prop_types_default()).node,
-
-  /** @private. */
-  divider: (external_prop_types_default()).bool,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-
-  /** @private. */
-  gutter: (external_prop_types_default()).number,
-
-  /** @private. */
-  isFirstChild: (external_prop_types_default()).bool,
-
-  /** @private. */
-  isLastChild: (external_prop_types_default()).bool,
-
-  /** @private. */
-  style: (external_prop_types_default()).object
-};
-
-function Row(_ref) {
-  var _ref$alignItems = _ref.alignItems,
-      alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
-      children = _ref.children,
-      divider = _ref.divider,
-      elementRef = _ref.elementRef,
-      gutter = _ref.gutter,
-      isFirstChild = _ref.isFirstChild,
-      isLastChild = _ref.isLastChild,
-      style = _ref.style,
-      otherProps = Row_objectWithoutProperties(_ref, ["alignItems", "children", "divider", "elementRef", "gutter", "isFirstChild", "isLastChild", "style"]);
-
-  // @docs-props-type RowPropsBase
-  if (false) { var total; }
-
-  var cloneColumn = (0,external_react_namespaceObject.useCallback)(function (column, idx) {
-    return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(column, {
-      gutter: gutter,
-      isFirstChild: idx === 0,
-      isLastChild: idx === external_react_namespaceObject.Children.count(children) - 1
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
+            /******/;
+            e.d(r, {
+                a: r
+            });
+            /******/            return r;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
+                        enumerable: true,
+                        get: r[n]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var t = {};
+    // ESM COMPAT FLAG
+        e.r(t);
+    // EXPORTS
+        e.d(t, {
+        Column: () => /* reexport */ O,
+        Row: () => /* reexport */ _,
+        default: () => /* reexport */ z
     });
-  }, [children, gutter]);
-  var insertDividers = (0,external_react_namespaceObject.useCallback)(function (acc, row, idx, original) {
-    acc.push(row);
-
-    if (divider && idx < original.length - 1) {
-      acc.push( /*#__PURE__*/external_react_default().createElement(StyledDivider, {
-        key: "".concat(idx, "-divider")
-      }));
+    // CONCATENATED MODULE: external "react"
+    const r = require("react");
+    var n =  e.n(r);
+    // CONCATENATED MODULE: external "prop-types"
+    const i = require("prop-types");
+    var l =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
+    const a = require("@splunk/themes/useSplunkTheme");
+    var o =  e.n(a);
+    // CONCATENATED MODULE: external "lodash/defaults"
+    const s = require("lodash/defaults");
+    var c =  e.n(s);
+    // CONCATENATED MODULE: external "styled-components"
+    const u = require("styled-components");
+    var d =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const f = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/ColumnLayout/ColumnStyles.ts
+    var p = d().div.withConfig({
+        displayName: "ColumnStyles__Styled",
+        componentId: "sc-1pchz98-0"
+    })([ "", ";" ], f.mixins.reset("block"));
+    // CONCATENATED MODULE: ./src/utils/types.ts
+    // see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 for details
+    // regarding the css prop. certain (versions of) libraries included in the compilation
+    // - such as storybook->emotion - introduce the css prop using a global augmentation,
+    // which causes the prop to end up in our declaration files (via JSX.IntrinsicElements).
+    // it's difficult to control all nested dependencies and their types, which is why the
+    // css prop is omitted in the two prop helpers above - this ensures the css prop isn't
+    // erroneously included in react-ui's public api.
+    // see https://github.com/microsoft/TypeScript/pull/12253
+    // see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html
+    function v(e, t) {
+        if (e === undefined || e === null) {
+            throw new Error(t !== null && t !== void 0 ? t : "Unexpected undefined or null");
+        }
     }
-
-    return acc;
-  }, [divider]);
-  assertDefined(gutter);
-  var gutterStyle = {
-    marginTop: isFirstChild ? undefined : gutter / 2,
-    marginBottom: isLastChild ? undefined : gutter / 2
-  };
-  var childrenCloned = external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.isValidElement).map(cloneColumn).reduce(insertDividers, []);
-  return /*#__PURE__*/external_react_default().createElement(RowStyles_Styled, Row_extends({
-    style: defaults_default()({}, style, gutterStyle),
-    "data-align-items": alignItems,
-    "data-test": "row",
-    ref: elementRef
-  }, otherProps), childrenCloned);
-}
-
-Row.propTypes = Row_propTypes;
-/* harmony default export */ const ColumnLayout_Row = (Row);
-;// CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayoutStyles.ts
-
-
-var ColumnLayoutStyles_Styled = external_styled_components_default().div.withConfig({
-  displayName: "ColumnLayoutStyles__Styled",
-  componentId: "sc-3eatxz-0"
-})(["", ";flex-direction:column;"], themes_namespaceObject.mixins.reset('flex'));
-var ColumnLayoutStyles_StyledDivider = external_styled_components_default().div.withConfig({
-  displayName: "ColumnLayoutStyles__StyledDivider",
-  componentId: "sc-3eatxz-1"
-})(["border-top:1px solid ", ";height:0;"], (0,themes_namespaceObject.pick)({
-  prisma: themes_namespaceObject.variables.neutral200,
-  enterprise: {
-    light: themes_namespaceObject.variables.gray92,
-    dark: themes_namespaceObject.variables.gray60
-  }
-}));
-
-;// CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayout.tsx
-function ColumnLayout_extends() { ColumnLayout_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ColumnLayout_extends.apply(this, arguments); }
-
-function ColumnLayout_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = ColumnLayout_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function ColumnLayout_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-
-
-
-
-
-
-var ColumnLayout_propTypes = {
-  children: (external_prop_types_default()).node,
-  divider: external_prop_types_default().oneOf(['none', 'vertical', 'horizontal']),
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-  gutter: (external_prop_types_default()).number
-};
-
-/**
- * `ColumnLayout` provides simple API for laying out content into columns. It is based on flexbox
- * and has 12 columns.
- */
-function ColumnLayout(_ref) {
-  var children = _ref.children,
-      _ref$divider = _ref.divider,
-      divider = _ref$divider === void 0 ? 'none' : _ref$divider,
-      elementRef = _ref.elementRef,
-      gutterProp = _ref.gutter,
-      otherProps = ColumnLayout_objectWithoutProperties(_ref, ["children", "divider", "elementRef", "gutter"]);
-
-  // @docs-props-type ColumnLayoutPropsBase
-  var _useSplunkTheme = useSplunkTheme_default()(),
-      family = _useSplunkTheme.family,
-      density = _useSplunkTheme.density;
-
-  var cloneRow = (0,external_react_namespaceObject.useCallback)(function (row, idx) {
-    var isFirstChild = idx === 0;
-    var isLastChild = idx === external_react_namespaceObject.Children.count(children) - 1;
-    var gutter = gutterProp;
-
-    if (gutter === undefined) {
-      if (family === 'prisma') {
-        if (density === 'compact') {
-          gutter = 16;
-        } else if (density === 'comfortable') {
-          gutter = 24;
+    // CONCATENATED MODULE: ./src/ColumnLayout/Column.tsx
+    function m() {
+        m = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return m.apply(this, arguments);
+    }
+    function y(e, t) {
+        if (e == null) return {};
+        var r = h(e, t);
+        var n, i;
+        if (Object.getOwnPropertySymbols) {
+            var l = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < l.length; i++) {
+                n = l[i];
+                if (t.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                r[n] = e[n];
+            }
         }
-      } else if (family === 'enterprise') {
-        gutter = 30;
-      }
+        return r;
     }
-
-    return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(row, {
-      gutter: gutter,
-      divider: divider === 'vertical',
-      isFirstChild: isFirstChild,
-      isLastChild: isLastChild
-    });
-  }, [children, density, divider, family, gutterProp]);
-  var insertDividers = (0,external_react_namespaceObject.useCallback)(function (acc, row, idx, original) {
-    acc.push(row);
-
-    if (divider === 'horizontal' && idx < original.length - 1) {
-      acc.push( /*#__PURE__*/external_react_default().createElement(ColumnLayoutStyles_StyledDivider, {
-        key: "".concat(idx, "-divider")
-      }));
+    function h(e, t) {
+        if (e == null) return {};
+        var r = {};
+        var n = Object.keys(e);
+        var i, l;
+        for (l = 0; l < n.length; l++) {
+            i = n[l];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
+        }
+        return r;
+    }
+    var g = {
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        /** @private. */
+        gutter: l().number,
+        /** @private. */
+        isFirstChild: l().bool,
+        /** @private. */
+        isLastChild: l().bool,
+        span: l().number,
+        /** @private. */
+        style: l().object
+    };
+    function b(e) {
+        var t = e.children, r = e.elementRef, i = e.gutter, l = e.span, a = l === void 0 ? 1 : l, o = e.isFirstChild, s = e.isLastChild, u = e.style, d = y(e, [ "children", "elementRef", "gutter", "span", "isFirstChild", "isLastChild", "style" ]);
+        // @docs-props-type ColumnPropsBase
+                var f = i ? "calc((100% - ".concat(11 * i, "px) * ").concat(a / 12, " + (").concat(i, "px * ").concat(a - 1, "))") : "".concat(100 / 12 * a, "%");
+        v(i);
+        var h = {
+            marginLeft: o ? undefined : i / 2,
+            marginRight: s ? undefined : i / 2,
+            flex: "".concat(a, " ").concat(a, " auto"),
+            // may accommodate small rounding errors and dividers
+            width: f
+        };
+        
+        return n().createElement(p, m({
+            "data-test": "column",
+            ref: r,
+            style: c()({}, u, h)
+        }, d), t);
+    }
+    b.propTypes = g;
+    /* harmony default export */    const O = b;
+    // CONCATENATED MODULE: ./src/ColumnLayout/RowStyles.ts
+    var C = d().div.withConfig({
+        displayName: "RowStyles__Styled",
+        componentId: "sc-121ntds-0"
+    })([ "", ";flex-flow:row nowrap;&[data-align-items='start']{align-items:flex-start;}&[data-align-items='end']{align-items:flex-end;}&[data-align-items='center']{align-items:center;}&[data-align-items='stretch']{align-items:stretch;}" ], f.mixins.reset("flex"));
+    var j = d().div.withConfig({
+        displayName: "RowStyles__StyledDivider",
+        componentId: "sc-121ntds-1"
+    })([ "border-left:1px solid ", ";flex:0 0 1;align-self:stretch;" ], (0, f.pick)({
+        prisma: f.variables.neutral200,
+        enterprise: {
+            light: f.variables.gray92,
+            dark: f.variables.gray60
+        }
+    }));
+    // CONCATENATED MODULE: ./src/ColumnLayout/Row.tsx
+    function w() {
+        w = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return w.apply(this, arguments);
+    }
+    function x(e, t) {
+        if (e == null) return {};
+        var r = S(e, t);
+        var n, i;
+        if (Object.getOwnPropertySymbols) {
+            var l = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < l.length; i++) {
+                n = l[i];
+                if (t.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    function S(e, t) {
+        if (e == null) return {};
+        var r = {};
+        var n = Object.keys(e);
+        var i, l;
+        for (l = 0; l < n.length; l++) {
+            i = n[l];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
+        }
+        return r;
+    }
+    var k = {
+        alignItems: l().oneOf([ "start", "end", "center", "stretch" ]),
+        children: l().node,
+        /** @private. */
+        divider: l().bool,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        /** @private. */
+        gutter: l().number,
+        /** @private. */
+        isFirstChild: l().bool,
+        /** @private. */
+        isLastChild: l().bool,
+        /** @private. */
+        style: l().object
+    };
+    function R(e) {
+        var t = e.alignItems, i = t === void 0 ? "stretch" : t, l = e.children, a = e.divider, o = e.elementRef, s = e.gutter, u = e.isFirstChild, d = e.isLastChild, f = e.style, p = x(e, [ "alignItems", "children", "divider", "elementRef", "gutter", "isFirstChild", "isLastChild", "style" ]);
+        // @docs-props-type RowPropsBase
+                if (false) {
+            var m;
+        }
+        var y = (0, r.useCallback)((function(e, t) {
+            
+            return (0, r.cloneElement)(e, {
+                gutter: s,
+                isFirstChild: t === 0,
+                isLastChild: t === r.Children.count(l) - 1
+            });
+        }), [ l, s ]);
+        var h = (0, r.useCallback)((function(e, t, r, i) {
+            e.push(t);
+            if (a && r < i.length - 1) {
+                e.push( n().createElement(j, {
+                    key: "".concat(r, "-divider")
+                }));
+            }
+            return e;
+        }), [ a ]);
+        v(s);
+        var g = {
+            marginTop: u ? undefined : s / 2,
+            marginBottom: d ? undefined : s / 2
+        };
+        var b = r.Children.toArray(l).filter(r.isValidElement).map(y).reduce(h, []);
+        
+        return n().createElement(C, w({
+            style: c()({}, f, g),
+            "data-align-items": i,
+            "data-test": "row",
+            ref: o
+        }, p), b);
+    }
+    R.propTypes = k;
+    /* harmony default export */    const _ = R;
+    // CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayoutStyles.ts
+    var E = d().div.withConfig({
+        displayName: "ColumnLayoutStyles__Styled",
+        componentId: "sc-3eatxz-0"
+    })([ "", ";flex-direction:column;" ], f.mixins.reset("flex"));
+    var P = d().div.withConfig({
+        displayName: "ColumnLayoutStyles__StyledDivider",
+        componentId: "sc-3eatxz-1"
+    })([ "border-top:1px solid ", ";height:0;" ], (0, f.pick)({
+        prisma: f.variables.neutral200,
+        enterprise: {
+            light: f.variables.gray92,
+            dark: f.variables.gray60
+        }
+    }));
+    // CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayout.tsx
+    function I() {
+        I = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return I.apply(this, arguments);
+    }
+    function L(e, t) {
+        if (e == null) return {};
+        var r = T(e, t);
+        var n, i;
+        if (Object.getOwnPropertySymbols) {
+            var l = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < l.length; i++) {
+                n = l[i];
+                if (t.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    function T(e, t) {
+        if (e == null) return {};
+        var r = {};
+        var n = Object.keys(e);
+        var i, l;
+        for (l = 0; l < n.length; l++) {
+            i = n[l];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
+        }
+        return r;
+    }
+    var F = {
+        children: l().node,
+        divider: l().oneOf([ "none", "vertical", "horizontal" ]),
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        gutter: l().number
+    };
+    /**
+ * `ColumnLayout` provides simple API for laying out content into columns. It is based on flexbox
+ * and has 12 columns.
+ */    function q(e) {
+        var t = e.children, i = e.divider, l = i === void 0 ? "none" : i, a = e.elementRef, s = e.gutter, c = L(e, [ "children", "divider", "elementRef", "gutter" ]);
+        // @docs-props-type ColumnLayoutPropsBase
+                var u = o()(), d = u.family, f = u.density;
+        var p = (0, r.useCallback)((function(e, n) {
+            var i = n === 0;
+            var a = n === r.Children.count(t) - 1;
+            var o = s;
+            if (o === undefined) {
+                if (d === "prisma") {
+                    if (f === "compact") {
+                        o = 16;
+                    } else if (f === "comfortable") {
+                        o = 24;
+                    }
+                } else if (d === "enterprise") {
+                    o = 30;
+                }
+            }
+            
+            return (0, r.cloneElement)(e, {
+                gutter: o,
+                divider: l === "vertical",
+                isFirstChild: i,
+                isLastChild: a
+            });
+        }), [ t, f, l, d, s ]);
+        var v = (0, r.useCallback)((function(e, t, r, i) {
+            e.push(t);
+            if (l === "horizontal" && r < i.length - 1) {
+                e.push( n().createElement(P, {
+                    key: "".concat(r, "-divider")
+                }));
+            }
+            return e;
+        }), [ l ]);
+        var m = r.Children.toArray(t).filter(r.isValidElement).map(p).reduce(v, []);
+        
+        return n().createElement(E, I({
+            "data-test": "column-layout",
+            ref: a
+        }, c), m);
     }
-
-    return acc;
-  }, [divider]);
-  var childrenCloned = external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.isValidElement).map(cloneRow).reduce(insertDividers, []);
-  return /*#__PURE__*/external_react_default().createElement(ColumnLayoutStyles_Styled, ColumnLayout_extends({
-    "data-test": "column-layout",
-    ref: elementRef
-  }, otherProps), childrenCloned);
-}
-
-ColumnLayout.propTypes = ColumnLayout_propTypes;
-ColumnLayout.Row = ColumnLayout_Row;
-ColumnLayout.Column = ColumnLayout_Column;
-/* harmony default export */ const ColumnLayout_ColumnLayout = (ColumnLayout);
-
-;// CONCATENATED MODULE: ./src/ColumnLayout/index.ts
-
-
-module.exports = __webpack_exports__;
-/******/ })()
-;
+    q.propTypes = F;
+    q.Row = _;
+    q.Column = O;
+    /* harmony default export */    const z = q;
+    // CONCATENATED MODULE: ./src/ColumnLayout/index.ts
+    module.exports = t;
+    /******/})();