@uniformdev/design-system 20.74.6-alpha.2 → 20.74.7-alpha.3

package/dist/esm/index.js

@@ -5730,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`
@@ -5758,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 })
     ] });
   }
@@ -7702,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";
 

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

@@ -7559,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`
@@ -7587,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 })
     ] });
   }
@@ -9547,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";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.74.6-alpha.2+d9426e9b81",
+  "version": "20.74.7-alpha.3+f1d91835fc",
   "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.74.6-alpha.2+d9426e9b81",
-    "@uniformdev/richtext": "^20.74.6-alpha.2+d9426e9b81",
+    "@uniformdev/canvas": "^20.74.7-alpha.3+f1d91835fc",
+    "@uniformdev/richtext": "^20.74.7-alpha.3+f1d91835fc",
     "autoprefixer": "10.5.0",
     "hygen": "6.2.11",
     "jsdom": "29.1.1",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d9426e9b81a6943318d903c723f23f3c0cbb17ad"
+  "gitHead": "f1d91835fca9645311dde0f546008b1bfc98fbdf"
 }