@nulogy/components 13.5.1 → 14.0.0

package/LICENSE.md

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -1,11 +1,11 @@
 # @nulogy/components
+
 ![npm (scoped)](https://img.shields.io/npm/v/@nulogy/components.svg?style=flat-square)
 ![Build](https://img.shields.io/github/workflow/status/nulogy/design-system/Release?style=flat-square)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/nulogy/design-system/blob/master/CONTRIBUTING.md)
 
 > Built with React, components make it easy to create interfaces that conform to the principles of the Nulogy Design System.
 
-
 ## 📦 Installation
 
 ### 1. Add the package
@@ -83,6 +83,7 @@ Component documentation and usage guides are stored in the [github.com/nulogy/nu
 ## 👋 Work requests
 
 If you encounter a bug, need a new component or new capability of an existing component, or need any other type of support please file a work request in [GitHub Issues](https://github.com/nulogy/design-system/issues). To learn more about how to file a request and what to expect please read [How to file NDS work request](https://github.com/nulogy/design-system/wiki/How-to-file-NDS-work-request).
+
 - [#design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)
 
 ## 🙌 Contributing
@@ -93,13 +94,12 @@ Please see [Contributing.MD](https://github.com/nulogy/design-system/blob/master
 
 - [#design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)
 
-
 ## 📦 Related Packages
 
 The design-system is a collection of related packages. If you're looking for more packages, see below.
 
-| Package                                                                                       | Description                                                                        |                                                                                                                                             |
-| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| [@nulogy/css](https://github.com/nulogy/nds-css)               | CSS components and utility classes for adding new styles to non-React applications | [![CSS on NPM](https://img.shields.io/npm/v/@nulogy/css?style=flat-square)](https://www.npmjs.com/package/@nulogy/css)                      |
-| [@nulogy/icons](https://github.com/nulogy/nds-icons)           | A selection of Material Icon `svgs` used by Nulogy applications                    | [![Icons on NPM](https://img.shields.io/npm/v/@nulogy/icons?style=flat-square)](https://www.npmjs.com/package/@nulogy/icons)                |
-| [@nulogy/tokens](https://github.com/nulogy/nds-tokens)         | Design language styles (e.g colours, type, spacing, shadows, etc.)                 | [![Tokens on NPM](https://img.shields.io/npm/v/@nulogy/tokens?style=flat-square)](https://www.npmjs.com/package/@nulogy/tokens)             |
+| Package                                                | Description                                                                        |                                                                                                                                 |
+| ------------------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| [@nulogy/css](https://github.com/nulogy/nds-css)       | CSS components and utility classes for adding new styles to non-React applications | [![CSS on NPM](https://img.shields.io/npm/v/@nulogy/css?style=flat-square)](https://www.npmjs.com/package/@nulogy/css)          |
+| [@nulogy/icons](https://github.com/nulogy/nds-icons)   | A selection of Material Icon `svgs` used by Nulogy applications                    | [![Icons on NPM](https://img.shields.io/npm/v/@nulogy/icons?style=flat-square)](https://www.npmjs.com/package/@nulogy/icons)    |
+| [@nulogy/tokens](https://github.com/nulogy/nds-tokens) | Design language styles (e.g colours, type, spacing, shadows, etc.)                 | [![Tokens on NPM](https://img.shields.io/npm/v/@nulogy/tokens?style=flat-square)](https://www.npmjs.com/package/@nulogy/tokens) |

package/dist/main.js

@@ -9770,13 +9770,14 @@
       displayName: "Headings__Heading1",
       componentId: "sc-7kwh7g-0"
     })(function (_ref) {
-      var theme = _ref.theme;
+      var theme = _ref.theme,
+          compact = _ref.compact;
       return {
         fontSize: theme.fontSizes.heading1,
         lineHeight: theme.lineHeights.heading1,
         fontWeight: theme.fontWeights.light,
         marginTop: 0,
-        marginBottom: theme.space.x6
+        marginBottom: compact ? theme.space.none : theme.space.x6
       };
     }, variant({
       variants: {
@@ -9794,13 +9795,14 @@
       displayName: "Headings__Heading2",
       componentId: "sc-7kwh7g-1"
     })(function (_ref2) {
-      var theme = _ref2.theme;
+      var theme = _ref2.theme,
+          compact = _ref2.compact;
       return {
         fontSize: theme.fontSizes.heading2,
         lineHeight: theme.lineHeights.heading2,
         fontWeight: theme.fontWeights.normal,
         marginTop: 0,
-        marginBottom: theme.space.x2
+        marginBottom: compact ? theme.space.none : theme.space.x2
       };
     }, variant({
       variants: {
@@ -9818,13 +9820,14 @@
       displayName: "Headings__Heading3",
       componentId: "sc-7kwh7g-2"
     })(function (_ref3) {
-      var theme = _ref3.theme;
+      var theme = _ref3.theme,
+          compact = _ref3.compact;
       return {
         fontSize: theme.fontSizes.heading3,
         lineHeight: theme.lineHeights.heading3,
         fontWeight: theme.fontWeights.medium,
         marginTop: 0,
-        marginBottom: theme.space.x1
+        marginBottom: compact ? theme.space.none : theme.space.x1
       };
     }, variant({
       variants: {
@@ -9842,13 +9845,14 @@
       displayName: "Headings__Heading4",
       componentId: "sc-7kwh7g-3"
     })(function (_ref4) {
-      var theme = _ref4.theme;
+      var theme = _ref4.theme,
+          compact = _ref4.compact;
       return {
         fontSize: theme.fontSizes.heading4,
         lineHeight: theme.lineHeights.heading4,
         fontWeight: theme.fontWeights.bold,
         marginTop: 0,
-        marginBottom: theme.space.x1
+        marginBottom: compact ? theme.space.none : theme.space.x1
       };
     }, variant({
       variants: {
@@ -13114,7 +13118,7 @@
         flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
-        borderRadius: theme.radii.pill,
+        borderRadius: theme.radii.rounded,
         height: "calc(" + ((_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : size) + " + " + theme.sizes.x1 + ")",
         width: "calc(" + ((_b = theme.sizes[size]) !== null && _b !== void 0 ? _b : size) + " + " + theme.sizes.x1 + ")",
         transition: ".2s"
@@ -13266,7 +13270,7 @@
         color: theme.colors.black,
         cursor: disabled ? "arrow" : "pointer"
       }, _ref2["" + Icon] = {
-        borderRadius: theme.radii.pill,
+        borderRadius: theme.radii.rounded,
         transition: ".2s"
       }, _ref2["&:hover"] = (_hover = {}, _hover["" + Icon] = {
         backgroundColor: theme.colors.lightGrey
@@ -13322,7 +13326,7 @@
         display: "flex",
         alignItems: "center",
         padding: theme.space.half,
-        borderRadius: theme.radii.pill,
+        borderRadius: theme.radii.rounded,
         color: getIconColorByState({
           toggled: toggled,
           disabled: disabled,
@@ -47898,102 +47902,142 @@
       }, props)));
     });
 
-    var DescriptionListContext = /*#__PURE__*/React__default["default"].createContext({});
-    var useDescriptionListContext = function useDescriptionListContext() {
-      return React__default["default"].useContext(DescriptionListContext);
-    };
-    function DescriptionListProvider(_a) {
+    var DescriptionListContext = /*#__PURE__*/React.createContext(undefined);
+    var DescriptionListProvider = function DescriptionListProvider(_a) {
       var children = _a.children,
-          config = __rest$3(_a, ["children"]);
+          contextProps = __rest$3(_a, ["children"]);
 
       return /*#__PURE__*/React__default["default"].createElement(DescriptionListContext.Provider, {
-        value: Object.assign({}, config)
+        value: contextProps
       }, children);
-    }
+    };
+    var useDescriptionListContext = function useDescriptionListContext() {
+      var context = React.useContext(DescriptionListContext);
 
-    function DescriptionList(_ref) {
-      var _ref$descriptionTermM = _ref.descriptionTermMaxWidth,
-          descriptionTermMaxWidth = _ref$descriptionTermM === void 0 ? "50%" : _ref$descriptionTermM,
-          _ref$layout = _ref.layout,
-          layout = _ref$layout === void 0 ? "auto" : _ref$layout,
-          _ref$showDivider = _ref.showDivider,
-          showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
-          _ref$density = _ref.density,
-          density = _ref$density === void 0 ? "medium" : _ref$density,
-          _ref$fontSize = _ref.fontSize,
-          fontSize = _ref$fontSize === void 0 ? "medium" : _ref$fontSize,
-          _ref$lineHeight = _ref.lineHeight,
-          lineHeight = _ref$lineHeight === void 0 ? "base" : _ref$lineHeight,
-          _ref$autoLayoutBreakp = _ref.autoLayoutBreakpoint,
-          autoLayoutBreakpoint = _ref$autoLayoutBreakp === void 0 ? "640px" : _ref$autoLayoutBreakp,
-          children = _ref.children;
-      return /*#__PURE__*/React__default["default"].createElement(DescriptionListProvider, {
-        descriptionTermMaxWidth: descriptionTermMaxWidth,
-        layout: layout,
-        showDivider: showDivider,
-        density: density,
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-        autoLayoutBreakpoint: autoLayoutBreakpoint
-      }, /*#__PURE__*/React__default["default"].createElement(DescriptionListContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledDescriptionList, null, children)));
+      if (!context) {
+        throw new Error("useDescriptionListContext must be used within a DescriptionListProvider");
+      }
+
+      return context;
+    };
+
+    function validateAndExtractGridProps(props) {
+      var columns = "columns" in props ? props.columns : undefined;
+      var groupMinWidth = "groupMinWidth" in props ? props.groupMinWidth : undefined;
+
+      if (columns && groupMinWidth) {
+        throw new Error("Please provide either a `columns` or `groupMinWidth` prop to the DescriptionList, not both.\n\nSee component documentation: https://github.com/nulogy/design-system/blob/master/src/DescriptionList/README.md");
+      }
+
+      return {
+        columns: columns,
+        groupMinWidth: groupMinWidth
+      };
     }
+
+    var gapConfig = {
+      compact: "x0_75",
+      medium: "x1_5",
+      relaxed: "x3"
+    };
     var DescriptionListContainer = styled__default["default"].div.withConfig({
-      displayName: "DescriptionList__DescriptionListContainer",
-      componentId: "sc-11s88xm-0"
+      displayName: "DescriptionListparts__DescriptionListContainer",
+      componentId: "sc-cia3w5-0"
     })({
       containerType: "inline-size",
       width: "100%"
     });
-    var StyledDescriptionList = styled__default["default"].dl.withConfig({
-      displayName: "DescriptionList__StyledDescriptionList",
-      componentId: "sc-11s88xm-1"
-    })(function (_ref2) {
+    var DescriptionList$1 = styled__default["default"].dl.withConfig({
+      displayName: "DescriptionListparts__DescriptionList",
+      componentId: "sc-cia3w5-1"
+    })(function (_ref) {
       var _Object$assign;
 
-      var theme = _ref2.theme;
+      var theme = _ref.theme;
 
       var _a, _b;
 
       var _useDescriptionListCo = useDescriptionListContext(),
-          descriptionTermMaxWidth = _useDescriptionListCo.descriptionTermMaxWidth,
-          layout = _useDescriptionListCo.layout,
           fontSize = _useDescriptionListCo.fontSize,
           lineHeight = _useDescriptionListCo.lineHeight,
-          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+          density = _useDescriptionListCo.density,
+          columns = _useDescriptionListCo.columns,
+          groupMinWidth = _useDescriptionListCo.groupMinWidth;
 
-      return Object.assign(Object.assign(Object.assign({
+      return Object.assign(Object.assign(Object.assign(Object.assign({
+        containerType: "inline-size",
+        width: "100%",
         margin: 0,
         display: "grid",
+        columnGap: theme.space[gapConfig[density]],
         fontSize: (_a = theme.fontSizes[fontSize]) !== null && _a !== void 0 ? _a : theme.fontSizes.medium,
         lineHeight: (_b = theme.lineHeights[lineHeight]) !== null && _b !== void 0 ? _b : theme.lineHeights.base
-      }, layout === "inline" && {
-        gridTemplateColumns: "minmax(0, " + descriptionTermMaxWidth + ") auto"
-      }), (layout === "stacked" || layout === "auto") && {
-        gridTemplateColumns: "1fr"
+      }, typeof columns === "number" && {
+        gridTemplateColumns: "repeat(" + columns + ", minmax(0, 1fr))"
       }), (_Object$assign = {}, _Object$assign["" + Link] = {
         fontSize: "inherit",
         lineHeight: "inherit"
-      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign({}, layout === "auto" && {
-        gridTemplateColumns: "minmax(0, min(50%, " + descriptionTermMaxWidth + ")) auto"
-      }), _Object$assign));
+      }, _Object$assign["" + Text] = {
+        fontSize: "inherit",
+        lineHeight: "inherit"
+      }, _Object$assign)), groupMinWidth && {
+        gridTemplateColumns: "repeat(auto-fit, minmax(" + groupMinWidth + ", 1fr))"
+      }), typeof columns === "object" && Object.assign({}, Object.fromEntries(Object.entries(columns).map(function (_ref2) {
+        var key = _ref2[0],
+            value = _ref2[1];
+        return ["@container (min-width: " + theme.breakpoints[key] + ")", {
+          gridTemplateColumns: "repeat(" + value + ", minmax(0, 1fr))"
+        }];
+      }))));
     });
+    var DescriptionGroup = styled__default["default"].div.withConfig({
+      displayName: "DescriptionListparts__DescriptionGroup",
+      componentId: "sc-cia3w5-2"
+    })(function (_ref3) {
+      var _Object$assign2;
 
-    var DescriptionTerm = styled.styled.dt.withConfig({
-      displayName: "DescriptionTerm",
-      componentId: "sc-fbwp2v-0"
-    })(function (_ref) {
-      var _Object$assign;
+      var theme = _ref3.theme,
+          rowSpan = _ref3.rowSpan,
+          columnSpan = _ref3.columnSpan;
 
-      var theme = _ref.theme;
+      var _useDescriptionListCo2 = useDescriptionListContext(),
+          descriptionTermMaxWidth = _useDescriptionListCo2.descriptionTermMaxWidth,
+          layout = _useDescriptionListCo2.layout,
+          showDivider = _useDescriptionListCo2.showDivider,
+          autoLayoutBreakpoint = _useDescriptionListCo2.autoLayoutBreakpoint;
 
-      var _useDescriptionListCo = useDescriptionListContext(),
-          showDivider = _useDescriptionListCo.showDivider,
-          density = _useDescriptionListCo.density,
-          layout = _useDescriptionListCo.layout,
-          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+        display: "grid",
+        gridTemplateRows: "auto 1fr"
+      }, showDivider && {
+        borderBottom: "1px solid " + theme.colors.lightGrey
+      }), layout === "inline" && {
+        gridTemplateColumns: "minmax(0, " + descriptionTermMaxWidth + ") 1fr"
+      }), (layout === "stacked" || layout === "auto") && {
+        gridTemplateColumns: "1fr"
+      }), columnSpan && {
+        gridColumn: "span " + columnSpan + " / span " + columnSpan
+      }), rowSpan && {
+        gridRow: "span " + rowSpan + " / span " + rowSpan
+      }), (_Object$assign2 = {}, _Object$assign2["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign({}, layout === "auto" && {
+        gridTemplateColumns: "minmax(0, min(50%, " + descriptionTermMaxWidth + ")) 1fr"
+      }), _Object$assign2));
+    });
+    var DescriptionTerm = styled__default["default"].dt.withConfig({
+      displayName: "DescriptionListparts__DescriptionTerm",
+      componentId: "sc-cia3w5-3"
+    })(function (_ref4) {
+      var _Object$assign3;
+
+      var theme = _ref4.theme;
+
+      var _useDescriptionListCo3 = useDescriptionListContext(),
+          showDivider = _useDescriptionListCo3.showDivider,
+          layout = _useDescriptionListCo3.layout,
+          density = _useDescriptionListCo3.density,
+          autoLayoutBreakpoint = _useDescriptionListCo3.autoLayoutBreakpoint;
 
       return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
-        // narrow stuff + non-auto layout
         gridColumnStart: 1,
         color: theme.colors.midGrey,
         paddingLeft: theme.space.none,
@@ -48017,11 +48061,11 @@
         borderTopWidth: "1px",
         borderTopStyle: "solid",
         borderTopColor: theme.colors.lightGrey
-      }), (_Object$assign = {
+      }), (_Object$assign3 = {
         "&:first-child": {
           border: "none"
         }
-      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+      }, _Object$assign3["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
         borderTopWidth: "1px",
         borderTopStyle: "solid",
         borderTopColor: theme.colors.lightGrey
@@ -48031,22 +48075,21 @@
         paddingBottom: theme.space.x0_75
       }), density === "relaxed" && layout !== "stacked" && {
         paddingBottom: theme.space.x1_5
-      }), _Object$assign));
+      }), _Object$assign3));
     });
+    var DescriptionDetails = styled__default["default"].dd.withConfig({
+      displayName: "DescriptionListparts__DescriptionDetails",
+      componentId: "sc-cia3w5-4"
+    })(function (_ref5) {
+      var _Object$assign4;
 
-    var DescriptionDetails = styled.styled.dd.withConfig({
-      displayName: "DescriptionDetails",
-      componentId: "sc-m5zvn4-0"
-    })(function (_ref) {
-      var _Object$assign;
-
-      var theme = _ref.theme;
+      var theme = _ref5.theme;
 
-      var _useDescriptionListCo = useDescriptionListContext(),
-          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint,
-          showDivider = _useDescriptionListCo.showDivider,
-          density = _useDescriptionListCo.density,
-          layout = _useDescriptionListCo.layout;
+      var _useDescriptionListCo4 = useDescriptionListContext(),
+          autoLayoutBreakpoint = _useDescriptionListCo4.autoLayoutBreakpoint,
+          showDivider = _useDescriptionListCo4.showDivider,
+          density = _useDescriptionListCo4.density,
+          layout = _useDescriptionListCo4.layout;
 
       return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
         // narrow stuff + non-auto layout
@@ -48073,11 +48116,11 @@
         borderTopWidth: "1px",
         borderTopStyle: "solid",
         borderTopColor: theme.colors.lightGrey
-      }), (_Object$assign = {
+      }), (_Object$assign4 = {
         "&:nth-child(2)": {
           border: "none"
         }
-      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+      }, _Object$assign4["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
         borderTopWidth: "1px",
         borderTopStyle: "solid",
         borderTopColor: theme.colors.lightGrey
@@ -48087,9 +48130,44 @@
         paddingTop: theme.space.x0_75
       }), density === "relaxed" && layout !== "stacked" && {
         paddingTop: theme.space.x1_5
-      }), _Object$assign));
+      }), _Object$assign4));
     });
 
+    function DescriptionList(_a) {
+      var _a$descriptionTermMax = _a.descriptionTermMaxWidth,
+          descriptionTermMaxWidth = _a$descriptionTermMax === void 0 ? "320px" : _a$descriptionTermMax,
+          _a$layout = _a.layout,
+          layout = _a$layout === void 0 ? "stacked" : _a$layout,
+          _a$autoLayoutBreakpoi = _a.autoLayoutBreakpoint,
+          autoLayoutBreakpoint = _a$autoLayoutBreakpoi === void 0 ? "640px" : _a$autoLayoutBreakpoi,
+          _a$showDivider = _a.showDivider,
+          showDivider = _a$showDivider === void 0 ? false : _a$showDivider,
+          _a$density = _a.density,
+          density = _a$density === void 0 ? "medium" : _a$density,
+          _a$fontSize = _a.fontSize,
+          fontSize = _a$fontSize === void 0 ? "medium" : _a$fontSize,
+          _a$lineHeight = _a.lineHeight,
+          lineHeight = _a$lineHeight === void 0 ? "base" : _a$lineHeight,
+          children = _a.children,
+          props = __rest$3(_a, ["descriptionTermMaxWidth", "layout", "autoLayoutBreakpoint", "showDivider", "density", "fontSize", "lineHeight", "children"]);
+
+      var _validateAndExtractGr = validateAndExtractGridProps(props),
+          columns = _validateAndExtractGr.columns,
+          groupMinWidth = _validateAndExtractGr.groupMinWidth;
+
+      return /*#__PURE__*/React__default["default"].createElement(DescriptionListProvider, {
+        descriptionTermMaxWidth: descriptionTermMaxWidth,
+        layout: layout,
+        autoLayoutBreakpoint: autoLayoutBreakpoint,
+        showDivider: showDivider,
+        density: density,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        columns: columns,
+        groupMinWidth: groupMinWidth
+      }, /*#__PURE__*/React__default["default"].createElement(DescriptionListContainer, null, /*#__PURE__*/React__default["default"].createElement(DescriptionList$1, null, children)));
+    }
+
     var Divider$1 = styled__default["default"].hr.withConfig({
       displayName: "Divider",
       componentId: "sc-1r789ib-0"
@@ -48342,7 +48420,7 @@
           _a$closeOnOutsideClic = _a.closeOnOutsideClick,
           closeOnOutsideClick = _a$closeOnOutsideClic === void 0 ? true : _a$closeOnOutsideClic,
           _a$overlay = _a.overlay,
-          overlay = _a$overlay === void 0 ? true : _a$overlay,
+          overlay = _a$overlay === void 0 ? "show" : _a$overlay,
           _a$disableScroll = _a.disableScroll,
           disableScroll = _a$disableScroll === void 0 ? true : _a$disableScroll,
           _a$hideCloseButton = _a.hideCloseButton,
@@ -48418,9 +48496,9 @@
           }
         }
       };
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, closeOnOutsideClick && /*#__PURE__*/React__default["default"].createElement(AnimatePresence, null, isOpen && /*#__PURE__*/React__default["default"].createElement(SidebarOverlay, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, closeOnOutsideClick && /*#__PURE__*/React__default["default"].createElement(AnimatePresence, null, isOpen && overlay !== "hide" && /*#__PURE__*/React__default["default"].createElement(SidebarOverlay, {
         top: top,
-        transparent: !overlay,
+        transparent: overlay === "transparent" || overlay === false,
         transitionDuration: duration,
         zIndex: zIndex,
         onClick: closeOnOutsideClick && isOpen && onClose
@@ -53600,7 +53678,7 @@
           medium: "4px",
           large: "8px",
           circle: "50%",
-          pill: "9999px"
+          rounded: "9999px"
         },
         borders: []
       },
@@ -53754,7 +53832,7 @@
           medium: "4px",
           large: "8px",
           circle: "50%",
-          pill: "99999px"
+          rounded: "9999px"
         },
         borders: []
       },
@@ -53908,7 +53986,7 @@
           medium: "5.6px",
           large: "11.2px",
           circle: "50%",
-          pill: "99999px"
+          rounded: "9999px"
         },
         borders: []
       },
@@ -54062,7 +54140,7 @@
           medium: "3.6px",
           large: "7.2px",
           circle: "50%",
-          pill: "99999px"
+          rounded: "9999px"
         },
         borders: []
       }
@@ -54619,7 +54697,7 @@
         minWidth: theme.space.x2,
         height: theme.space.x2,
         marginRight: theme.space.x1,
-        borderRadius: theme.radii.pill,
+        borderRadius: theme.radii.rounded,
         marginTop: theme.space.x0_5,
         border: "solid 1px",
         position: "relative",
@@ -54630,7 +54708,7 @@
           width: "calc(" + theme.sizes.x1 + " - 2px)",
           height: "calc(" + theme.sizes.x1 + " - 2px)",
           background: theme.colors.white,
-          borderRadius: theme.radii.pill
+          borderRadius: theme.radii.rounded
         }
       };
     }, function (_ref2) {
@@ -57432,7 +57510,7 @@
         color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
         cursor: "pointer",
         border: "none",
-        borderRadius: theme.radii.pill,
+        borderRadius: theme.radii.rounded,
         fontSize: theme.fontSizes.base,
         fontWeight: theme.fontWeights.medium,
         lineHeight: theme.lineHeights.base,
@@ -59316,6 +59394,7 @@
     exports.DatePicker = DatePicker;
     exports.DateRange = DateRange;
     exports.DescriptionDetails = DescriptionDetails;
+    exports.DescriptionGroup = DescriptionGroup;
     exports.DescriptionList = DescriptionList;
     exports.DescriptionTerm = DescriptionTerm;
     exports.DesktopMenu = DesktopMenu;