@nulogy/components 13.5.1 → 14.0.0

package/dist/main.module.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useEffect, createElement, useLayoutEffect, useCallback, useMemo, forwardRef, Fragment, Component as Component$1, useState, cloneElement, Children, isValidElement, PureComponent, useImperativeHandle } from 'react';
-import styled, { useTheme, createGlobalStyle, styled as styled$1, ThemeContext as ThemeContext$1, StyleSheetManager, ThemeProvider } from 'styled-components';
+import styled, { useTheme, createGlobalStyle, ThemeContext as ThemeContext$1, StyleSheetManager, ThemeProvider } from 'styled-components';
 import assign$1 from 'object-assign';
 import icons from '@nulogy/icons';
 import _extends$5 from '@babel/runtime/helpers/extends';
@@ -9753,13 +9753,14 @@ var Heading1 = styled(Text).attrs(function () {
   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: {
@@ -9777,13 +9778,14 @@ var Heading2 = styled(Text).attrs(function () {
   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: {
@@ -9801,13 +9803,14 @@ var Heading3 = styled(Text).attrs(function () {
   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: {
@@ -9825,13 +9828,14 @@ var Heading4 = styled(Text).attrs(function () {
   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: {
@@ -13097,7 +13101,7 @@ var IconWrapper = styled.span.withConfig({
     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"
@@ -13249,7 +13253,7 @@ var WrapperButton = styled.button.withConfig({
     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
@@ -13305,7 +13309,7 @@ var StyledButton$2 = styled.button.withConfig({
     display: "flex",
     alignItems: "center",
     padding: theme.space.half,
-    borderRadius: theme.radii.pill,
+    borderRadius: theme.radii.rounded,
     color: getIconColorByState({
       toggled: toggled,
       disabled: disabled,
@@ -47881,102 +47885,142 @@ var DateRange = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, props)));
 });
 
-var DescriptionListContext = /*#__PURE__*/React__default.createContext({});
-var useDescriptionListContext = function useDescriptionListContext() {
-  return React__default.useContext(DescriptionListContext);
-};
-function DescriptionListProvider(_a) {
+var DescriptionListContext = /*#__PURE__*/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.createElement(DescriptionListContext.Provider, {
-    value: Object.assign({}, config)
+    value: contextProps
   }, children);
-}
+};
+var useDescriptionListContext = function useDescriptionListContext() {
+  var context = 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.createElement(DescriptionListProvider, {
-    descriptionTermMaxWidth: descriptionTermMaxWidth,
-    layout: layout,
-    showDivider: showDivider,
-    density: density,
-    fontSize: fontSize,
-    lineHeight: lineHeight,
-    autoLayoutBreakpoint: autoLayoutBreakpoint
-  }, /*#__PURE__*/React__default.createElement(DescriptionListContainer, null, /*#__PURE__*/React__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.div.withConfig({
-  displayName: "DescriptionList__DescriptionListContainer",
-  componentId: "sc-11s88xm-0"
+  displayName: "DescriptionListparts__DescriptionListContainer",
+  componentId: "sc-cia3w5-0"
 })({
   containerType: "inline-size",
   width: "100%"
 });
-var StyledDescriptionList = styled.dl.withConfig({
-  displayName: "DescriptionList__StyledDescriptionList",
-  componentId: "sc-11s88xm-1"
-})(function (_ref2) {
+var DescriptionList$1 = styled.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.div.withConfig({
+  displayName: "DescriptionListparts__DescriptionGroup",
+  componentId: "sc-cia3w5-2"
+})(function (_ref3) {
+  var _Object$assign2;
 
-var DescriptionTerm = styled$1.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.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,
@@ -48000,11 +48044,11 @@ var DescriptionTerm = styled$1.dt.withConfig({
     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
@@ -48014,22 +48058,21 @@ var DescriptionTerm = styled$1.dt.withConfig({
     paddingBottom: theme.space.x0_75
   }), density === "relaxed" && layout !== "stacked" && {
     paddingBottom: theme.space.x1_5
-  }), _Object$assign));
+  }), _Object$assign3));
 });
+var DescriptionDetails = styled.dd.withConfig({
+  displayName: "DescriptionListparts__DescriptionDetails",
+  componentId: "sc-cia3w5-4"
+})(function (_ref5) {
+  var _Object$assign4;
 
-var DescriptionDetails = styled$1.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
@@ -48056,11 +48099,11 @@ var DescriptionDetails = styled$1.dd.withConfig({
     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
@@ -48070,9 +48113,44 @@ var DescriptionDetails = styled$1.dd.withConfig({
     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.createElement(DescriptionListProvider, {
+    descriptionTermMaxWidth: descriptionTermMaxWidth,
+    layout: layout,
+    autoLayoutBreakpoint: autoLayoutBreakpoint,
+    showDivider: showDivider,
+    density: density,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    columns: columns,
+    groupMinWidth: groupMinWidth
+  }, /*#__PURE__*/React__default.createElement(DescriptionListContainer, null, /*#__PURE__*/React__default.createElement(DescriptionList$1, null, children)));
+}
+
 var Divider$1 = styled.hr.withConfig({
   displayName: "Divider",
   componentId: "sc-1r789ib-0"
@@ -48325,7 +48403,7 @@ function Sidebar(_a) {
       _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,
@@ -48401,9 +48479,9 @@ function Sidebar(_a) {
       }
     }
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, closeOnOutsideClick && /*#__PURE__*/React__default.createElement(AnimatePresence, null, isOpen && /*#__PURE__*/React__default.createElement(SidebarOverlay, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, closeOnOutsideClick && /*#__PURE__*/React__default.createElement(AnimatePresence, null, isOpen && overlay !== "hide" && /*#__PURE__*/React__default.createElement(SidebarOverlay, {
     top: top,
-    transparent: !overlay,
+    transparent: overlay === "transparent" || overlay === false,
     transitionDuration: duration,
     zIndex: zIndex,
     onClick: closeOnOutsideClick && isOpen && onClose
@@ -53583,7 +53661,7 @@ var themes = {
       medium: "4px",
       large: "8px",
       circle: "50%",
-      pill: "9999px"
+      rounded: "9999px"
     },
     borders: []
   },
@@ -53737,7 +53815,7 @@ var themes = {
       medium: "4px",
       large: "8px",
       circle: "50%",
-      pill: "99999px"
+      rounded: "9999px"
     },
     borders: []
   },
@@ -53891,7 +53969,7 @@ var themes = {
       medium: "5.6px",
       large: "11.2px",
       circle: "50%",
-      pill: "99999px"
+      rounded: "9999px"
     },
     borders: []
   },
@@ -54045,7 +54123,7 @@ var themes = {
       medium: "3.6px",
       large: "7.2px",
       circle: "50%",
-      pill: "99999px"
+      rounded: "9999px"
     },
     borders: []
   }
@@ -54602,7 +54680,7 @@ var VisualRadio = styled.div.withConfig({
     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",
@@ -54613,7 +54691,7 @@ var VisualRadio = styled.div.withConfig({
       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) {
@@ -57415,7 +57493,7 @@ var SwitchButton = styled.button.withConfig({
     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,
@@ -59275,4 +59353,4 @@ var VerticalDivider = styled.div.withConfig({
 }, addStyledProps);
 VerticalDivider.displayName = "VerticalDivider";
 
-export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DescriptionDetails, DescriptionList, DescriptionTerm, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header$1 as Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, MonthPicker, NDSProvider, NavBarBackground, NotificationTypes, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, NDSSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TopBar, TruncatedText, VerticalDivider, WeekPicker, addStyledProps, legacy as desktop, phone, tablet, themes, toast, useMediaQuery, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DescriptionDetails, DescriptionGroup, DescriptionList, DescriptionTerm, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header$1 as Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, MonthPicker, NDSProvider, NavBarBackground, NotificationTypes, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, NDSSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TopBar, TruncatedText, VerticalDivider, WeekPicker, addStyledProps, legacy as desktop, phone, tablet, themes, toast, useMediaQuery, useWindowDimensions };

package/dist/src/BottomSheet/BottomSheet.parts.d.ts

@@ -23,9 +23,10 @@ export declare const BottomSheetParts: {
     Sheet: typeof SheetPart;
     ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "compact" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
         variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
         inline?: boolean;
+        compact?: boolean;
         disabled?: boolean;
         textTransform?: "initial" | "-moz-initial" | "inherit" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
         fontSize?: string;
@@ -34,9 +35,10 @@ export declare const BottomSheetParts: {
     }, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
         ref?: React.Ref<HTMLHeadingElement>;
     }>, never>, never>, never>> & string;
-    HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+    HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "compact" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
         variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
         inline?: boolean;
+        compact?: boolean;
         disabled?: boolean;
         textTransform?: "initial" | "-moz-initial" | "inherit" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
         fontSize?: string;

package/dist/src/BottomSheet/BottomSheet.styled.d.ts

@@ -25,9 +25,10 @@ declare const Sheet: import("styled-components/dist/types").IStyledComponentBase
 declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "inline" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
+    compact?: boolean;
     disabled?: boolean;
     textTransform?: "initial" | "inherit" | "-moz-initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
     fontSize?: string;
@@ -36,9 +37,10 @@ declare const Title: import("styled-components/dist/types").IStyledComponentBase
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, never>, never>> & string;
-declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "inline" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
+    compact?: boolean;
     disabled?: boolean;
     textTransform?: "initial" | "inherit" | "-moz-initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
     fontSize?: string;

package/dist/src/DescriptionList/DescriptionList.d.ts

@@ -1,6 +1,3 @@
-import React, { PropsWithChildren } from "react";
-import { DescriptionListConfig } from "./DescriptionListContext";
-export type Props = PropsWithChildren<DescriptionListConfig>;
-export declare function DescriptionList({ descriptionTermMaxWidth, layout, showDivider, density, fontSize, lineHeight, autoLayoutBreakpoint, children, }: Props): React.JSX.Element;
-export declare const DescriptionListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledDescriptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, never>> & string;
+import React from "react";
+import { DescriptionListProps } from "./lib/types";
+export default function DescriptionList({ descriptionTermMaxWidth, layout, autoLayoutBreakpoint, showDivider, density, fontSize, lineHeight, children, ...props }: DescriptionListProps): React.JSX.Element;

package/dist/src/DescriptionList/DescriptionList.parts.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BaseDescriptionListProps, Columns, GroupMinWidth } from "./lib/types";
+export type DescriptionListPartsProps = BaseDescriptionListProps & {
+    columns?: Columns;
+    groupMinWidth?: GroupMinWidth;
+};
+export declare const DescriptionListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DescriptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, never>> & string;
+export declare const DescriptionGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    rowSpan?: number;
+    columnSpan?: number;
+}>> & string;
+export declare const DescriptionTerm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const DescriptionDetails: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/src/DescriptionList/DescriptionListContext.d.ts

@@ -1,13 +1,19 @@
 import React, { PropsWithChildren } from "react";
+import { Breakpoints } from "../theme/theme.type";
 import { DefaultNDSThemeType } from "../theme";
-export interface DescriptionListConfig {
-    descriptionTermMaxWidth?: string;
-    layout?: "stacked" | "inline" | "auto";
-    showDivider?: boolean;
-    density?: "medium" | "compact" | "relaxed";
-    fontSize?: keyof DefaultNDSThemeType["fontSizes"];
-    lineHeight?: keyof DefaultNDSThemeType["lineHeights"];
-    autoLayoutBreakpoint?: string;
+import { Density } from "./lib/types";
+import { Layout } from "./lib/types";
+interface DescriptionListContextProps {
+    descriptionTermMaxWidth: string;
+    layout: Layout;
+    autoLayoutBreakpoint: string;
+    showDivider: boolean;
+    density: Density;
+    fontSize: keyof DefaultNDSThemeType["fontSizes"];
+    lineHeight: keyof DefaultNDSThemeType["lineHeights"];
+    columns?: number | Partial<Record<keyof Breakpoints, number>>;
+    groupMinWidth?: string;
 }
-export declare const useDescriptionListContext: () => DescriptionListConfig;
-export declare function DescriptionListProvider({ children, ...config }: PropsWithChildren<DescriptionListConfig>): React.JSX.Element;
+export declare const DescriptionListProvider: ({ children, ...contextProps }: PropsWithChildren<DescriptionListContextProps>) => React.JSX.Element;
+export declare const useDescriptionListContext: () => DescriptionListContextProps;
+export {};

package/dist/src/DescriptionList/index.d.ts

@@ -1,4 +1,5 @@
-export type { Props as DescriptionListProps } from "./DescriptionList";
-export { DescriptionList } from "./DescriptionList";
-export { DescriptionTerm } from "./DescriptionTerm";
-export { DescriptionDetails } from "./DescriptionDetails";
+export type { DescriptionListProps } from "./lib/types";
+export { default as DescriptionList } from "./DescriptionList";
+export { DescriptionGroup } from "./DescriptionList.parts";
+export { DescriptionTerm } from "./DescriptionList.parts";
+export { DescriptionDetails } from "./DescriptionList.parts";