@7shifts/sous-chef 4.9.0 → 4.10.0

package/dist/index.js

@@ -6,6 +6,7 @@ var lodashEs = require('lodash-es');
 var parseTime = require('time-autocomplete/src/core/AMPMParser');
 var reactRouterDom = require('react-router-dom');
 var ReactModal = require('react-modal');
+var DraggableLib = require('react-draggable');
 var reactDayPicker = require('react-day-picker');
 var dateFnsFormat = require('date-fns/format');
 var dateFnsParse = require('date-fns/parse');
@@ -47,6 +48,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var parseTime__default = /*#__PURE__*/_interopDefaultLegacy(parseTime);
 var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
+var DraggableLib__default = /*#__PURE__*/_interopDefaultLegacy(DraggableLib);
 var dateFnsFormat__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsFormat);
 var dateFnsParse__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsParse);
 var startOfDay__default = /*#__PURE__*/_interopDefaultLegacy(startOfDay);
@@ -308,7 +310,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var styles$1J = {"flex":"_GFHBy","flex__item":"_TOxU5","flex__item--flexible":"_oppLW","align-center":"_bC2qU","align-end":"_9qCMz","align-start":"_06gN4","justify-center":"_9gxO4","justify-end":"_33FAJ","justify-space-between":"_lg-h2","justify-start":"_xjZcn","inline-flex":"_3yyLA"};
+var styles$1K = {"flex":"_GFHBy","flex__item":"_TOxU5","flex__item--flexible":"_oppLW","align-center":"_bC2qU","align-end":"_9qCMz","align-start":"_06gN4","justify-center":"_9gxO4","justify-end":"_33FAJ","justify-space-between":"_lg-h2","justify-start":"_xjZcn","inline-flex":"_3yyLA"};
 
 var usePositionStyles = function usePositionStyles(_ref) {
   var m = _ref.m,
@@ -427,7 +429,7 @@ var Flex = function Flex(_ref) {
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var positionStyles = usePositionStyles(positionProps);
-  var className = classnames__default["default"](styles$1J['flex'], extraClass, (_classNames = {}, _classNames[styles$1J['align-start']] = alignItems === 'flex-start', _classNames[styles$1J['align-end']] = alignItems === 'flex-end', _classNames[styles$1J['align-center']] = alignItems === 'center', _classNames[styles$1J['justify-start']] = justifyContent === 'start', _classNames[styles$1J['justify-end']] = justifyContent === 'end', _classNames[styles$1J['justify-center']] = justifyContent === 'center', _classNames[styles$1J['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1J['inline-flex']] = inlineFlex, _classNames));
+  var className = classnames__default["default"](styles$1K['flex'], extraClass, (_classNames = {}, _classNames[styles$1K['align-start']] = alignItems === 'flex-start', _classNames[styles$1K['align-end']] = alignItems === 'flex-end', _classNames[styles$1K['align-center']] = alignItems === 'center', _classNames[styles$1K['justify-start']] = justifyContent === 'start', _classNames[styles$1K['justify-end']] = justifyContent === 'end', _classNames[styles$1K['justify-center']] = justifyContent === 'center', _classNames[styles$1K['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1K['inline-flex']] = inlineFlex, _classNames));
   var items = React__default["default"].Children.toArray(children).filter(Boolean);
   var gap = typeof space === 'object' ? space.row + "px " + space.column + "px" : space;
   return React__default["default"].createElement("div", _extends({
@@ -443,7 +445,7 @@ var Flex = function Flex(_ref) {
     var _classNames2;
     return React__default["default"].createElement("div", {
       key: i,
-      className: classnames__default["default"](styles$1J['flex__item'], (_classNames2 = {}, _classNames2[styles$1J['flex__item--flexible']] = flexItems, _classNames2)),
+      className: classnames__default["default"](styles$1K['flex__item'], (_classNames2 = {}, _classNames2[styles$1K['flex__item--flexible']] = flexItems, _classNames2)),
       style: {
         flex: flex ? flex[i] || '0 1 auto' : '0 1 auto'
       }
@@ -465,7 +467,7 @@ var Stack = function Stack(_ref) {
   }));
 };
 
-var styles$1I = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
+var styles$1J = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
 
 var _excluded$eo = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
@@ -488,7 +490,7 @@ var Toggle = function Toggle(_ref) {
   return React__default["default"].createElement(Stack, {
     space: 8
   }, React__default["default"].createElement("label", _extends({}, dataProps, {
-    className: styles$1I['toggle']
+    className: styles$1J['toggle']
   }), React__default["default"].createElement("input", {
     type: "checkbox",
     checked: checked,
@@ -497,11 +499,11 @@ var Toggle = function Toggle(_ref) {
     id: id,
     "data-testid": testId
   }), React__default["default"].createElement("span", {
-    className: styles$1I['toggle__switch']
+    className: styles$1J['toggle__switch']
   }), label && React__default["default"].createElement("span", {
-    className: styles$1I['toggle__label']
+    className: styles$1J['toggle__label']
   }, label)), caption && React__default["default"].createElement("span", {
-    className: styles$1I['toggle__caption']
+    className: styles$1J['toggle__caption']
   }, caption));
 };
 
@@ -521,7 +523,7 @@ var SPINNER_THEMES = {
   PRIDE: 'pride'
 };
 
-var styles$1H = {"spinner":"_memxT","rotator":"_QieGp","spinner--block":"_VoFzz","path":"_KSRP9","dash":"_RyBY2","path--mint":"_-sIZJ","path--disabled":"_3fox0","path--contrast":"_VteKz","path--pride":"_7rzsv"};
+var styles$1I = {"spinner":"_memxT","rotator":"_QieGp","spinner--block":"_VoFzz","path":"_KSRP9","dash":"_RyBY2","path--mint":"_-sIZJ","path--disabled":"_3fox0","path--contrast":"_VteKz","path--pride":"_7rzsv"};
 
 var Spinner = function Spinner(_ref) {
   var _classnames;
@@ -534,9 +536,9 @@ var Spinner = function Spinner(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'spinner' : _ref$testId;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1H['spinner--block']] = block, _classnames))
+    className: classnames__default["default"]((_classnames = {}, _classnames[styles$1I['spinner--block']] = block, _classnames))
   }, React__default["default"].createElement("svg", {
-    className: styles$1H['spinner'],
+    className: styles$1I['spinner'],
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
     height: size,
@@ -611,7 +613,7 @@ var Spinner = function Spinner(_ref) {
     offset: "1",
     stopColor: "#760088"
   }))), React__default["default"].createElement("circle", {
-    className: classnames__default["default"](styles$1H['path'], styles$1H["path--" + theme]),
+    className: classnames__default["default"](styles$1I['path'], styles$1I["path--" + theme]),
     fill: "none",
     strokeWidth: "6",
     strokeLinecap: "round",
@@ -621,9 +623,9 @@ var Spinner = function Spinner(_ref) {
   })));
 };
 
-var styles$1G = {"tooltip":"_Ydu2O"};
+var styles$1H = {"tooltip":"_Ydu2O"};
 
-var styles$1F = {"tooltip-overlay":"_7fQon","tooltip-overlay--visible":"_a-BND","tooltip-overlay--black-theme":"_UUdng","tooltip-overlay--white-theme":"_brSNX","tooltip-overlay__header":"_uP8x7","tooltip-overlay-arrow":"_MjV6R","tooltip-overlay-arrow--top":"_TQqwB","tooltip-overlay-arrow--bottom":"_pgdKl","tooltip-overlay-arrow--visible":"_Zob-W","tooltip-overlay-arrow--black-theme":"_FXaBf","tooltip-overlay-arrow--white-theme":"_FyPu8"};
+var styles$1G = {"tooltip-overlay":"_7fQon","tooltip-overlay--visible":"_a-BND","tooltip-overlay--black-theme":"_UUdng","tooltip-overlay--white-theme":"_brSNX","tooltip-overlay__header":"_uP8x7","tooltip-overlay-arrow":"_MjV6R","tooltip-overlay-arrow--top":"_TQqwB","tooltip-overlay-arrow--bottom":"_pgdKl","tooltip-overlay-arrow--visible":"_Zob-W","tooltip-overlay-arrow--black-theme":"_FXaBf","tooltip-overlay-arrow--white-theme":"_FyPu8"};
 
 var TOOLTIP_THEME = {
   BLACK: 'black',
@@ -822,15 +824,15 @@ var TooltipOverlay = function TooltipOverlay(_ref) {
       maxHeight: maxHeight,
       zIndex: getZIndex('tooltip')
     }),
-    className: classnames__default["default"](styles$1F['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1F['tooltip-overlay--visible']] = isVisible, _classnames[styles$1F['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1F['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
+    className: classnames__default["default"](styles$1G['tooltip-overlay'], extraClass, (_classnames = {}, _classnames[styles$1G['tooltip-overlay--visible']] = isVisible, _classnames[styles$1G['tooltip-overlay--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames[styles$1G['tooltip-overlay--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames)),
     onMouseEnter: onFocusIn,
     onMouseLeave: onFocusOut
   }, React__default["default"].createElement(Stack, {
     space: 8
   }, header && React__default["default"].createElement("div", {
-    className: styles$1F['tooltip-overlay__header']
+    className: styles$1G['tooltip-overlay__header']
   }, header), children)), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1F['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1F['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1F['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1F['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1F['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1F['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
+    className: classnames__default["default"](styles$1G['tooltip-overlay-arrow'], extraClass, (_classnames2 = {}, _classnames2[styles$1G['tooltip-overlay-arrow--visible']] = isVisible, _classnames2[styles$1G['tooltip-overlay-arrow--top']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.TOP, _classnames2[styles$1G['tooltip-overlay-arrow--bottom']] = position.actualPlacement.placement === TOOLTIP_PLACEMENT.BOTTOM, _classnames2[styles$1G['tooltip-overlay-arrow--black-theme']] = theme === TOOLTIP_THEME.BLACK, _classnames2[styles$1G['tooltip-overlay-arrow--white-theme']] = theme === TOOLTIP_THEME.WHITE, _classnames2)),
     style: _extends({}, position.arrow, {
       zIndex: getZIndex('tooltip')
     }),
@@ -948,7 +950,7 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     }), overlayElement);
   }
   return React__default["default"].createElement("div", _extends({
-    className: classnames__default["default"](styles$1G['tooltip'])
+    className: classnames__default["default"](styles$1H['tooltip'])
   }, commonProps, {
     ref: containerRef
   }), children, overlayElement);
@@ -961,7 +963,7 @@ var isTooltipCompatible = function isTooltipCompatible(element) {
   return React__default["default"].isValidElement(element) && typeof element.type === 'string';
 };
 
-var styles$1E = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
+var styles$1F = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
 
 var BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -1056,7 +1058,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
-    className: classnames__default["default"](styles$1E['button'], (_classnames = {}, _classnames[styles$1E['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1E['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1E['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1E['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1E['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1E['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1E['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1E['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1E['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1E['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1E['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1E['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1E['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1E['button--loading']] = loading, _classnames[styles$1E['button--icon-only']] = isIconOnly, _classnames[styles$1E['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1E['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
+    className: classnames__default["default"](styles$1F['button'], (_classnames = {}, _classnames[styles$1F['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$1F['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$1F['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$1F['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$1F['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$1F['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$1F['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$1F['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$1F['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$1F['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$1F['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$1F['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$1F['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$1F['button--loading']] = loading, _classnames[styles$1F['button--icon-only']] = isIconOnly, _classnames[styles$1F['button--size-min-width-100']] = size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$1F['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -1069,7 +1071,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     space: 8,
     alignItems: "center"
   }, children), loading && React__default["default"].createElement("div", {
-    className: styles$1E['button__spinner']
+    className: styles$1F['button__spinner']
   }, React__default["default"].createElement(Spinner, {
     theme: contrastSpinner.includes(theme) ? SPINNER_THEMES.CONTRAST : SPINNER_THEMES.DISABLED
   })));
@@ -1079,7 +1081,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
       overlay: title,
       ref: ref
     }, title && disabled ? React__default["default"].createElement("div", {
-      className: styles$1E['disabled-button-wrapper']
+      className: styles$1F['disabled-button-wrapper']
     }, ButtonElementResult) : ButtonElementResult)
   );
 };
@@ -10316,9 +10318,9 @@ var IconGreatMonochromatic = React.forwardRef(function (_ref, ref) {
 });
 IconGreatMonochromatic.displayName = 'IconGreatMonochromatic';
 
-var styles$1D = {"pagination-controls":"_S1co-"};
+var styles$1E = {"pagination-controls":"_S1co-"};
 
-var styles$1C = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
+var styles$1D = {"keyboard-key":"_sgd9a","keyboard-key--light":"_8zg4j","keyboard-key__character":"_GAIig"};
 
 var KeyboardKey = function KeyboardKey(_ref) {
   var _classNames;
@@ -10326,9 +10328,9 @@ var KeyboardKey = function KeyboardKey(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'dark' : _ref$theme;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1C['keyboard-key'], (_classNames = {}, _classNames[styles$1C['keyboard-key--light']] = theme === 'light', _classNames))
+    className: classnames__default["default"](styles$1D['keyboard-key'], (_classNames = {}, _classNames[styles$1D['keyboard-key--light']] = theme === 'light', _classNames))
   }, React__default["default"].createElement("span", {
-    className: styles$1C['keyboard-key__character']
+    className: styles$1D['keyboard-key__character']
   }, children));
 };
 
@@ -10545,7 +10547,7 @@ var PaginationControls = function PaginationControls(_ref) {
     }
   });
   return React__default["default"].createElement("div", _extends({}, dataProps, {
-    className: styles$1D['pagination-controls'],
+    className: styles$1E['pagination-controls'],
     "data-testid": testId
   }), React__default["default"].createElement(Button, {
     disabled: !hasPrevious,
@@ -10575,7 +10577,7 @@ var LINK_TARGET = {
   BLANK: '_blank'
 };
 
-var styles$1B = {"link":"_EiQ4c","link--contrast":"_weJDR"};
+var styles$1C = {"link":"_EiQ4c","link--contrast":"_weJDR"};
 
 var _excluded$bq = ["href", "target", "theme", "onClick", "children"];
 var Link = function Link(_ref) {
@@ -10592,7 +10594,7 @@ var Link = function Link(_ref) {
     dataProps = _getDataProps.dataProps;
   var ref = React__default["default"].useRef(null);
   return React__default["default"].createElement("a", _extends({}, dataProps, {
-    className: classnames__default["default"](styles$1B['link'], (_classNames = {}, _classNames[styles$1B['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1B['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
+    className: classnames__default["default"](styles$1C['link'], (_classNames = {}, _classNames[styles$1C['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$1C['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
     href: href,
     target: target,
     onClick: onClick,
@@ -10615,7 +10617,7 @@ var useDropdownContext = function useDropdownContext() {
   return React__default["default"].useContext(DropdownContext);
 };
 
-var styles$1A = {"dropdown-pane":"_sp-pT"};
+var styles$1B = {"dropdown-pane":"_sp-pT"};
 
 var DROPDOWN_PANE_PADDING = 14;
 var calculateOverlayPosition$1 = function calculateOverlayPosition(triggerPosition, triggerOffsetHeight, panePosition, alignment) {
@@ -10753,7 +10755,7 @@ var PaneOverlay = function PaneOverlay(_ref) {
   useKeyPress(['Escape'], onToggleDropdown);
   var overflow = maxHeight ? 'auto' : undefined;
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$1A['dropdown-pane'], (_classNames = {}, _classNames[styles$1A['dropdown-pane--with-padding']] = true, _classNames['dropdown-pane--custom-width'] = width !== undefined, _classNames)),
+    className: classnames__default["default"](styles$1B['dropdown-pane'], (_classNames = {}, _classNames[styles$1B['dropdown-pane--with-padding']] = true, _classNames['dropdown-pane--custom-width'] = width !== undefined, _classNames)),
     style: _extends({}, position, {
       width: width,
       maxHeight: maxHeight,
@@ -10782,7 +10784,7 @@ var getKeyboardFocusableElements = function getKeyboardFocusableElements(element
   });
 };
 
-var styles$1z = {"dropdown__trigger":"_AktVc"};
+var styles$1A = {"dropdown__trigger":"_AktVc"};
 
 var DROPDOWN_ALIGNEMNT = {
   LEFT: 'left',
@@ -10793,7 +10795,7 @@ var DROPDOWN_TRIGGER = {
   CLICK: 'click'
 };
 
-var styles$1y = {"label":"_zv4ua","label--truncate":"_FPyID"};
+var styles$1z = {"label":"_zv4ua","label--truncate":"_FPyID"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
@@ -10846,7 +10848,7 @@ var Label = function Label(_ref) {
   var LabelElement = React__default["default"].createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames__default["default"](styles$1y['label'], (_classNames = {}, _classNames[styles$1y['label--truncate']] = shouldTruncate, _classNames))
+    className: classnames__default["default"](styles$1z['label'], (_classNames = {}, _classNames[styles$1z['label--truncate']] = shouldTruncate, _classNames))
   }, children);
   if (showTooltip) {
     return React__default["default"].createElement(Tooltip, {
@@ -10857,18 +10859,18 @@ var Label = function Label(_ref) {
   return LabelElement;
 };
 
-var styles$1x = {"caption":"_Qrxg5"};
+var styles$1y = {"caption":"_Qrxg5"};
 
 var Caption = function Caption(_ref) {
   var fieldId = _ref.fieldId,
     children = _ref.children;
   return React__default["default"].createElement("div", {
     id: fieldId && fieldId + "-describer",
-    className: styles$1x['caption']
+    className: styles$1y['caption']
   }, children);
 };
 
-var styles$1w = {"error-message":"_eS4YO"};
+var styles$1x = {"error-message":"_eS4YO"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
@@ -10876,7 +10878,7 @@ var ErrorMessage = function ErrorMessage(_ref) {
     testId = _ref.testId;
   return React__default["default"].createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$1w['error-message'],
+    className: styles$1x['error-message'],
     "data-testid": testId
   }, React__default["default"].createElement(Inline, {
     space: 8,
@@ -10915,7 +10917,7 @@ var ALIGNMENTS = {
   JUSTIFY: 'justify'
 };
 
-var styles$1v = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text__paragraph":"_T91Eo","text__tagline":"_uetB-","text--italic":"_NgSTT","text--underline":"_ouqVK","text--dotted-underline":"_zZ55-","text--monospace":"_Vi-V1","text--line-through":"_psV6T","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
+var styles$1w = {"text":"_6SgoN","text--bold":"_i2LHD","text__body":"_SF95f","text__caption":"_HHohB","text__insight":"_xdhK0","text__span":"_yZbuO","text__paragraph":"_T91Eo","text__tagline":"_uetB-","text--italic":"_NgSTT","text--underline":"_ouqVK","text--dotted-underline":"_zZ55-","text--monospace":"_Vi-V1","text--line-through":"_psV6T","text--align-left":"_tfSIf","text--align-right":"_AK1Nr","text--align-center":"_N-tR4","text--align-justify":"_LkMr0"};
 
 var _excluded$bp = ["children", "as", "emphasis", "alignment", "color", "testId", "textWrap"];
 var TextComponent = function TextComponent(_ref, ref) {
@@ -10941,7 +10943,7 @@ var TextComponent = function TextComponent(_ref, ref) {
       color: getColor(color),
       textWrap: textWrap
     }, positionStyles),
-    className: classnames__default["default"](styles$1v['text'], (_classnames = {}, _classnames[styles$1v['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1v['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1v['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1v['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1v['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1v['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1v['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1v['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1v['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1v['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1v['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1v['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1v['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1v['text__span']] = as === TEXT_TYPES.SPAN, _classnames[styles$1v['text__paragraph']] = as === TEXT_TYPES.PARAGRAPH, _classnames[styles$1v['text__tagline']] = as === TEXT_TYPES.TAGLINE, _classnames)),
+    className: classnames__default["default"](styles$1w['text'], (_classnames = {}, _classnames[styles$1w['text--bold']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.BOLD), _classnames[styles$1w['text--italic']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.ITALIC), _classnames[styles$1w['text--underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.UNDERLINE), _classnames[styles$1w['text--dotted-underline']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.DOTTED_UNDERLINE), _classnames[styles$1w['text--monospace']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.MONOSPACE), _classnames[styles$1w['text--line-through']] = emphasis == null ? void 0 : emphasis.includes(FONT_EMPHASIS.STRIKETHROUGH), _classnames[styles$1w['text--align-left']] = alignment === ALIGNMENTS.LEFT, _classnames[styles$1w['text--align-right']] = alignment === ALIGNMENTS.RIGHT, _classnames[styles$1w['text--align-center']] = alignment === ALIGNMENTS.CENTER, _classnames[styles$1w['text--align-justify']] = alignment === ALIGNMENTS.JUSTIFY, _classnames[styles$1w['text__body']] = as === TEXT_TYPES.BODY, _classnames[styles$1w['text__insight']] = as === TEXT_TYPES.INSIGHT, _classnames[styles$1w['text__caption']] = as === TEXT_TYPES.CAPTION, _classnames[styles$1w['text__span']] = as === TEXT_TYPES.SPAN, _classnames[styles$1w['text__paragraph']] = as === TEXT_TYPES.PARAGRAPH, _classnames[styles$1w['text__tagline']] = as === TEXT_TYPES.TAGLINE, _classnames)),
     'data-testid': testId
   }, dataProps, other, {
     ref: ref
@@ -10956,21 +10958,21 @@ var Text = React.forwardRef(TextComponent);
 var Bold = function Bold(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1v['text--bold'], styles$1v['text'])
+    className: classnames__default["default"](styles$1w['text--bold'], styles$1w['text'])
   }, children);
 };
 
 var Underline = function Underline(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1v['text--underline'], styles$1v['text'])
+    className: classnames__default["default"](styles$1w['text--underline'], styles$1w['text'])
   }, children);
 };
 
 var Italic = function Italic(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement("span", {
-    className: classnames__default["default"](styles$1v['text--italic'], styles$1v['text'])
+    className: classnames__default["default"](styles$1w['text--italic'], styles$1w['text'])
   }, children);
 };
 
@@ -11119,7 +11121,7 @@ var useFieldControllers = function useFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$1u = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
+var styles$1v = {"text-field":"_G6LsE","text-field--invalid":"_2ZYtt","text-field--prefixed":"_rWp7H","text-field--suffixed":"_Xq8xX"};
 
 var _excluded$bn = ["autoComplete", "autoFocus", "defaultValue", "disabled", "error", "id", "maxLength", "name", "caption", "label", "onBlur", "onChange", "onFocus", "onKeyDown", "placeholder", "value", "ref", "testId"];
 var useTextField = function useTextField(_ref) {
@@ -11159,7 +11161,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$1u['text-field'], (_classnames = {}, _classnames[styles$1u['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1v['text-field'], (_classnames = {}, _classnames[styles$1v['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -11189,7 +11191,7 @@ var useTextField = function useTextField(_ref) {
   };
 };
 
-var styles$1t = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
+var styles$1u = {"affix-container":"_F8QOB","prefix":"_yPPIy","suffix":"_Y3yFd","affix-container--prefixed":"_vU4SU","affix-container--suffixed":"_4rDXi"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -11224,16 +11226,16 @@ var AffixContainer = function AffixContainer(_ref) {
   if (!hasPrefix && !hasSuffix) {
     return children;
   }
-  var classes = classnames__default["default"](styles$1t['affix-container'], (_classnames = {}, _classnames[styles$1t['affix-container--prefixed']] = hasPrefix, _classnames[styles$1t['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames__default["default"](styles$1u['affix-container'], (_classnames = {}, _classnames[styles$1u['affix-container--prefixed']] = hasPrefix, _classnames[styles$1u['affix-container--suffixed']] = hasSuffix, _classnames));
   return React__default["default"].createElement("div", {
     className: classes,
     ref: container,
     "data-testid": testId
   }, hasPrefix && React__default["default"].createElement("div", {
-    className: styles$1t['prefix'],
+    className: styles$1u['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default["default"].createElement("div", {
-    className: styles$1t['suffix'],
+    className: styles$1u['suffix'],
     ref: suffixElement
   }, suffix));
 };
@@ -11447,7 +11449,7 @@ var Dropdown = function Dropdown(_ref) {
       paneRef: paneRef
     }
   }, triggerIsKnownButton ? React__default["default"].cloneElement(trigger, _extends({}, trigger.props, triggerProps)) : React__default["default"].createElement("button", _extends({}, triggerProps, {
-    className: styles$1z['dropdown__trigger'],
+    className: styles$1A['dropdown__trigger'],
     ref: updatedRef,
     onFocus: handleFocus
   }), trigger), React__default["default"].createElement(DropdownPane, {
@@ -11461,7 +11463,7 @@ var Dropdown = function Dropdown(_ref) {
   }, children));
 };
 
-var styles$1s = {"dropdown-list":"_91hvH","dropdown-list__item":"_NrB4V","dropdown-list__item--hover":"_aMs9c"};
+var styles$1t = {"dropdown-list":"_91hvH","dropdown-list__item":"_NrB4V","dropdown-list__item--hover":"_aMs9c"};
 
 var findNextActiveIndex = function findNextActiveIndex(items, startAt) {
   var startIndex = 0;
@@ -11626,16 +11628,33 @@ var updateIconSize = function updateIconSize(child) {
   }));
 };
 
-var styles$1r = {"dropdown-list-divider":"_ISJ4M"};
+var styles$1s = {"dropdown-list-divider":"_ISJ4M"};
 
-var DropdownListDivider = function DropdownListDivider(_ref) {
+var styles$1r = {"dropdown-list-divider-line":"_GlMQ1"};
+
+var DropdownListDividerLine = function DropdownListDividerLine(_ref) {
   var testId = _ref.testId;
   return React__default["default"].createElement("div", {
-    className: styles$1r['dropdown-list-divider'],
+    className: styles$1r['dropdown-list-divider-line'],
     "data-testid": testId
   });
 };
 
+var DropdownListDivider = function DropdownListDivider(_ref) {
+  var testId = _ref.testId,
+    children = _ref.children,
+    line = _ref.line;
+  if (!children) {
+    return React__default["default"].createElement(DropdownListDividerLine, {
+      testId: testId
+    });
+  }
+  return React__default["default"].createElement(React.Fragment, null, (line === 'top' || line === 'both') && React__default["default"].createElement(DropdownListDividerLine, null), React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$1s['dropdown-list-divider']),
+    "data-testid": testId
+  }, children), (line === 'bottom' || line === 'both') && React__default["default"].createElement(DropdownListDividerLine, null));
+};
+
 var styles$1q = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item__caption":"_7EI7m","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__prefix":"_dpo67","dropdown-list-item__suffix":"_ObP6B","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY","dropdown-list-item__suffix-spot":"_UA23u","dropdown-list-item__suffix-button":"_rvaeI"};
 
 var styles$1p = {"dropdown-submenu":"_X4fIx"};
@@ -12046,7 +12065,7 @@ var DropdownList = function DropdownList(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightItemIndex]);
   return React__default["default"].createElement("ul", {
-    className: styles$1s['dropdown-list'],
+    className: styles$1t['dropdown-list'],
     "data-testid": testId,
     ref: listRef
   }, React__default["default"].Children.toArray(children).filter(Boolean).map(function (child, index) {
@@ -12058,7 +12077,7 @@ var DropdownList = function DropdownList(_ref) {
     var divider = (_items$index2 = items[index]) == null ? void 0 : _items$index2.divider;
     return React__default["default"].createElement("li", {
       key: index,
-      className: classnames__default["default"](styles$1s['dropdown-list__item'], (_classNames = {}, _classNames[styles$1s['dropdown-list__item--hover']] = focusedItem === index && isInteractive, _classNames)),
+      className: classnames__default["default"](styles$1t['dropdown-list__item'], (_classNames = {}, _classNames[styles$1t['dropdown-list__item--hover']] = focusedItem === index && isInteractive, _classNames)),
       onMouseEnter: divider ? undefined : function () {
         return setFocusOnItem(index);
       },
@@ -12306,7 +12325,7 @@ var styles$1i = {"menu-item":"_SebbU","menu-item--active":"_CDEVl","menu-item--w
 
 var styles$1h = {"badge":"_RXV4h","badge--warning":"_2An1I","badge--danger":"_-Bw8L","badge--success":"_RxlMz","badge--info":"_dzCH-","badge--numeric":"_Ix9tP"};
 
-var styles$1g = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B"};
+var styles$1g = {"overlay":"_0yTe8","overlay--after-open":"_yJBtA","overlay--before-close":"_iWogn","content":"_ntozd","content--after-open":"_EQjDq","content--before-close":"_ZTY3B","overlay--draggable":"_6SSP8","content--draggable":"_5rHXj","draggable-inner":"_cq2CU"};
 
 var styles$1f = {"header":"_tgpG9","header__close-button":"_b1dgU","sub-header":"_c2nm4"};
 
@@ -12344,14 +12363,108 @@ var ModalHeader = function ModalHeader(_ref) {
 };
 
 var ModalContext = React.createContext({
-  isModalMounted: false
+  isModalMounted: false,
+  draggable: false
 });
 var useModalContext = function useModalContext() {
   var context = React.useContext(ModalContext);
   return context || {};
 };
 
-var _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId"];
+var DEFAULT_WIDTH = 566;
+var DEFAULT_HEIGHT = 266;
+/**
+ * Encapsulates the ref, initial positioning, and viewport-aware bounds for a
+ * draggable modal. Pass the returned values to <Draggable> and the ReactModal
+ * style.content object.
+ *
+ * Bounds are expressed as pixel offsets from the element's rendered position
+ * (react-draggable v4.7+ no longer accepts "window" as a string shorthand).
+ *
+ * Initial bounds are estimated from the numeric width/height props (falling
+ * back to the CSS min-width/min-height defaults). After mount, the element is
+ * measured and bounds are corrected to the actual rendered dimensions so the
+ * modal cannot be dragged outside the viewport even when width/height are CSS
+ * strings or the content exceeds the fallback height.
+ */
+function useDraggableModal(_ref) {
+  var _initialPosition$top, _initialPosition$left;
+  var width = _ref.width,
+    height = _ref.height,
+    initialPosition = _ref.initialPosition;
+  var nodeRef = React.useRef(null);
+  var resolvedWidth = typeof width === 'number' ? width : DEFAULT_WIDTH;
+  var resolvedHeight = typeof height === 'number' ? height : DEFAULT_HEIGHT;
+  // Initialise from resolved props; corrected after mount with real pixel dimensions.
+  var _useState = React.useState(resolvedWidth),
+    measuredWidth = _useState[0],
+    setMeasuredWidth = _useState[1];
+  var _useState2 = React.useState(resolvedHeight),
+    measuredHeight = _useState2[0],
+    setMeasuredHeight = _useState2[1];
+  // Track the DOM node via state so the measurement effect can depend on it.
+  // A plain useEffect([], []) misses two cases: (a) the node mounting later
+  // because `draggable` was false on first render, and (b) the element
+  // resizing after mount due to dynamic content.
+  var _useState3 = React.useState(null),
+    node = _useState3[0],
+    setNode = _useState3[1];
+  // callbackRef: pass as the inner div's `ref`. It keeps nodeRef.current in
+  // sync for react-draggable and triggers the measurement effect whenever the
+  // element mounts or unmounts.
+  var callbackRef = React.useCallback(function (el) {
+    nodeRef.current = el;
+    setNode(el);
+  }, []);
+  React.useEffect(function () {
+    if (!node) return;
+    var measure = function measure() {
+      var w = node.offsetWidth;
+      var h = node.offsetHeight;
+      // offsetWidth/offsetHeight are 0 in SSR/jsdom — keep fallback values.
+      if (w === 0) return;
+      setMeasuredWidth(w);
+      setMeasuredHeight(h);
+    };
+    measure(); // initial measurement when node first becomes available
+    // ResizeObserver keeps bounds accurate as content grows or shrinks.
+    if (typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [node]);
+  var top = (_initialPosition$top = initialPosition == null ? void 0 : initialPosition.top) != null ? _initialPosition$top : typeof window !== 'undefined' ? Math.round(window.innerHeight * 0.25) : 0;
+  var left = (_initialPosition$left = initialPosition == null ? void 0 : initialPosition.left) != null ? _initialPosition$left : typeof window !== 'undefined' ? Math.round((window.innerWidth - resolvedWidth) / 2) : 0;
+  var bounds = typeof window !== 'undefined' ? {
+    left: -left,
+    top: -top,
+    right: window.innerWidth - left - measuredWidth,
+    bottom: window.innerHeight - top - measuredHeight
+  } : {
+    left: 0,
+    top: 0,
+    right: 9999,
+    bottom: 9999
+  };
+  return {
+    nodeRef: nodeRef,
+    callbackRef: callbackRef,
+    contentPosition: {
+      top: top,
+      left: left
+    },
+    bounds: bounds
+  };
+}
+
+var _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId", "draggable", "initialPosition"];
+// react-draggable declares `props: DraggableProps` on the class instance, overriding
+// the `React.Component<Partial<DraggableProps>>` generic. This cast restores the
+// intended partial-props behaviour for JSX usage.
+var Draggable = DraggableLib__default["default"];
+var DRAG_HANDLE_CLASS = 'modal-drag-handle';
 /**
  * Modal is a focused overlay that interrupts the current experience and demands the user's attention. It blocks all interaction with the rest of the page until the user responds — making it best suited for decisions, confirmations, and self-contained flows where that level of focus is warranted.
  */
@@ -12371,22 +12484,60 @@ var Modal = function Modal(_ref) {
     _ref$shouldReturnFocu = _ref.shouldReturnFocusAfterClose,
     shouldReturnFocusAfterClose = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
     testId = _ref.testId,
+    _ref$draggable = _ref.draggable,
+    draggable = _ref$draggable === void 0 ? false : _ref$draggable,
+    initialPosition = _ref.initialPosition,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$bk);
+  var _useDraggableModal = useDraggableModal({
+      width: width,
+      height: height,
+      initialPosition: initialPosition
+    }),
+    draggableNodeRef = _useDraggableModal.nodeRef,
+    draggableCallbackRef = _useDraggableModal.callbackRef,
+    contentPosition = _useDraggableModal.contentPosition,
+    draggableBounds = _useDraggableModal.bounds;
   var style = {
-    content: {
+    // When draggable, top/left position the fixed content div directly so
+    // react-draggable can measure the element's real viewport position for bounds.
+    content: draggable ? _extends({}, contentPosition, {
+      width: width,
+      height: height,
+      maxWidth: maxWidth
+    }) : {
       width: width,
       height: height,
       maxWidth: maxWidth
     },
-    overlay: {
+    overlay: _extends({
       zIndex: getZIndex(zIndex)
-    }
+    }, draggable && {
+      pointerEvents: 'none'
+    })
   };
   // The `ReactModal` library already adds the `data-*` preffix, so I need to remove it from the `getDataProps`
   var _getDataProps = getDataProps(otherProps, {
       removeDataPrefix: true
     }),
     dataProps = _getDataProps.dataProps;
+  var modalContent = React__default["default"].createElement(React.Fragment, null, draggable ? React__default["default"].createElement("div", {
+    className: DRAG_HANDLE_CLASS
+  }, React__default["default"].createElement(ModalHeader, {
+    header: header,
+    subHeader: subHeader,
+    onClose: onClose,
+    loading: loading
+  })) : React__default["default"].createElement(ModalHeader, {
+    header: header,
+    subHeader: subHeader,
+    onClose: onClose,
+    loading: loading
+  }), React__default["default"].createElement(ModalContext.Provider, {
+    value: {
+      isModalMounted: true,
+      draggable: draggable
+    }
+  }, children));
   return React__default["default"].createElement(ReactModal__default["default"], {
     isOpen: true,
     testId: testId,
@@ -12399,26 +12550,29 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$1g['overlay'],
+      base: classnames__default["default"](styles$1g['overlay'], draggable && styles$1g['overlay--draggable']),
       afterOpen: styles$1g['overlay--after-open'],
       beforeClose: styles$1g['overlay--before-close']
     },
     className: {
-      base: styles$1g['content'],
+      base: classnames__default["default"](styles$1g['content'], draggable && styles$1g['content--draggable']),
       afterOpen: styles$1g['content--after-open'],
       beforeClose: styles$1g['content--before-close']
     },
     data: dataProps
-  }, React__default["default"].createElement(ModalHeader, {
-    header: header,
-    subHeader: subHeader,
-    onClose: onClose,
-    loading: loading
-  }), React__default["default"].createElement(ModalContext.Provider, {
-    value: {
-      isModalMounted: true
+  }, draggable ? React__default["default"].createElement(Draggable, {
+    nodeRef: draggableNodeRef,
+    handle: "." + DRAG_HANDLE_CLASS,
+    bounds: draggableBounds
+  }, React__default["default"].createElement("div", {
+    ref: draggableCallbackRef,
+    className: styles$1g['draggable-inner'],
+    style: {
+      width: width,
+      height: height,
+      maxWidth: maxWidth
     }
-  }, children));
+  }, modalContent)) : modalContent);
 };
 // The user can set the main app root id so when the modal is open it only allows iteracting with the modal when pressing tab
 Modal.setAppElement = function (rootElement) {
@@ -13227,7 +13381,7 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
 
 var styles$18 = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
 
-var _excluded$bi = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId", "onSetDoNotShowAgainStatus"];
+var _excluded$bi = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId", "onSetDoNotShowAgainStatus", "hideDoNotShowAgainCheckbox"];
 /**
  * Hint Modal is a lightweight modal used to surface tips, guidance, or onboarding callouts to users the first time they encounter a feature or page. Unlike a regular Modal, it is not triggered by a user action — it appears automatically when the user navigates somewhere that warrants a guided introduction. It includes a "Don't show this again" option so users can dismiss it permanently once they've absorbed the information.
  */
@@ -13241,6 +13395,8 @@ var HintModal = function HintModal(_ref) {
     secondaryButton = _ref.secondaryButton,
     testId = _ref.testId,
     onSetDoNotShowAgainStatus = _ref.onSetDoNotShowAgainStatus,
+    _ref$hideDoNotShowAga = _ref.hideDoNotShowAgainCheckbox,
+    hideDoNotShowAgainCheckbox = _ref$hideDoNotShowAga === void 0 ? false : _ref$hideDoNotShowAga,
     positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$bi);
   var __ = useTranslation('HintModal');
   var _useState = React.useState(false),
@@ -13250,6 +13406,11 @@ var HintModal = function HintModal(_ref) {
     persistedDoNotShow = _useLocalStorage[0],
     setPersistedDoNotShow = _useLocalStorage[1];
   var persistDoNotShowAgain = function persistDoNotShowAgain(value) {
+    // Without the checkbox the user was never offered the choice, so there
+    // is no preference to store or report.
+    if (hideDoNotShowAgainCheckbox) {
+      return;
+    }
     setPersistedDoNotShow(value);
     if (onSetDoNotShowAgainStatus) {
       onSetDoNotShowAgainStatus(value);
@@ -13317,7 +13478,7 @@ var HintModal = function HintModal(_ref) {
     as: "h3"
   }, header), React__default["default"].createElement(Text, null, children)), React__default["default"].createElement(Stack, {
     space: 32
-  }, React__default["default"].createElement(CheckboxField, {
+  }, !hideDoNotShowAgainCheckbox && React__default["default"].createElement(CheckboxField, {
     name: "hint-modal-do-not-show-checkbox",
     checked: doNotShowAgain,
     label: __('dontShowAgainLabel'),
@@ -13342,6 +13503,37 @@ var Popover = function Popover(props) {
   return React__default["default"].createElement(Dropdown, _extends({}, props));
 };
 
+/**
+ * Returns the current modal position and an updater that centers the modal on
+ * the provided mouse event's coordinates, clamped to a 20px viewport margin.
+ * Useful when opening a draggable Modal relative to a user click.
+ */
+var useModalPosition = function useModalPosition(modalWidth, modalHeight) {
+  if (modalWidth === void 0) {
+    modalWidth = 566;
+  }
+  if (modalHeight === void 0) {
+    modalHeight = 360;
+  }
+  var _useState = React.useState(undefined),
+    position = _useState[0],
+    setPosition = _useState[1];
+  var updatePosition = React.useCallback(function (event) {
+    var MARGIN = 20;
+    var windowWidth = window.innerWidth;
+    var windowHeight = window.innerHeight;
+    var left = event.clientX - modalWidth / 2;
+    var top = event.clientY - modalHeight / 2;
+    if (left + modalWidth > windowWidth) left = Math.max(MARGIN, windowWidth - modalWidth - MARGIN);else if (left < 0) left = MARGIN;
+    if (top + modalHeight > windowHeight) top = Math.max(MARGIN, windowHeight - modalHeight - MARGIN);else if (top < 0) top = MARGIN;
+    setPosition({
+      top: top,
+      left: left
+    });
+  }, [modalWidth, modalHeight]);
+  return [position, updatePosition];
+};
+
 var _excluded$bh = ["children", "theme", "title", "testId"];
 var BadgeElement = function BadgeElement(_ref, forwardedRef) {
   var _classnames;
@@ -14171,7 +14363,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default["default"].createElement(BannerContent, null), React__default["default"].createElement(Button, {
-    theme: theme === PERSISTENT_BANNER_THEME.WARNING ? 'link-primary' : 'link-contrast',
+    theme: "link-contrast",
     onClick: onDismiss
   }, React__default["default"].createElement(IconTimes, null))) : React__default["default"].createElement(BannerContent, null));
 };
@@ -15653,7 +15845,7 @@ var CreateInputForm = function CreateInputForm(_ref) {
     flex: [1],
     flexItems: true
   }, React__default["default"].createElement("input", {
-    className: classnames__default["default"](styles$1u['text-field'], inputClassName),
+    className: classnames__default["default"](styles$1v['text-field'], inputClassName),
     autoCorrect: "off",
     autoComplete: "off",
     spellCheck: "false",
@@ -18872,7 +19064,7 @@ var usePhoneField = function usePhoneField(_ref) {
     'aria-describedby': hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
     'aria-invalid': hasError,
     autoFocus: autoFocus,
-    className: classnames__default["default"](styles$1u['text-field'], (_classnames = {}, _classnames[styles$1u['text-field--invalid']] = hasError, _classnames)),
+    className: classnames__default["default"](styles$1v['text-field'], (_classnames = {}, _classnames[styles$1v['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId,
     disabled: disabled,
     id: controllers.id,
@@ -65519,4 +65711,5 @@ exports.lastOfMonth = lastOfMonth;
 exports.nthWeekdayOfMonth = nthWeekdayOfMonth;
 exports.toast = toast;
 exports.useDataTableContext = useDataTableContext;
+exports.useModalPosition = useModalPosition;
 //# sourceMappingURL=index.js.map