@nulogy/components 12.2.0 → 12.3.0

package/dist/main.js

@@ -8654,6 +8654,19 @@
         size: ICON_SIZE_RATIO + "em"
       }, props)));
     }
+    var InputIcon = styled__default["default"](Icon).withConfig({
+      displayName: "Icon__InputIcon",
+      componentId: "sc-150w9kl-3"
+    })(function (_ref2) {
+      var theme = _ref2.theme;
+      return {
+        position: "absolute",
+        color: theme.colors.midGrey,
+        bottom: "50%",
+        transform: "translateY(50%)",
+        pointerEvents: "none"
+      };
+    }, position);
 
     var Flex = styled__default["default"](Box).withConfig({
       displayName: "Flex",
@@ -24170,6 +24183,7 @@
           error = _ref6.error,
           maxHeight = _ref6.maxHeight,
           windowed = _ref6.windowed,
+          hasIcon = _ref6.hasIcon,
           variant = _ref6.variant,
           _ref6$hasDefaultOptio = _ref6.hasDefaultOptions,
           hasDefaultOptions = _ref6$hasDefaultOptio === void 0 ? true : _ref6$hasDefaultOptio;
@@ -24185,7 +24199,7 @@
           });
         },
         control: function control(provided, state) {
-          return Object.assign(Object.assign({}, provided), {
+          return Object.assign(Object.assign(Object.assign({}, provided), {
             display: "flex",
             minHeight: theme.space.x5,
             paddingLeft: theme.space.x1,
@@ -24246,6 +24260,8 @@
                 theme: theme
               })
             }
+          }), hasIcon && {
+            paddingLeft: "calc(" + theme.space.x3 + " + " + theme.space.x1_5 + ")"
           });
         },
         dropdownIndicator: function dropdownIndicator(provided) {
@@ -24507,15 +24523,22 @@
       }, /*#__PURE__*/React__default["default"].createElement(WindowedSelect.components.Option, Object.assign({}, props), props.children));
     }
 
-    var SelectControl$1 = function SelectControl(props) {
-      // eslint-disable-next-line react/prop-types
-      var isFocused = props.isFocused;
+    var SelectControl$1 = function SelectControl(_a) {
+      var iconLeft = _a.iconLeft,
+          isFocused = _a.isFocused,
+          children = _a.children,
+          props = __rest$3(_a, ["iconLeft", "isFocused", "children"]);
+
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "data-testid": "select-control"
       }, /*#__PURE__*/React__default["default"].createElement(components.Control, Object.assign({
         className: isFocused ? "nds-select--is-focused" : null,
         isFocused: isFocused
-      }, props), props.children));
+      }, props), iconLeft && /*#__PURE__*/React__default["default"].createElement(InputIcon, {
+        left: "x1",
+        icon: iconLeft,
+        size: "x3"
+      }), children));
     };
     var SelectMultiValue$1 = function SelectMultiValue(props) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24596,7 +24619,8 @@
           loadOptions = _a.loadOptions,
           isClearable = _a.isClearable,
           variant = _a.variant,
-          props = __rest$3(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable", "variant"]);
+          iconLeft = _a.iconLeft,
+          props = __rest$3(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable", "variant", "iconLeft"]);
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
@@ -24618,6 +24642,7 @@
         defaultInputValue: defaultValue,
         placeholder: placeholder || t("start typing"),
         styles: customStyles({
+          hasIcon: Boolean(iconLeft),
           theme: theme,
           error: error,
           maxHeight: maxHeight,
@@ -24647,7 +24672,11 @@
               variant: componentVariant
             }, props), props.children);
           },
-          Control: SelectControl$1,
+          Control: function Control(props) {
+            return /*#__PURE__*/React__default["default"].createElement(SelectControl$1, Object.assign({
+              iconLeft: iconLeft
+            }, props), props.children);
+          },
           MultiValue: SelectMultiValue$1,
           ClearIndicator: SelectClearIndicator$1,
           DropdownIndicator: SelectDropdownIndicator$1,
@@ -29357,11 +29386,10 @@
         textAlign: prefixAlignment
       }), /*#__PURE__*/React__default["default"].createElement(InputWrapper, {
         maxWidth: inputWidth
-      }, iconLeft && /*#__PURE__*/React__default["default"].createElement(StyledInputIcon, {
+      }, iconLeft && /*#__PURE__*/React__default["default"].createElement(InputIcon, {
         left: "x1",
         icon: iconLeft,
-        size: iconLeftSize,
-        variant: variant
+        size: iconLeftSize
       }), /*#__PURE__*/React__default["default"].createElement(StyledInput, Object.assign({
         paddingLeft: iconLeft ? "calc(" + theme.space[iconLeftSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
         paddingRight: iconRight ? "calc(" + theme.space[iconRightSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
@@ -29373,11 +29401,10 @@
         size: htmlSize,
         variant: componentVariant,
         inputWidth: inputWidth
-      }, props)), iconRight && /*#__PURE__*/React__default["default"].createElement(StyledInputIcon, {
+      }, props)), iconRight && /*#__PURE__*/React__default["default"].createElement(InputIcon, {
         right: "x1",
         icon: iconRight,
-        size: iconRightSize,
-        variant: variant
+        size: iconRightSize
       })), /*#__PURE__*/React__default["default"].createElement(Suffix, {
         suffix: suffix,
         suffixWidth: suffixWidth,
@@ -29449,24 +29476,11 @@
         theme: theme
       });
     }, space);
-    var StyledInputIcon = styled__default["default"](Icon).withConfig({
-      displayName: "InputField__StyledInputIcon",
-      componentId: "sc-a97ghf-2"
-    })(function (_ref4) {
-      var theme = _ref4.theme;
-      return {
-        position: "absolute",
-        color: theme.colors.midGrey,
-        bottom: "50%",
-        transform: "translateY(50%)",
-        pointerEvents: "none"
-      };
-    }, position);
 
-    var cssForState = function cssForState(_ref5) {
-      var disabled = _ref5.disabled,
-          error = _ref5.error,
-          theme = _ref5.theme;
+    var cssForState = function cssForState(_ref4) {
+      var disabled = _ref4.disabled,
+          error = _ref4.error,
+          theme = _ref4.theme;
       if (disabled) return {
         color: theme.colors.midGrey,
         borderColor: theme.colors.lightGrey,
@@ -45012,6 +45026,198 @@
       }, props)));
     });
 
+    var DescriptionListContext = /*#__PURE__*/React__default["default"].createContext({});
+    var useDescriptionListContext = function useDescriptionListContext() {
+      return React__default["default"].useContext(DescriptionListContext);
+    };
+    function DescriptionListProvider(_a) {
+      var children = _a.children,
+          config = __rest$3(_a, ["children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(DescriptionListContext.Provider, {
+        value: Object.assign({}, config)
+      }, children);
+    }
+
+    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)));
+    }
+    var DescriptionListContainer = styled__default["default"].div.withConfig({
+      displayName: "DescriptionList__DescriptionListContainer",
+      componentId: "sc-11s88xm-0"
+    })({
+      containerType: "inline-size",
+      width: "100%"
+    });
+    var StyledDescriptionList = styled__default["default"].dl.withConfig({
+      displayName: "DescriptionList__StyledDescriptionList",
+      componentId: "sc-11s88xm-1"
+    })(function (_ref2) {
+      var _Object$assign;
+
+      var theme = _ref2.theme;
+
+      var _a, _b;
+
+      var _useDescriptionListCo = useDescriptionListContext(),
+          descriptionTermMaxWidth = _useDescriptionListCo.descriptionTermMaxWidth,
+          layout = _useDescriptionListCo.layout,
+          fontSize = _useDescriptionListCo.fontSize,
+          lineHeight = _useDescriptionListCo.lineHeight,
+          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+
+      return Object.assign(Object.assign(Object.assign({
+        margin: 0,
+        display: "grid",
+        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"
+      }), (_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));
+    });
+
+    var DescriptionTerm = styled.styled.dt.withConfig({
+      displayName: "DescriptionTerm",
+      componentId: "sc-fbwp2v-0"
+    })(function (_ref) {
+      var _Object$assign;
+
+      var theme = _ref.theme;
+
+      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({
+        // narrow stuff + non-auto layout
+        gridColumnStart: 1,
+        color: theme.colors.midGrey,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none
+      }, layout !== "inline" && {
+        paddingBottom: theme.space.none
+      }), density === "compact" && Object.assign({
+        paddingTop: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingBottom: theme.space.x0_25
+      })), density === "medium" && Object.assign({
+        paddingTop: theme.space.x0_75
+      }, layout === "inline" && {
+        paddingBottom: theme.space.x0_75
+      })), density === "relaxed" && Object.assign({
+        paddingTop: theme.space.x1_5,
+        paddingBottom: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingBottom: theme.space.x1_5
+      })), showDivider && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), (_Object$assign = {
+        "&:first-child": {
+          border: "none"
+        }
+      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), density === "compact" && layout !== "stacked" && {
+        paddingBottom: theme.space.x0_25
+      }), density === "medium" && layout !== "stacked" && {
+        paddingBottom: theme.space.x0_75
+      }), density === "relaxed" && layout !== "stacked" && {
+        paddingBottom: theme.space.x1_5
+      }), _Object$assign));
+    });
+
+    var DescriptionDetails = styled.styled.dd.withConfig({
+      displayName: "DescriptionDetails",
+      componentId: "sc-m5zvn4-0"
+    })(function (_ref) {
+      var _Object$assign;
+
+      var theme = _ref.theme;
+
+      var _useDescriptionListCo = useDescriptionListContext(),
+          autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint,
+          showDivider = _useDescriptionListCo.showDivider,
+          density = _useDescriptionListCo.density,
+          layout = _useDescriptionListCo.layout;
+
+      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+        // narrow stuff + non-auto layout
+        margin: 0,
+        color: theme.colors.black,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none
+      }, layout !== "inline" && {
+        paddingTop: theme.space.none
+      }), density === "compact" && Object.assign({
+        paddingBottom: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingTop: theme.space.x0_25
+      })), density === "medium" && Object.assign({
+        paddingBottom: theme.space.x0_75
+      }, layout === "inline" && {
+        paddingTop: theme.space.x0_75
+      })), density === "relaxed" && Object.assign({
+        paddingBottom: theme.space.x1_5,
+        paddingTop: theme.space.x0_25
+      }, layout === "inline" && {
+        paddingTop: theme.space.x1_5
+      })), showDivider && layout === "inline" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), (_Object$assign = {
+        "&:nth-child(2)": {
+          border: "none"
+        }
+      }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      }), density === "compact" && layout !== "stacked" && {
+        paddingTop: theme.space.x0_25
+      }), density === "medium" && layout !== "stacked" && {
+        paddingTop: theme.space.x0_75
+      }), density === "relaxed" && layout !== "stacked" && {
+        paddingTop: theme.space.x1_5
+      }), _Object$assign));
+    });
+
     var Divider$1 = styled__default["default"].hr.withConfig({
       displayName: "Divider",
       componentId: "sc-1r789ib-0"
@@ -54930,6 +55136,9 @@
     exports.DangerButton = DangerButton;
     exports.DatePicker = DatePicker;
     exports.DateRange = DateRange;
+    exports.DescriptionDetails = DescriptionDetails;
+    exports.DescriptionList = DescriptionList;
+    exports.DescriptionTerm = DescriptionTerm;
     exports.DesktopMenu = DesktopMenu;
     exports.Divider = Divider$1;
     exports.DropdownButton = DropdownButton;

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, ThemeContext as ThemeContext$1, StyleSheetManager, ThemeProvider } from 'styled-components';
+import styled, { useTheme, createGlobalStyle, styled as styled$1, 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';
@@ -8637,6 +8637,19 @@ function InlineIcon(props) {
     size: ICON_SIZE_RATIO + "em"
   }, props)));
 }
+var InputIcon = styled(Icon).withConfig({
+  displayName: "Icon__InputIcon",
+  componentId: "sc-150w9kl-3"
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    position: "absolute",
+    color: theme.colors.midGrey,
+    bottom: "50%",
+    transform: "translateY(50%)",
+    pointerEvents: "none"
+  };
+}, position);
 
 var Flex = styled(Box).withConfig({
   displayName: "Flex",
@@ -24153,6 +24166,7 @@ var customStyles = function customStyles(_ref6) {
       error = _ref6.error,
       maxHeight = _ref6.maxHeight,
       windowed = _ref6.windowed,
+      hasIcon = _ref6.hasIcon,
       variant = _ref6.variant,
       _ref6$hasDefaultOptio = _ref6.hasDefaultOptions,
       hasDefaultOptions = _ref6$hasDefaultOptio === void 0 ? true : _ref6$hasDefaultOptio;
@@ -24168,7 +24182,7 @@ var customStyles = function customStyles(_ref6) {
       });
     },
     control: function control(provided, state) {
-      return Object.assign(Object.assign({}, provided), {
+      return Object.assign(Object.assign(Object.assign({}, provided), {
         display: "flex",
         minHeight: theme.space.x5,
         paddingLeft: theme.space.x1,
@@ -24229,6 +24243,8 @@ var customStyles = function customStyles(_ref6) {
             theme: theme
           })
         }
+      }), hasIcon && {
+        paddingLeft: "calc(" + theme.space.x3 + " + " + theme.space.x1_5 + ")"
       });
     },
     dropdownIndicator: function dropdownIndicator(provided) {
@@ -24490,15 +24506,22 @@ function SelectOption$1(props) {
   }, /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props), props.children));
 }
 
-var SelectControl$1 = function SelectControl(props) {
-  // eslint-disable-next-line react/prop-types
-  var isFocused = props.isFocused;
+var SelectControl$1 = function SelectControl(_a) {
+  var iconLeft = _a.iconLeft,
+      isFocused = _a.isFocused,
+      children = _a.children,
+      props = __rest$3(_a, ["iconLeft", "isFocused", "children"]);
+
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "select-control"
   }, /*#__PURE__*/React__default.createElement(components.Control, Object.assign({
     className: isFocused ? "nds-select--is-focused" : null,
     isFocused: isFocused
-  }, props), props.children));
+  }, props), iconLeft && /*#__PURE__*/React__default.createElement(InputIcon, {
+    left: "x1",
+    icon: iconLeft,
+    size: "x3"
+  }), children));
 };
 var SelectMultiValue$1 = function SelectMultiValue(props) {
   return /*#__PURE__*/React__default.createElement("div", {
@@ -24579,7 +24602,8 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       loadOptions = _a.loadOptions,
       isClearable = _a.isClearable,
       variant = _a.variant,
-      props = __rest$3(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable", "variant"]);
+      iconLeft = _a.iconLeft,
+      props = __rest$3(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable", "variant", "iconLeft"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -24601,6 +24625,7 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     defaultInputValue: defaultValue,
     placeholder: placeholder || t("start typing"),
     styles: customStyles({
+      hasIcon: Boolean(iconLeft),
       theme: theme,
       error: error,
       maxHeight: maxHeight,
@@ -24630,7 +24655,11 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
           variant: componentVariant
         }, props), props.children);
       },
-      Control: SelectControl$1,
+      Control: function Control(props) {
+        return /*#__PURE__*/React__default.createElement(SelectControl$1, Object.assign({
+          iconLeft: iconLeft
+        }, props), props.children);
+      },
       MultiValue: SelectMultiValue$1,
       ClearIndicator: SelectClearIndicator$1,
       DropdownIndicator: SelectDropdownIndicator$1,
@@ -29340,11 +29369,10 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
     textAlign: prefixAlignment
   }), /*#__PURE__*/React__default.createElement(InputWrapper, {
     maxWidth: inputWidth
-  }, iconLeft && /*#__PURE__*/React__default.createElement(StyledInputIcon, {
+  }, iconLeft && /*#__PURE__*/React__default.createElement(InputIcon, {
     left: "x1",
     icon: iconLeft,
-    size: iconLeftSize,
-    variant: variant
+    size: iconLeftSize
   }), /*#__PURE__*/React__default.createElement(StyledInput, Object.assign({
     paddingLeft: iconLeft ? "calc(" + theme.space[iconLeftSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
     paddingRight: iconRight ? "calc(" + theme.space[iconRightSize] + " + " + theme.space.x1_5 + ")" : theme.space.x1,
@@ -29356,11 +29384,10 @@ var InputField = /*#__PURE__*/forwardRef(function (_a, ref) {
     size: htmlSize,
     variant: componentVariant,
     inputWidth: inputWidth
-  }, props)), iconRight && /*#__PURE__*/React__default.createElement(StyledInputIcon, {
+  }, props)), iconRight && /*#__PURE__*/React__default.createElement(InputIcon, {
     right: "x1",
     icon: iconRight,
-    size: iconRightSize,
-    variant: variant
+    size: iconRightSize
   })), /*#__PURE__*/React__default.createElement(Suffix, {
     suffix: suffix,
     suffixWidth: suffixWidth,
@@ -29432,24 +29459,11 @@ var StyledInput = styled.input.withConfig({
     theme: theme
   });
 }, space);
-var StyledInputIcon = styled(Icon).withConfig({
-  displayName: "InputField__StyledInputIcon",
-  componentId: "sc-a97ghf-2"
-})(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    position: "absolute",
-    color: theme.colors.midGrey,
-    bottom: "50%",
-    transform: "translateY(50%)",
-    pointerEvents: "none"
-  };
-}, position);
 
-var cssForState = function cssForState(_ref5) {
-  var disabled = _ref5.disabled,
-      error = _ref5.error,
-      theme = _ref5.theme;
+var cssForState = function cssForState(_ref4) {
+  var disabled = _ref4.disabled,
+      error = _ref4.error,
+      theme = _ref4.theme;
   if (disabled) return {
     color: theme.colors.midGrey,
     borderColor: theme.colors.lightGrey,
@@ -44995,6 +45009,198 @@ 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 children = _a.children,
+      config = __rest$3(_a, ["children"]);
+
+  return /*#__PURE__*/React__default.createElement(DescriptionListContext.Provider, {
+    value: Object.assign({}, config)
+  }, children);
+}
+
+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)));
+}
+var DescriptionListContainer = styled.div.withConfig({
+  displayName: "DescriptionList__DescriptionListContainer",
+  componentId: "sc-11s88xm-0"
+})({
+  containerType: "inline-size",
+  width: "100%"
+});
+var StyledDescriptionList = styled.dl.withConfig({
+  displayName: "DescriptionList__StyledDescriptionList",
+  componentId: "sc-11s88xm-1"
+})(function (_ref2) {
+  var _Object$assign;
+
+  var theme = _ref2.theme;
+
+  var _a, _b;
+
+  var _useDescriptionListCo = useDescriptionListContext(),
+      descriptionTermMaxWidth = _useDescriptionListCo.descriptionTermMaxWidth,
+      layout = _useDescriptionListCo.layout,
+      fontSize = _useDescriptionListCo.fontSize,
+      lineHeight = _useDescriptionListCo.lineHeight,
+      autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint;
+
+  return Object.assign(Object.assign(Object.assign({
+    margin: 0,
+    display: "grid",
+    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"
+  }), (_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));
+});
+
+var DescriptionTerm = styled$1.dt.withConfig({
+  displayName: "DescriptionTerm",
+  componentId: "sc-fbwp2v-0"
+})(function (_ref) {
+  var _Object$assign;
+
+  var theme = _ref.theme;
+
+  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({
+    // narrow stuff + non-auto layout
+    gridColumnStart: 1,
+    color: theme.colors.midGrey,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none
+  }, layout !== "inline" && {
+    paddingBottom: theme.space.none
+  }), density === "compact" && Object.assign({
+    paddingTop: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingBottom: theme.space.x0_25
+  })), density === "medium" && Object.assign({
+    paddingTop: theme.space.x0_75
+  }, layout === "inline" && {
+    paddingBottom: theme.space.x0_75
+  })), density === "relaxed" && Object.assign({
+    paddingTop: theme.space.x1_5,
+    paddingBottom: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingBottom: theme.space.x1_5
+  })), showDivider && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), (_Object$assign = {
+    "&:first-child": {
+      border: "none"
+    }
+  }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), density === "compact" && layout !== "stacked" && {
+    paddingBottom: theme.space.x0_25
+  }), density === "medium" && layout !== "stacked" && {
+    paddingBottom: theme.space.x0_75
+  }), density === "relaxed" && layout !== "stacked" && {
+    paddingBottom: theme.space.x1_5
+  }), _Object$assign));
+});
+
+var DescriptionDetails = styled$1.dd.withConfig({
+  displayName: "DescriptionDetails",
+  componentId: "sc-m5zvn4-0"
+})(function (_ref) {
+  var _Object$assign;
+
+  var theme = _ref.theme;
+
+  var _useDescriptionListCo = useDescriptionListContext(),
+      autoLayoutBreakpoint = _useDescriptionListCo.autoLayoutBreakpoint,
+      showDivider = _useDescriptionListCo.showDivider,
+      density = _useDescriptionListCo.density,
+      layout = _useDescriptionListCo.layout;
+
+  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+    // narrow stuff + non-auto layout
+    margin: 0,
+    color: theme.colors.black,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none
+  }, layout !== "inline" && {
+    paddingTop: theme.space.none
+  }), density === "compact" && Object.assign({
+    paddingBottom: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingTop: theme.space.x0_25
+  })), density === "medium" && Object.assign({
+    paddingBottom: theme.space.x0_75
+  }, layout === "inline" && {
+    paddingTop: theme.space.x0_75
+  })), density === "relaxed" && Object.assign({
+    paddingBottom: theme.space.x1_5,
+    paddingTop: theme.space.x0_25
+  }, layout === "inline" && {
+    paddingTop: theme.space.x1_5
+  })), showDivider && layout === "inline" && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), (_Object$assign = {
+    "&:nth-child(2)": {
+      border: "none"
+    }
+  }, _Object$assign["@container (min-width: " + autoLayoutBreakpoint + ")"] = Object.assign(Object.assign(Object.assign(Object.assign({}, showDivider && layout !== "stacked" && {
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    borderTopColor: theme.colors.lightGrey
+  }), density === "compact" && layout !== "stacked" && {
+    paddingTop: theme.space.x0_25
+  }), density === "medium" && layout !== "stacked" && {
+    paddingTop: theme.space.x0_75
+  }), density === "relaxed" && layout !== "stacked" && {
+    paddingTop: theme.space.x1_5
+  }), _Object$assign));
+});
+
 var Divider$1 = styled.hr.withConfig({
   displayName: "Divider",
   componentId: "sc-1r789ib-0"
@@ -54890,4 +55096,4 @@ var TruncatedText = function TruncatedText(_a) {
   }, props), children);
 };
 
-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, 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, NDSProvider, NavBarBackground, NotificationTypes, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect 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, 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, 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, NDSProvider, NavBarBackground, NotificationTypes, Overlay$1 as Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect 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, addStyledProps, legacy as desktop, phone, tablet, themes, toast, useMediaQuery, useWindowDimensions };

package/dist/src/AsyncSelect/AsyncSelect.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { IconName } from "@nulogy/icons";
 import Select from "react-select/base";
 import { AsyncProps } from "react-select/async";
 import { GroupBase } from "react-select";
@@ -16,6 +17,7 @@ type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<O
     multiselect?: AsyncProps<Option, IsMulti, Group>["isMulti"];
     maxHeight?: string;
     defaultValue?: AsyncProps<Option, IsMulti, Group>["defaultInputValue"];
+    iconLeft?: IconName | "loading";
 };
 export type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<AsyncProps<Option, IsMulti, Group>, "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue"> & AsyncCustomProps<Option, IsMulti, Group>;
 declare const AsyncSelect: React.ForwardRefExoticComponent<Omit<AsyncProps<unknown, boolean, GroupBase<unknown>>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | "defaultInputValue"> & AsyncCustomProps<unknown, boolean, GroupBase<unknown>> & React.RefAttributes<Select<unknown, boolean, GroupBase<unknown>>>>;

package/dist/src/AsyncSelect/AsyncSelect.story.d.ts

@@ -3,12 +3,7 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const Default: () => React.JSX.Element;
 export declare const WithDefaultOptions: {
     (): React.JSX.Element;
     story: {
@@ -29,9 +24,5 @@ export declare const UsingRefToControlFocus: {
         name: string;
     };
 };
-export declare const Controlled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const Controlled: () => React.JSX.Element;
+export declare const WithIcon: () => React.JSX.Element;

package/dist/src/AsyncSelect/AsyncSelectComponents.d.ts

@@ -3,7 +3,10 @@ import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorPro
 import { GroupBase } from "react-select";
 import type { OptionProps } from "react-windowed-select";
 import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => React.JSX.Element;
+import { IconName } from "@nulogy/icons";
+export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ iconLeft, isFocused, children, ...props }: ControlProps<Option, IsMulti, Group> & {
+    iconLeft?: IconName | "loading";
+}) => React.JSX.Element;
 export declare const SelectMultiValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectDropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;

package/dist/src/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { SpaceProps } from "styled-system";
+import { PositionProps, SpaceProps } from "styled-system";
 import { IconName } from "@nulogy/icons";
 interface IconProps extends SpaceProps {
     icon: IconName | "loading";
@@ -12,4 +12,5 @@ interface IconProps extends SpaceProps {
 }
 declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<IconProps & React.RefAttributes<SVGSVGElement>, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
 export declare function InlineIcon(props: IconProps): React.JSX.Element;
+export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & React.RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
 export default Icon;

package/dist/src/index.d.ts

@@ -15,6 +15,7 @@ export { Card, CardSet } from "./Card";
 export { Checkbox, CheckboxGroup } from "./Checkbox";
 export { DatePicker } from "./DatePicker";
 export { DateRange } from "./DateRange";
+export { DescriptionDetails, DescriptionList, DescriptionTerm } from "./DescriptionList";
 export { Divider } from "./Divider";
 export { DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText } from "./DropdownMenu";
 export { FieldLabel, HelpText, RequirementText } from "./FieldLabel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {