@moda/om 21.12.0 → 21.14.0

package/dist/index.esm.js

@@ -43,7 +43,7 @@ var hasRequiredFocusVisible;
 function requireFocusVisible() {
   if (hasRequiredFocusVisible) return focusVisible$1.exports;
   hasRequiredFocusVisible = 1;
-  (function (module, exports$1) {
+  (function (module, exports) {
     (function (global, factory) {
       factory() ;
     })(focusVisible, function () {
@@ -923,7 +923,7 @@ var hasRequiredHelpers;
 function requireHelpers() {
   if (hasRequiredHelpers) return helpers;
   hasRequiredHelpers = 1;
-  (function (exports$1) {
+  (function (exports) {
 
     var __assign = helpers && helpers.__assign || function () {
       __assign = Object.assign || function (t) {
@@ -940,10 +940,10 @@ function requireHelpers() {
         "default": mod
       };
     };
-    Object.defineProperty(exports$1, "__esModule", {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports$1.spacing = exports$1.colorInHex = exports$1.color = exports$1.remToUnitlessPx = exports$1.text = void 0;
+    exports.spacing = exports.colorInHex = exports.color = exports.remToUnitlessPx = exports.text = void 0;
     var color_string_1 = __importDefault(require$$0);
     var colors_1 = requireColors();
     var space_1 = requireSpace();
@@ -958,11 +958,11 @@ function requireHelpers() {
         'line-height': "".concat(treatment['line-height'])
       });
     };
-    exports$1.text = text;
+    exports.text = text;
     var remToUnitlessPx = function remToUnitlessPx(value) {
       return parseFloat(value) * parseInt(typography_1.typography['root-font-size'], 10);
     };
-    exports$1.remToUnitlessPx = remToUnitlessPx;
+    exports.remToUnitlessPx = remToUnitlessPx;
     var color = function color(name, alpha) {
       var _a;
       var color = colors_1.colors.all[name];
@@ -972,16 +972,16 @@ function requireHelpers() {
         blue = _b[2];
       return alpha != null ? color_string_1["default"].to.rgb(red, green, blue, alpha) : color;
     };
-    exports$1.color = color;
+    exports.color = color;
     var colorInHex = function colorInHex(name, alpha) {
       var _a, _b, _c;
-      var _d = (_b = color_string_1["default"].get.rgb((_a = (0, exports$1.color)(name, alpha)) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : [],
+      var _d = (_b = color_string_1["default"].get.rgb((_a = (0, exports.color)(name, alpha)) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : [],
         red = _d[0],
         green = _d[1],
         blue = _d[2];
       return (_c = color_string_1["default"].to.hex(red, green, blue, alpha)) !== null && _c !== void 0 ? _c : '';
     };
-    exports$1.colorInHex = colorInHex;
+    exports.colorInHex = colorInHex;
     var spacing = function spacing(topY, rightX, bottom, left) {
       return [topY, rightX, bottom, left].reduce(function (acc, value) {
         var _a;
@@ -989,7 +989,7 @@ function requireHelpers() {
         return [acc, (_a = space_1.space.scale[Number(value)]) !== null && _a !== void 0 ? _a : value].join(' ');
       }, '');
     };
-    exports$1.spacing = spacing;
+    exports.spacing = spacing;
   })(helpers);
   return helpers;
 }
@@ -998,7 +998,7 @@ var hasRequiredDist$4;
 function requireDist$4() {
   if (hasRequiredDist$4) return dist$4;
   hasRequiredDist$4 = 1;
-  (function (exports$1) {
+  (function (exports) {
 
     var __createBinding = dist$4 && dist$4.__createBinding || (Object.create ? function (o, m, k, k2) {
       if (k2 === undefined) k2 = k;
@@ -1016,42 +1016,42 @@ function requireDist$4() {
       if (k2 === undefined) k2 = k;
       o[k2] = m[k];
     });
-    var __exportStar = dist$4 && dist$4.__exportStar || function (m, exports$1) {
-      for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$1, p)) __createBinding(exports$1, m, p);
+    var __exportStar = dist$4 && dist$4.__exportStar || function (m, exports) {
+      for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
     };
-    Object.defineProperty(exports$1, "__esModule", {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports$1.breakpoints = exports$1.space = exports$1.typography = exports$1.colors = void 0;
+    exports.breakpoints = exports.space = exports.typography = exports.colors = void 0;
     var colors_1 = requireColors();
-    Object.defineProperty(exports$1, "colors", {
+    Object.defineProperty(exports, "colors", {
       enumerable: true,
       get: function get() {
         return colors_1.colors;
       }
     });
     var typography_1 = requireTypography();
-    Object.defineProperty(exports$1, "typography", {
+    Object.defineProperty(exports, "typography", {
       enumerable: true,
       get: function get() {
         return typography_1.typography;
       }
     });
     var space_1 = requireSpace();
-    Object.defineProperty(exports$1, "space", {
+    Object.defineProperty(exports, "space", {
       enumerable: true,
       get: function get() {
         return space_1.space;
       }
     });
     var breakpoints_1 = requireBreakpoints();
-    Object.defineProperty(exports$1, "breakpoints", {
+    Object.defineProperty(exports, "breakpoints", {
       enumerable: true,
       get: function get() {
         return breakpoints_1.breakpoints;
       }
     });
-    __exportStar(requireHelpers(), exports$1);
+    __exportStar(requireHelpers(), exports);
   })(dist$4);
   return dist$4;
 }
@@ -1335,11 +1335,11 @@ var StateProps = function StateProps(_ref) {
   }, stringifyProps(props)), ' ', !isRenderProps(children) && !isEmpty(childrenProps) && /*#__PURE__*/React__default.createElement("span", null, stringifyProps(childrenProps)), /*#__PURE__*/React__default.createElement("span", null, ' />'));
 };
 
-var _excluded$H = ["props", "children"];
+var _excluded$I = ["props", "children"];
 var State = function State(_ref) {
   var props = _ref.props,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$H);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   var styles = useStyles();
   var Specimen = isRenderProps(children) ? children(props) : /*#__PURE__*/React__default.cloneElement(children, props);
   var innerChildren = isRenderProps(children) ? children(props) : children;
@@ -1350,12 +1350,12 @@ var State = function State(_ref) {
   }, innerChildren));
 };
 
-var _excluded$G = ["states", "children"];
+var _excluded$H = ["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$G);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, states.map(function (props, index) {
     return /*#__PURE__*/React__default.createElement(State, _extends$1({
       key: index,
@@ -5319,7 +5319,7 @@ var hasRequiredScale;
 function requireScale() {
   if (hasRequiredScale) return scale;
   hasRequiredScale = 1;
-  (function (exports$1) {
+  (function (exports) {
 
     var __assign = scale && scale.__assign || function () {
       __assign = Object.assign || function (t) {
@@ -5339,11 +5339,11 @@ function requireScale() {
       }
       return t;
     };
-    Object.defineProperty(exports$1, "__esModule", {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports$1.scale = exports$1.paddingBottom = exports$1.factor = void 0;
-    exports$1.factor = function (_a) {
+    exports.scale = exports.paddingBottom = exports.factor = void 0;
+    exports.factor = function (_a) {
       var width = _a.width,
         height = _a.height,
         dimensions = __rest(_a, ["width", "height"]);
@@ -5351,16 +5351,16 @@ function requireScale() {
       if ("maxWidth" in dimensions && !("maxHeight" in dimensions)) return dimensions.maxWidth / width;
       return Math.min(dimensions.maxWidth / width, dimensions.maxHeight / height);
     };
-    exports$1.paddingBottom = function (_a) {
+    exports.paddingBottom = function (_a) {
       var width = _a.width,
         height = _a.height;
       return height / width * 100.0 + "%";
     };
-    exports$1.scale = function (_a) {
+    exports.scale = function (_a) {
       var width = _a.width,
         height = _a.height,
         dimensions = __rest(_a, ["width", "height"]);
-      var scale = exports$1.factor(__assign({
+      var scale = exports.factor(__assign({
         width: width,
         height: height
       }, dimensions));
@@ -5369,7 +5369,7 @@ function requireScale() {
       return {
         width: scaledWidth,
         height: scaledHeight,
-        paddingBottom: exports$1.paddingBottom({
+        paddingBottom: exports.paddingBottom({
           width: width,
           height: height
         }),
@@ -5384,7 +5384,7 @@ var hasRequiredDist$3;
 function requireDist$3() {
   if (hasRequiredDist$3) return dist$3;
   hasRequiredDist$3 = 1;
-  (function (exports$1) {
+  (function (exports) {
 
     var __createBinding = dist$3 && dist$3.__createBinding || (Object.create ? function (o, m, k, k2) {
       if (k2 === undefined) k2 = k;
@@ -5398,20 +5398,20 @@ function requireDist$3() {
       if (k2 === undefined) k2 = k;
       o[k2] = m[k];
     });
-    var __exportStar = dist$3 && dist$3.__exportStar || function (m, exports$1) {
-      for (var p in m) if (p !== "default" && !exports$1.hasOwnProperty(p)) __createBinding(exports$1, m, p);
+    var __exportStar = dist$3 && dist$3.__exportStar || function (m, exports) {
+      for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
     };
-    Object.defineProperty(exports$1, "__esModule", {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    __exportStar(requireScale(), exports$1);
+    __exportStar(requireScale(), exports);
   })(dist$3);
   return dist$3;
 }
 
 var distExports$3 = requireDist$3();
 
-var _excluded$F = ["aspectWidth", "aspectHeight", "maxWidth", "maxHeight", "outlined", "children", "className"];
+var _excluded$G = ["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;
@@ -5457,7 +5457,7 @@ var AspectRatioBox = /*#__PURE__*/React__default.forwardRef(function (_ref2, for
     outlined = _ref2$outlined === void 0 ? false : _ref2$outlined,
     children = _ref2.children,
     className = _ref2.className,
-    rest = _objectWithoutProperties(_ref2, _excluded$F);
+    rest = _objectWithoutProperties(_ref2, _excluded$G);
   var _scaleDimensions = scaleDimensions({
       width: aspectWidth,
       height: aspectHeight,
@@ -5485,22 +5485,22 @@ var AspectRatioBox = /*#__PURE__*/React__default.forwardRef(function (_ref2, for
 });
 AspectRatioBox.displayName = 'AspectRatioBox';
 
-var _excluded$E = ["className", "theme", "children"];
+var _excluded$F = ["className", "theme", "children"];
 var Badge = function Badge(_ref) {
   var className = _ref.className,
     theme = _ref.theme,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/React__default.createElement("span", _extends$1({
     className: classNames('Badge', theme && "Badge--".concat(theme), className)
   }, rest), children);
 };
 
-var _excluded$D = ["children", "className"];
+var _excluded$E = ["children", "className"];
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   var position = 0;
   return /*#__PURE__*/React__default.createElement("ol", _extends$1({
     itemScope: true,
@@ -5518,7 +5518,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   }));
 };
 
-var _excluded$C = ["className", "styleless", "disabled"];
+var _excluded$D = ["className", "styleless", "disabled"];
 
 // Define minimal LinkProps that work with both v5 and v7
 // Using Omit to remove conflicting HTML attributes, then add router-specific props
@@ -5537,7 +5537,7 @@ var Clickable = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$styleless = _ref.styleless,
     styleless = _ref$styleless === void 0 ? false : _ref$styleless,
     disabled = _ref.disabled,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var baseClassName = classNames({
     Clickable: !styleless,
     'Clickable--disabled': disabled
@@ -5565,14 +5565,14 @@ var Clickable = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 });
 Clickable.displayName = 'Clickable';
 
-var _excluded$B = ["className", "disabled", "children", "underlined"];
+var _excluded$C = ["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$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(Clickable, _extends$1({}, rest, {
     className: classNames('ControlLink', {
       'ControlLink--underlined': underlined
@@ -5583,12 +5583,12 @@ var ControlLink = function ControlLink(_ref) {
   }), children);
 };
 
-var _excluded$A = ["children", "position", "className"];
+var _excluded$B = ["children", "position", "className"];
 var Breadcrumb = function Breadcrumb(_ref) {
   var children = _ref.children,
     position = _ref.position,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement("li", {
     className: classNames('Breadcrumb', className),
     itemProp: "itemListElement",
@@ -7332,11 +7332,11 @@ var useBreakpoint = function useBreakpoint(props) {
   };
 };
 
-var _excluded$z = ["children", "className"];
+var _excluded$A = ["children", "className"];
 var Breakpoint = function Breakpoint(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var _discriminate = discriminate(rest),
     mode = _discriminate.mode,
     breakpoint = _discriminate.breakpoint;
@@ -7347,7 +7347,7 @@ var Breakpoint = function Breakpoint(_ref) {
   }, omit(['at', 'gt', 'lt'], rest)), children) : null;
 };
 
-var _excluded$y = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
+var _excluded$z = ["secondary", "tertiary", "elevated", "chip", "hover", "focus", "disabled", "className"];
 var Button = function Button(_ref) {
   var secondary = _ref.secondary,
     tertiary = _ref.tertiary,
@@ -7357,7 +7357,7 @@ var Button = function Button(_ref) {
     focus = _ref.focus,
     disabled = _ref.disabled,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(Clickable, _extends$1({
     className: classNames('Button', {
       'Button--chip': chip,
@@ -7481,7 +7481,7 @@ var Circle12 = function Circle12(_a) {
 };
 Circle12.displayName = 'Circle12';
 
-var _excluded$x = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId", "id"];
+var _excluded$y = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "checkIcon", "dataTestId", "id"];
 var CHECKED_ITEM_PROPS = {
   className: 'Checkbox__check-mark',
   height: '85%',
@@ -7500,7 +7500,7 @@ var Checkbox = function Checkbox(_ref) {
     checkIcon = _ref$checkIcon === void 0 ? 'checkmark' : _ref$checkIcon,
     dataTestId = _ref.dataTestId,
     id = _ref.id,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   var _useState = useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
     _useState2 = _slicedToArray(_useState, 2),
     isChecked = _useState2[0],
@@ -7590,7 +7590,7 @@ var SKU_COLORS = {
   yellow: '#ffca44'
 };
 
-var _excluded$w = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
+var _excluded$x = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
 var ColorSwatch = function ColorSwatch(_ref) {
   var _SKU_COLORS;
   var className = _ref.className,
@@ -7606,7 +7606,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
     onMouseEnter = _ref.onMouseEnter,
     disabled = _ref.disabled,
     title = _ref.title,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   var handleClick = useCallback(function (_event) {
     onClick === null || onClick === void 0 || onClick(color, title);
   }, [color, title, onClick]);
@@ -7641,7 +7641,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
   }));
 };
 
-var _excluded$v = ["className", "children", "onClose", "shards", "autoFocus"];
+var _excluded$w = ["className", "children", "onClose", "shards", "autoFocus"];
 var Modal = function Modal(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -7649,7 +7649,7 @@ var Modal = function Modal(_ref) {
     shards = _ref.shards,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: classNames('Modal', className),
     role: "dialog",
@@ -7662,14 +7662,14 @@ var Modal = function Modal(_ref) {
   }, children));
 };
 
-var _excluded$u = ["className", "children", "show"];
+var _excluded$v = ["className", "children", "show"];
 var UNMOUNT_DELAY_MS = 500;
 var Overlay = /*#__PURE__*/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$u);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   var _useState = useState(show),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -7696,7 +7696,7 @@ var Overlay = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
 });
 Overlay.displayName = 'Overlay';
 
-var _excluded$t = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards", "autoFocus"];
+var _excluded$u = ["children", "className", "contentClassName", "onClose", "overlayClassName", "show", "shards", "autoFocus"];
 var ModalOverlay = function ModalOverlay(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -7707,7 +7707,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     show = _ref$show === void 0 ? true : _ref$show,
     shards = _ref.shards,
     autoFocus = _ref.autoFocus,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   var element = useMemo(function () {
     return typeof document !== 'undefined' ? document.createElement('div') : null;
   }, []);
@@ -7733,7 +7733,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
   }, children))), element);
 };
 
-var _excluded$s = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
+var _excluded$t = ["className", "children", "space", "direction", "alignItems", "justifyContent", "style"];
 var Stack = function Stack(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -7743,7 +7743,7 @@ var Stack = function Stack(_ref) {
     alignItems = _ref.alignItems,
     justifyContent = _ref.justifyContent,
     style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: classNames("Stack Stack--".concat(direction, "-").concat(space), className),
     style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -7753,7 +7753,7 @@ var Stack = function Stack(_ref) {
   }, rest), children);
 };
 
-var _excluded$r = ["as", "className", "treatment", "color", "family", "children", "style"];
+var _excluded$s = ["as", "className", "treatment", "color", "family", "children", "style"];
 var Text = function Text(_ref) {
   var _ref$as = _ref.as,
     Component = _ref$as === void 0 ? 'span' : _ref$as,
@@ -7765,7 +7765,7 @@ var Text = function Text(_ref) {
     family = _ref.family,
     children = _ref.children,
     style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__default.createElement(Component, _extends$1({
     className: classNames("Text Text--".concat(treatment, " ").concat(family ? "Text--".concat(family) : ''), className),
     style: _objectSpread2({
@@ -7774,13 +7774,13 @@ var Text = function Text(_ref) {
   }, rest), children);
 };
 
-var _excluded$q = ["title", "message", "actions", "contentClassName"];
+var _excluded$r = ["title", "message", "actions", "contentClassName"];
 var Dialog = function Dialog(_ref) {
   var title = _ref.title,
     message = _ref.message,
     actions = _ref.actions,
     contentClassName = _ref.contentClassName,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$r);
   var titleId = useId();
   return /*#__PURE__*/React__default.createElement(ModalOverlay, _extends$1({
     contentClassName: classNames('Dialog', contentClassName),
@@ -7882,21 +7882,25 @@ var useConfirm = function useConfirm() {
   return useContext(ConfirmContext);
 };
 
-var _excluded$p = ["className", "children"];
+var _excluded$q = ["className", "children", "size"];
 var Constrain = function Constrain(_ref) {
   var className = _ref.className,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
-    className: classNames('Constrain', className)
+    className: classNames('Constrain', {
+      'Constrain--wide': size === 'wide'
+    }, className)
   }, rest), children);
 };
 
-var _excluded$o = ["className", "children"];
+var _excluded$p = ["className", "children"];
 var ExceedConstrain = function ExceedConstrain(_ref) {
   var className = _ref.className,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: classNames('ExceedConstrain', className)
   }, rest), children);
@@ -9860,7 +9864,7 @@ var Warning16 = function Warning16(_a) {
 };
 Warning16.displayName = 'Warning16';
 
-var _excluded$n = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange", "onChangeEvent"];
+var _excluded$o = ["className", "disabled", "error", "focus", "placeholder", "label", "onChange", "onChangeEvent"];
 var TextInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -9870,7 +9874,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     label = _ref.label,
     _onChange = _ref.onChange,
     onChangeEvent = _ref.onChangeEvent,
-    rest = _objectWithoutProperties(_ref, _excluded$n);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement("input", _extends$1({
     className: classNames('TextInput', className, {
       'TextInput--focus': focus,
@@ -10028,12 +10032,12 @@ var hasRequiredDist$1;
 function requireDist$1() {
   if (hasRequiredDist$1) return dist$1;
   hasRequiredDist$1 = 1;
-  (function (exports$1) {
+  (function (exports) {
 
     function __export(m) {
-      for (var p in m) if (!exports$1.hasOwnProperty(p)) exports$1[p] = m[p];
+      for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
     }
-    Object.defineProperty(exports$1, "__esModule", {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
     __export(requireMapCursorToMax());
@@ -10326,7 +10330,7 @@ var Search20 = function Search20(_a) {
 };
 Search20.displayName = 'Search20';
 
-var _excluded$m = ["className", "onChange", "onClear", "roundBorders", "noBorders", "value", "searchIconSize"];
+var _excluded$n = ["className", "onChange", "onClear", "roundBorders", "noBorders", "value", "searchIconSize"];
 var SEARCH_ICON_DEFAULT_SIZE = 20;
 var DEFAULT_INPUT_VALUE = '';
 var SearchInput = function SearchInput(_ref) {
@@ -10341,7 +10345,7 @@ var SearchInput = function SearchInput(_ref) {
     value = _ref$value === void 0 ? DEFAULT_INPUT_VALUE : _ref$value,
     _ref$searchIconSize = _ref.searchIconSize,
     searchIconSize = _ref$searchIconSize === void 0 ? SEARCH_ICON_DEFAULT_SIZE : _ref$searchIconSize,
-    rest = _objectWithoutProperties(_ref, _excluded$m);
+    rest = _objectWithoutProperties(_ref, _excluded$n);
   var ref = useRef(null);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10606,7 +10610,7 @@ var SelectOption = function SelectOption(_ref) {
   }), label);
 };
 
-var _excluded$l = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId", "extraOption", "onCloseDropdown"];
+var _excluded$m = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId", "extraOption", "onCloseDropdown"];
 var SelectOptions = function SelectOptions(_ref) {
   var idRef = _ref.idRef,
     searchable = _ref.searchable,
@@ -10620,7 +10624,7 @@ var SelectOptions = function SelectOptions(_ref) {
     dataTestId = _ref.dataTestId,
     extraOption = _ref.extraOption,
     onCloseDropdown = _ref.onCloseDropdown,
-    rest = _objectWithoutProperties(_ref, _excluded$l);
+    rest = _objectWithoutProperties(_ref, _excluded$m);
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     searchPhrase = _useState2[0],
@@ -10805,7 +10809,7 @@ var useSelect = function useSelect(_ref) {
   };
 };
 
-var _excluded$k = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId", "colorSwatch", "extraOption", "paddingRight", "smallMobileText"];
+var _excluded$l = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId", "colorSwatch", "extraOption", "paddingRight", "smallMobileText"];
 var Select = function Select(_ref) {
   var _ref2, _ref3;
   var _ref$allowAutoFill = _ref.allowAutoFill,
@@ -10835,7 +10839,7 @@ var Select = function Select(_ref) {
     paddingRight = _ref.paddingRight,
     _ref$smallMobileText = _ref.smallMobileText,
     smallMobileText = _ref$smallMobileText === void 0 ? false : _ref$smallMobileText,
-    rest = _objectWithoutProperties(_ref, _excluded$k);
+    rest = _objectWithoutProperties(_ref, _excluded$l);
   var _useFormControlContex = useFormControlContext(),
     errorDisplayedByParent = _useFormControlContex.displaysError;
   var _useSelect = useSelect({
@@ -11028,7 +11032,7 @@ var Exit16 = function Exit16(_a) {
 };
 Exit16.displayName = 'Exit16';
 
-var _excluded$j = ["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,
@@ -11043,7 +11047,7 @@ var MultiSelect = function MultiSelect(_ref) {
     searchable = _ref.searchable,
     shiftIconLeftwards = _ref.shiftIconLeftwards,
     value = _ref.value,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   var _useSelect = useSelect({
       value: value,
       defaultValue: defaultValue
@@ -11156,7 +11160,7 @@ var MultiSelect = function MultiSelect(_ref) {
   }));
 };
 
-var _excluded$i = ["className", "children", "error", "label", "placeholder", "showErrorIcon"];
+var _excluded$j = ["className", "children", "error", "label", "placeholder", "showErrorIcon"];
 var Field = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -11165,7 +11169,7 @@ var Field = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$showErrorIcon = _ref.showErrorIcon,
     showErrorIcon = _ref$showErrorIcon === void 0 ? true : _ref$showErrorIcon,
-    rest = _objectWithoutProperties(_ref, _excluded$i);
+    rest = _objectWithoutProperties(_ref, _excluded$j);
   var id = useId();
   var errorId = "".concat(id, "-error");
   var fieldContextValue = useMemo(function () {
@@ -11209,16 +11213,16 @@ var Field = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 });
 Field.displayName = 'Field';
 
-var _excluded$h = ["onChange"];
+var _excluded$i = ["onChange"];
 var CreditCardNumberInputField = function CreditCardNumberInputField(_ref) {
   var onChange = _ref.onChange,
-    rest = _objectWithoutProperties(_ref, _excluded$h);
+    rest = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(Field, _extends$1({}, rest, {
     onChangeEvent: onChange
   }));
 };
 
-var _excluded$g = ["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;
@@ -11232,7 +11236,7 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     onChange = _ref.onChange,
-    rest = _objectWithoutProperties(_ref, _excluded$g);
+    rest = _objectWithoutProperties(_ref, _excluded$h);
   var _useState = useState((_ref2 = propsValue !== null && propsValue !== void 0 ? propsValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : ''),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -11270,18 +11274,18 @@ var CreditCardNumberInput = function CreditCardNumberInput(_ref) {
   }, /*#__PURE__*/React__default.createElement(CreditCardNumberInputField, rest));
 };
 
-var _excluded$f = ["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$f);
+    rest = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/React__default.createElement("dl", _extends$1({
     className: classNames('DefinitionList', className)
   }, rest), /*#__PURE__*/React__default.createElement("dt", null, term), /*#__PURE__*/React__default.createElement("dd", null, children));
 };
 
-var _excluded$e = ["text", "treatment", "color", "family", "type", "className"];
+var _excluded$f = ["text", "treatment", "color", "family", "type", "className"];
 var Divider = function Divider(_ref) {
   var text = _ref.text,
     treatment = _ref.treatment,
@@ -11289,7 +11293,7 @@ var Divider = function Divider(_ref) {
     family = _ref.family,
     type = _ref.type,
     className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$f);
   var defaultTreatment = type === 'two-line' ? 'eyebrow' : 'h5';
   var defaultFamily = type === 'two-line' ? undefined : 'serif';
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
@@ -11322,6 +11326,21 @@ var LineAboveDivider = function LineAboveDivider(props) {
   }));
 };
 
+var _excluded$e = ["className", "open", "children"];
+var Drawer = function Drawer(_ref) {
+  var className = _ref.className,
+    open = _ref.open,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded$e);
+  return /*#__PURE__*/React__default.createElement("div", _extends$1({
+    className: classNames('Drawer', {
+      'Drawer--open': open
+    }, className)
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: "Drawer__content"
+  }, children));
+};
+
 var _excluded$d = ["name", "children", "className", "virtual", "icon", "data-testid", "defaultExpanded", "expanded", "onToggle", "background", "border"];
 var Expandable = function Expandable(_ref) {
   var name = _ref.name,
@@ -11434,12 +11453,12 @@ var hasRequiredDist;
 function requireDist() {
   if (hasRequiredDist) return dist;
   hasRequiredDist = 1;
-  (function (exports$1) {
+  (function (exports) {
 
     function __export(m) {
-      for (var p in m) if (!exports$1.hasOwnProperty(p)) exports$1[p] = m[p];
+      for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
     }
-    Object.defineProperty(exports$1, "__esModule", {
+    Object.defineProperty(exports, "__esModule", {
       value: true
     });
     __export(requireUseCursor());
@@ -12273,6 +12292,8 @@ var Paginator = function Paginator(_ref) {
     totalPages = _ref.totalPages,
     _ref$maximumPagesToSh = _ref.maximumPagesToShow,
     maximumPagesToShow = _ref$maximumPagesToSh === void 0 ? defaultMaximumNumberOfPagesToShow : _ref$maximumPagesToSh,
+    _ref$scrollToTopOnPag = _ref.scrollToTopOnPageChange,
+    scrollToTopOnPageChange = _ref$scrollToTopOnPag === void 0 ? true : _ref$scrollToTopOnPag,
     onGoToPage = _ref.onGoToPage,
     className = _ref.className;
   var pages = determinePagesToShow(selectedPage, totalPages, maximumPagesToShow);
@@ -12289,7 +12310,7 @@ var Paginator = function Paginator(_ref) {
     disabled: !canDoPrev(selectedPage),
     onClick: function onClick() {
       prevPage(selectedPage);
-      window.scrollTo(0, 0);
+      if (scrollToTopOnPageChange) window.scrollTo(0, 0);
     },
     className: classNames('Paginator__button', 'Paginator__button--previous')
   }, /*#__PURE__*/React__default.createElement(ChevronLeft16, {
@@ -12300,7 +12321,7 @@ var Paginator = function Paginator(_ref) {
     }, /*#__PURE__*/React__default.createElement("button", {
       onClick: function onClick() {
         onGoToPage(page);
-        window.scrollTo(0, 0);
+        if (scrollToTopOnPageChange) window.scrollTo(0, 0);
       },
       className: classNames('Paginator__button', {
         'Paginator__button--currentPage': page === selectedPage
@@ -12312,7 +12333,7 @@ var Paginator = function Paginator(_ref) {
     disabled: !canDoNext(selectedPage, totalPages),
     onClick: function onClick() {
       nextPage(selectedPage);
-      window.scrollTo(0, 0);
+      if (scrollToTopOnPageChange) window.scrollTo(0, 0);
     },
     className: classNames('Paginator__button', 'Paginator__button--next')
   }, "Next ", /*#__PURE__*/React__default.createElement(ChevronRight16, {
@@ -13090,4 +13111,4 @@ var Utilities = {
   States: States
 };
 
-export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, FormControlContext, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, OtpInput, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useFormControlContext, useKeyboardListNavigation, useUpdateEffect };
+export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, Drawer, ExceedConstrain, Expandable, Field, FocusOn, FormControlContext, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, OtpInput, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useFormControlContext, useKeyboardListNavigation, useUpdateEffect };