@darajs/components 1.12.6 → 1.12.7

package/dist/umd/dara.components.umd.js

@@ -9129,7 +9129,7 @@
     var _a3;
     return jsxRuntime.exports.jsxs(Wrapper$c, { className: props.className, style: props.style, children: [jsxRuntime.exports.jsxs(Loader, { color: props.color, size: props.size, children: [jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" })] }), (props.showText || props.text) && jsxRuntime.exports.jsx(LoadingText, { color: props.color, children: (_a3 = props.text) !== null && _a3 !== void 0 ? _a3 : "LOADING" })] });
   }
-  var __rest$f = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$g = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -9235,7 +9235,7 @@
     secondary: SecondaryButton$1
   };
   function Button$2(_a3, ref) {
-    var { autoFocus, children: children2, className, disabled: disabled2, download, href, loading, id: id2, onClick, outline = false, style: style2, styling = "primary", type = "button" } = _a3, props = __rest$f(_a3, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
+    var { autoFocus, children: children2, className, disabled: disabled2, download, href, loading, id: id2, onClick, outline = false, style: style2, styling = "primary", type = "button" } = _a3, props = __rest$g(_a3, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
     const currentTheme = useClTheme();
     const Component = stylingMap[styling];
     const content2 = loading ? jsxRuntime.exports.jsx(StyledLoading, { color: outline ? currentTheme.colors.grey2 : currentTheme.colors.blue1 }) : children2;
@@ -14948,7 +14948,7 @@
 
     width: 100%;
     height: 100%;
-    min-height: 3.6rem;
+    min-height: 3.4rem;
     padding: 1rem;
 
     font-size: 1rem;
@@ -14959,14 +14959,14 @@
     border-radius: 0.25rem;
     outline: 0;
 
-    :focus:not(:disabled) {
-        border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey3};
-    }
-
     :hover:not(:disabled) {
         border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey2};
     }
 
+    :focus:not(:disabled) {
+        border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey3};
+    }
+
     :active:not(:disabled) {
         border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey3};
     }
@@ -14981,13 +14981,23 @@
 `;
   function TextArea({ autoFocus, className, disabled: disabled2, errorMsg, initialValue, keydownFilter, maxHeight, onBlur, onChange: onChange2, onClick, onComplete, placeholder, style: style2, value, resize }) {
     const textareaRef = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
+    React__namespace.useLayoutEffect(() => {
       if (maxHeight && textareaRef.current) {
-        const minHeight = 3.7;
-        textareaRef.current.style.height = "3.7rem";
-        const newHeight = textareaRef.current.scrollHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const computedStyle = window.getComputedStyle(textareaRef.current);
+        const minHeight = parseFloat(computedStyle.minHeight);
+        const maxHeightInPx = parseFloat(computedStyle.maxHeight);
+        textareaRef.current.style.height = `${minHeight}px`;
+        const newHeight = textareaRef.current.scrollHeight;
         if (minHeight < newHeight) {
-          textareaRef.current.style.height = `${Math.min(newHeight, maxHeight)}rem`;
+          const adjustedHeight = Math.min(newHeight, maxHeightInPx);
+          textareaRef.current.style.height = `${adjustedHeight}px`;
+          if (adjustedHeight >= maxHeightInPx) {
+            textareaRef.current.style.overflowY = "auto";
+          } else {
+            textareaRef.current.style.overflowY = "hidden";
+          }
+        } else {
+          textareaRef.current.style.overflowY = "hidden";
         }
       }
     }, [maxHeight, value]);
@@ -32963,7 +32973,7 @@
     }, [props.codeTheme, themeCtx.themeType]);
     return jsxRuntime.exports.jsxs(CodeViewerContainer, { style: Object.assign({}, props.style), className: props.className, children: [jsxRuntime.exports.jsxs(TopBar, { "$isLightTheme": props.codeTheme !== "dark", children: [jsxRuntime.exports.jsx("span", { children: props.language }), isCopied ? jsxRuntime.exports.jsxs(CopyToClipboardContainer, { children: [jsxRuntime.exports.jsx(Check, {}), " Copied!"] }) : jsxRuntime.exports.jsxs(CopyToClipboardContainer, { style: { cursor: "pointer" }, onClick: () => copyCodeToClipboard(props.value), role: "button", children: [jsxRuntime.exports.jsx(Copy, {}), " Copy code"] })] }), jsxRuntime.exports.jsx(Highlight$1, Object.assign({}, defaultProps$6, { code: props.value, language: props.language, theme: viewerTheme, children: ({ className, style: style2, tokens: tokens2, getLineProps, getTokenProps }) => jsxRuntime.exports.jsx(StyledPre, { className, "$isLightTheme": props.codeTheme !== "dark", style: Object.assign({}, style2), children: tokens2.map((line, i2) => React.createElement("div", Object.assign({}, getLineProps({ key: i2, line }), { key: i2 }), line.map((token, key) => React.createElement("code", Object.assign({}, getTokenProps({ key, token }), { key }))))) }) }))] });
   }
-  var __rest$e = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$f = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -33017,8 +33027,7 @@
     }
 
     blockquote {
-        /* stylelint-disable-next-line */
-        quotes: '"\\201C""\\201D""\\2018""\\2019"';
+        quotes: '\\201C' '\\201D' '\\2018' '\\2019';
 
         margin-top: 1.5rem;
         margin-bottom: 1.5rem;
@@ -33029,6 +33038,14 @@
         color: ${(props) => props.theme.colors.grey6};
 
         border-left: 0.25rem solid ${(props) => props.theme.colors.grey3};
+
+        p:first-of-type::before {
+            content: open-quote;
+        }
+
+        p:last-of-type::after {
+            content: close-quote;
+        }
     }
 
     h1 {
@@ -33041,7 +33058,7 @@
     }
 
     h2 {
-        margin-top: 1rem;
+        margin-top: 2rem;
         margin-bottom: 1rem;
 
         font-size: 2rem;
@@ -33076,6 +33093,13 @@
         }
     }
 
+    figcaption {
+        margin-top: 0.875rem;
+        color: ${(props) => props.theme.colors.grey5};
+        font-size: 0.875rem;
+        line-height: 1.5rem;
+    }
+
     h2 code {
         font-size: 0.875rem;
     }
@@ -33143,10 +33167,6 @@
                 border-radius: 0.25rem;
             }
 
-            strong {
-                font-style: italic;
-            }
-
             p {
                 margin-top: 0.75rem;
                 margin-bottom: 0.75rem;
@@ -33162,6 +33182,15 @@
         }
     }
 
+    ol > li::marker {
+        font-weight: 400;
+        color: ${(props) => props.theme.colors.text};
+    }
+
+    ul > li::marker {
+        color: ${(props) => props.theme.colors.grey4};
+    }
+
     hr {
         margin-top: 3rem;
         margin-bottom: 3rem;
@@ -33170,12 +33199,22 @@
     table {
         font-size: 0.875rem;
         line-height: 1.7;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        table-layout: auto;
+        width: 100%;
+        border-collapse: collapse;
 
         thead {
+            border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
+
             th {
                 padding-right: 0.5rem;
                 padding-bottom: 0.5rem;
                 padding-left: 0.5rem;
+                vertical-align: bottom;
+                font-weight: 600;
+                text-align: start;
             }
 
             th:first-child {
@@ -33187,17 +33226,36 @@
             }
         }
 
-        tbody {
+        tfoot {
+            border-top: 1px solid ${(props) => props.theme.colors.grey2};
+
             td {
-                padding: 0.5rem;
+                vertical-align: top;
+                text-align: start;
             }
+        }
 
-            td:first-child {
-                padding-left: 0;
+        tbody {
+            tr {
+                border-bottom: 1px solid ${(props) => props.theme.colors.grey2};
+
+                &:last-child {
+                    border-bottom: 0;
+                }
             }
 
-            td:last-child {
-                padding-right: 0;
+            td {
+                padding: 0.5rem;
+                vertical-align: baseline;
+                text-align: start;
+
+                &:first-child {
+                    padding-left: 0;
+                }
+
+                &:last-child {
+                    padding-right: 0;
+                }
             }
         }
     }
@@ -33238,7 +33296,7 @@
 `;
   function CodeDisplay(props) {
     const theme2 = useClTheme();
-    const { children: children2 } = props, rest = __rest$e(props, ["children"]);
+    const { children: children2 } = props, rest = __rest$f(props, ["children"]);
     const match2 = /language-(\w+)/.exec(props.className || "");
     const parsed = React__namespace.useMemo(() => {
       return String(children2).trim().replace(/\n\n/g, "\n");
@@ -33250,7 +33308,7 @@
   }
   function Markdown$1(props) {
     var _a3;
-    const { markdown, className, style: style2 } = props, reactMarkdownProps = __rest$e(props, ["markdown", "className", "style"]);
+    const { markdown, className, style: style2 } = props, reactMarkdownProps = __rest$f(props, ["markdown", "className", "style"]);
     return jsxRuntime.exports.jsx(CustomMarkdownWrapper, { className, style: style2, children: jsxRuntime.exports.jsx(Markdown$2, Object.assign({}, reactMarkdownProps, { components: Object.assign({ code: CodeDisplay }, reactMarkdownProps.components), remarkPlugins: (_a3 = reactMarkdownProps.remarkPlugins) !== null && _a3 !== void 0 ? _a3 : [remarkGfm], children: markdown })) });
   }
   var top$1 = "top";
@@ -37487,7 +37545,7 @@
     React__namespace.useLayoutEffect(() => {
       scrollToBottom(chatBodyRef === null || chatBodyRef === void 0 ? void 0 : chatBodyRef.current);
     }, []);
-    return jsxRuntime.exports.jsxs(ChatWrapper, { className: props.className, style: props.style, "$isPopup": props.isPopup, children: [jsxRuntime.exports.jsxs(ChatTop, { children: [jsxRuntime.exports.jsx("span", { children: (_b = props.chatTitle) !== null && _b !== void 0 ? _b : "Chat" }), props.isPopup && jsxRuntime.exports.jsx(CloseIcon, { onClick: props.onClose, "aria-label": "Close chat" })] }), jsxRuntime.exports.jsxs(ChatBody, { ref: chatBodyRef, role: "log", children: [localMessages.map((message) => jsxRuntime.exports.jsx(MessageComponent, { onChange: onEditMessage, onDelete: onDeleteMessage, value: message, didUserWriteMessage: didUserWriteMessage(message, props.activeUser), isEditable: !props.isHistoryReadonly }, message.id)), props.loadingComponent] }), jsxRuntime.exports.jsxs(ReplyWrapper, { children: [jsxRuntime.exports.jsx(TextArea, { onChange: onChangeReply, onComplete: onSubmitMessage, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : "Add a comment", resize: "none", maxHeight: 6, value: reply, style: { width: "100%" } }), jsxRuntime.exports.jsx(ReplyButtons, { children: jsxRuntime.exports.jsx(Button$3, { "aria-label": "Send", style: { height: "3.7rem" }, disabled: !!props.loadingComponent || !(reply.trim().length > 0), onClick: onSubmitMessage, children: jsxRuntime.exports.jsx(PaperPlane, { onClick: onSubmitMessage }) }) })] })] });
+    return jsxRuntime.exports.jsxs(ChatWrapper, { className: props.className, style: props.style, "$isPopup": props.isPopup, children: [jsxRuntime.exports.jsxs(ChatTop, { children: [jsxRuntime.exports.jsx("span", { children: (_b = props.chatTitle) !== null && _b !== void 0 ? _b : "Chat" }), props.isPopup && jsxRuntime.exports.jsx(CloseIcon, { onClick: props.onClose, "aria-label": "Close chat" })] }), jsxRuntime.exports.jsxs(ChatBody, { ref: chatBodyRef, role: "log", children: [localMessages.map((message) => jsxRuntime.exports.jsx(MessageComponent, { onChange: onEditMessage, onDelete: onDeleteMessage, value: message, didUserWriteMessage: didUserWriteMessage(message, props.activeUser), isEditable: !props.isHistoryReadonly }, message.id)), props.loadingComponent] }), jsxRuntime.exports.jsxs(ReplyWrapper, { children: [jsxRuntime.exports.jsx(TextArea, { onChange: onChangeReply, onComplete: onSubmitMessage, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : "Add a comment", resize: "none", maxHeight: 6, value: reply, style: { width: "100%" } }), jsxRuntime.exports.jsx(ReplyButtons, { children: jsxRuntime.exports.jsx(Button$3, { "aria-label": "Send", style: { height: "3.4rem" }, disabled: !!props.loadingComponent || !(reply.trim().length > 0), onClick: onSubmitMessage, children: jsxRuntime.exports.jsx(PaperPlane, { onClick: onSubmitMessage }) }) })] })] });
   }
   const CheckboxWrapper$1 = styled__default.default.label`
     cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
@@ -37707,7 +37765,7 @@
       return jsxRuntime.exports.jsx(CheckboxWrapper, { "aria-disabled": props.disabled, children: jsxRuntime.exports.jsx(Checkbox, { disabled: isSelectPermitted ? props.disabled : ((_a3 = checkedState.find((option) => option.value === item.value)) === null || _a3 === void 0 ? void 0 : _a3.state) === false, id: index2, isListStyle: props.isListStyle, label: item.label ? item.label : item.value, onChange: (checked, e3) => onChangeValue(e3), selected: (_b = checkedState.find((option) => option.value === item.value)) === null || _b === void 0 ? void 0 : _b.state }) }, `item-${index2}`);
     })] });
   }
-  var __rest$d = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$e = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -37763,35 +37821,25 @@
     color: ${(props) => props.theme.colors.error};
 `;
   const Input$3 = React.forwardRef((_a3, ref) => {
-    var { type = "text" } = _a3, props = __rest$d(_a3, ["type"]);
-    const onChange2 = (e3) => {
+    var { type = "text", onChange: onChange2, onKeyDown, keydownFilter, onComplete, maxValue, minValue, errorMsg, className, style: style2, initialValue } = _a3, rest = __rest$e(_a3, ["type", "onChange", "onKeyDown", "keydownFilter", "onComplete", "maxValue", "minValue", "errorMsg", "className", "style", "initialValue"]);
+    const handleChange = (e3) => {
       const target = e3.target;
-      if (props.onChange) {
-        props.onChange(target.value, e3);
+      if (onChange2) {
+        onChange2(target.value, e3);
       }
     };
-    const onKeyDown = (e3) => {
-      if (props.onKeyDown) {
-        props.onKeyDown(e3);
+    const handleKeyDown = (e3) => {
+      if (onKeyDown) {
+        onKeyDown(e3);
       }
-      if (props.keydownFilter && !props.keydownFilter(e3)) {
+      if (keydownFilter && !keydownFilter(e3)) {
         e3.preventDefault();
       }
-      if (e3.key === Key.ENTER && props.onComplete) {
-        props.onComplete();
-      }
-    };
-    const addOptionalItems = () => {
-      const result = {};
-      if (props.minValue) {
-        result.minValue = props.minValue;
-      }
-      if (props.maxValue) {
-        result.maxValue = props.minValue;
+      if (e3.key === Key.ENTER && onComplete) {
+        onComplete();
       }
-      return result;
     };
-    return jsxRuntime.exports.jsxs(InputWrapper$5, { className: props.className, style: props.style, children: [jsxRuntime.exports.jsx(PrimaryInput, Object.assign({ autoFocus: props.autoFocus, defaultValue: props.initialValue, disabled: props.disabled, isErrored: !!props.errorMsg, maxLength: props.maxLength, onBlur: props.onBlur, onChange: onChange2, onClick: props.onClick, onKeyDown, placeholder: props.placeholder, ref, type, value: props.value }, addOptionalItems())), props.errorMsg && jsxRuntime.exports.jsxs(ErrorMessage$1, { children: [props.errorMsg, " "] })] });
+    return jsxRuntime.exports.jsxs(InputWrapper$5, { className, style: style2, children: [jsxRuntime.exports.jsx(PrimaryInput, Object.assign({}, rest, { defaultValue: initialValue, isErrored: !!errorMsg, onChange: handleChange, onKeyDown: handleKeyDown, ref, type, min: minValue, max: maxValue })), errorMsg && jsxRuntime.exports.jsx(ErrorMessage$1, { children: errorMsg })] });
   });
   Input$3.displayName = "Input";
   const Wrapper$b = styled__default.default.div`
@@ -40344,7 +40392,7 @@
       activeIndex
     };
   }
-  var __rest$c = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$d = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -40365,11 +40413,11 @@
     background-color: transparent !important;
 `;
   const ChevronButton = (_a3) => {
-    var { getToggleButtonProps, disabled: disabled2, isOpen } = _a3, props = __rest$c(_a3, ["getToggleButtonProps", "disabled", "isOpen"]);
+    var { getToggleButtonProps, disabled: disabled2, isOpen } = _a3, props = __rest$d(_a3, ["getToggleButtonProps", "disabled", "isOpen"]);
     return jsxRuntime.exports.jsx(StyledChevronButton, Object.assign({}, getToggleButtonProps(), props, { children: jsxRuntime.exports.jsx(Chevron$2, { disabled: disabled2, isOpen }) }));
   };
   const ChevronButton$1 = React__default.default.memo(ChevronButton);
-  var __rest$b = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$c = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -40422,7 +40470,7 @@
     }
 `;
   const ListItem = ({ size: size2, title, item, index: index2, getItemProps, itemClass, children: children2, isHighlighted, isSelected }) => {
-    const _a3 = getItemProps({ index: index2, item }), { itemClassName } = _a3, itemProps = __rest$b(_a3, ["itemClassName"]);
+    const _a3 = getItemProps({ index: index2, item }), { itemClassName } = _a3, itemProps = __rest$c(_a3, ["itemClassName"]);
     return jsxRuntime.exports.jsx(StyledListItem, Object.assign({}, itemProps, { className: itemClass ? `${itemClassName} ${itemClass}` : itemClassName, title, size: size2, item, isHighlighted, isSelected, children: children2 }));
   };
   ListItem.displayName = "ListItem";
@@ -47071,7 +47119,7 @@
     } }]), a2;
   }(), jt$1 = "input", Ht$1 = "navigate";
   const reactDatepicker = "";
-  var __rest$a = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$b = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -47203,7 +47251,7 @@
     }
 `;
   const DatepickerListItem = React__namespace.memo(({ item, index: index2, getItemProps, isSelected, size: size2, isHighlighted }) => {
-    const _a3 = getItemProps({ index: index2, item }), itemProps = __rest$a(_a3, ["itemClassName"]);
+    const _a3 = getItemProps({ index: index2, item }), itemProps = __rest$b(_a3, ["itemClassName"]);
     return jsxRuntime.exports.jsx(StyledDatepickerListItem, Object.assign({}, itemProps, { isSelected, title: item.label, item, index: index2, size: size2, isHighlighted, children: item.label }));
   });
   const StyledDropdownList = React__namespace.memo(styled__default.default(DropdownList$1)`
@@ -48966,7 +49014,7 @@
     };
     return ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(Background$1, { id: props.id, onClick: props.onAttemptClose, onTransitionEnd, render: renderModal, children: jsxRuntime.exports.jsx(ModalWrapper, { className: `cl-modal-content ${(_a3 = props.className) !== null && _a3 !== void 0 ? _a3 : ""}`, onClick: stopPropagation, render: renderModal, style: props.style, children: props.children }) }), document.body);
   }
-  var __rest$9 = globalThis && globalThis.__rest || function(s2, e3) {
+  var __rest$a = globalThis && globalThis.__rest || function(s2, e3) {
     var t2 = {};
     for (var p2 in s2)
       if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
@@ -49112,7 +49160,7 @@
 `;
   function MultiSelect(_a3) {
     var _b, _c;
-    var { maxWidth = "100%", maxRows = 3 } = _a3, props = __rest$9(_a3, ["maxWidth", "maxRows"]);
+    var { maxWidth = "100%", maxRows = 3 } = _a3, props = __rest$a(_a3, ["maxWidth", "maxRows"]);
     const [inputValue, setInputValue] = React.useState("");
     const { getSelectedItemProps, getDropdownProps, addSelectedItem, removeSelectedItem, selectedItems } = useMultipleSelection(Object.assign({ initialSelectedItems: (_b = props.initialValue) !== null && _b !== void 0 ? _b : [], onSelectedItemsChange: (changes) => {
       if (props.onSelect) {
@@ -49431,6 +49479,18 @@
     const stepDown = () => step2(amountToStep * -1);
     return jsxRuntime.exports.jsxs(StepperWrapper, { disabled: disabled2, children: [jsxRuntime.exports.jsx(StepperButton, { disabled: disabled2, onClick: stepUp, styling: "ghost", tabIndex: -1, children: jsxRuntime.exports.jsx(ChevronUp, {}) }), jsxRuntime.exports.jsx(StepperButton, { disabled: disabled2, onClick: stepDown, styling: "ghost", tabIndex: -1, children: jsxRuntime.exports.jsx(ChevronDown, {}) })] });
   };
+  var __rest$9 = globalThis && globalThis.__rest || function(s2, e3) {
+    var t2 = {};
+    for (var p2 in s2)
+      if (Object.prototype.hasOwnProperty.call(s2, p2) && e3.indexOf(p2) < 0)
+        t2[p2] = s2[p2];
+    if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s2); i2 < p2.length; i2++) {
+        if (e3.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i2]))
+          t2[p2[i2]] = s2[p2[i2]];
+      }
+    return t2;
+  };
   const InputWrapper$2 = styled__default.default.div`
     display: flex;
     flex-direction: row;
@@ -49522,27 +49582,27 @@
     }
     return "";
   };
-  const NumericInput = React__namespace.forwardRef((props, ref) => {
+  const NumericInput = React__namespace.forwardRef((_a3, ref) => {
+    var { value, onChange: onChange2, initialValue } = _a3, props = __rest$9(_a3, ["value", "onChange", "initialValue"]);
     const keydownFilter = React.useMemo(() => numericFilter(props.integerOnly), [props.integerOnly]);
-    const [input, setInput] = React.useState(getInitialValue(props.value, props.initialValue));
-    const step2 = (value) => {
-      var _a3;
+    const [input, setInput] = React.useState(getInitialValue(value, initialValue));
+    const step2 = (v3) => {
       if (!input || input === "-") {
         return;
       }
       const isFloat = input.includes(".");
       const parsedValue = isFloat ? parseFloat(input) : parseInt(input);
-      let nextValueNumber = parsedValue + value;
+      let nextValueNumber = parsedValue + v3;
       let nextValueStr = String(nextValueNumber);
       if (isFloat) {
         const decimals = input.split(".")[1];
         if (decimals) {
-          nextValueStr = (parsedValue + value / Math.pow(10, decimals.length)).toFixed(decimals.length);
+          nextValueStr = (parsedValue + v3 / Math.pow(10, decimals.length)).toFixed(decimals.length);
           nextValueNumber = parseFloat(nextValueStr);
         }
       }
-      if (props.value !== void 0) {
-        (_a3 = props.onChange) === null || _a3 === void 0 ? void 0 : _a3.call(props, nextValueNumber, {
+      if (value !== void 0) {
+        onChange2 === null || onChange2 === void 0 ? void 0 : onChange2(nextValueNumber, {
           target: {
             value: nextValueStr
           }
@@ -49552,8 +49612,8 @@
       }
     };
     const onKeyDown = (e3) => {
-      var _a3, _b;
-      (_a3 = props.onKeyDown) === null || _a3 === void 0 ? void 0 : _a3.call(props, e3);
+      var _a4, _b;
+      (_a4 = props.onKeyDown) === null || _a4 === void 0 ? void 0 : _a4.call(props, e3);
       if (!props.stepper) {
         return;
       }
@@ -49565,35 +49625,34 @@
         step2(stepSkip * -1);
       }
     };
-    const onChange2 = React.useCallback(
-      (value, e3) => {
-        var _a3, _b;
-        const parsed = props.integerOnly ? parseInt(value) : parseFloat(value);
-        if (props.value === void 0) {
-          setInput(value);
-          (_a3 = props.onChange) === null || _a3 === void 0 ? void 0 : _a3.call(props, parsed, e3);
+    const handleOnChange = React.useCallback(
+      (v3, e3) => {
+        const parsed = props.integerOnly ? parseInt(v3) : parseFloat(v3);
+        if (value === void 0) {
+          setInput(v3);
+          onChange2 === null || onChange2 === void 0 ? void 0 : onChange2(parsed, e3);
           return;
         }
-        if (value.endsWith(".")) {
-          setInput(value);
+        if (v3.endsWith(".")) {
+          setInput(v3);
           return;
         }
-        if (value.includes(".") && value.endsWith("0")) {
-          setInput(value);
+        if (v3.includes(".") && v3.endsWith("0")) {
+          setInput(v3);
           return;
         }
-        if (value === "-") {
-          setInput(value);
+        if (v3 === "-") {
+          setInput(v3);
           return;
         }
-        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, parsed, e3);
+        onChange2 === null || onChange2 === void 0 ? void 0 : onChange2(parsed, e3);
       },
-      [props.integerOnly, props.value, props.onChange]
+      [props.integerOnly, value, onChange2]
     );
     React.useEffect(() => {
-      setInput(getInitialValue(props.value, props.initialValue));
-    }, [props.value]);
-    return jsxRuntime.exports.jsxs("div", { children: [jsxRuntime.exports.jsxs(InputWrapper$2, { disabled: props.disabled, errorMsg: props.errorMsg, stepper: props.stepper, style: props.style, children: [jsxRuntime.exports.jsx(Input$3, { autoFocus: props.autoFocus, className: props.className, disabled: props.disabled, keydownFilter, maxValue: props.maxValue, minValue: props.minValue, onBlur: props.onBlur, onChange: onChange2, onComplete: props.onComplete, onKeyDown, placeholder: props.placeholder, ref, value: input }), props.stepper && jsxRuntime.exports.jsx(InputStepper, { disabled: props.disabled, step: step2, stepSkip: props.stepSkip })] }), props.errorMsg && jsxRuntime.exports.jsx(ErrorMessage$1, { children: props.errorMsg })] });
+      setInput(getInitialValue(value, initialValue));
+    }, [value]);
+    return jsxRuntime.exports.jsxs("div", { children: [jsxRuntime.exports.jsxs(InputWrapper$2, { disabled: props.disabled, errorMsg: props.errorMsg, stepper: props.stepper, style: props.style, children: [jsxRuntime.exports.jsx(Input$3, Object.assign({}, props, { keydownFilter, onChange: handleOnChange, onKeyDown, ref, value: input })), props.stepper && jsxRuntime.exports.jsx(InputStepper, { disabled: props.disabled, step: step2, stepSkip: props.stepSkip })] }), props.errorMsg && jsxRuntime.exports.jsx(ErrorMessage$1, { children: props.errorMsg })] });
   });
   Input$3.displayName = "NumericInput";
   var isArray$4 = isArray_1$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darajs/components",
-  "version": "1.12.6",
+  "version": "1.12.7",
   "description": "Components for the Dara framework",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -29,9 +29,9 @@
   "prettier": "@darajs/prettier-config",
   "devDependencies": {
     "@babel/core": "^7.23.5",
-    "@darajs/eslint-config": "1.12.6",
-    "@darajs/prettier-config": "1.12.6",
-    "@darajs/stylelint-config": "1.12.6",
+    "@darajs/eslint-config": "1.12.7",
+    "@darajs/prettier-config": "1.12.7",
+    "@darajs/stylelint-config": "1.12.7",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/lodash": "^4.14.155",
     "@types/react": "18.2.60",
@@ -54,14 +54,14 @@
   },
   "dependencies": {
     "@bokeh/bokehjs": "~3.1.1",
-    "@darajs/core": "1.12.6",
-    "@darajs/styled-components": "1.12.6",
-    "@darajs/ui-causal-graph-editor": "1.12.6",
-    "@darajs/ui-code-editor": "1.12.6",
-    "@darajs/ui-components": "1.12.6",
-    "@darajs/ui-hierarchy-viewer": "1.12.6",
-    "@darajs/ui-icons": "1.12.6",
-    "@darajs/ui-utils": "1.12.6",
+    "@darajs/core": "1.12.7",
+    "@darajs/styled-components": "1.12.7",
+    "@darajs/ui-causal-graph-editor": "1.12.7",
+    "@darajs/ui-code-editor": "1.12.7",
+    "@darajs/ui-components": "1.12.7",
+    "@darajs/ui-hierarchy-viewer": "1.12.7",
+    "@darajs/ui-icons": "1.12.7",
+    "@darajs/ui-utils": "1.12.7",
     "@popperjs/core": "2.4.0",
     "date-fns": "2.9.0",
     "immer": "^10.0.0",
@@ -84,5 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3a63d3d9f094aaed507dd04aedcf4e9f129196c4"
+  "gitHead": "9c917889b0322e705c2980eee892bd742a99d24f"
 }