@uniformdev/design-system 18.35.1-alpha.27 → 18.38.2-alpha.6

package/dist/esm/index.js

@@ -11258,8 +11258,8 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
       children: /* @__PURE__ */ jsxs15("div", { css: calloutInner, children: [
         compact ? null : /* @__PURE__ */ jsx27("div", { css: calloutIconWrap, children: /* @__PURE__ */ jsx27(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
         /* @__PURE__ */ jsxs15("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title ? /* @__PURE__ */ jsx27("div", { css: [calloutTitle], children: title }) : null,
-          children ? /* @__PURE__ */ jsx27("div", { css: [calloutTypeData.descriptionColor], children }) : null
+          title ? /* @__PURE__ */ jsx27("div", { css: [calloutTitle], "data-test-id": "callout-title", children: title }) : null,
+          children ? /* @__PURE__ */ jsx27("div", { css: [calloutTypeData.descriptionColor], "data-test-id": "callout-description", children }) : null
         ] })
       ] })
     }
@@ -11388,40 +11388,9 @@ var CardContainer2 = ({
 // src/components/Card/LoadingCardSkeleton.tsx
 import { CgMoreAlt as CgMoreAlt2 } from "react-icons/cg";
 
-// src/components/Card/LoadingCardSkeleton.styles.ts
-import { css as css27 } from "@emotion/react";
-var LoadingCardSkeleton = css27`
-  animation: ${skeletonLoading} 1s linear infinite alternate;
-  color: var(--gray-400);
-  border-radius: var(--rounded-base);
-  padding: var(--spacing-md);
-  min-height: 160px;
-  position: relative;
-`;
-var LoadingText = css27`
-  animation: ${fadeIn} 1s linear infinite alternate;
-  border-radius: var(--rounded-base);
-  background: var(--gray-300);
-  display: block;
-`;
-var LoadingTitle = css27`
-  width: clamp(200px, 100vw, 60%);
-  height: var(--spacing-md);
-`;
-var LoadingTimeStamp = css27`
-  width: clamp(200px, 100vw, 30%);
-  height: var(--spacing-sm);
-`;
-var LoadingMenuIcon = css27`
-  animation: ${fadeIn} 1s linear infinite alternate;
-  position: absolute;
-  top: var(--spacing-md);
-  right: var(--spacing-md);
-`;
-
 // src/components/Layout/styles/Container.styles.ts
-import { css as css28 } from "@emotion/react";
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => css28`
+import { css as css27 } from "@emotion/react";
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => css27`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -11459,11 +11428,11 @@ var Container2 = ({
 };
 
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
-import { css as css29 } from "@emotion/react";
-var TwoColumnLayoutContainer = (bgColor) => css29`
+import { css as css28 } from "@emotion/react";
+var TwoColumnLayoutContainer = (bgColor) => css28`
   background: ${bgColor};
 `;
-var TwoColumnLayoutInner = (invertLayout) => css29`
+var TwoColumnLayoutInner = (invertLayout) => css28`
   display: grid;
   max-width: var(--site-width);
   margin-inline: auto;
@@ -11479,8 +11448,8 @@ var TwoColumnLayoutInner = (invertLayout) => css29`
     }`}
   }
 `;
-var TwoColumnLayoutMain = css29``;
-var TwoColumnLayoutSupporting = css29`
+var TwoColumnLayoutMain = css28``;
+var TwoColumnLayoutSupporting = css28`
   display: flex;
   flex-direction: column;
 `;
@@ -11500,8 +11469,8 @@ var TwoColumnLayout = ({
 };
 
 // src/components/Layout/styles/VerticalRhythm.styles.ts
-import { css as css30 } from "@emotion/react";
-var VerticalRhythmContainer = (size) => css30`
+import { css as css29 } from "@emotion/react";
+var VerticalRhythmContainer = (size) => css29`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -11514,6 +11483,37 @@ var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
   return /* @__PURE__ */ jsx32(Tag, { css: VerticalRhythmContainer(gap), ...props, children });
 };
 
+// src/components/Card/LoadingCardSkeleton.styles.ts
+import { css as css30 } from "@emotion/react";
+var LoadingCardSkeleton = css30`
+  animation: ${skeletonLoading} 1s linear infinite alternate;
+  color: var(--gray-400);
+  border-radius: var(--rounded-base);
+  padding: var(--spacing-md);
+  min-height: 160px;
+  position: relative;
+`;
+var LoadingText = css30`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  border-radius: var(--rounded-base);
+  background: var(--gray-300);
+  display: block;
+`;
+var LoadingTitle = css30`
+  width: clamp(200px, 100vw, 60%);
+  height: var(--spacing-md);
+`;
+var LoadingTimeStamp = css30`
+  width: clamp(200px, 100vw, 30%);
+  height: var(--spacing-sm);
+`;
+var LoadingMenuIcon = css30`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+`;
+
 // src/components/Card/LoadingCardSkeleton.tsx
 import { jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var LoadingCardSkeleton2 = () => {
@@ -11526,10 +11526,11 @@ var LoadingCardSkeleton2 = () => {
 
 // src/components/Counter/Counter.styles.ts
 import { css as css31 } from "@emotion/react";
-var counterContainer = css31`
+var counterContainer = (bgColor) => css31`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
+  background: ${bgColor};
   color: var(--brand-secondary-1);
   display: inline-flex;
   font-size: var(--fs-xxs);
@@ -11559,7 +11560,7 @@ var counterIcon = css31`
 
 // src/components/Counter/Counter.tsx
 import { jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
-var Counter = ({ count }) => {
+var Counter = ({ count, bgColor = "transparent" }) => {
   if (typeof count === "undefined") {
     return null;
   }
@@ -11568,7 +11569,7 @@ var Counter = ({ count }) => {
     /* @__PURE__ */ jsx34(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ jsx34("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ jsx34("div", { css: counterContainer, children: formatCount });
+  return /* @__PURE__ */ jsx34("div", { css: counterContainer(bgColor), children: formatCount });
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
@@ -12605,7 +12606,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx50("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ jsx50(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx50(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ jsx50("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ jsx50(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx50(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled,
@@ -13952,7 +13953,7 @@ var input2 = css60`
   padding: var(--spacing-sm);
   width: 100%;
   position: relative;
-  white-space: wrap;
+  white-space: normal;
   transition-property: background, border-color, color, box-shadow, border-radius;
   transition-duration: var(--duration-fast);
   transition-timing-function: var(--timing-ease-out);
@@ -14149,12 +14150,20 @@ var linkParameterBtn = css60`
   font-weight: var(--fw-regular);
   font-size: var(--fs-sm);
   line-height: 1;
+`;
+var linkParameterControls = css60`
   position: absolute;
-  inset: 0 var(--spacing-base) 0 auto;
+  inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: var(--spacing-base);
 `;
-var linkParameterInput = css60`
-  padding-right: calc(var(--spacing-2xl) + var(--spacing-base));
+var linkParameterInput = (withExternalLinkIcon) => css60`
+  padding-right: calc(
+    ${withExternalLinkIcon ? "var(--spacing-2xl)" : "var(--spacing-xl)"} + var(--spacing-base)
+  );
 `;
 var linkParameterIcon = css60`
   align-items: center;
@@ -14572,7 +14581,7 @@ var ParameterInputInner = forwardRef10(
 import { forwardRef as forwardRef11 } from "react";
 import { jsx as jsx83, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef11(
-  ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
+  ({ buttonText = "Select link", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx83(
       ParameterShell,
@@ -14602,7 +14611,7 @@ var ParameterLinkInner = forwardRef11(
         "input",
         {
           type: "text",
-          css: [input2, linkParameterInput],
+          css: [input2, linkParameterInput(!!externalLink)],
           readOnly: Boolean(props.value),
           id,
           ref,
@@ -14610,28 +14619,30 @@ var ParameterLinkInner = forwardRef11(
           ...props
         }
       ),
-      /* @__PURE__ */ jsx83(
-        "button",
-        {
-          type: "button",
-          css: linkParameterBtn,
-          disabled,
-          onClick: onConnectLink,
-          title: "edit current selection",
-          children: "edit"
-        }
-      ),
-      externalLink ? /* @__PURE__ */ jsx83(
-        "a",
-        {
-          href: externalLink,
-          css: linkParameterIcon,
-          title: "Open link in new tab",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: /* @__PURE__ */ jsx83(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
-        }
-      ) : null
+      /* @__PURE__ */ jsxs55("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ jsx83(
+          "button",
+          {
+            type: "button",
+            css: linkParameterBtn,
+            disabled,
+            onClick: onConnectLink,
+            title: "edit current selection",
+            children: "edit"
+          }
+        ),
+        externalLink ? /* @__PURE__ */ jsx83(
+          "a",
+          {
+            href: externalLink,
+            css: linkParameterIcon,
+            title: "Open link in new tab",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: /* @__PURE__ */ jsx83(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+          }
+        ) : null
+      ] })
     ] });
   }
 );

package/dist/index.d.ts

@@ -20249,6 +20249,8 @@ type ButtonProps = ButtonProps$1 & {
      * @default "md"
      * @deprecated size might no longer be used as we are trying to consolidate button designs */
     size?: ButtonSizeProps;
+    /** @deprecated rounded is no longer used */
+    rounded?: boolean;
 };
 /**
  * Uniform Button Component
@@ -20377,9 +20379,13 @@ declare const LoadingCardSkeleton: () => _emotion_react_types_jsx_namespace.Emot
 type CounterProps = {
     /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
     count: number | undefined;
+    /** sets the background color
+     * @default 'transparent'
+     */
+    bgColor?: 'var(--white)' | 'var(--gray-50)' | 'transparent';
 };
 /** @example <Counter count={1} /> */
-declare const Counter: ({ count }: CounterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare const Counter: ({ count, bgColor }: CounterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
 
 type TextAlignProps = 'left' | 'right' | 'center';
 type BoxHeightProps = 'auto' | 'xs' | 'sm' | 'md' | 'lg';
@@ -21298,7 +21304,7 @@ type ParameterLabelProps = HTMLAttributes<HTMLLabelElement> & {
 /** @example <ParameterLabel id="my-label">my label</ParameterLabel> */
 declare const ParameterLabel: ({ id, asSpan, children, ...props }: ParameterLabelProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type ParameterLinkProps = Omit<CommonParameterInputProps, 'menuItems' | 'labelLeadingIcon'> & React.InputHTMLAttributes<HTMLInputElement> & {
+type ParameterLinkProps = CommonParameterInputProps & React.InputHTMLAttributes<HTMLInputElement> & {
     /** (optional) sets the button text when value is empty
      * @default 'Configure link'
      */
@@ -21310,7 +21316,13 @@ type ParameterLinkProps = Omit<CommonParameterInputProps, 'menuItems' | 'labelLe
     externalLink?: string;
 };
 /** @example <ParameterLink label="my label" id="my-id" options={[{ label: 'option label', value: 0}]} */
-declare const ParameterLink: React$1.ForwardRefExoticComponent<Omit<CommonParameterInputProps, "menuItems" | "labelLeadingIcon"> & React$1.InputHTMLAttributes<HTMLInputElement> & {
+declare const ParameterLink: React$1.ForwardRefExoticComponent<CommonParameterProps & {
+    caption?: string | undefined;
+    menuItems?: React$1.ReactNode;
+    errorTestId?: string | undefined;
+    captionTestId?: string | undefined;
+    title?: string | undefined;
+} & React$1.InputHTMLAttributes<HTMLInputElement> & {
     /** (optional) sets the button text when value is empty
      * @default 'Configure link'
      */

package/dist/index.js

@@ -11464,8 +11464,8 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
       children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: calloutInner, children: [
         compact ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: calloutIconWrap, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: [calloutTitle], children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: [calloutTypeData.descriptionColor], children }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: [calloutTitle], "data-test-id": "callout-title", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { css: [calloutTypeData.descriptionColor], "data-test-id": "callout-description", children }) : null
         ] })
       ] })
     }
@@ -11594,40 +11594,9 @@ var CardContainer2 = ({
 // src/components/Card/LoadingCardSkeleton.tsx
 var import_cg8 = require("react-icons/cg");
 
-// src/components/Card/LoadingCardSkeleton.styles.ts
-var import_react34 = require("@emotion/react");
-var LoadingCardSkeleton = import_react34.css`
-  animation: ${skeletonLoading} 1s linear infinite alternate;
-  color: var(--gray-400);
-  border-radius: var(--rounded-base);
-  padding: var(--spacing-md);
-  min-height: 160px;
-  position: relative;
-`;
-var LoadingText = import_react34.css`
-  animation: ${fadeIn} 1s linear infinite alternate;
-  border-radius: var(--rounded-base);
-  background: var(--gray-300);
-  display: block;
-`;
-var LoadingTitle = import_react34.css`
-  width: clamp(200px, 100vw, 60%);
-  height: var(--spacing-md);
-`;
-var LoadingTimeStamp = import_react34.css`
-  width: clamp(200px, 100vw, 30%);
-  height: var(--spacing-sm);
-`;
-var LoadingMenuIcon = import_react34.css`
-  animation: ${fadeIn} 1s linear infinite alternate;
-  position: absolute;
-  top: var(--spacing-md);
-  right: var(--spacing-md);
-`;
-
 // src/components/Layout/styles/Container.styles.ts
-var import_react35 = require("@emotion/react");
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react35.css`
+var import_react34 = require("@emotion/react");
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react34.css`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -11665,11 +11634,11 @@ var Container2 = ({
 };
 
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
-var import_react36 = require("@emotion/react");
-var TwoColumnLayoutContainer = (bgColor) => import_react36.css`
+var import_react35 = require("@emotion/react");
+var TwoColumnLayoutContainer = (bgColor) => import_react35.css`
   background: ${bgColor};
 `;
-var TwoColumnLayoutInner = (invertLayout) => import_react36.css`
+var TwoColumnLayoutInner = (invertLayout) => import_react35.css`
   display: grid;
   max-width: var(--site-width);
   margin-inline: auto;
@@ -11685,8 +11654,8 @@ var TwoColumnLayoutInner = (invertLayout) => import_react36.css`
     }`}
   }
 `;
-var TwoColumnLayoutMain = import_react36.css``;
-var TwoColumnLayoutSupporting = import_react36.css`
+var TwoColumnLayoutMain = import_react35.css``;
+var TwoColumnLayoutSupporting = import_react35.css`
   display: flex;
   flex-direction: column;
 `;
@@ -11706,8 +11675,8 @@ var TwoColumnLayout = ({
 };
 
 // src/components/Layout/styles/VerticalRhythm.styles.ts
-var import_react37 = require("@emotion/react");
-var VerticalRhythmContainer = (size) => import_react37.css`
+var import_react36 = require("@emotion/react");
+var VerticalRhythmContainer = (size) => import_react36.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -11720,6 +11689,37 @@ var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Tag, { css: VerticalRhythmContainer(gap), ...props, children });
 };
 
+// src/components/Card/LoadingCardSkeleton.styles.ts
+var import_react37 = require("@emotion/react");
+var LoadingCardSkeleton = import_react37.css`
+  animation: ${skeletonLoading} 1s linear infinite alternate;
+  color: var(--gray-400);
+  border-radius: var(--rounded-base);
+  padding: var(--spacing-md);
+  min-height: 160px;
+  position: relative;
+`;
+var LoadingText = import_react37.css`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  border-radius: var(--rounded-base);
+  background: var(--gray-300);
+  display: block;
+`;
+var LoadingTitle = import_react37.css`
+  width: clamp(200px, 100vw, 60%);
+  height: var(--spacing-md);
+`;
+var LoadingTimeStamp = import_react37.css`
+  width: clamp(200px, 100vw, 30%);
+  height: var(--spacing-sm);
+`;
+var LoadingMenuIcon = import_react37.css`
+  animation: ${fadeIn} 1s linear infinite alternate;
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+`;
+
 // src/components/Card/LoadingCardSkeleton.tsx
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 var LoadingCardSkeleton2 = () => {
@@ -11732,10 +11732,11 @@ var LoadingCardSkeleton2 = () => {
 
 // src/components/Counter/Counter.styles.ts
 var import_react38 = require("@emotion/react");
-var counterContainer = import_react38.css`
+var counterContainer = (bgColor) => import_react38.css`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
+  background: ${bgColor};
   color: var(--brand-secondary-1);
   display: inline-flex;
   font-size: var(--fs-xxs);
@@ -11765,7 +11766,7 @@ var counterIcon = import_react38.css`
 
 // src/components/Counter/Counter.tsx
 var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
-var Counter = ({ count }) => {
+var Counter = ({ count, bgColor = "transparent" }) => {
   if (typeof count === "undefined") {
     return null;
   }
@@ -11774,7 +11775,7 @@ var Counter = ({ count }) => {
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { css: counterContainer, children: formatCount });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { css: counterContainer(bgColor), children: formatCount });
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
@@ -12811,7 +12812,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled,
@@ -14153,7 +14154,7 @@ var input2 = import_react77.css`
   padding: var(--spacing-sm);
   width: 100%;
   position: relative;
-  white-space: wrap;
+  white-space: normal;
   transition-property: background, border-color, color, box-shadow, border-radius;
   transition-duration: var(--duration-fast);
   transition-timing-function: var(--timing-ease-out);
@@ -14350,12 +14351,20 @@ var linkParameterBtn = import_react77.css`
   font-weight: var(--fw-regular);
   font-size: var(--fs-sm);
   line-height: 1;
+`;
+var linkParameterControls = import_react77.css`
   position: absolute;
-  inset: 0 var(--spacing-base) 0 auto;
+  inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: var(--spacing-base);
 `;
-var linkParameterInput = import_react77.css`
-  padding-right: calc(var(--spacing-2xl) + var(--spacing-base));
+var linkParameterInput = (withExternalLinkIcon) => import_react77.css`
+  padding-right: calc(
+    ${withExternalLinkIcon ? "var(--spacing-2xl)" : "var(--spacing-xl)"} + var(--spacing-base)
+  );
 `;
 var linkParameterIcon = import_react77.css`
   align-items: center;
@@ -14773,7 +14782,7 @@ var ParameterInputInner = (0, import_react85.forwardRef)(
 var import_react86 = require("react");
 var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
 var ParameterLink = (0, import_react86.forwardRef)(
-  ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
+  ({ buttonText = "Select link", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ParameterShell,
@@ -14803,7 +14812,7 @@ var ParameterLinkInner = (0, import_react86.forwardRef)(
         "input",
         {
           type: "text",
-          css: [input2, linkParameterInput],
+          css: [input2, linkParameterInput(!!externalLink)],
           readOnly: Boolean(props.value),
           id,
           ref,
@@ -14811,28 +14820,30 @@ var ParameterLinkInner = (0, import_react86.forwardRef)(
           ...props
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-        "button",
-        {
-          type: "button",
-          css: linkParameterBtn,
-          disabled,
-          onClick: onConnectLink,
-          title: "edit current selection",
-          children: "edit"
-        }
-      ),
-      externalLink ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-        "a",
-        {
-          href: externalLink,
-          css: linkParameterIcon,
-          title: "Open link in new tab",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
-        }
-      ) : null
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "button",
+          {
+            type: "button",
+            css: linkParameterBtn,
+            disabled,
+            onClick: onConnectLink,
+            title: "edit current selection",
+            children: "edit"
+          }
+        ),
+        externalLink ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "a",
+          {
+            href: externalLink,
+            css: linkParameterIcon,
+            title: "Open link in new tab",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+          }
+        ) : null
+      ] })
     ] });
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.35.1-alpha.27+183715405",
+  "version": "18.38.2-alpha.6+d4938f167",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
     "@storybook/addon-docs": "6.5.16",
     "@storybook/client-api": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.0.33",
+    "@types/react": "18.0.35",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
     "postcss": "8.4.21",
@@ -36,7 +36,7 @@
     "lottie-react": "^2.3.1",
     "monaco-editor": "0.37.1",
     "param-case": "3.0.4",
-    "react-hotkeys-hook": "4.3.8",
+    "react-hotkeys-hook": "4.4.0",
     "react-icons": "4.8.0",
     "react-paginate": "8.1.5",
     "react-select": "5.7.2",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "18371540510874773bba7b3e0fbb0c6427cb8e07"
+  "gitHead": "d4938f167d196bbd523e6cdd031f56fab4ceebf6"
 }