@noya-app/noya-designsystem 0.1.72 → 0.1.74

package/dist/index.mjs

@@ -3801,11 +3801,14 @@ function Icon({
 // src/components/Spacer.tsx
 import * as React8 from "react";
 var SpacerVertical = React8.forwardRef(
-  ({ size, inline, ...props }, ref) => {
+  ({ size, inline, className, ...props }, ref) => {
     return /* @__PURE__ */ React8.createElement(
       "span",
       {
-        className: `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+        className: cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+          className
+        ),
         style: size ? {
           minHeight: `${size}px`
         } : void 0,
@@ -3816,11 +3819,14 @@ var SpacerVertical = React8.forwardRef(
   }
 );
 var SpacerHorizontal = React8.forwardRef(
-  ({ size, inline, ...props }, ref) => {
+  ({ size, inline, className, ...props }, ref) => {
     return /* @__PURE__ */ React8.createElement(
       "span",
       {
-        className: `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+        className: cx(
+          `${inline ? "n-inline-block" : "n-block"} ${size === void 0 ? "n-flex n-flex-1" : ""}`,
+          className
+        ),
         style: size ? {
           minWidth: `${size}px`
         } : void 0,
@@ -4854,10 +4860,14 @@ var InputElement = forwardRef9(
     onSubmit,
     as = "input",
     style: style2,
+    attachInputRef = true,
     ...props
   }, forwardedRef) => {
     const { endWidth, inputRef, size, id, startWidth } = useInputFieldContext();
-    const ref = useMergeRefs(inputRef, forwardedRef);
+    const ref = useMergeRefs(
+      attachInputRef ? inputRef : null,
+      forwardedRef
+    );
     const spacingStyles = getFieldSpacing({
       endWidth,
       variant: $variant,
@@ -4929,6 +4939,7 @@ var InputFieldTypeahead = (props) => {
     InputElement,
     {
       as: "span",
+      attachInputRef: false,
       style: useMemo8(
         () => ({
           position: "absolute",
@@ -5059,7 +5070,9 @@ function InputFieldRoot({
   const startRef = React20.useRef(null);
   const inputRef = React20.useRef(null);
   const endRef = React20.useRef(null);
+  const rootRef = React20.useRef(null);
   const measuredInputSize = useSize(inputRef, "width");
+  const measuredRootSize = useSize(rootRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
   const labelType = useLabelType();
@@ -5092,18 +5105,34 @@ function InputFieldRoot({
     () => /* @__PURE__ */ React20.createElement(Label, { htmlFor: id, className: "!n-text-text-disabled" }, labelProp ?? label),
     [id, labelProp, label]
   );
-  const rootElement = /* @__PURE__ */ React20.createElement(RootContainer, { $width: width, style: style2, className }, children, start && /* @__PURE__ */ React20.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start), (end || label) && /* @__PURE__ */ React20.createElement(
-    "span",
+  const rootElement = /* @__PURE__ */ React20.createElement(
+    RootContainer,
     {
-      ref: endRef,
-      className: cx(endStyles, label && end && "n-gap-1.5", endClassName)
+      ref: rootRef,
+      $width: width,
+      style: style2,
+      className
     },
-    labelProp ? insetLabel : label && labelType === "inset" && insetLabel,
-    end
-  ));
+    children,
+    start && /* @__PURE__ */ React20.createElement("span", { ref: startRef, className: cx(startBaseStyles, startClassName) }, start),
+    (end || label) && /* @__PURE__ */ React20.createElement(
+      "span",
+      {
+        ref: endRef,
+        className: cx(endStyles, label && end && "n-gap-1.5", endClassName)
+      },
+      labelProp ? insetLabel : label && labelType === "inset" && insetLabel,
+      end
+    )
+  );
+  const measuredWidth = useMemo8(() => {
+    const inputWidth = measuredInputSize && measuredInputSize.width > 0 ? measuredInputSize.width : void 0;
+    const rootWidth = measuredRootSize && measuredRootSize.width > 0 ? measuredRootSize.width : void 0;
+    return inputWidth ?? rootWidth ?? width;
+  }, [measuredInputSize, measuredRootSize, width]);
   const measuredWidthObject = useMemo8(
-    () => measuredInputSize ? { width: measuredInputSize.width + 4 } : void 0,
-    [measuredInputSize]
+    () => measuredWidth && measuredWidth > 0 ? { width: measuredWidth + 4 } : void 0,
+    [measuredWidth]
   );
   return /* @__PURE__ */ React20.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React20.createElement(
     Popover,
@@ -15373,6 +15402,12 @@ function BaseToolbar({
   innerClassName,
   enableAbsoluteBreakpoint = true
 }) {
+  const childrenContainerClassName = cx(
+    "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none n-inset-0 n-pl-1 n-pr-1 n-min-w-0",
+    "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
+  );
+  const childrenElement = children && /* @__PURE__ */ React85.createElement("div", { className: childrenContainerClassName }, /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children));
+  const leftElement = left && /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left);
   return /* @__PURE__ */ React85.createElement(
     BaseToolbarContainer,
     {
@@ -15383,14 +15418,8 @@ function BaseToolbar({
     },
     logo && /* @__PURE__ */ React85.createElement(React85.Fragment, null, logo, /* @__PURE__ */ React85.createElement(DividerVertical, null)),
     /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
-    left && /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })),
-    children && /* @__PURE__ */ React85.createElement(
-      "div",
-      {
-        className: "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @xl/toolbar:!n-absolute n-inset-0"
-      },
-      /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-items-center n-justify-center n-pointer-events-auto" }, children)
-    ),
+    childrenElement,
+    leftElement && /* @__PURE__ */ React85.createElement(React85.Fragment, null, childrenElement && /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), /* @__PURE__ */ React85.createElement(DividerVertical, { className: "@xl/toolbar:!n-hidden" })), /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10, className: "@xl/toolbar:!n-hidden" }), leftElement, /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 })),
     /* @__PURE__ */ React85.createElement(Spacer.Horizontal, null),
     /* @__PURE__ */ React85.createElement(Spacer.Horizontal, { size: 10 }),
     /* @__PURE__ */ React85.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
@@ -15938,7 +15967,7 @@ import React89, { forwardRef as forwardRef26, memo as memo29, useMemo as useMemo
 var Message = memo29(
   forwardRef26(function Message2({ role, children, user, avatarSize = INPUT_HEIGHT }, ref) {
     const randomId = uuid2();
-    const resolvedUserId = user?.userId ?? user?.connectionId ?? randomId;
+    const resolvedUserId = user?.authId ?? user?.connectionId ?? randomId;
     const userMessageBackgroundColor = colorFromString(resolvedUserId);
     const styles3 = useMemo36(
       () => role === "user" ? {