@uniformdev/design-system 20.73.1-alpha.13 → 20.74.2-alpha.26

package/dist/esm/index.js

@@ -3034,13 +3034,13 @@ var ToastEntry = ({ toast: entry }) => {
   const duration = (_a = entry.timeout) != null ? _a : defaultTimeoutMs;
   const showCountdown = duration > 0 && entry.type !== "loading" && (data == null ? void 0 : data.kind) !== "progress";
   if ((data == null ? void 0 : data.kind) === "progress") {
-    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ jsx14("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ jsx14(BaseToast.Description, { css: toastDescriptionStyles, children: data.label }) }),
       /* @__PURE__ */ jsx14(Progress.Root, { value: Math.max(0, Math.min(1, data.progress)) * 100, css: toastProgressRootStyles, children: /* @__PURE__ */ jsx14(Progress.Track, { css: toastProgressTrackStyles, children: /* @__PURE__ */ jsx14(Progress.Indicator, { css: toastProgressIndicatorStyles }) }) })
     ] });
   }
   if ((data == null ? void 0 : data.kind) === "undoable") {
-    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ jsx14(ToastTypeIcon, { type: entry.type }),
       /* @__PURE__ */ jsxs6("div", { css: toastBodyStyles, "data-testid": "toast-body", children: [
         /* @__PURE__ */ jsx14(BaseToast.Description, { css: toastDescriptionStyles, children: data.description }),
@@ -3049,6 +3049,7 @@ var ToastEntry = ({ toast: entry }) => {
           {
             type: "button",
             css: toastUndoButtonStyles,
+            "data-testid": "toast-undo-button",
             onClick: () => {
               data.onUndo();
               toastManager.close(entry.id);
@@ -3057,14 +3058,14 @@ var ToastEntry = ({ toast: entry }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
+      /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
       showCountdown ? /* @__PURE__ */ jsx14(ToastCountdownBar, { duration }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, children: [
+  return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
     /* @__PURE__ */ jsx14(ToastTypeIcon, { type: entry.type }),
     /* @__PURE__ */ jsx14("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ jsx14(BaseToast.Description, { css: toastDescriptionStyles, children: entry.description }) }),
-    /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
     showCountdown ? /* @__PURE__ */ jsx14(ToastCountdownBar, { duration }) : null
   ] });
 };
@@ -5729,11 +5730,6 @@ function fieldsetContainer(invert) {
     border: 1px solid var(--gray-300);
 
     padding: var(--spacing-base);
-
-    // auto apply margins to child elements
-    > *:not(legend) {
-      margin-top: var(--spacing-base);
-    }
   `;
   return invert ? [
     css33`
@@ -5757,16 +5753,24 @@ var fieldsetLegend = css33`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
+var fieldsetAction = css33`
+  float: right;
+  margin-bottom: var(--spacing-base);
+  margin-left: var(--spacing-sm);
+`;
 var fieldsetBody = css33`
-  clear: left;
+  // Clears both so an actionButton floated right cannot spill into the fields.
+  clear: both;
+  margin-top: var(--spacing-base);
 `;
 
 // src/components/Input/Fieldset.tsx
 import { jsx as jsx37, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var Fieldset = React10.forwardRef(
-  ({ legend, disabled: disabled2, children, invert, ...props }, ref) => {
+  ({ legend, disabled: disabled2, children, invert, actionButton, ...props }, ref) => {
     return /* @__PURE__ */ jsxs24("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled: disabled2, ...props, children: [
       legend,
+      actionButton ? /* @__PURE__ */ jsx37("div", { css: fieldsetAction, children: actionButton }) : null,
       /* @__PURE__ */ jsx37("div", { css: fieldsetBody, children })
     ] });
   }
@@ -7701,18 +7705,38 @@ var Link = React13.forwardRef(
 );
 Link.displayName = "Link";
 var LinkWithRef = React13.forwardRef(
-  ({ linkManagerComponent: LinkManager, href, as, onClick, linkColor = "default", children, text, ...props }, ref) => /* @__PURE__ */ jsx55(
-    LinkManager,
-    {
-      ...props,
-      as,
-      href,
-      ref,
-      css: [link, textColor[linkColor]],
-      onClick,
-      children: text != null ? text : children
-    }
-  )
+  ({
+    linkManagerComponent: LinkManager,
+    href,
+    as,
+    onClick,
+    external,
+    linkColor = "default",
+    children,
+    text,
+    ...props
+  }, ref) => {
+    const externalAttrs = external ? {
+      target: "_blank",
+      rel: "noreferrer noopener"
+    } : {};
+    return /* @__PURE__ */ jsxs37(
+      LinkManager,
+      {
+        ...props,
+        ...externalAttrs,
+        as,
+        href,
+        ref,
+        css: [link, textColor[linkColor]],
+        onClick,
+        children: [
+          text != null ? text : children,
+          external ? /* @__PURE__ */ jsx55(Icon, { icon: CgExternal, iconColor: "currentColor", size: 20 }) : null
+        ]
+      }
+    );
+  }
 );
 LinkWithRef.displayName = "LinkWithRef";
 
@@ -11045,9 +11069,11 @@ var IntegrationModalHeader = ({ icon, name, menu, children }) => {
 
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
+import * as React19 from "react";
 import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
+  const modelPath = `${React19.useId()}.json`;
   let effectiveHeight = height;
   if (typeof height === "number" && height < 0) {
     effectiveHeight = typeof window === "undefined" ? "100%" : window.innerHeight + height;
@@ -11060,6 +11086,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
+      path: modelPath,
       defaultLanguage: "json",
       defaultValue,
       options: {
@@ -12930,7 +12957,7 @@ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose6 } from "@react-icons/all-files/cg/CgClose";
-import React19, { useCallback as useCallback11, useEffect as useEffect17, useRef as useRef11, useState as useState21 } from "react";
+import React20, { useCallback as useCallback11, useEffect as useEffect17, useRef as useRef11, useState as useState21 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css83 } from "@emotion/react";
@@ -13025,7 +13052,7 @@ var modalDialogInnerStyles = css83`
 import { jsx as jsx109, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = React19.forwardRef(
+var Modal = React20.forwardRef(
   ({
     header: header2,
     children,
@@ -14033,7 +14060,7 @@ var ObjectListSubText2 = ({ children, ...props }) => {
 };
 
 // src/components/Pagination/Pagination.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import Paginate from "react-paginate";
 
 // src/components/Pagination/Pagination.styles.ts
@@ -14169,7 +14196,7 @@ function Pagination({
   total,
   onPageChange
 }) {
-  const containerRef = React20.useRef(null);
+  const containerRef = React21.useRef(null);
   const pageCount = limit >= 1 ? Math.ceil(total / limit) : 0;
   const currentPage = limit >= 1 ? Math.ceil(offset / limit) : 0;
   const { marginPagesDisplayed, pageRangeDisplayed } = usePaginationDisplayRange(containerRef, pageCount);
@@ -14286,7 +14313,7 @@ var LabelLeadingIcon = ({
 };
 
 // src/components/ParameterInputs/ParameterActionButton.tsx
-import React21 from "react";
+import React22 from "react";
 
 // src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
 import { css as css94 } from "@emotion/react";
@@ -14390,7 +14417,7 @@ var ParameterActionButton = ({
       children
     }
   );
-  if (tooltip && (typeof tooltip === "string" || React21.isValidElement(tooltip))) {
+  if (tooltip && (typeof tooltip === "string" || React22.isValidElement(tooltip))) {
     return /* @__PURE__ */ jsx125(Tooltip, { title: tooltip, ...tooltipProps, children: buttonElement });
   }
   return buttonElement;
@@ -20266,7 +20293,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
 }
 
 // src/components/StackedModal/StackedModal.tsx
-import React25 from "react";
+import React26 from "react";
 
 // src/components/StackedModal/styles/StackedModal.styles.ts
 import { css as css115, keyframes as keyframes7 } from "@emotion/react";
@@ -20448,18 +20475,18 @@ function StackedModalStep({ children, buttonGroup }) {
 // src/components/StackedModal/StackedModal.tsx
 import { jsx as jsx158 } from "@emotion/react/jsx-runtime";
 function filterSteps(children) {
-  return React25.Children.toArray(children).filter(
-    (child) => React25.isValidElement(child) && child.type === StackedModalStep
+  return React26.Children.toArray(children).filter(
+    (child) => React26.isValidElement(child) && child.type === StackedModalStep
   );
 }
-var StackedModal = React25.forwardRef(
+var StackedModal = React26.forwardRef(
   ({ children, initialStep = 0, ...rest }, ref) => {
     const steps = filterSteps(children);
     return /* @__PURE__ */ jsx158(StackedModalProvider, { totalSteps: steps.length, initialStep, children: /* @__PURE__ */ jsx158(StackedModalInner, { ref, steps, ...rest }) });
   }
 );
 StackedModal.displayName = "StackedModal";
-var StackedModalInner = React25.forwardRef(
+var StackedModalInner = React26.forwardRef(
   ({ steps, onRequestClose, modalSize = "lg", width, height, "data-testid": dataTestId }, ref) => {
     return /* @__PURE__ */ jsx158("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ jsx158(
       Modal,
@@ -20763,39 +20790,39 @@ var ResponsiveTableContainer = ({ children }) => {
 };
 
 // src/components/Table/Table.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { jsx as jsx162 } from "@emotion/react/jsx-runtime";
-var Table = React26.forwardRef(
+var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("td", { ref, ...otherProps, children });
   }

package/dist/index.d.mts

@@ -2252,6 +2252,11 @@ type FieldsetProps = React$1.HTMLAttributes<HTMLFieldSetElement> & {
     legend: React$1.ReactElement;
     /** sets the disabled value and sets child inputs disabled */
     disabled?: boolean;
+    /**
+     * Optional control rendered on the legend's row, aligned to the right edge. Use it for an action that
+     * applies to the group as a whole (remove, reset). Give it an accessible name: it sits inside the
+     * fieldset, so it is also disabled along with the fields when `disabled` is set.
+     */
     actionButton?: React$1.ReactElement;
     children: React$1.ReactNode;
     /** Inverts the background to white for use on forms that already have a gray background */
@@ -2263,6 +2268,11 @@ declare const Fieldset: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes
     legend: React$1.ReactElement;
     /** sets the disabled value and sets child inputs disabled */
     disabled?: boolean;
+    /**
+     * Optional control rendered on the legend's row, aligned to the right edge. Use it for an action that
+     * applies to the group as a whole (remove, reset). Give it an accessible name: it sits inside the
+     * fieldset, so it is also disabled along with the fields when `disabled` is set.
+     */
     actionButton?: React$1.ReactElement;
     children: React$1.ReactNode;
     /** Inverts the background to white for use on forms that already have a gray background */

package/dist/index.d.ts

@@ -2252,6 +2252,11 @@ type FieldsetProps = React$1.HTMLAttributes<HTMLFieldSetElement> & {
     legend: React$1.ReactElement;
     /** sets the disabled value and sets child inputs disabled */
     disabled?: boolean;
+    /**
+     * Optional control rendered on the legend's row, aligned to the right edge. Use it for an action that
+     * applies to the group as a whole (remove, reset). Give it an accessible name: it sits inside the
+     * fieldset, so it is also disabled along with the fields when `disabled` is set.
+     */
     actionButton?: React$1.ReactElement;
     children: React$1.ReactNode;
     /** Inverts the background to white for use on forms that already have a gray background */
@@ -2263,6 +2268,11 @@ declare const Fieldset: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes
     legend: React$1.ReactElement;
     /** sets the disabled value and sets child inputs disabled */
     disabled?: boolean;
+    /**
+     * Optional control rendered on the legend's row, aligned to the right edge. Use it for an action that
+     * applies to the group as a whole (remove, reset). Give it an accessible name: it sits inside the
+     * fieldset, so it is also disabled along with the fields when `disabled` is set.
+     */
     actionButton?: React$1.ReactElement;
     children: React$1.ReactNode;
     /** Inverts the background to white for use on forms that already have a gray background */

package/dist/index.js

@@ -4795,13 +4795,13 @@ var ToastEntry = ({ toast: entry }) => {
   const duration = (_a = entry.timeout) != null ? _a : defaultTimeoutMs;
   const showCountdown = duration > 0 && entry.type !== "loading" && (data == null ? void 0 : data.kind) !== "progress";
   if ((data == null ? void 0 : data.kind) === "progress") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Description, { css: toastDescriptionStyles, children: data.label }) }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_progress.Progress.Root, { value: Math.max(0, Math.min(1, data.progress)) * 100, css: toastProgressRootStyles, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_progress.Progress.Track, { css: toastProgressTrackStyles, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_progress.Progress.Indicator, { css: toastProgressIndicatorStyles }) }) })
     ] });
   }
   if ((data == null ? void 0 : data.kind) === "undoable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastTypeIcon, { type: entry.type }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { css: toastBodyStyles, "data-testid": "toast-body", children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Description, { css: toastDescriptionStyles, children: data.description }),
@@ -4810,6 +4810,7 @@ var ToastEntry = ({ toast: entry }) => {
           {
             type: "button",
             css: toastUndoButtonStyles,
+            "data-testid": "toast-undo-button",
             onClick: () => {
               data.onUndo();
               toastManager.close(entry.id);
@@ -4818,14 +4819,14 @@ var ToastEntry = ({ toast: entry }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
       showCountdown ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastCountdownBar, { duration }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastTypeIcon, { type: entry.type }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Description, { css: toastDescriptionStyles, children: entry.description }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
     showCountdown ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastCountdownBar, { duration }) : null
   ] });
 };
@@ -7558,11 +7559,6 @@ function fieldsetContainer(invert) {
     border: 1px solid var(--gray-300);
 
     padding: var(--spacing-base);
-
-    // auto apply margins to child elements
-    > *:not(legend) {
-      margin-top: var(--spacing-base);
-    }
   `;
   return invert ? [
     import_react48.css`
@@ -7586,16 +7582,24 @@ var fieldsetLegend = import_react48.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
+var fieldsetAction = import_react48.css`
+  float: right;
+  margin-bottom: var(--spacing-base);
+  margin-left: var(--spacing-sm);
+`;
 var fieldsetBody = import_react48.css`
-  clear: left;
+  // Clears both so an actionButton floated right cannot spill into the fields.
+  clear: both;
+  margin-top: var(--spacing-base);
 `;
 
 // src/components/Input/Fieldset.tsx
 var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 var Fieldset = React10.forwardRef(
-  ({ legend, disabled: disabled2, children, invert, ...props }, ref) => {
+  ({ legend, disabled: disabled2, children, invert, actionButton, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled: disabled2, ...props, children: [
       legend,
+      actionButton ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { css: fieldsetAction, children: actionButton }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { css: fieldsetBody, children })
     ] });
   }
@@ -9546,18 +9550,38 @@ var Link = React13.forwardRef(
 );
 Link.displayName = "Link";
 var LinkWithRef = React13.forwardRef(
-  ({ linkManagerComponent: LinkManager, href, as, onClick, linkColor = "default", children, text, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-    LinkManager,
-    {
-      ...props,
-      as,
-      href,
-      ref,
-      css: [link, textColor[linkColor]],
-      onClick,
-      children: text != null ? text : children
-    }
-  )
+  ({
+    linkManagerComponent: LinkManager,
+    href,
+    as,
+    onClick,
+    external,
+    linkColor = "default",
+    children,
+    text,
+    ...props
+  }, ref) => {
+    const externalAttrs = external ? {
+      target: "_blank",
+      rel: "noreferrer noopener"
+    } : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      LinkManager,
+      {
+        ...props,
+        ...externalAttrs,
+        as,
+        href,
+        ref,
+        css: [link, textColor[linkColor]],
+        onClick,
+        children: [
+          text != null ? text : children,
+          external ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { icon: import_CgExternal2.CgExternal, iconColor: "currentColor", size: 20 }) : null
+        ]
+      }
+    );
+  }
 );
 LinkWithRef.displayName = "LinkWithRef";
 
@@ -12995,9 +13019,11 @@ var IntegrationModalHeader = ({ icon, name, menu, children }) => {
 // src/components/JsonEditor/JsonEditor.tsx
 init_emotion_jsx_shim();
 var import_react112 = __toESM(require("@monaco-editor/react"));
+var React19 = __toESM(require("react"));
 var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
+  const modelPath = `${React19.useId()}.json`;
   let effectiveHeight = height;
   if (typeof height === "number" && height < 0) {
     effectiveHeight = typeof window === "undefined" ? "100%" : window.innerHeight + height;
@@ -13010,6 +13036,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
+      path: modelPath,
       defaultLanguage: "json",
       defaultValue,
       options: {
@@ -16027,7 +16054,7 @@ var ObjectListSubText2 = ({ children, ...props }) => {
 
 // src/components/Pagination/Pagination.tsx
 init_emotion_jsx_shim();
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_react_paginate = __toESM(require("react-paginate"));
 
 // src/components/Pagination/Pagination.styles.ts
@@ -16165,7 +16192,7 @@ function Pagination({
   total,
   onPageChange
 }) {
-  const containerRef = React20.useRef(null);
+  const containerRef = React21.useRef(null);
   const pageCount = limit >= 1 ? Math.ceil(total / limit) : 0;
   const currentPage = limit >= 1 ? Math.ceil(offset / limit) : 0;
   const { marginPagesDisplayed, pageRangeDisplayed } = usePaginationDisplayRange(containerRef, pageCount);
@@ -22766,39 +22793,39 @@ var ResponsiveTableContainer = ({ children }) => {
 
 // src/components/Table/Table.tsx
 init_emotion_jsx_shim();
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
-var Table = React26.forwardRef(
+var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("td", { ref, ...otherProps, children });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.73.1-alpha.13+1ef8c4abf6",
+  "version": "20.74.2-alpha.26+464c3f6dc2",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -34,8 +34,8 @@
     "@storybook/react-vite": "10.4.6",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@uniformdev/canvas": "^20.73.1-alpha.13+1ef8c4abf6",
-    "@uniformdev/richtext": "^20.73.1-alpha.13+1ef8c4abf6",
+    "@uniformdev/canvas": "^20.74.2-alpha.26+464c3f6dc2",
+    "@uniformdev/richtext": "^20.74.2-alpha.26+464c3f6dc2",
     "autoprefixer": "10.5.0",
     "hygen": "6.2.11",
     "jsdom": "29.1.1",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1ef8c4abf6483807fd16f7fdb684411f9a303e93"
+  "gitHead": "464c3f6dc27746f5e89e2f61542ed2c458c35cc5"
 }