@oliasoft-open-source/react-ui-library 4.12.0-beta-1 → 4.12.0-beta-2

package/dist/index.js

@@ -2207,7 +2207,7 @@ var index = function() {
   return ResizeObserver$2;
 }();
 var isProduction$3 = process.env.NODE_ENV === "production";
-function warning$i(condition, message2) {
+function warning$7(condition, message2) {
   if (!isProduction$3) {
     if (condition) {
       return;
@@ -2465,7 +2465,7 @@ function useTrackElements(_ref) {
   var enabled = _ref.enabled, onChange = _ref.onChange, environment2 = _ref.environment, ResizeObserverPolyfill = _ref.ResizeObserverPolyfill, overflowContainer = _ref.overflowContainer, triggerOption = _ref.triggerOption;
   var ResizeObserver2 = getResizeObserver(environment2, ResizeObserverPolyfill);
   useEffect(function() {
-    process.env.NODE_ENV !== "production" ? warning$i(ResizeObserver2, "This browser does not support ResizeObserver out of the box. We recommend to add a polyfill in order to utilize the full capabilities of react-laag. See: https://github.com/everweij/react-laag#resize-observer") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$7(ResizeObserver2, "This browser does not support ResizeObserver out of the box. We recommend to add a polyfill in order to utilize the full capabilities of react-laag. See: https://github.com/everweij/react-laag#resize-observer") : void 0;
   }, [ResizeObserver2]);
   var arrowRef = useRef(null);
   var hasTriggerOption = Boolean(triggerOption);
@@ -2586,7 +2586,7 @@ function useTrackElements(_ref) {
       if (!closestScrollContainerHasCorrectStyling) {
         closestScrollContainer.style.position = "relative";
       }
-      process.env.NODE_ENV !== "production" ? warning$i(closestScrollContainerHasCorrectStyling, `react-laag: Set the 'position' style of the nearest scroll-container to 'relative', 'absolute' or 'fixed', or set the 'overflowContainer' prop to true. This is needed in order to position the layer properly. Currently the scroll-container is positioned: "` + position3 + '". For now, "position: relative;" is added for you, but this behavior might be removed in the future. Visit https://react-laag.com/docs/#position-relative for more info.') : void 0;
+      process.env.NODE_ENV !== "production" ? warning$7(closestScrollContainerHasCorrectStyling, `react-laag: Set the 'position' style of the nearest scroll-container to 'relative', 'absolute' or 'fixed', or set the 'overflowContainer' prop to true. This is needed in order to position the layer properly. Currently the scroll-container is positioned: "` + position3 + '". For now, "position: relative;" is added for you, but this behavior might be removed in the future. Visit https://react-laag.com/docs/#position-relative for more info.') : void 0;
     }
     return scrollContainers;
   }, [environment2, overflowContainer]);
@@ -2684,7 +2684,7 @@ function useGroup(_ref2) {
     return possibleRegisterFn({
       shouldCloseWhenClickedOutside,
       closeChild: function closeChild() {
-        process.env.NODE_ENV !== "production" ? warning$i(onParentClose, "react-laag: You are using useLayer() in a nested setting but forgot to set the 'onParentClose()' callback in the options. This could lead to unexpected behavior.") : void 0;
+        process.env.NODE_ENV !== "production" ? warning$7(onParentClose, "react-laag: You are using useLayer() in a nested setting but forgot to set the 'onParentClose()' callback in the options. This could lead to unexpected behavior.") : void 0;
         if (onParentClose) {
           onParentClose();
         }
@@ -3709,12 +3709,12 @@ function useHover(_temp) {
   }];
 }
 const tooltip = "_tooltip_wli9z_1";
-const error$e = "_error_wli9z_15";
-const warning$h = "_warning_wli9z_19";
+const error$3 = "_error_wli9z_15";
+const warning$6 = "_warning_wli9z_19";
 const styles$Q = {
   tooltip,
-  error: error$e,
-  warning: warning$h
+  error: error$3,
+  warning: warning$6
 };
 const TooltipLayer = ({
   text: text2 = "",
@@ -3989,36 +3989,32 @@ const AccordionWithDefaultToggle = ({
     /* @__PURE__ */ jsx("div", { className: cx$2(styles$O.bordered, padding2 ? styles$O.padding : ""), children: content2 })
   ] });
 };
-const inputInTable$b = "_inputInTable_1k3a0_1";
-const error$d = "_error_1k3a0_7";
-const warning$g = "_warning_1k3a0_7";
-const inputHover$b = "_inputHover_1k3a0_13";
-const inputFocus$b = "_inputFocus_1k3a0_18";
-const inputError$b = "_inputError_1k3a0_25";
-const inputWarning$b = "_inputWarning_1k3a0_26";
-const inputDisabled$b = "_inputDisabled_1k3a0_61";
-const hideScrollbars$b = "_hideScrollbars_1k3a0_67";
-const button$3 = "_button_1k3a0_100";
-const active$8 = "_active_1k3a0_135";
-const green$1 = "_green_1k3a0_135";
-const red$1 = "_red_1k3a0_135";
-const orange$1 = "_orange_1k3a0_135";
-const icon$5 = "_icon_1k3a0_147";
-const iconOnly = "_iconOnly_1k3a0_153";
-const basic = "_basic_1k3a0_163";
-const muted$2 = "_muted_1k3a0_169";
-const disabled$9 = "_disabled_1k3a0_188";
-const small$c = "_small_1k3a0_198";
-const pill = "_pill_1k3a0_203";
-const round = "_round_1k3a0_204";
-const inverted$1 = "_inverted_1k3a0_310";
-const groupOrderFirst$4 = "_groupOrderFirst_1k3a0_340";
-const groupOrderMiddle$4 = "_groupOrderMiddle_1k3a0_341";
-const groupOrderLast$4 = "_groupOrderLast_1k3a0_342";
+const inputInTable$b = "_inputInTable_1m45a_1";
+const inputHover$b = "_inputHover_1m45a_13";
+const inputFocus$b = "_inputFocus_1m45a_18";
+const inputError$b = "_inputError_1m45a_25";
+const inputWarning$b = "_inputWarning_1m45a_26";
+const inputDisabled$b = "_inputDisabled_1m45a_61";
+const hideScrollbars$b = "_hideScrollbars_1m45a_67";
+const button$3 = "_button_1m45a_100";
+const active$8 = "_active_1m45a_135";
+const green$1 = "_green_1m45a_135";
+const red$1 = "_red_1m45a_135";
+const orange$1 = "_orange_1m45a_135";
+const icon$5 = "_icon_1m45a_147";
+const iconOnly = "_iconOnly_1m45a_153";
+const basic = "_basic_1m45a_163";
+const muted$2 = "_muted_1m45a_169";
+const disabled$9 = "_disabled_1m45a_188";
+const small$c = "_small_1m45a_198";
+const pill = "_pill_1m45a_203";
+const round = "_round_1m45a_204";
+const inverted$1 = "_inverted_1m45a_310";
+const groupOrderFirst$4 = "_groupOrderFirst_1m45a_340";
+const groupOrderMiddle$4 = "_groupOrderMiddle_1m45a_341";
+const groupOrderLast$4 = "_groupOrderLast_1m45a_342";
 const buttonStyles = {
   inputInTable: inputInTable$b,
-  error: error$d,
-  warning: warning$g,
   inputHover: inputHover$b,
   inputFocus: inputFocus$b,
   inputError: inputError$b,
@@ -4148,7 +4144,6 @@ const Button$1 = ({
         pill2 ? buttonStyles.pill : "",
         round2 ? buttonStyles.round : "",
         small2 ? buttonStyles.small : "",
-        error2 ? buttonStyles.error : warning2 ? buttonStyles.warning : "",
         styles2
       ),
       disabled: disabled2 || disabledContext,
@@ -4156,6 +4151,8 @@ const Button$1 = ({
       onClick,
       ...title2 ? { title: title2 } : {},
       style: { width: width2 },
+      "data-error": error2 || null,
+      "data-warning": warning2 || null,
       "data-testid": testId,
       to: url,
       children: [
@@ -4723,6 +4720,8 @@ const Trigger$1 = React__default.forwardRef(
           evt.preventDefault();
           onClickTrigger();
         },
+        "data-error": error2 || null,
+        "data-warning": warning2 || null,
         "data-testid": testId,
         children: /* @__PURE__ */ jsx(TriggerTooltip, { tooltip: tooltip2, error: error2, warning: warning2, children: wrappedTrigger })
       }
@@ -6491,8 +6490,8 @@ const center = "_center_11ofj_4";
 const muted$1 = "_muted_11ofj_7";
 const faint = "_faint_11ofj_10";
 const success$1 = "_success_11ofj_13";
-const warning$f = "_warning_11ofj_16";
-const error$c = "_error_11ofj_19";
+const warning$5 = "_warning_11ofj_16";
+const error$2 = "_error_11ofj_19";
 const small$9 = "_small_11ofj_22";
 const link$1 = "_link_11ofj_25";
 const styles$F = {
@@ -6501,8 +6500,8 @@ const styles$F = {
   muted: muted$1,
   faint,
   success: success$1,
-  warning: warning$f,
-  error: error$c,
+  warning: warning$5,
+  error: error$2,
   small: small$9,
   link: link$1
 };
@@ -6697,37 +6696,33 @@ const Dialog = ({ dialog: dialog2 }) => {
     }
   );
 };
-const inputInTable$a = "_inputInTable_13n8n_1";
-const error$b = "_error_13n8n_7";
-const warning$e = "_warning_13n8n_7";
-const inputHover$a = "_inputHover_13n8n_13";
-const inputFocus$a = "_inputFocus_13n8n_18";
-const inputError$a = "_inputError_13n8n_25";
-const inputWarning$a = "_inputWarning_13n8n_26";
-const inputDisabled$a = "_inputDisabled_13n8n_61";
-const hideScrollbars$a = "_hideScrollbars_13n8n_67";
-const inline$2 = "_inline_13n8n_90";
-const left$2 = "_left_13n8n_93";
-const right$6 = "_right_13n8n_96";
-const fixed$1 = "_fixed_13n8n_99";
-const border$1 = "_border_13n8n_111";
-const shadow = "_shadow_13n8n_117";
-const drawerContent = "_drawerContent_13n8n_120";
-const isResizing = "_isResizing_13n8n_132";
-const toggleButton = "_toggleButton_13n8n_143";
-const top = "_top_13n8n_156";
-const bottom = "_bottom_13n8n_159";
-const toggleButtonOpen = "_toggleButtonOpen_13n8n_162";
-const tabs$1 = "_tabs_13n8n_165";
-const tab$1 = "_tab_13n8n_165";
-const active$4 = "_active_13n8n_197";
-const disabled$6 = "_disabled_13n8n_222";
-const tabsContent = "_tabsContent_13n8n_229";
-const resizeHandle = "_resizeHandle_13n8n_235";
+const inputInTable$a = "_inputInTable_1f40p_1";
+const inputHover$a = "_inputHover_1f40p_13";
+const inputFocus$a = "_inputFocus_1f40p_18";
+const inputError$a = "_inputError_1f40p_25";
+const inputWarning$a = "_inputWarning_1f40p_26";
+const inputDisabled$a = "_inputDisabled_1f40p_61";
+const hideScrollbars$a = "_hideScrollbars_1f40p_67";
+const inline$2 = "_inline_1f40p_90";
+const left$2 = "_left_1f40p_93";
+const right$6 = "_right_1f40p_96";
+const fixed$1 = "_fixed_1f40p_99";
+const border$1 = "_border_1f40p_111";
+const shadow = "_shadow_1f40p_117";
+const drawerContent = "_drawerContent_1f40p_120";
+const isResizing = "_isResizing_1f40p_132";
+const toggleButton = "_toggleButton_1f40p_143";
+const top = "_top_1f40p_156";
+const bottom = "_bottom_1f40p_159";
+const toggleButtonOpen = "_toggleButtonOpen_1f40p_162";
+const tabs$1 = "_tabs_1f40p_165";
+const tab$1 = "_tab_1f40p_165";
+const active$4 = "_active_1f40p_197";
+const disabled$6 = "_disabled_1f40p_222";
+const tabsContent = "_tabsContent_1f40p_229";
+const resizeHandle = "_resizeHandle_1f40p_235";
 const styles$C = {
   inputInTable: inputInTable$a,
-  error: error$b,
-  warning: warning$e,
   inputHover: inputHover$a,
   inputFocus: inputFocus$a,
   inputError: inputError$a,
@@ -9022,26 +9017,22 @@ const InputGroup = ({
     }
   );
 };
-const inputInTable$9 = "_inputInTable_rhzw6_1";
-const error$a = "_error_rhzw6_7";
-const warning$d = "_warning_rhzw6_7";
-const inputHover$9 = "_inputHover_rhzw6_13";
-const inputFocus$9 = "_inputFocus_rhzw6_18";
-const inputError$9 = "_inputError_rhzw6_25";
-const inputWarning$9 = "_inputWarning_rhzw6_26";
-const inputDisabled$9 = "_inputDisabled_rhzw6_61";
-const hideScrollbars$9 = "_hideScrollbars_rhzw6_67";
-const input$1 = "_input_rhzw6_1";
-const isInTable$3 = "_isInTable_rhzw6_100";
-const small$8 = "_small_rhzw6_124";
-const right$5 = "_right_rhzw6_170";
-const groupOrderFirst$3 = "_groupOrderFirst_rhzw6_173";
-const groupOrderMiddle$3 = "_groupOrderMiddle_rhzw6_174";
-const groupOrderLast$3 = "_groupOrderLast_rhzw6_175";
+const inputInTable$9 = "_inputInTable_1285q_1";
+const inputHover$9 = "_inputHover_1285q_13";
+const inputFocus$9 = "_inputFocus_1285q_18";
+const inputError$9 = "_inputError_1285q_25";
+const inputWarning$9 = "_inputWarning_1285q_26";
+const inputDisabled$9 = "_inputDisabled_1285q_61";
+const hideScrollbars$9 = "_hideScrollbars_1285q_67";
+const input$1 = "_input_1285q_1";
+const isInTable$3 = "_isInTable_1285q_100";
+const small$8 = "_small_1285q_124";
+const right$5 = "_right_1285q_170";
+const groupOrderFirst$3 = "_groupOrderFirst_1285q_173";
+const groupOrderMiddle$3 = "_groupOrderMiddle_1285q_174";
+const groupOrderLast$3 = "_groupOrderLast_1285q_175";
 const styles$z = {
   inputInTable: inputInTable$9,
-  error: error$a,
-  warning: warning$d,
   inputHover: inputHover$9,
   inputFocus: inputFocus$9,
   inputError: inputError$9,
@@ -9131,12 +9122,13 @@ const Input$1 = forwardRef(
             disabled: disabled2 || disabledContext,
             className: cx$2(
               styles$z.input,
-              error2 ? styles$z.error : warning2 ? styles$z.warning : "",
               right2 ? styles$z.right : "",
               small2 ? styles$z.small : "",
               isInTable2 ? styles$z.isInTable : ""
             ),
             style: { width: width2 },
+            "data-error": error2 || null,
+            "data-warning": warning2 || null,
             "data-testid": testId
           }
         )
@@ -10886,7 +10878,7 @@ function isPlainObject$3(obj) {
   }
   return proto === baseProto;
 }
-function warning$c(message2) {
+function warning$4(message2) {
   if (typeof console !== "undefined" && typeof console.error === "function") {
     console.error(message2);
   }
@@ -10897,7 +10889,7 @@ function warning$c(message2) {
 }
 function verifyPlainObject(value, displayName, methodName) {
   if (!isPlainObject$3(value)) {
-    warning$c(methodName + "() in " + displayName + " must return a plain object. Instead received " + value + ".");
+    warning$4(methodName + "() in " + displayName + " must return a plain object. Instead received " + value + ".");
   }
 }
 function wrapMapToPropsConstant(getConstant) {
@@ -10995,7 +10987,7 @@ function verify(selector, methodName, displayName) {
     throw new Error("Unexpected value for " + methodName + " in " + displayName + ".");
   } else if (methodName === "mapStateToProps" || methodName === "mapDispatchToProps") {
     if (!Object.prototype.hasOwnProperty.call(selector, "dependsOnOwnProps")) {
-      warning$c("The selector for " + methodName + " of " + displayName + " did not specify a value for dependsOnOwnProps.");
+      warning$4("The selector for " + methodName + " of " + displayName + " did not specify a value for dependsOnOwnProps.");
     }
   }
 }
@@ -11388,8 +11380,8 @@ function log(type, message2) {
   }
   (_console = console)[type].apply(_console, getFormattedMessage(message2));
 }
-var warning$b = log.bind(null, "warn");
-var error$9 = log.bind(null, "error");
+var warning$3 = log.bind(null, "warn");
+var error$1 = log.bind(null, "error");
 function noop$1() {
 }
 function getOptions(shared2, fromBinding) {
@@ -11438,13 +11430,13 @@ var ErrorBoundary = function(_React$Component) {
       var callbacks2 = _this.getCallbacks();
       if (callbacks2.isDragging()) {
         callbacks2.tryAbort();
-        process.env.NODE_ENV !== "production" ? warning$b("\n        An error was caught by our window 'error' event listener while a drag was occurring.\n        The active drag has been aborted.\n      ") : void 0;
+        process.env.NODE_ENV !== "production" ? warning$3("\n        An error was caught by our window 'error' event listener while a drag was occurring.\n        The active drag has been aborted.\n      ") : void 0;
       }
       var err = event.error;
       if (err instanceof RbdInvariant) {
         event.preventDefault();
         if (process.env.NODE_ENV !== "production") {
-          error$9(err.message);
+          error$1(err.message);
         }
       }
     };
@@ -11469,7 +11461,7 @@ var ErrorBoundary = function(_React$Component) {
   _proto.componentDidCatch = function componentDidCatch(err) {
     if (err instanceof RbdInvariant) {
       if (process.env.NODE_ENV !== "production") {
-        error$9(err.message);
+        error$1(err.message);
       }
       this.setState({});
       return;
@@ -13748,7 +13740,7 @@ function checkIndexes(insideDestination) {
     var hasError = Boolean(errors2[index2]);
     return hasError ? "[🔥" + index2 + "]" : "" + index2;
   }).join(", ");
-  process.env.NODE_ENV !== "production" ? warning$b("\n    Detected non-consecutive <Draggable /> indexes.\n\n    (This can cause unexpected bugs)\n\n    " + formatted + "\n  ") : void 0;
+  process.env.NODE_ENV !== "production" ? warning$3("\n    Detected non-consecutive <Draggable /> indexes.\n\n    (This can cause unexpected bugs)\n\n    " + formatted + "\n  ") : void 0;
 }
 function validateDimensions(critical, dimensions) {
   if (process.env.NODE_ENV !== "production") {
@@ -14087,11 +14079,11 @@ var getExpiringAnnounce = function(announce) {
   });
   var result = function result2(message2) {
     if (wasCalled) {
-      process.env.NODE_ENV !== "production" ? warning$b("Announcement already made. Not making a second announcement") : void 0;
+      process.env.NODE_ENV !== "production" ? warning$3("Announcement already made. Not making a second announcement") : void 0;
       return;
     }
     if (isExpired) {
-      process.env.NODE_ENV !== "production" ? warning$b("\n        Announcements cannot be made asynchronously.\n        Default message has already been announced.\n      ") : void 0;
+      process.env.NODE_ENV !== "production" ? warning$3("\n        Announcements cannot be made asynchronously.\n        Default message has already been announced.\n      ") : void 0;
       return;
     }
     wasCalled = true;
@@ -14655,7 +14647,7 @@ function shouldPublishUpdate(registry, dragging, entry) {
   }
   var home2 = registry.droppable.getById(entry.descriptor.droppableId);
   if (home2.descriptor.mode !== "virtual") {
-    process.env.NODE_ENV !== "production" ? warning$b("\n      You are attempting to add or remove a Draggable [id: " + entry.descriptor.id + "]\n      while a drag is occurring. This is only supported for virtual lists.\n\n      See https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/virtual-lists.md\n    ") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("\n      You are attempting to add or remove a Draggable [id: " + entry.descriptor.id + "]\n      while a drag is occurring. This is only supported for virtual lists.\n\n      See https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/virtual-lists.md\n    ") : void 0;
     return false;
   }
   return true;
@@ -14830,7 +14822,7 @@ var getPercentage = function(_ref) {
   var startOfRange = _ref.startOfRange, endOfRange = _ref.endOfRange, current = _ref.current;
   var range2 = endOfRange - startOfRange;
   if (range2 === 0) {
-    process.env.NODE_ENV !== "production" ? warning$b("\n      Detected distance range of 0 in the fluid auto scroller\n      This is unexpected and would cause a divide by 0 issue.\n      Not allowing an auto scroll\n    ") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("\n      Detected distance range of 0 in the fluid auto scroller\n      This is unexpected and would cause a divide by 0 issue.\n      Not allowing an auto scroll\n    ") : void 0;
     return 0;
   }
   var currentInRange = current - startOfRange;
@@ -15446,18 +15438,18 @@ function findDragHandle(contextId, draggableId) {
   var selector = "[" + dragHandle.contextId + '="' + contextId + '"]';
   var possible = toArray(document.querySelectorAll(selector));
   if (!possible.length) {
-    process.env.NODE_ENV !== "production" ? warning$b('Unable to find any drag handles in the context "' + contextId + '"') : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3('Unable to find any drag handles in the context "' + contextId + '"') : void 0;
     return null;
   }
   var handle = find(possible, function(el2) {
     return el2.getAttribute(dragHandle.draggableId) === draggableId;
   });
   if (!handle) {
-    process.env.NODE_ENV !== "production" ? warning$b('Unable to find drag handle with id "' + draggableId + '" as no handle with a matching id was found') : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3('Unable to find drag handle with id "' + draggableId + '" as no handle with a matching id was found') : void 0;
     return null;
   }
   if (!isHtmlElement(handle)) {
-    process.env.NODE_ENV !== "production" ? warning$b("drag handle needs to be a HTMLElement") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("drag handle needs to be a HTMLElement") : void 0;
     return null;
   }
   return handle;
@@ -15719,7 +15711,7 @@ function useAnnouncer(contextId) {
       el2.textContent = message2;
       return;
     }
-    process.env.NODE_ENV !== "production" ? warning$b('\n      A screen reader message was trying to be announced but it was unable to do so.\n      This can occur if you unmount your <DragDropContext /> in your onDragEnd.\n      Consider calling provided.announce() before the unmount so that the instruction will\n      not be lost for users relying on a screen reader.\n\n      Message not passed to screen reader:\n\n      "' + message2 + '"\n    ') : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3('\n      A screen reader message was trying to be announced but it was unable to do so.\n      This can occur if you unmount your <DragDropContext /> in your onDragEnd.\n      Consider calling provided.announce() before the unmount so that the instruction will\n      not be lost for users relying on a screen reader.\n\n      Message not passed to screen reader:\n\n      "' + message2 + '"\n    ') : void 0;
   }, []);
   return announce;
 }
@@ -15805,20 +15797,20 @@ var checkReactVersion = function(peerDepValue, actualValue) {
   if (isSatisfied(peerDep, actual)) {
     return;
   }
-  process.env.NODE_ENV !== "production" ? warning$b("\n    React version: [" + actual.raw + "]\n    does not satisfy expected peer dependency version: [" + peerDep.raw + "]\n\n    This can result in run time bugs, and even fatal crashes\n  ") : void 0;
+  process.env.NODE_ENV !== "production" ? warning$3("\n    React version: [" + actual.raw + "]\n    does not satisfy expected peer dependency version: [" + peerDep.raw + "]\n\n    This can result in run time bugs, and even fatal crashes\n  ") : void 0;
 };
 var suffix = "\n  We expect a html5 doctype: <!doctype html>\n  This is to ensure consistent browser layout and measurement\n\n  More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/doctype.md\n";
 var checkDoctype = function(doc2) {
   var doctype = doc2.doctype;
   if (!doctype) {
-    process.env.NODE_ENV !== "production" ? warning$b("\n      No <!doctype html> found.\n\n      " + suffix + "\n    ") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("\n      No <!doctype html> found.\n\n      " + suffix + "\n    ") : void 0;
     return;
   }
   if (doctype.name.toLowerCase() !== "html") {
-    process.env.NODE_ENV !== "production" ? warning$b("\n      Unexpected <!doctype> found: (" + doctype.name + ")\n\n      " + suffix + "\n    ") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("\n      Unexpected <!doctype> found: (" + doctype.name + ")\n\n      " + suffix + "\n    ") : void 0;
   }
   if (doctype.publicId !== "") {
-    process.env.NODE_ENV !== "production" ? warning$b("\n      Unexpected <!doctype> publicId found: (" + doctype.publicId + ")\n      A html5 doctype does not have a publicId\n\n      " + suffix + "\n    ") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("\n      Unexpected <!doctype> publicId found: (" + doctype.publicId + ")\n      A html5 doctype does not have a publicId\n\n      " + suffix + "\n    ") : void 0;
   }
 };
 function useDev(useHook) {
@@ -15832,7 +15824,7 @@ function useDevSetupWarning(fn, inputs) {
       try {
         fn();
       } catch (e2) {
-        error$9("\n          A setup problem was encountered.\n\n          > " + e2.message + "\n        ");
+        error$1("\n          A setup problem was encountered.\n\n          > " + e2.message + "\n        ");
       }
     }, inputs);
   });
@@ -16599,7 +16591,7 @@ function getSelector(contextId) {
 function findClosestDragHandleFromEvent(contextId, event) {
   var target = event.target;
   if (!isElement$1(target)) {
-    process.env.NODE_ENV !== "production" ? warning$b("event.target must be a Element") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("event.target must be a Element") : void 0;
     return null;
   }
   var selector = getSelector(contextId);
@@ -16608,7 +16600,7 @@ function findClosestDragHandleFromEvent(contextId, event) {
     return null;
   }
   if (!isHtmlElement(handle)) {
-    process.env.NODE_ENV !== "production" ? warning$b("drag handle must be a HTMLElement") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("drag handle must be a HTMLElement") : void 0;
     return null;
   }
   return handle;
@@ -16630,7 +16622,7 @@ function findDraggable(contextId, draggableId) {
     return null;
   }
   if (!isHtmlElement(draggable$1)) {
-    process.env.NODE_ENV !== "production" ? warning$b("Draggable element is not a HTMLElement") : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("Draggable element is not a HTMLElement") : void 0;
     return null;
   }
   return draggable$1;
@@ -16642,13 +16634,13 @@ function _isActive(_ref) {
   var expected = _ref.expected, phase = _ref.phase, isLockActive = _ref.isLockActive, shouldWarn = _ref.shouldWarn;
   if (!isLockActive()) {
     if (shouldWarn) {
-      process.env.NODE_ENV !== "production" ? warning$b("\n        Cannot perform action.\n        The sensor no longer has an action lock.\n\n        Tips:\n\n        - Throw away your action handlers when forceStop() is called\n        - Check actions.isActive() if you really need to\n      ") : void 0;
+      process.env.NODE_ENV !== "production" ? warning$3("\n        Cannot perform action.\n        The sensor no longer has an action lock.\n\n        Tips:\n\n        - Throw away your action handlers when forceStop() is called\n        - Check actions.isActive() if you really need to\n      ") : void 0;
     }
     return false;
   }
   if (expected !== phase) {
     if (shouldWarn) {
-      process.env.NODE_ENV !== "production" ? warning$b("\n        Cannot perform action.\n        The actions you used belong to an outdated phase\n\n        Current phase: " + expected + "\n        You called an action from outdated phase: " + phase + "\n\n        Tips:\n\n        - Do not use preDragActions actions after calling preDragActions.lift()\n      ") : void 0;
+      process.env.NODE_ENV !== "production" ? warning$3("\n        Cannot perform action.\n        The actions you used belong to an outdated phase\n\n        Current phase: " + expected + "\n        You called an action from outdated phase: " + phase + "\n\n        Tips:\n\n        - Do not use preDragActions actions after calling preDragActions.lift()\n      ") : void 0;
     }
     return false;
   }
@@ -16661,7 +16653,7 @@ function canStart(_ref2) {
   }
   var entry = registry.draggable.findById(draggableId);
   if (!entry) {
-    process.env.NODE_ENV !== "production" ? warning$b("Unable to find draggable with id: " + draggableId) : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("Unable to find draggable with id: " + draggableId) : void 0;
     return false;
   }
   if (!entry.options.isEnabled) {
@@ -16686,7 +16678,7 @@ function tryStart(_ref3) {
   var entry = registry.draggable.getById(draggableId);
   var el2 = findDraggable(contextId, entry.descriptor.id);
   if (!el2) {
-    process.env.NODE_ENV !== "production" ? warning$b("Unable to find draggable element with id: " + draggableId) : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3("Unable to find draggable element with id: " + draggableId) : void 0;
     return null;
   }
   if (sourceEvent && !entry.options.canDragInteractiveElements && isEventInInteractiveElement(el2, sourceEvent)) {
@@ -16980,7 +16972,7 @@ function App(props) {
   }, [announce, autoScroller, dimensionMarshal, focusMarshal, getResponders, styleMarshal]);
   if (process.env.NODE_ENV !== "production") {
     if (lazyStoreRef.current && lazyStoreRef.current !== store) {
-      process.env.NODE_ENV !== "production" ? warning$b("unexpected store change") : void 0;
+      process.env.NODE_ENV !== "production" ? warning$3("unexpected store change") : void 0;
     }
   }
   lazyStoreRef.current = store;
@@ -17101,7 +17093,7 @@ var isBodyScrollable = function isBodyScrollable2() {
   if (isBoth(htmlOverflow, isVisible$1)) {
     return false;
   }
-  process.env.NODE_ENV !== "production" ? warning$b("\n    We have detected that your <body> element might be a scroll container.\n    We have found no reliable way of detecting whether the <body> element is a scroll container.\n    Under most circumstances a <body> scroll bar will be on the <html> element (document.documentElement)\n\n    Because we cannot determine if the <body> is a scroll container, and generally it is not one,\n    we will be treating the <body> as *not* a scroll container\n\n    More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-detect-scroll-containers.md\n  ") : void 0;
+  process.env.NODE_ENV !== "production" ? warning$3("\n    We have detected that your <body> element might be a scroll container.\n    We have found no reliable way of detecting whether the <body> element is a scroll container.\n    Under most circumstances a <body> scroll bar will be on the <html> element (document.documentElement)\n\n    Because we cannot determine if the <body> is a scroll container, and generally it is not one,\n    we will be treating the <body> as *not* a scroll container\n\n    More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-detect-scroll-containers.md\n  ") : void 0;
   return false;
 };
 var getClosestScrollable = function getClosestScrollable2(el2) {
@@ -17127,7 +17119,7 @@ var checkForNestedScrollContainers = function(scrollable) {
   if (!anotherScrollParent) {
     return;
   }
-  process.env.NODE_ENV !== "production" ? warning$b("\n    Droppable: unsupported nested scroll container detected.\n    A Droppable can only have one scroll parent (which can be itself)\n    Nested scroll containers are currently not supported.\n\n    We hope to support nested scroll containers soon: https://github.com/atlassian/react-beautiful-dnd/issues/131\n  ") : void 0;
+  process.env.NODE_ENV !== "production" ? warning$3("\n    Droppable: unsupported nested scroll container detected.\n    A Droppable can only have one scroll parent (which can be itself)\n    Nested scroll containers are currently not supported.\n\n    We hope to support nested scroll containers soon: https://github.com/atlassian/react-beautiful-dnd/issues/131\n  ") : void 0;
 };
 var getScroll$1 = function(el2) {
   return {
@@ -17408,7 +17400,7 @@ function useDroppablePublisher(args) {
     registry.droppable.register(entry);
     return function() {
       if (whileDraggingRef.current) {
-        process.env.NODE_ENV !== "production" ? warning$b("Unsupported: changing the droppableId or type of a Droppable during a drag") : void 0;
+        process.env.NODE_ENV !== "production" ? warning$3("Unsupported: changing the droppableId or type of a Droppable during a drag") : void 0;
         dragStopped();
       }
       registry.droppable.unregister(entry);
@@ -17555,7 +17547,7 @@ var standard = [function placeholder(_ref4) {
   if (ref2) {
     return;
   }
-  process.env.NODE_ENV !== "production" ? warning$b('\n      Droppable setup issue [droppableId: "' + props.droppableId + '"]:\n      DroppableProvided > placeholder could not be found.\n\n      Please be sure to add the {provided.placeholder} React Node as a child of your Droppable.\n      More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md\n    ') : void 0;
+  process.env.NODE_ENV !== "production" ? warning$3('\n      Droppable setup issue [droppableId: "' + props.droppableId + '"]:\n      DroppableProvided > placeholder could not be found.\n\n      Please be sure to add the {provided.placeholder} React Node as a child of your Droppable.\n      More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md\n    ') : void 0;
 }];
 var virtual = [function hasClone(_ref5) {
   var props = _ref5.props;
@@ -18668,51 +18660,47 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-const inputInTable$8 = "_inputInTable_dlqxe_1";
-const error$8 = "_error_dlqxe_7";
-const warning$a = "_warning_dlqxe_7";
-const inputHover$8 = "_inputHover_dlqxe_13";
-const inputFocus$8 = "_inputFocus_dlqxe_18";
-const inputError$8 = "_inputError_dlqxe_25";
-const inputWarning$8 = "_inputWarning_dlqxe_26";
-const inputDisabled$8 = "_inputDisabled_dlqxe_61";
-const hideScrollbars$8 = "_hideScrollbars_dlqxe_67";
-const header$1 = "_header_dlqxe_77";
-const headerTitle = "_headerTitle_dlqxe_77";
-const heading$3 = "_heading_dlqxe_78";
-const itemHeader = "_itemHeader_dlqxe_78";
-const narrow = "_narrow_dlqxe_81";
-const stickyHeader = "_stickyHeader_dlqxe_85";
-const title$3 = "_title_dlqxe_96";
-const name = "_name_dlqxe_102";
-const iconTooltipMargin = "_iconTooltipMargin_dlqxe_105";
-const bold = "_bold_dlqxe_108";
-const toggleNarrow = "_toggleNarrow_dlqxe_117";
-const drag$1 = "_drag_dlqxe_135";
-const list$1 = "_list_dlqxe_155";
-const bordered$1 = "_bordered_dlqxe_159";
-const item$4 = "_item_dlqxe_78";
-const action = "_action_dlqxe_192";
-const active$3 = "_active_dlqxe_195";
-const indented = "_indented_dlqxe_202";
-const disabled$5 = "_disabled_dlqxe_215";
-const label$6 = "_label_dlqxe_226";
-const details$2 = "_details_dlqxe_237";
-const metadata = "_metadata_dlqxe_238";
-const itemContent = "_itemContent_dlqxe_246";
-const indentIcon = "_indentIcon_dlqxe_253";
-const expandIcon = "_expandIcon_dlqxe_258";
-const expanded = "_expanded_dlqxe_265";
-const right$4 = "_right_dlqxe_268";
-const actions = "_actions_dlqxe_276";
-const scrollableList = "_scrollableList_dlqxe_281";
-const infiniteScrollContainer = "_infiniteScrollContainer_dlqxe_286";
-const hideScrollbar = "_hideScrollbar_dlqxe_67";
-const noPointerEvents = "_noPointerEvents_dlqxe_303";
+const inputInTable$8 = "_inputInTable_1llou_1";
+const inputHover$8 = "_inputHover_1llou_13";
+const inputFocus$8 = "_inputFocus_1llou_18";
+const inputError$8 = "_inputError_1llou_25";
+const inputWarning$8 = "_inputWarning_1llou_26";
+const inputDisabled$8 = "_inputDisabled_1llou_61";
+const hideScrollbars$8 = "_hideScrollbars_1llou_67";
+const header$1 = "_header_1llou_77";
+const headerTitle = "_headerTitle_1llou_77";
+const heading$3 = "_heading_1llou_78";
+const itemHeader = "_itemHeader_1llou_78";
+const narrow = "_narrow_1llou_81";
+const stickyHeader = "_stickyHeader_1llou_85";
+const title$3 = "_title_1llou_96";
+const name = "_name_1llou_102";
+const iconTooltipMargin = "_iconTooltipMargin_1llou_105";
+const bold = "_bold_1llou_108";
+const toggleNarrow = "_toggleNarrow_1llou_117";
+const drag$1 = "_drag_1llou_135";
+const list$1 = "_list_1llou_155";
+const bordered$1 = "_bordered_1llou_159";
+const item$4 = "_item_1llou_78";
+const action = "_action_1llou_192";
+const active$3 = "_active_1llou_195";
+const indented = "_indented_1llou_202";
+const disabled$5 = "_disabled_1llou_215";
+const label$6 = "_label_1llou_226";
+const details$2 = "_details_1llou_237";
+const metadata = "_metadata_1llou_238";
+const itemContent = "_itemContent_1llou_246";
+const indentIcon = "_indentIcon_1llou_253";
+const expandIcon = "_expandIcon_1llou_258";
+const expanded = "_expanded_1llou_265";
+const right$4 = "_right_1llou_268";
+const actions = "_actions_1llou_276";
+const scrollableList = "_scrollableList_1llou_281";
+const infiniteScrollContainer = "_infiniteScrollContainer_1llou_286";
+const hideScrollbar = "_hideScrollbar_1llou_67";
+const noPointerEvents = "_noPointerEvents_1llou_303";
 const listStyles = {
   inputInTable: inputInTable$8,
-  error: error$8,
-  warning: warning$a,
   inputHover: inputHover$8,
   inputFocus: inputFocus$8,
   inputError: inputError$8,
@@ -19203,31 +19191,29 @@ const List = ({
     }
   );
 };
-const inputInTable$7 = "_inputInTable_1q2d1_1";
-const error$7 = "_error_1q2d1_7";
-const warning$9 = "_warning_1q2d1_7";
-const inputHover$7 = "_inputHover_1q2d1_13";
-const inputFocus$7 = "_inputFocus_1q2d1_18";
-const inputError$7 = "_inputError_1q2d1_25";
-const inputWarning$7 = "_inputWarning_1q2d1_26";
-const inputDisabled$7 = "_inputDisabled_1q2d1_61";
-const hideScrollbars$7 = "_hideScrollbars_1q2d1_67";
-const container$1 = "_container_1q2d1_83";
-const block$1 = "_block_1q2d1_101";
-const info = "_info_1q2d1_104";
-const success = "_success_1q2d1_108";
-const content$1 = "_content_1q2d1_120";
-const heading$2 = "_heading_1q2d1_124";
-const icon$3 = "_icon_1q2d1_131";
-const dismiss$1 = "_dismiss_1q2d1_139";
-const absolute = "_absolute_1q2d1_143";
-const legendToggle = "_legendToggle_1q2d1_155";
-const detailsText = "_detailsText_1q2d1_165";
-const footer$1 = "_footer_1q2d1_169";
+const inputInTable$7 = "_inputInTable_1okhq_1";
+const inputHover$7 = "_inputHover_1okhq_13";
+const inputFocus$7 = "_inputFocus_1okhq_18";
+const inputError$7 = "_inputError_1okhq_25";
+const inputWarning$7 = "_inputWarning_1okhq_26";
+const inputDisabled$7 = "_inputDisabled_1okhq_61";
+const hideScrollbars$7 = "_hideScrollbars_1okhq_67";
+const container$1 = "_container_1okhq_83";
+const block$1 = "_block_1okhq_101";
+const info = "_info_1okhq_104";
+const success = "_success_1okhq_108";
+const warning$2 = "_warning_1okhq_112";
+const error = "_error_1okhq_116";
+const content$1 = "_content_1okhq_120";
+const heading$2 = "_heading_1okhq_124";
+const icon$3 = "_icon_1okhq_131";
+const dismiss$1 = "_dismiss_1okhq_139";
+const absolute = "_absolute_1okhq_143";
+const legendToggle = "_legendToggle_1okhq_155";
+const detailsText = "_detailsText_1okhq_165";
+const footer$1 = "_footer_1okhq_169";
 const styles$s = {
   inputInTable: inputInTable$7,
-  error: error$7,
-  warning: warning$9,
   inputHover: inputHover$7,
   inputFocus: inputFocus$7,
   inputError: inputError$7,
@@ -19238,6 +19224,8 @@ const styles$s = {
   block: block$1,
   info,
   success,
+  warning: warning$2,
+  error,
   content: content$1,
   heading: heading$2,
   icon: icon$3,
@@ -19605,27 +19593,23 @@ const Page = ({
     }
   );
 };
-const inputInTable$6 = "_inputInTable_1nzfr_1";
-const error$6 = "_error_1nzfr_7";
-const warning$8 = "_warning_1nzfr_7";
-const inputHover$6 = "_inputHover_1nzfr_13";
-const inputFocus$6 = "_inputFocus_1nzfr_18";
-const inputError$6 = "_inputError_1nzfr_25";
-const inputWarning$6 = "_inputWarning_1nzfr_26";
-const inputDisabled$6 = "_inputDisabled_1nzfr_61";
-const hideScrollbars$6 = "_hideScrollbars_1nzfr_67";
-const select = "_select_1nzfr_77";
-const isInTable$2 = "_isInTable_1nzfr_121";
-const unSelected = "_unSelected_1nzfr_133";
-const small$6 = "_small_1nzfr_174";
-const right$3 = "_right_1nzfr_182";
-const groupOrderFirst$1 = "_groupOrderFirst_1nzfr_193";
-const groupOrderMiddle$1 = "_groupOrderMiddle_1nzfr_194";
-const groupOrderLast$1 = "_groupOrderLast_1nzfr_198";
+const inputInTable$6 = "_inputInTable_sl2b5_1";
+const inputHover$6 = "_inputHover_sl2b5_13";
+const inputFocus$6 = "_inputFocus_sl2b5_18";
+const inputError$6 = "_inputError_sl2b5_25";
+const inputWarning$6 = "_inputWarning_sl2b5_26";
+const inputDisabled$6 = "_inputDisabled_sl2b5_61";
+const hideScrollbars$6 = "_hideScrollbars_sl2b5_67";
+const select = "_select_sl2b5_77";
+const isInTable$2 = "_isInTable_sl2b5_121";
+const unSelected = "_unSelected_sl2b5_133";
+const small$6 = "_small_sl2b5_174";
+const right$3 = "_right_sl2b5_182";
+const groupOrderFirst$1 = "_groupOrderFirst_sl2b5_193";
+const groupOrderMiddle$1 = "_groupOrderMiddle_sl2b5_194";
+const groupOrderLast$1 = "_groupOrderLast_sl2b5_198";
 const styles$o = {
   inputInTable: inputInTable$6,
-  error: error$6,
-  warning: warning$8,
   inputHover: inputHover$6,
   inputFocus: inputFocus$6,
   inputError: inputError$6,
@@ -19731,7 +19715,6 @@ const NativeSelect = ({
           className: cx$2(
             styles$o.select,
             isUnselected ? styles$o.unSelected : "",
-            error2 ? styles$o.error : warning2 ? styles$o.warning : "",
             right2 ? styles$o.right : "",
             small2 ? styles$o.small : "",
             isInTable2 ? styles$o.isInTable : "",
@@ -19759,6 +19742,8 @@ const NativeSelect = ({
           tabIndex,
           value: internalValue,
           disabled: disabled2 || disabledContext,
+          "data-error": error2 || null,
+          "data-warning": warning2 || null,
           "data-testid": testId,
           children: viewOptions
         }
@@ -20689,41 +20674,37 @@ const Layer = ({
     }
   );
 };
-const inputInTable$5 = "_inputInTable_nec64_1";
-const error$5 = "_error_nec64_7";
-const warning$7 = "_warning_nec64_7";
-const inputHover$5 = "_inputHover_nec64_13";
-const inputFocus$5 = "_inputFocus_nec64_18";
-const inputError$5 = "_inputError_nec64_25";
-const inputWarning$5 = "_inputWarning_nec64_26";
-const inputDisabled$5 = "_inputDisabled_nec64_61";
-const hideScrollbars$5 = "_hideScrollbars_nec64_67";
-const trigger$1 = "_trigger_nec64_77";
-const isInTable$1 = "_isInTable_nec64_93";
-const input = "_input_nec64_1";
-const isOpen = "_isOpen_nec64_114";
-const disabled$3 = "_disabled_nec64_156";
-const icons = "_icons_nec64_162";
-const clearAll = "_clearAll_nec64_169";
-const iconOpen = "_iconOpen_nec64_170";
-const small$4 = "_small_nec64_181";
-const triggerInputContainer = "_triggerInputContainer_nec64_189";
-const right$2 = "_right_nec64_198";
-const multiOptions = "_multiOptions_nec64_211";
-const multiOption = "_multiOption_nec64_211";
-const label$4 = "_label_nec64_239";
-const closeMultiOption = "_closeMultiOption_nec64_242";
-const focus = "_focus_nec64_253";
-const selectedSingleValue = "_selectedSingleValue_nec64_257";
-const placeHolder = "_placeHolder_nec64_258";
-const groupOrderFirst = "_groupOrderFirst_nec64_297";
-const groupOrderMiddle = "_groupOrderMiddle_nec64_298";
-const groupOrderLast = "_groupOrderLast_nec64_302";
-const detailedLabel = "_detailedLabel_nec64_307";
+const inputInTable$5 = "_inputInTable_7uwhv_1";
+const inputHover$5 = "_inputHover_7uwhv_13";
+const inputFocus$5 = "_inputFocus_7uwhv_18";
+const inputError$5 = "_inputError_7uwhv_25";
+const inputWarning$5 = "_inputWarning_7uwhv_26";
+const inputDisabled$5 = "_inputDisabled_7uwhv_61";
+const hideScrollbars$5 = "_hideScrollbars_7uwhv_67";
+const trigger$1 = "_trigger_7uwhv_77";
+const isInTable$1 = "_isInTable_7uwhv_93";
+const input = "_input_7uwhv_1";
+const isOpen = "_isOpen_7uwhv_114";
+const disabled$3 = "_disabled_7uwhv_156";
+const icons = "_icons_7uwhv_162";
+const clearAll = "_clearAll_7uwhv_169";
+const iconOpen = "_iconOpen_7uwhv_170";
+const small$4 = "_small_7uwhv_181";
+const triggerInputContainer = "_triggerInputContainer_7uwhv_189";
+const right$2 = "_right_7uwhv_198";
+const multiOptions = "_multiOptions_7uwhv_211";
+const multiOption = "_multiOption_7uwhv_211";
+const label$4 = "_label_7uwhv_239";
+const closeMultiOption = "_closeMultiOption_7uwhv_242";
+const focus = "_focus_7uwhv_253";
+const selectedSingleValue = "_selectedSingleValue_7uwhv_257";
+const placeHolder = "_placeHolder_7uwhv_258";
+const groupOrderFirst = "_groupOrderFirst_7uwhv_297";
+const groupOrderMiddle = "_groupOrderMiddle_7uwhv_298";
+const groupOrderLast = "_groupOrderLast_7uwhv_302";
+const detailedLabel = "_detailedLabel_7uwhv_307";
 const styles$m = {
   inputInTable: inputInTable$5,
-  error: error$5,
-  warning: warning$7,
   inputHover: inputHover$5,
   inputFocus: inputFocus$5,
   inputError: inputError$5,
@@ -20852,9 +20833,10 @@ const Input = ({
         tabIndex: -1,
         ref: inputRef,
         size: inputSize,
-        className: cx$2(styles$m.input, error2 ? styles$m.error : ""),
+        className: styles$m.input,
         value: searchValue,
         onChange: (evt) => onChange(evt.target.value),
+        "data-error": error2 || null,
         "data-testid": testId && `${testId}-input`
       }
     ) : null
@@ -20923,7 +20905,6 @@ const Trigger = ({
         className: cx$2(
           styles$m.trigger,
           isOpen2 ? styles$m.isOpen : "",
-          error2 ? styles$m.error : warning2 ? styles$m.warning : "",
           disabled2 ? styles$m.disabled : "",
           small2 ? styles$m.small : "",
           isInTable2 ? styles$m.isInTable : "",
@@ -20939,6 +20920,8 @@ const Trigger = ({
         },
         onFocus,
         onBlur,
+        "data-error": error2 || null,
+        "data-warning": warning2 || null,
         "data-testid": testId,
         children: [
           /* @__PURE__ */ jsx(
@@ -41455,7 +41438,7 @@ function gatherRawExtensions(config2, props) {
     return;
   }
   if (names2.includes(extension2.name)) {
-    warning$i(
+    warning$7(
       false,
       `Circular dependency encountered when loading extensions: ${names2.join(" > ")} > ${extension2.name}`
     );
@@ -52439,20 +52422,16 @@ const RichTextToolbar = ({
     toolbarComponent
   ] });
 };
-const inputInTable$4 = "_inputInTable_19adc_1";
-const error$4 = "_error_19adc_7";
-const warning$6 = "_warning_19adc_7";
-const inputHover$4 = "_inputHover_19adc_13";
-const inputFocus$4 = "_inputFocus_19adc_18";
-const inputError$4 = "_inputError_19adc_25";
-const inputWarning$4 = "_inputWarning_19adc_26";
-const inputDisabled$4 = "_inputDisabled_19adc_61";
-const hideScrollbars$4 = "_hideScrollbars_19adc_67";
-const richTextInput = "_richTextInput_19adc_77";
+const inputInTable$4 = "_inputInTable_1fb4l_1";
+const inputHover$4 = "_inputHover_1fb4l_13";
+const inputFocus$4 = "_inputFocus_1fb4l_18";
+const inputError$4 = "_inputError_1fb4l_25";
+const inputWarning$4 = "_inputWarning_1fb4l_26";
+const inputDisabled$4 = "_inputDisabled_1fb4l_61";
+const hideScrollbars$4 = "_hideScrollbars_1fb4l_67";
+const richTextInput = "_richTextInput_1fb4l_77";
 const styles$f = {
   inputInTable: inputInTable$4,
-  error: error$4,
-  warning: warning$6,
   inputHover: inputHover$4,
   inputFocus: inputFocus$4,
   inputError: inputError$4,
@@ -52621,30 +52600,26 @@ var reactFastCompare = function isEqual3(a2, b2) {
   }
 };
 const isEqual$1 = /* @__PURE__ */ getDefaultExportFromCjs(reactFastCompare);
-const inputInTable$3 = "_inputInTable_16jgo_1";
-const error$3 = "_error_16jgo_7";
-const warning$5 = "_warning_16jgo_7";
-const inputHover$3 = "_inputHover_16jgo_13";
-const inputFocus$3 = "_inputFocus_16jgo_18";
-const inputError$3 = "_inputError_16jgo_25";
-const inputWarning$3 = "_inputWarning_16jgo_26";
-const inputDisabled$3 = "_inputDisabled_16jgo_61";
-const hideScrollbars$3 = "_hideScrollbars_16jgo_67";
-const sidebar = "_sidebar_16jgo_82";
-const inner = "_inner_16jgo_93";
-const title$2 = "_title_16jgo_103";
-const subtitle = "_subtitle_16jgo_104";
-const label$2 = "_label_16jgo_105";
-const collapsed = "_collapsed_16jgo_109";
-const list = "_list_16jgo_134";
-const item$2 = "_item_16jgo_140";
-const experimental = "_experimental_16jgo_155";
-const active$2 = "_active_16jgo_159";
-const icon$1 = "_icon_16jgo_163";
+const inputInTable$3 = "_inputInTable_1oy1z_1";
+const inputHover$3 = "_inputHover_1oy1z_13";
+const inputFocus$3 = "_inputFocus_1oy1z_18";
+const inputError$3 = "_inputError_1oy1z_25";
+const inputWarning$3 = "_inputWarning_1oy1z_26";
+const inputDisabled$3 = "_inputDisabled_1oy1z_61";
+const hideScrollbars$3 = "_hideScrollbars_1oy1z_67";
+const sidebar = "_sidebar_1oy1z_82";
+const inner = "_inner_1oy1z_93";
+const title$2 = "_title_1oy1z_103";
+const subtitle = "_subtitle_1oy1z_104";
+const label$2 = "_label_1oy1z_105";
+const collapsed = "_collapsed_1oy1z_109";
+const list = "_list_1oy1z_134";
+const item$2 = "_item_1oy1z_140";
+const experimental = "_experimental_1oy1z_155";
+const active$2 = "_active_1oy1z_159";
+const icon$1 = "_icon_1oy1z_163";
 const styles$d = {
   inputInTable: inputInTable$3,
-  error: error$3,
-  warning: warning$5,
   inputHover: inputHover$3,
   inputFocus: inputFocus$3,
   inputError: inputError$3,
@@ -52856,7 +52831,7 @@ var preWarningFns = [];
 var preMessage = function preMessage2(fn) {
   preWarningFns.push(fn);
 };
-function warning$4(valid, message2) {
+function warning$1(valid, message2) {
   if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
     var finalMessage = preWarningFns.reduce(function(msg2, preMessageFn) {
       return preMessageFn(msg2 !== null && msg2 !== void 0 ? msg2 : "", "warning");
@@ -52886,7 +52861,7 @@ function call(method, valid, message2) {
   }
 }
 function warningOnce(valid, message2) {
-  call(warning$4, valid, message2);
+  call(warning$1, valid, message2);
 }
 function noteOnce(valid, message2) {
   call(note, valid, message2);
@@ -55328,24 +55303,20 @@ const Spacer = ({
     }
   }
 );
-const inputInTable$2 = "_inputInTable_k0mvt_1";
-const error$2 = "_error_k0mvt_7";
-const warning$3 = "_warning_k0mvt_7";
-const inputHover$2 = "_inputHover_k0mvt_13";
-const inputFocus$2 = "_inputFocus_k0mvt_18";
-const inputError$2 = "_inputError_k0mvt_25";
-const inputWarning$2 = "_inputWarning_k0mvt_26";
-const inputDisabled$2 = "_inputDisabled_k0mvt_61";
-const hideScrollbars$2 = "_hideScrollbars_k0mvt_67";
-const wrapper = "_wrapper_k0mvt_85";
-const bordered = "_bordered_k0mvt_93";
-const scroll2 = "_scroll_k0mvt_98";
-const table = "_table_k0mvt_108";
-const striped = "_striped_k0mvt_188";
+const inputInTable$2 = "_inputInTable_1dg3w_1";
+const inputHover$2 = "_inputHover_1dg3w_13";
+const inputFocus$2 = "_inputFocus_1dg3w_18";
+const inputError$2 = "_inputError_1dg3w_25";
+const inputWarning$2 = "_inputWarning_1dg3w_26";
+const inputDisabled$2 = "_inputDisabled_1dg3w_61";
+const hideScrollbars$2 = "_hideScrollbars_1dg3w_67";
+const wrapper = "_wrapper_1dg3w_85";
+const bordered = "_bordered_1dg3w_93";
+const scroll2 = "_scroll_1dg3w_98";
+const table = "_table_1dg3w_108";
+const striped = "_striped_1dg3w_188";
 const styles$b = {
   inputInTable: inputInTable$2,
-  error: error$2,
-  warning: warning$3,
   inputHover: inputHover$2,
   inputFocus: inputFocus$2,
   inputError: inputError$2,
@@ -55470,23 +55441,19 @@ const TableScrollWrapper = ({
     }
   ) : children({ visibleRows }) });
 };
-const clickableRow = "_clickableRow_1ki29_1";
-const hoverableRow = "_hoverableRow_1ki29_4";
-const rowActive = "_rowActive_1ki29_4";
-const expandableRow = "_expandableRow_1ki29_8";
-const flush2 = "_flush_1ki29_8";
-const errorRow = "_errorRow_1ki29_12";
-const warningRow = "_warningRow_1ki29_15";
-const dragIconCell = "_dragIconCell_1ki29_34";
-const dragIcon = "_dragIcon_1ki29_34";
+const clickableRow = "_clickableRow_m64j5_1";
+const hoverableRow = "_hoverableRow_m64j5_4";
+const rowActive = "_rowActive_m64j5_4";
+const expandableRow = "_expandableRow_m64j5_8";
+const flush2 = "_flush_m64j5_8";
+const dragIconCell = "_dragIconCell_m64j5_34";
+const dragIcon = "_dragIcon_m64j5_34";
 const styles$8 = {
   clickableRow,
   hoverableRow,
   rowActive,
   expandableRow,
   flush: flush2,
-  errorRow,
-  warningRow,
   dragIconCell,
   dragIcon
 };
@@ -55543,40 +55510,36 @@ const getHeaderAlignment = (alignments, isHeader = false, rowIndex = 0) => {
     return [];
   }
 };
-const inputInTable$1 = "_inputInTable_9hq13_1";
-const error$1 = "_error_9hq13_7";
-const warning$2 = "_warning_9hq13_7";
-const inputHover$1 = "_inputHover_9hq13_13";
-const inputFocus$1 = "_inputFocus_9hq13_18";
-const inputError$1 = "_inputError_9hq13_25";
-const inputWarning$1 = "_inputWarning_9hq13_26";
-const inputDisabled$1 = "_inputDisabled_9hq13_61";
-const hideScrollbars$1 = "_hideScrollbars_9hq13_67";
-const cell = "_cell_9hq13_77";
-const disabledLink = "_disabledLink_9hq13_87";
-const inputWrapper$1 = "_inputWrapper_9hq13_91";
-const numberInputWrapper = "_numberInputWrapper_9hq13_106";
-const breakWord = "_breakWord_9hq13_113";
-const inputCell = "_inputCell_9hq13_116";
-const sliderCell = "_sliderCell_9hq13_119";
-const staticCell = "_staticCell_9hq13_123";
-const staticCellContent = "_staticCellContent_9hq13_126";
-const unit = "_unit_9hq13_148";
-const sortingCell = "_sortingCell_9hq13_151";
-const sortingCellIcon = "_sortingCellIcon_9hq13_162";
-const icon = "_icon_9hq13_173";
-const checkBoxCell = "_checkBoxCell_9hq13_177";
-const iconCellWrapper = "_iconCellWrapper_9hq13_181";
-const actionsCell = "_actionsCell_9hq13_185";
-const rightAligned = "_rightAligned_9hq13_193";
-const centerAligned = "_centerAligned_9hq13_199";
-const leftAligned = "_leftAligned_9hq13_205";
-const popover = "_popover_9hq13_208";
-const disabledPointerEvents = "_disabledPointerEvents_9hq13_211";
+const inputInTable$1 = "_inputInTable_ie6ng_1";
+const inputHover$1 = "_inputHover_ie6ng_13";
+const inputFocus$1 = "_inputFocus_ie6ng_18";
+const inputError$1 = "_inputError_ie6ng_25";
+const inputWarning$1 = "_inputWarning_ie6ng_26";
+const inputDisabled$1 = "_inputDisabled_ie6ng_61";
+const hideScrollbars$1 = "_hideScrollbars_ie6ng_67";
+const cell = "_cell_ie6ng_77";
+const disabledLink = "_disabledLink_ie6ng_87";
+const inputWrapper$1 = "_inputWrapper_ie6ng_91";
+const numberInputWrapper = "_numberInputWrapper_ie6ng_106";
+const breakWord = "_breakWord_ie6ng_113";
+const inputCell = "_inputCell_ie6ng_116";
+const sliderCell = "_sliderCell_ie6ng_119";
+const staticCell = "_staticCell_ie6ng_123";
+const staticCellContent = "_staticCellContent_ie6ng_126";
+const unit = "_unit_ie6ng_148";
+const sortingCell = "_sortingCell_ie6ng_151";
+const sortingCellIcon = "_sortingCellIcon_ie6ng_162";
+const icon = "_icon_ie6ng_173";
+const checkBoxCell = "_checkBoxCell_ie6ng_177";
+const iconCellWrapper = "_iconCellWrapper_ie6ng_181";
+const actionsCell = "_actionsCell_ie6ng_185";
+const rightAligned = "_rightAligned_ie6ng_193";
+const centerAligned = "_centerAligned_ie6ng_199";
+const leftAligned = "_leftAligned_ie6ng_205";
+const popover = "_popover_ie6ng_208";
+const disabledPointerEvents = "_disabledPointerEvents_ie6ng_211";
 const styles$7 = {
   inputInTable: inputInTable$1,
-  error: error$1,
-  warning: warning$2,
   inputHover: inputHover$1,
   inputFocus: inputFocus$1,
   inputError: inputError$1,
@@ -55916,10 +55879,9 @@ const LinkCell = ({ cell: cell2, testId }) => {
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx$2(
-            styles$7.staticCellContent,
-            error2 ? styles$7.error : warning2 ? styles$7.warning : ""
-          ),
+          className: styles$7.staticCellContent,
+          "data-error": error2 || null,
+          "data-warning": warning2 || null,
           children: /* @__PURE__ */ jsx(
             "a",
             {
@@ -56017,11 +55979,12 @@ const StaticCell = ({ cell: cell2, isHeader, testId }) => {
     {
       className: cx$2(
         styles$7.staticCellContent,
-        type === "Unit" ? styles$7.unit : "",
-        error2 ? styles$7.error : warning2 ? styles$7.warning : ""
+        type === "Unit" ? styles$7.unit : ""
       ),
       onClick: hasSort ? (evt) => onSort && onSort(evt) : () => {
       },
+      "data-error": error2 || null,
+      "data-warning": warning2 || null,
       "data-testid": testId,
       children: [
         cell2.value,
@@ -56279,10 +56242,10 @@ const Row = ({
         className: cx$2(
           onRowClick && !onRowClick.noStyle ? styles$8.clickableRow : null,
           onRowMouseEnter && !onRowMouseEnter.noStyle ? styles$8.hoverableRow : null,
-          active2 ? styles$8.rowActive : null,
-          error2 ? styles$8.errorRow : null,
-          warning2 ? styles$8.warningRow : null
+          active2 ? styles$8.rowActive : null
         ),
+        "data-error": error2 || null,
+        "data-warning": warning2 || null,
         ref: (provided == null ? void 0 : provided.innerRef) || null,
         ...(provided == null ? void 0 : provided.draggableProps) || null,
         style: snapshot && provided ? getItemStyle2(snapshot.isDragging, provided.draggableProps.style) : null,
@@ -56727,22 +56690,18 @@ const TextLink = ({
     }
   );
 };
-const inputInTable = "_inputInTable_9svgh_1";
-const error = "_error_9svgh_7";
-const warning$1 = "_warning_9svgh_7";
-const inputHover = "_inputHover_9svgh_13";
-const inputFocus = "_inputFocus_9svgh_18";
-const inputError = "_inputError_9svgh_25";
-const inputWarning = "_inputWarning_9svgh_26";
-const inputDisabled = "_inputDisabled_9svgh_61";
-const hideScrollbars = "_hideScrollbars_9svgh_67";
-const textarea = "_textarea_9svgh_77";
-const small$1 = "_small_9svgh_116";
-const monospace = "_monospace_9svgh_155";
+const inputInTable = "_inputInTable_q0tl0_1";
+const inputHover = "_inputHover_q0tl0_13";
+const inputFocus = "_inputFocus_q0tl0_18";
+const inputError = "_inputError_q0tl0_25";
+const inputWarning = "_inputWarning_q0tl0_26";
+const inputDisabled = "_inputDisabled_q0tl0_61";
+const hideScrollbars = "_hideScrollbars_q0tl0_67";
+const textarea = "_textarea_q0tl0_77";
+const small$1 = "_small_q0tl0_116";
+const monospace = "_monospace_q0tl0_155";
 const styles$5 = {
   inputInTable,
-  error,
-  warning: warning$1,
   inputHover,
   inputFocus,
   inputError,
@@ -56795,6 +56754,8 @@ const TextArea = ({
       onBlur,
       tabIndex,
       style: { resize },
+      "data-error": error2 || null,
+      "data-warning": warning2 || null,
       "data-testid": testId
     }
   );
@@ -70286,7 +70247,7 @@ const initializeContext = (context2) => {
 };
 const PredefinedOptionsMenu = ({
   predefinedOptions,
-  value,
+  value = "",
   onPredefinedOptionSelect,
   disabled: disabled2,
   initialPredefinedOption,
@@ -70294,6 +70255,7 @@ const PredefinedOptionsMenu = ({
   setPredefinedOptionsMenuState,
   testId
 }) => {
+  const extractedValue = isValueWithUnit(value) ? getValue$1(value) : value;
   const [foundPredefinedMenuOption, setFoundPredefinedMenuOption] = useState(void 0);
   const createPredefinedOption = (el2) => {
     const elementValue = (el2 == null ? void 0 : el2.value) ? el2.value : "";
@@ -70314,7 +70276,7 @@ const PredefinedOptionsMenu = ({
         /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
       ] }),
       description: isValueWithUnit(elementValue) ? `${inputValue} ${unit2}` : elementValue,
-      selected: value === elementValue && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
+      selected: extractedValue === elementValue && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
     };
   };
   const initialPredefinedOptionObject = useMemo$1(() => {
@@ -70329,6 +70291,19 @@ const PredefinedOptionsMenu = ({
       onPredefinedOptionSelect(initialPredefinedOptionObject.value);
     }
   }, [initialPredefinedOptionObject]);
+  useEffect(() => {
+    const foundOption = predefinedOptions.find((option2) => {
+      const currentValue = isValueWithUnit((option2 == null ? void 0 : option2.value) ?? "") ? getValue$1((option2 == null ? void 0 : option2.value) ?? "") : option2.value;
+      return currentValue === extractedValue;
+    });
+    if (foundOption) {
+      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+      setFoundPredefinedMenuOption(foundOption);
+    } else {
+      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
+      setFoundPredefinedMenuOption(void 0);
+    }
+  }, [extractedValue, predefinedOptions]);
   const sectionsPredefinedMenu = [
     {
       type: MenuType.OPTION,