@moda/om 16.1.1 → 16.3.0

package/dist/index.cjs.js

@@ -26,8 +26,8 @@ function _interopNamespace(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1000,20 +1000,20 @@ var typography_1 = typography;
 
 var text = function text(name, font) {
   if (font === void 0) {
-    font = "sans";
+    font = 'sans';
   }
 
-  var treatment = typography_1.typography["text-treatments"][name];
+  var treatment = typography_1.typography['text-treatments'][name];
   return __assign$b(__assign$b({}, treatment), {
-    "font-family": typography_1.typography.fonts[font].join(","),
-    "line-height": "" + treatment["line-height"]
+    'font-family': typography_1.typography.fonts[font].join(','),
+    'line-height': "".concat(treatment['line-height'])
   });
 };
 
 helpers.text = text;
 
 var remToUnitlessPx = function remToUnitlessPx(value) {
-  return parseFloat(value) * parseInt(typography_1.typography["root-font-size"], 0);
+  return parseFloat(value) * parseInt(typography_1.typography['root-font-size'], 10);
 };
 
 helpers.remToUnitlessPx = remToUnitlessPx;
@@ -1022,18 +1022,19 @@ var color = function color(name, alpha) {
   var _a;
 
   var color = colors_1.colors.all[name];
-  return alpha != null ? colorString.to.rgb(__spreadArray$1(__spreadArray$1([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
+  return alpha != null ? // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  colorString.to.rgb(__spreadArray$1(__spreadArray$1([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
 };
 
 helpers.color = color;
 
-var spacing = function spacing(ty, rx, b, l) {
-  return [ty, rx, b, l].reduce(function (acc, v) {
+var spacing = function spacing(topY, rightX, bottom, left) {
+  return [topY, rightX, bottom, left].reduce(function (acc, value) {
     var _a;
 
-    if (v === undefined) return acc;
-    return [acc, (_a = space_1.space.scale[v]) !== null && _a !== void 0 ? _a : v].join(" ");
-  }, "");
+    if (value === undefined) return acc;
+    return [acc, (_a = space_1.space.scale[value]) !== null && _a !== void 0 ? _a : value].join(' ');
+  }, '');
 };
 
 helpers.spacing = spacing;
@@ -1042,12 +1043,18 @@ helpers.spacing = spacing;
 
   var __createBinding = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function (o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, {
-      enumerable: true,
-      get: function get() {
-        return m[k];
-      }
-    });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = {
+        enumerable: true,
+        get: function get() {
+          return m[k];
+        }
+      };
+    }
+
+    Object.defineProperty(o, k2, desc);
   } : function (o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -1274,6 +1281,182 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+var isRenderProps = function isRenderProps(children) {
+  return typeof children === 'function';
+};
+
+var classnames = {exports: {}};
+
+(function (module) {
+  /* global define */
+  (function () {
+
+    var hasOwn = {}.hasOwnProperty;
+
+    function classNames() {
+      var classes = [];
+
+      for (var i = 0; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (!arg) continue;
+
+        var argType = _typeof(arg);
+
+        if (argType === 'string' || argType === 'number') {
+          classes.push(arg);
+        } else if (Array.isArray(arg)) {
+          if (arg.length) {
+            var inner = classNames.apply(null, arg);
+
+            if (inner) {
+              classes.push(inner);
+            }
+          }
+        } else if (argType === 'object') {
+          if (arg.toString === Object.prototype.toString) {
+            for (var key in arg) {
+              if (hasOwn.call(arg, key) && arg[key]) {
+                classes.push(key);
+              }
+            }
+          } else {
+            classes.push(arg.toString());
+          }
+        }
+      }
+
+      return classes.join(' ');
+    }
+
+    if (module.exports) {
+      classNames["default"] = classNames;
+      module.exports = classNames;
+    } else {
+      window.classNames = classNames;
+    }
+  })();
+})(classnames);
+
+var classNames = classnames.exports;
+
+var _excluded$E = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
+var Stack = function Stack(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      space = _ref.space,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      style = _ref.style,
+      rest = _objectWithoutProperties(_ref, _excluded$E);
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
+    className: classNames("Stack Stack--".concat(direction, "-").concat(space), className),
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
+      alignItems: alignItems,
+      justifyContent: justifyContent
+    })
+  }, rest), children);
+};
+
+var omit = function omit(obj) {
+  for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    keys[_key - 1] = arguments[_key];
+  }
+
+  return Object.entries(obj).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+        key = _ref2[0];
+
+    return !keys.includes(key);
+  }).reduce(function (obj, _ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        val = _ref4[1];
+
+    return Object.assign(obj, _defineProperty$1({}, key, val));
+  }, {});
+};
+
+var truncate = function truncate(string) {
+  var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
+  if (!string) return null;
+  var ellipsis = string.length > maxLength;
+  return "".concat(string.substring(0, maxLength)).concat(ellipsis ? '...' : '');
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+var stringifyProps = function stringifyProps(props) {
+  var stringifiedProps = Object.entries(props || {}).reduce(function (memo, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    if (key === 'children') return "".concat(memo, " children={...}");
+    if (typeof value === 'string') return "".concat(memo, " ").concat(key, "=\"").concat(truncate(value), "\"");
+    if (typeof value === 'function') return "".concat(memo, " ").concat(key, "={fn}");
+    if (typeof value === 'boolean') return "".concat(memo, " ").concat(key).concat(value ? '' : '={false}');
+    if (typeof value === 'number') return "".concat(memo, " ").concat(key, "={").concat(value, "}");
+    if (_typeof(value) === 'object') return "".concat(memo, " ").concat(key, "={...}");
+    return "".concat(memo, " ").concat(key, "=").concat(value);
+  }, '');
+  return stringifiedProps.trim();
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-enable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var isEmpty = function isEmpty(obj) {
+  return Object.entries(obj || {}).length === 0;
+};
+
+var StatesProps = function StatesProps(_ref) {
+  var props = _ref.props,
+      children = _ref.children;
+  var childrenProps = omit.apply(void 0, [children.props].concat(_toConsumableArray(Object.keys(props || {}))));
+  return /*#__PURE__*/React__default["default"].createElement(Stack, {
+    className: "StatesProps",
+    space: 2,
+    direction: "horizontal"
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, children.type.displayName || children.type.name), !isEmpty(props) && /*#__PURE__*/React__default["default"].createElement("strong", null, stringifyProps(props)), !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React__default["default"].createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React__default["default"].createElement("span", null, " "));
+};
+
+var _excluded$D = ["props", "children"];
+var State = function State(_ref) {
+  var props = _ref.props,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded$D);
+
+  var Specimen = isRenderProps(children) ? children(props) : /*#__PURE__*/React__default["default"].cloneElement(children, props);
+  var innerChildren = isRenderProps(children) ? children(props) : children;
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
+    className: "State"
+  }, rest), Specimen, /*#__PURE__*/React__default["default"].createElement("code", {
+    className: "State__props"
+  }, /*#__PURE__*/React__default["default"].createElement(StatesProps, {
+    props: props
+  }, innerChildren)));
+};
+
+var _excluded$C = ["states", "children"];
+var States = function States(_ref) {
+  var _ref$states = _ref.states,
+      states = _ref$states === void 0 ? [{}] : _ref$states,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded$C);
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "States"
+  }, states.map(function (props, index) {
+    return /*#__PURE__*/React__default["default"].createElement(State, _extends$1({
+      key: index,
+      props: props
+    }, rest), children);
+  }));
+};
+
 var _assign = function __assign() {
   _assign = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -1628,7 +1811,7 @@ RemoveScroll.classNames = {
 };
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1641,7 +1824,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -3327,11 +3509,10 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
 });
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -4451,24 +4632,42 @@ var stylesheetSingleton = function stylesheetSingleton() {
   };
 };
 
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
+
 var styleHookSingleton = function styleHookSingleton() {
   var sheet = stylesheetSingleton();
-  return function (styles) {
+  return function (styles, isDynamic) {
     React__namespace.useEffect(function () {
       sheet.add(styles);
       return function () {
         sheet.remove();
       };
-    }, [styles]);
+    }, [styles && isDynamic]);
   };
 };
 
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
+
 var styleSingleton = function styleSingleton() {
   var useStyle = styleHookSingleton();
 
   var Sheet = function Sheet(_a) {
-    var styles = _a.styles;
-    useStyle(styles);
+    var styles = _a.styles,
+        dynamic = _a.dynamic;
+    useStyle(styles, dynamic);
     return null;
   };
 
@@ -4488,6 +4687,13 @@ var parse = function parse(x) {
 
 var getOffset = function getOffset(gapMode) {
   var cs = window.getComputedStyle(document.body);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (cs.overflowY === 'hidden') {
+      console.error('react-remove-scroll-bar: cannot calculate scrollbar size because it is removed (overflow:hidden on body');
+    }
+  }
+
   var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft'];
   var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop'];
   var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight'];
@@ -4536,17 +4742,13 @@ var getStyles = function getStyles(_a, allowRelative, gapMode, important) {
 
 
 var RemoveScrollBar = function RemoveScrollBar(props) {
-  var _a = React__namespace.useState(getGapWidth(props.gapMode)),
-      gap = _a[0],
-      setGap = _a[1];
-
-  React__namespace.useEffect(function () {
-    setGap(getGapWidth(props.gapMode));
-  }, [props.gapMode]);
   var noRelative = props.noRelative,
       noImportant = props.noImportant,
-      _b = props.gapMode,
-      gapMode = _b === void 0 ? 'margin' : _b;
+      _a = props.gapMode,
+      gapMode = _a === void 0 ? 'margin' : _a;
+  var gap = React__namespace.useMemo(function () {
+    return getGapWidth(gapMode);
+  }, [gapMode]);
   return /*#__PURE__*/React__namespace.createElement(Style$1, {
     styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '')
   });
@@ -5119,60 +5321,6 @@ var FocusOn = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   }));
 });
 
-var classnames = {exports: {}};
-
-(function (module) {
-  /* global define */
-  (function () {
-
-    var hasOwn = {}.hasOwnProperty;
-
-    function classNames() {
-      var classes = [];
-
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-
-        var argType = _typeof(arg);
-
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg)) {
-          if (arg.length) {
-            var inner = classNames.apply(null, arg);
-
-            if (inner) {
-              classes.push(inner);
-            }
-          }
-        } else if (argType === 'object') {
-          if (arg.toString === Object.prototype.toString) {
-            for (var key in arg) {
-              if (hasOwn.call(arg, key) && arg[key]) {
-                classes.push(key);
-              }
-            }
-          } else {
-            classes.push(arg.toString());
-          }
-        }
-      }
-
-      return classes.join(' ');
-    }
-
-    if (module.exports) {
-      classNames["default"] = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-})(classnames);
-
-var classNames = classnames.exports;
-
 var dist$3 = {};
 
 var scale = {};
@@ -5280,7 +5428,7 @@ var scale = {};
   __exportStar(scale, exports);
 })(dist$3);
 
-var _excluded$E = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
+var _excluded$B = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
 var DEFAULT_PRODUCT_ASPECT_WIDTH = 128;
 var DEFAULT_PRODUCT_ASPECT_HEIGHT = 205;
 var DEFAULT_PRODUCT_ASPECT_RATIO = DEFAULT_PRODUCT_ASPECT_HEIGHT / DEFAULT_PRODUCT_ASPECT_WIDTH;
@@ -5295,7 +5443,7 @@ var AspectRatioBox = /*#__PURE__*/React__default["default"].forwardRef(function
       outlined = _ref$outlined === void 0 ? false : _ref$outlined,
       children = _ref.children,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$E);
+      rest = _objectWithoutProperties(_ref, _excluded$B);
 
   var _scale = dist$3.scale({
     width: aspectWidth,
@@ -5325,23 +5473,23 @@ var AspectRatioBox = /*#__PURE__*/React__default["default"].forwardRef(function
 });
 AspectRatioBox.displayName = 'AspectRatioBox';
 
-var _excluded$D = ["className", "theme", "children"];
+var _excluded$A = ["className", "theme", "children"];
 var Badge = function Badge(_ref) {
   var className = _ref.className,
       theme = _ref.theme,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$D);
+      rest = _objectWithoutProperties(_ref, _excluded$A);
 
   return /*#__PURE__*/React__default["default"].createElement("span", _extends$1({
     className: classNames('Badge', theme && "Badge--".concat(theme), className)
   }, rest), children);
 };
 
-var _excluded$C = ["children", "className"];
+var _excluded$z = ["children", "className"];
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var children = _ref.children,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$C);
+      rest = _objectWithoutProperties(_ref, _excluded$z);
 
   var position = 0;
   return /*#__PURE__*/React__default["default"].createElement("ol", _extends$1({
@@ -5361,7 +5509,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }));
 };
 
-var _excluded$B = ["className", "styleless", "disabled"];
+var _excluded$y = ["className", "styleless", "disabled"];
 
 var isLink = function isLink(props) {
   return 'to' in props;
@@ -5380,7 +5528,7 @@ var Clickable = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
       _ref$styleless = _ref.styleless,
       styleless = _ref$styleless === void 0 ? false : _ref$styleless,
       disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$B);
+      rest = _objectWithoutProperties(_ref, _excluded$y);
 
   var props = _objectSpread2(_objectSpread2({}, rest), {}, {
     className: classNames({
@@ -5403,14 +5551,14 @@ var Clickable = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
 });
 Clickable.displayName = 'Clickable';
 
-var _excluded$A = ["className", "disabled", "children", "underlined"];
+var _excluded$x = ["className", "disabled", "children", "underlined"];
 var ControlLink = function ControlLink(_ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
       children = _ref.children,
       _ref$underlined = _ref.underlined,
       underlined = _ref$underlined === void 0 ? true : _ref$underlined,
-      rest = _objectWithoutProperties(_ref, _excluded$A);
+      rest = _objectWithoutProperties(_ref, _excluded$x);
 
   return /*#__PURE__*/React__default["default"].createElement(Clickable, _extends$1({}, rest, {
     className: classNames('ControlLink', {
@@ -5422,12 +5570,12 @@ var ControlLink = function ControlLink(_ref) {
   }), children);
 };
 
-var _excluded$z = ["children", "position", "className"];
+var _excluded$w = ["children", "position", "className"];
 var Breadcrumb = function Breadcrumb(_ref) {
   var children = _ref.children,
       position = _ref.position,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$z);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
 
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: classNames('Breadcrumb', className),
@@ -5446,7 +5594,8 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }));
 };
 
-var breakpointKeys = Object.keys(dist$4.breakpoints);
+var breakpointKeys = Object.keys(dist$4.breakpoints); // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+
 var ONE_PIXEL = 1 / 16;
 var getMediaQueryBounds = function getMediaQueryBounds(_ref) {
   var mode = _ref.mode,
@@ -5456,21 +5605,21 @@ var getMediaQueryBounds = function getMediaQueryBounds(_ref) {
     case 'at':
       {
         var prevIndex = breakpointKeys.indexOf(breakpoint) - 1;
-        var prevWidth = prevIndex === -1 ? 0 : parseInt(dist$4.breakpoints[breakpointKeys[prevIndex]]) + ONE_PIXEL;
+        var prevWidth = prevIndex === -1 ? 0 : parseInt(dist$4.breakpoints[breakpointKeys[prevIndex]], 10) + ONE_PIXEL;
         return {
           min: prevWidth,
-          max: parseInt(dist$4.breakpoints[breakpoint])
+          max: parseInt(dist$4.breakpoints[breakpoint], 10)
         };
       }
 
     case 'gt':
       return {
-        min: parseInt(dist$4.breakpoints[breakpoint]) + ONE_PIXEL
+        min: parseInt(dist$4.breakpoints[breakpoint], 10) + ONE_PIXEL
       };
 
     case 'lt':
       return {
-        max: parseInt(dist$4.breakpoints[breakpoint])
+        max: parseInt(dist$4.breakpoints[breakpoint], 10)
       };
   }
 };
@@ -5560,10 +5709,10 @@ var useBreakpoint = function useBreakpoint(props) {
   };
 };
 
-var _excluded$y = ["children"];
+var _excluded$v = ["children"];
 var Breakpoint = function Breakpoint(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$y);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   var _discriminate = discriminate(rest),
       mode = _discriminate.mode,
@@ -5577,7 +5726,7 @@ var Breakpoint = function Breakpoint(_ref) {
   }, children) : null;
 };
 
-var _excluded$x = ["secondary", "chip", "hover", "focus", "disabled", "className"];
+var _excluded$u = ["secondary", "chip", "hover", "focus", "disabled", "className"];
 var Button = function Button(_ref) {
   var secondary = _ref.secondary,
       chip = _ref.chip,
@@ -5585,7 +5734,7 @@ var Button = function Button(_ref) {
       focus = _ref.focus,
       disabled = _ref.disabled,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
+      rest = _objectWithoutProperties(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default["default"].createElement(Clickable, _extends$1({
     className: classNames('Button', {
@@ -5736,7 +5885,7 @@ var Circle12 = function Circle12(_a) {
 
 Circle12.displayName = 'Circle12';
 
-var _excluded$w = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon"];
+var _excluded$t = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon"];
 var CHECKED_ITEM_PROPS = {
   className: 'Checkbox__check-mark',
   height: '85%',
@@ -5754,7 +5903,7 @@ var Checkbox = function Checkbox(_ref) {
       disabled = _ref.disabled,
       _ref$checkIcon = _ref.checkIcon,
       checkIcon = _ref$checkIcon === void 0 ? 'checkmark' : _ref$checkIcon,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
 
   var _useState = React.useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -5842,7 +5991,7 @@ var SKU_COLORS = {
   yellow: '#ffca44'
 };
 
-var _excluded$v = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled"];
+var _excluded$s = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled"];
 var ColorSwatch = function ColorSwatch(_ref) {
   var className = _ref.className,
       size = _ref.size,
@@ -5856,7 +6005,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
       onClick = _ref.onClick,
       onMouseEnter = _ref.onMouseEnter,
       disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
 
   var handleClick = React.useCallback(function (_event) {
     onClick && onClick(color);
@@ -5892,22 +6041,22 @@ var ColorSwatch = function ColorSwatch(_ref) {
   }));
 };
 
-var _excluded$u = ["className", "children"];
+var _excluded$r = ["className", "children"];
 var Constrain = function Constrain(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
     className: classNames('Constrain', className)
   }, rest), children);
 };
 
-var _excluded$t = ["className", "children"];
+var _excluded$q = ["className", "children"];
 var ExceedConstrain = function ExceedConstrain(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
     className: classNames('ExceedConstrain', className)
@@ -8319,7 +8468,7 @@ var Warning16 = function Warning16(_a) {
 
 Warning16.displayName = 'Warning16';
 
-var _excluded$s = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange", "onChangeEvent"];
+var _excluded$p = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange", "onChangeEvent"];
 var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
@@ -8329,7 +8478,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
       label = _ref.label,
       _onChange = _ref.onChange,
       onChangeEvent = _ref.onChangeEvent,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$p);
 
   return /*#__PURE__*/React__default["default"].createElement("input", _extends$1({
     className: classNames('TextInput', className, {
@@ -8668,7 +8817,8 @@ var useKeyboardListNavigation = function useKeyboardListNavigation(_ref) {
     return function () {
       el.removeEventListener('keydown', handleKeyDown);
     };
-  }, [handleKeyDown, ref, idleTimeout]);
+  }, [handleKeyDown, ref, idleTimeout]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   React.useEffect(function () {
     return dispatch({
       type: 'RESET',
@@ -8684,6 +8834,7 @@ var useKeyboardListNavigation = function useKeyboardListNavigation(_ref) {
   });
 };
 
+/* eslint-disable react-hooks/exhaustive-deps */
 var useUpdateEffect = function useUpdateEffect(effect, deps) {
   var didMountRef = React.useRef(false);
   React.useEffect(function () {
@@ -8695,7 +8846,7 @@ var useUpdateEffect = function useUpdateEffect(effect, deps) {
   }, deps);
 };
 
-var _excluded$r = ["className", "treatment", "color", "family", "children", "style"];
+var _excluded$o = ["className", "treatment", "color", "family", "children", "style"];
 var Text = function Text(_ref) {
   var className = _ref.className,
       _ref$treatment = _ref.treatment,
@@ -8705,7 +8856,7 @@ var Text = function Text(_ref) {
       family = _ref.family,
       children = _ref.children,
       style = _ref.style,
-      rest = _objectWithoutProperties(_ref, _excluded$r);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default["default"].createElement("span", _extends$1({
     className: classNames("Text Text--".concat(treatment, " ").concat(family ? "Text--".concat(family) : ''), className),
@@ -8862,7 +9013,7 @@ var Search20 = function Search20(_a) {
 
 Search20.displayName = 'Search20';
 
-var _excluded$q = ["className", "onChange", "onChangeValue", "onClear", "value"];
+var _excluded$n = ["className", "onChange", "onChangeValue", "onClear", "value"];
 var DEFAULT_INPUT_VALUE = '';
 var SearchInput = function SearchInput(_ref) {
   var className = _ref.className,
@@ -8871,7 +9022,7 @@ var SearchInput = function SearchInput(_ref) {
       onClear = _ref.onClear,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? DEFAULT_INPUT_VALUE : _ref$value,
-      rest = _objectWithoutProperties(_ref, _excluded$q);
+      rest = _objectWithoutProperties(_ref, _excluded$n);
 
   var ref = React.useRef(null);
 
@@ -9069,7 +9220,8 @@ var SelectOption = function SelectOption(_ref) {
       selected = _ref.selected,
       option = _ref.option,
       onClick = _ref.onClick,
-      className = _ref.className;
+      className = _ref.className,
+      dataTestId = _ref.dataTestId;
   var ref = React.useRef(null);
   var handleClick = React.useCallback(function (event) {
     event.preventDefault();
@@ -9091,13 +9243,14 @@ var SelectOption = function SelectOption(_ref) {
       'SelectOption--disabled': option.disabled
     }),
     onClick: handleClick,
+    "data-test-id": dataTestId ? "".concat(dataTestId, "--").concat(option.label.replace(' ', '-')) : undefined,
     "aria-label": option.label,
     "aria-selected": selected,
     role: "option"
   }, option.label);
 };
 
-var _excluded$p = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className"];
+var _excluded$m = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId"];
 var SelectOptions = function SelectOptions(_ref) {
   var idRef = _ref.idRef,
       searchable = _ref.searchable,
@@ -9108,7 +9261,8 @@ var SelectOptions = function SelectOptions(_ref) {
       onSelect = _ref.onSelect,
       onFocus = _ref.onFocus,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$p);
+      dataTestId = _ref.dataTestId,
+      rest = _objectWithoutProperties(_ref, _excluded$m);
 
   var _useState = React.useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -9165,6 +9319,7 @@ var SelectOptions = function SelectOptions(_ref) {
       id: "SelectOption--".concat(option.value, "-").concat(idRef),
       key: option.value,
       option: option,
+      dataTestId: dataTestId,
       active: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === option.value,
       selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
       onClick: onSelect
@@ -9286,7 +9441,7 @@ var useSelect = function useSelect(_ref) {
   };
 };
 
-var _excluded$o = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "searchable", "shiftIconLeftwards", "value"];
+var _excluded$l = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId"];
 var Select = function Select(_ref) {
   var _ref2;
 
@@ -9307,11 +9462,13 @@ var Select = function Select(_ref) {
       name = _ref.name,
       onChange = _ref.onChange,
       options = _ref.options,
+      placeholder = _ref.placeholder,
       searchable = _ref.searchable,
       _ref$shiftIconLeftwar = _ref.shiftIconLeftwards,
       shiftIconLeftwards = _ref$shiftIconLeftwar === void 0 ? false : _ref$shiftIconLeftwar,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
+      dataTestId = _ref.dataTestId,
+      rest = _objectWithoutProperties(_ref, _excluded$l);
 
   var _useSelect = useSelect({
     value: value,
@@ -9379,6 +9536,7 @@ var Select = function Select(_ref) {
     className: "Select__value",
     disabled: disabled,
     onClick: handleToggle,
+    "data-test-id": dataTestId,
     "aria-haspopup": "listbox",
     "aria-expanded": state.mode === Mode.Open,
     "aria-labelledby": "Select__label--".concat(idRef, " Select__value--").concat(idRef),
@@ -9386,7 +9544,7 @@ var Select = function Select(_ref) {
     title: "Select"
   }, /*#__PURE__*/React__default["default"].createElement(SelectLabel, {
     idRef: idRef,
-    label: label,
+    label: label || (selected === undefined ? placeholder : undefined),
     hasValue: focused != null || selected != null
   }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, /*#__PURE__*/React__default["default"].createElement("span", {
     className: classNames('Select__icon', {
@@ -9398,6 +9556,7 @@ var Select = function Select(_ref) {
       'Select__options--up': dropDirection === 'up',
       'Select__options--down': dropDirection === 'down'
     }),
+    dataTestId: dataTestId,
     searchable: searchable,
     options: options,
     onSelect: handleSelect,
@@ -10977,7 +11136,7 @@ var Exit16 = function Exit16(_a) {
 
 Exit16.displayName = 'Exit16';
 
-var _excluded$n = ["className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "onChange", "options", "searchable", "shiftIconLeftwards", "value"];
+var _excluded$k = ["className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "onChange", "options", "searchable", "shiftIconLeftwards", "value"];
 var MultiSelect = function MultiSelect(_ref) {
   var className = _ref.className,
       defaultValue = _ref.defaultValue,
@@ -10992,7 +11151,7 @@ var MultiSelect = function MultiSelect(_ref) {
       searchable = _ref.searchable,
       shiftIconLeftwards = _ref.shiftIconLeftwards,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, _excluded$n);
+      rest = _objectWithoutProperties(_ref, _excluded$k);
 
   var _useSelect = useSelect({
     value: value,
@@ -11092,14 +11251,14 @@ var MultiSelect = function MultiSelect(_ref) {
   }));
 };
 
-var _excluded$m = ["className", "children", "error", "label", "placeholder"];
+var _excluded$j = ["className", "children", "error", "label", "placeholder"];
 var Field = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       error = _ref.error,
       label = _ref.label,
       placeholder = _ref.placeholder,
-      rest = _objectWithoutProperties(_ref, _excluded$m);
+      rest = _objectWithoutProperties(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default["default"].createElement("label", {
     className: classNames('Field', className)
@@ -11128,17 +11287,17 @@ var Field = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, re
 });
 Field.displayName = 'Field';
 
-var _excluded$l = ["onChange"];
+var _excluded$i = ["onChange"];
 var CreditCardNumberInputField = function CreditCardNumberInputField(_ref) {
   var onChange = _ref.onChange,
-      rest = _objectWithoutProperties(_ref, _excluded$l);
+      rest = _objectWithoutProperties(_ref, _excluded$i);
 
   return /*#__PURE__*/React__default["default"].createElement(Field, _extends$1({}, rest, {
     onChangeEvent: onChange
   }));
 };
 
-var _excluded$k = ["value", "disabled", "readOnly", "defaultValue", "maskChar", "alwaysShowMask", "onMouseDown", "onFocus", "onBlur", "onChange"];
+var _excluded$h = ["value", "disabled", "readOnly", "defaultValue", "maskChar", "alwaysShowMask", "onMouseDown", "onFocus", "onBlur", "onChange"];
 var DEFAULT_MASK = '9999 9999 9999 9999';
 var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
   var _ref2;
@@ -11153,7 +11312,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
-      rest = _objectWithoutProperties(_ref, _excluded$k);
+      rest = _objectWithoutProperties(_ref, _excluded$h);
 
   var _useState = React.useState((_ref2 = propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : ''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -11179,6 +11338,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     setValue(event.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
   }, [setValue, onChange]); // TODO: get rid of the any, the types of react-input-mask are incorrect here, it should expect a function as a child, but it expects a ReactNode
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var renderInputField = function renderInputField(inputProps) {
     return /*#__PURE__*/React__default["default"].createElement(CreditCardNumberInputField, _extends$1({}, rest, inputProps));
@@ -11198,19 +11358,19 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
   }, renderInputField);
 };
 
-var _excluded$j = ["term", "children", "className"];
+var _excluded$g = ["term", "children", "className"];
 var DefinitionList = function DefinitionList(_ref) {
   var term = _ref.term,
       children = _ref.children,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$j);
+      rest = _objectWithoutProperties(_ref, _excluded$g);
 
   return /*#__PURE__*/React__default["default"].createElement("dl", _extends$1({
     className: classNames('DefinitionList', className)
   }, rest), /*#__PURE__*/React__default["default"].createElement("dt", null, term), /*#__PURE__*/React__default["default"].createElement("dd", null, children));
 };
 
-var _excluded$i = ["name", "children", "className", "virtual", "icon", "data-testid", "expanded"];
+var _excluded$f = ["name", "children", "className", "virtual", "icon", "data-testid", "expanded"];
 var Expandable = function Expandable(_ref) {
   var name = _ref.name,
       children = _ref.children,
@@ -11222,7 +11382,7 @@ var Expandable = function Expandable(_ref) {
       dataTestId = _ref['data-testid'],
       _ref$expanded = _ref.expanded,
       __expanded__ = _ref$expanded === void 0 ? false : _ref$expanded,
-      rest = _objectWithoutProperties(_ref, _excluded$i);
+      rest = _objectWithoutProperties(_ref, _excluded$f);
 
   var _useState = React.useState(__expanded__),
       _useState2 = _slicedToArray(_useState, 2),
@@ -11251,7 +11411,7 @@ var Expandable = function Expandable(_ref) {
   }, expanded || !virtual ? children : null));
 };
 
-var _excluded$h = ["text", "treatment", "color", "family", "type", "className"];
+var _excluded$e = ["text", "treatment", "color", "family", "type", "className"];
 var Divider = function Divider(_ref) {
   var text = _ref.text,
       treatment = _ref.treatment,
@@ -11259,7 +11419,7 @@ var Divider = function Divider(_ref) {
       family = _ref.family,
       type = _ref.type,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$h);
+      rest = _objectWithoutProperties(_ref, _excluded$e);
 
   var defaultTreatment = type === 'two-line' ? 'eyebrow' : 'h5';
   var defaultFamily = type === 'two-line' ? undefined : 'serif';
@@ -11275,21 +11435,21 @@ var Divider = function Divider(_ref) {
 
 var TwoLineDivider = function TwoLineDivider(props) {
   return /*#__PURE__*/React__default["default"].createElement(Divider, _extends$1({}, props, {
-    type: 'two-line'
+    type: "two-line"
   }));
 };
 
 var NoLineDivider = function NoLineDivider(props) {
   return /*#__PURE__*/React__default["default"].createElement(Divider, _extends$1({}, props, {
-    type: 'no-line'
+    type: "no-line"
   }));
 };
 
-var _excluded$g = ["className", "hidden"];
+var _excluded$d = ["className", "hidden"];
 var Label = function Label(_ref) {
   var className = _ref.className,
       hidden = _ref.hidden,
-      rest = _objectWithoutProperties(_ref, _excluded$g);
+      rest = _objectWithoutProperties(_ref, _excluded$d);
 
   return /*#__PURE__*/React__default["default"].createElement("label", _extends$1({
     className: classNames('Label', className, {
@@ -11421,11 +11581,11 @@ var ArcWindow = function ArcWindow() {
   }));
 };
 
-var _excluded$f = ["className"];
+var _excluded$c = ["className"];
 var FRAMES = [Triangle, Diamond, ArcWindow, Circle];
 var Loading = function Loading(_ref) {
   var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$f);
+      rest = _objectWithoutProperties(_ref, _excluded$c);
 
   var _useCursor = dist.useCursor({
     max: FRAMES.length
@@ -11433,8 +11593,9 @@ var Loading = function Loading(_ref) {
       index = _useCursor.index,
       handleNext = _useCursor.handleNext;
 
+  var ONE_SECOND_INTERVAL = 1000;
   React.useEffect(function () {
-    var interval = setInterval(handleNext, 1000);
+    var interval = setInterval(handleNext, ONE_SECOND_INTERVAL);
     return function () {
       return clearInterval(interval);
     };
@@ -11500,13 +11661,13 @@ var LoadingBalls = function LoadingBalls(_ref) {
   })));
 };
 
-var _excluded$e = ["className", "children", "onClose", "shards"];
+var _excluded$b = ["className", "children", "onClose", "shards"];
 var Modal = function Modal(_ref) {
   var className = _ref.className,
       children = _ref.children,
       onClose = _ref.onClose,
       shards = _ref.shards,
-      rest = _objectWithoutProperties(_ref, _excluded$e);
+      rest = _objectWithoutProperties(_ref, _excluded$b);
 
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
     className: classNames('Modal', className)
@@ -11517,14 +11678,14 @@ var Modal = function Modal(_ref) {
   }, children));
 };
 
-var _excluded$d = ["className", "children", "show"];
+var _excluded$a = ["className", "children", "show"];
 var UNMOUNT_DELAY_MS = 500;
 var Overlay = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var className = _ref.className,
       children = _ref.children,
       _ref$show = _ref.show,
       show = _ref$show === void 0 ? true : _ref$show,
-      rest = _objectWithoutProperties(_ref, _excluded$d);
+      rest = _objectWithoutProperties(_ref, _excluded$a);
 
   var _useState = React.useState(show),
       _useState2 = _slicedToArray(_useState, 2),
@@ -11554,7 +11715,7 @@ var Overlay = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
 });
 Overlay.displayName = 'Overlay';
 
-var _excluded$c = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards"];
+var _excluded$9 = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards"];
 var ModalOverlay = function ModalOverlay(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -11564,7 +11725,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
       _ref$show = _ref.show,
       show = _ref$show === void 0 ? true : _ref$show,
       shards = _ref.shards,
-      rest = _objectWithoutProperties(_ref, _excluded$c);
+      rest = _objectWithoutProperties(_ref, _excluded$9);
 
   var element = React.useMemo(function () {
     return typeof document !== 'undefined' ? document.createElement('div') : null;
@@ -11835,8 +11996,11 @@ var Paginator = function Paginator(_ref) {
   })));
 };
 
-var _excluded$b = ["className", "children", "content", "open", "anchor", "zIndex", "autoPreview", "smoothTransitioning"];
+var _excluded$8 = ["className", "children", "content", "open", "anchor", "zIndex", "autoPreview", "smoothTransitioning"];
 var POPOVER_MOUSEOUT_DELAY_MS = 200;
+var THREE_QUARTER_SECOND_DELAY = 750;
+var ONE_SECOND_DELAY = 1000;
+var FIVE_SECOND_DELAY = 5000;
 var Mode;
 
 (function (Mode) {
@@ -11860,7 +12024,7 @@ var Popover = function Popover(_ref) {
       autoPreview = _ref$autoPreview === void 0 ? false : _ref$autoPreview,
       _ref$smoothTransition = _ref.smoothTransitioning,
       smoothTransitioning = _ref$smoothTransition === void 0 ? false : _ref$smoothTransition,
-      rest = _objectWithoutProperties(_ref, _excluded$b);
+      rest = _objectWithoutProperties(_ref, _excluded$8);
 
   var _useState = React.useState(function () {
     if (open && smoothTransitioning) {
@@ -11904,7 +12068,7 @@ var Popover = function Popover(_ref) {
     if (mode !== Mode.Closing) return;
     var closingTimeout = setTimeout(function () {
       return setMode(Mode.Closed);
-    }, 750);
+    }, THREE_QUARTER_SECOND_DELAY);
     return function () {
       return clearTimeout(closingTimeout);
     };
@@ -11913,7 +12077,7 @@ var Popover = function Popover(_ref) {
     if (mode !== Mode.AutoOpening) return;
     var openingTimeout = setTimeout(function () {
       return setMode(Mode.AutoOpen);
-    }, 1000);
+    }, ONE_SECOND_DELAY);
     return function () {
       return clearTimeout(openingTimeout);
     };
@@ -11922,14 +12086,14 @@ var Popover = function Popover(_ref) {
     if (mode !== Mode.Opening) return;
     var openingTimeout = setTimeout(function () {
       return setMode(Mode.Open);
-    }, 750);
+    }, THREE_QUARTER_SECOND_DELAY);
     return function () {
       return clearTimeout(openingTimeout);
     };
   }, [mode]);
   React.useEffect(function () {
     if (mode !== Mode.AutoOpen) return;
-    var stayingTimeout = setTimeout(handleClose, 5000);
+    var stayingTimeout = setTimeout(handleClose, FIVE_SECOND_DELAY);
     return function () {
       return clearTimeout(stayingTimeout);
     };
@@ -11963,11 +12127,11 @@ var Popover = function Popover(_ref) {
   }, content)), children));
 };
 
-var _excluded$a = ["className", "children"];
+var _excluded$7 = ["className", "children"];
 var PromoBanner = function PromoBanner(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$a);
+      rest = _objectWithoutProperties(_ref, _excluded$7);
 
   var length = React.Children.count(children);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
@@ -11986,7 +12150,7 @@ var PromoBanner = function PromoBanner(_ref) {
   })));
 };
 
-var _excluded$9 = ["className", "checked", "children", "value", "tabIndex", "disabled"];
+var _excluded$6 = ["className", "checked", "children", "value", "tabIndex", "disabled"];
 var RadioButton = function RadioButton(_ref) {
   var className = _ref.className,
       checked = _ref.checked,
@@ -11994,7 +12158,7 @@ var RadioButton = function RadioButton(_ref) {
       value = _ref.value,
       tabIndex = _ref.tabIndex,
       disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$9);
+      rest = _objectWithoutProperties(_ref, _excluded$6);
 
   var inputRef = React.useRef(null);
   return /*#__PURE__*/React__default["default"].createElement("label", {
@@ -12031,14 +12195,14 @@ var RadioButton = function RadioButton(_ref) {
   }, children));
 };
 
-var _excluded$8 = ["className", "hover", "selected", "unavailable", "children"];
+var _excluded$5 = ["className", "hover", "selected", "unavailable", "children"];
 var SelectableButton = function SelectableButton(_ref) {
   var className = _ref.className,
       hover = _ref.hover,
       selected = _ref.selected,
       unavailable = _ref.unavailable,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$8);
+      rest = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/React__default["default"].createElement(Clickable, _extends$1({
     className: classNames('SelectableButton', {
@@ -12049,34 +12213,13 @@ var SelectableButton = function SelectableButton(_ref) {
   }, rest), /*#__PURE__*/React__default["default"].createElement("span", null, children));
 };
 
-var _excluded$7 = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
-var Stack = function Stack(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      space = _ref.space,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'vertical' : _ref$direction,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      style = _ref.style,
-      rest = _objectWithoutProperties(_ref, _excluded$7);
-
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
-    className: classNames("Stack Stack--".concat(direction, "-").concat(space), className),
-    style: _objectSpread2(_objectSpread2({}, style), {}, {
-      alignItems: alignItems,
-      justifyContent: justifyContent
-    })
-  }, rest), children);
-};
-
-var _excluded$6 = ["className", "disabled", "onRemove", "children"];
+var _excluded$4 = ["className", "disabled", "onRemove", "children"];
 var Tag = function Tag(_ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
       onRemove = _ref.onRemove,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$6);
+      rest = _objectWithoutProperties(_ref, _excluded$4);
 
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
     className: classNames('Tag', className, {
@@ -12089,13 +12232,13 @@ var Tag = function Tag(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Exit16, null)));
 };
 
-var _excluded$5 = ["tabs", "onTabClicked", "activeTab", "className"];
+var _excluded$3 = ["tabs", "onTabClicked", "activeTab", "className"];
 var Tabs = function Tabs(_ref) {
   var tabs = _ref.tabs,
       onTabClicked = _ref.onTabClicked,
       activeTab = _ref.activeTab,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$3);
 
   var _useState = React.useState(activeTab || tabs[0].name),
       _useState2 = _slicedToArray(_useState, 2),
@@ -12175,7 +12318,7 @@ var TabPanel = function TabPanel(_ref) {
   }, children);
 };
 
-var _excluded$4 = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange"];
+var _excluded$2 = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange"];
 var Textarea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
@@ -12184,7 +12327,7 @@ var Textarea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       placeholder = _ref.placeholder,
       label = _ref.label,
       _onChange = _ref.onChange,
-      rest = _objectWithoutProperties(_ref, _excluded$4);
+      rest = _objectWithoutProperties(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default["default"].createElement("textarea", _extends$1({
     className: classNames('Textarea', className, {
@@ -12203,13 +12346,13 @@ var Textarea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
 });
 Textarea.displayName = 'Textarea';
 
-var _excluded$3 = ["theme", "className", "onRemove", "children"];
+var _excluded$1 = ["theme", "className", "onRemove", "children"];
 var Toast = function Toast(_ref) {
   var theme = _ref.theme,
       className = _ref.className,
       onRemove = _ref.onRemove,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$3);
+      rest = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default["default"].createElement(Stack, _extends$1({
     className: classNames('Toast', "Toast--".concat(theme), className),
@@ -12226,11 +12369,11 @@ var Toast = function Toast(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Exit16, null)));
 };
 
-var _excluded$2 = ["className", "double"];
+var _excluded = ["className", "double"];
 var VerticalDivider = function VerticalDivider(_ref) {
   var className = _ref.className,
       _double = _ref["double"],
-      rest = _objectWithoutProperties(_ref, _excluded$2);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
     className: classNames('VerticalDivider', {
@@ -12269,102 +12412,6 @@ var PasswordInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PasswordInput.displayName = 'PasswordInput';
 
-var isRenderProps = function isRenderProps(children) {
-  return typeof children === 'function';
-};
-
-var truncate = function truncate(string) {
-  var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
-  if (!string) return null;
-  var ellipsis = string.length > maxLength;
-  return "".concat(string.substring(0, maxLength)).concat(ellipsis ? '...' : '');
-};
-
-var stringifyProps = function stringifyProps(props) {
-  var stringifiedProps = Object.entries(props || {}).reduce(function (memo, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
-    if (key === 'children') return "".concat(memo, " children={...}");
-    if (typeof value === 'string') return "".concat(memo, " ").concat(key, "=\"").concat(truncate(value), "\"");
-    if (typeof value === 'function') return "".concat(memo, " ").concat(key, "={fn}");
-    if (typeof value === 'boolean') return "".concat(memo, " ").concat(key).concat(value ? '' : '={false}');
-    if (typeof value === 'number') return "".concat(memo, " ").concat(key, "={").concat(value, "}");
-    if (_typeof(value) === 'object') return "".concat(memo, " ").concat(key, "={...}");
-    return "".concat(memo, " ").concat(key, "=").concat(value);
-  }, '');
-  return stringifiedProps.trim();
-};
-
-var omit = function omit(obj) {
-  for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    keys[_key - 1] = arguments[_key];
-  }
-
-  return Object.entries(obj).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 1),
-        key = _ref2[0];
-
-    return !keys.includes(key);
-  }).reduce(function (obj, _ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        val = _ref4[1];
-
-    return Object.assign(obj, _defineProperty$1({}, key, val));
-  }, {});
-};
-
-var isEmpty = function isEmpty(obj) {
-  return Object.entries(obj || {}).length === 0;
-};
-
-var StatesProps = function StatesProps(_ref) {
-  var props = _ref.props,
-      children = _ref.children;
-  var childrenProps = omit.apply(void 0, [children.props].concat(_toConsumableArray(Object.keys(props || {}))));
-  return /*#__PURE__*/React__default["default"].createElement(Stack, {
-    className: "StatesProps",
-    space: 2,
-    direction: "horizontal"
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, children.type.displayName || children.type.name), !isEmpty(props) && /*#__PURE__*/React__default["default"].createElement("strong", null, stringifyProps(props)), !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React__default["default"].createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React__default["default"].createElement("span", null, " "));
-};
-
-var _excluded$1 = ["props", "children"];
-var State = function State(_ref) {
-  var props = _ref.props,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$1);
-
-  var Specimen = isRenderProps(children) ? children(props) : /*#__PURE__*/React__default["default"].cloneElement(children, props);
-  var innerChildren = isRenderProps(children) ? children(props) : children;
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
-    className: "State"
-  }, rest), Specimen, /*#__PURE__*/React__default["default"].createElement("code", {
-    className: "State__props"
-  }, /*#__PURE__*/React__default["default"].createElement(StatesProps, {
-    props: props
-  }, innerChildren)));
-};
-
-var _excluded = ["states", "children"];
-var States = function States(_ref) {
-  var _ref$states = _ref.states,
-      states = _ref$states === void 0 ? [{}] : _ref$states,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "States"
-  }, states.map(function (props, i) {
-    return /*#__PURE__*/React__default["default"].createElement(State, _extends$1({
-      key: i,
-      props: props
-    }, rest), children);
-  }));
-};
-
 var tokens = {
   colors: dist$4.colors,
   typography: dist$4.typography,