@uniformdev/design-system 18.29.0 → 18.30.1-alpha.16

package/dist/esm/index.js

@@ -306,6 +306,20 @@ var buttonSecondaryInvert = css`
 
   ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
 `;
+var buttonPrimaryInvert = css`
+  background: var(--white);
+  color: var(--brand-secondary-1);
+  box-shadow: 0 0 0 1px var(--brand-secondary-1);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+  gap: var(--spacing-sm);
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonUnimportant = css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
@@ -1401,18 +1415,104 @@ var Heading = ({
 // src/components/Badges/Badge.styles.ts
 import { css as css10 } from "@emotion/react";
 var BadgeContainer = css10`
-  background: var(--brand-secondary-2);
+  --caution-desc: rgb(161, 98, 7);
+  --caution-title: rgb(133, 77, 14);
+  --caution-container: rgb(254, 252, 232);
+
+  --danger-desc: rgb(185, 28, 28);
+  --danger-title: rgb(153, 27, 27);
+  --danger-container: rgb(254, 242, 242);
+
+  --info-desc: rgb(29, 78, 216);
+  --info-title: rgb(30, 64, 175);
+  --info-container: rgb(239, 246, 255);
+
+  --note-desc: var(--gray-700);
+  --note-title: var(--gray-800);
+  --note-container: var(--gray-50);
+
+  --success-desc: rgb(21, 128, 61);
+  --success-title: rgb(22, 101, 52);
+  --success-container: rgb(240, 253, 250);
+
   border-radius: var(--rounded-base);
-  color: var(--brand-secondary-1);
   display: inline-block;
+`;
+var ExtraSmall = css10`
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--fs-xxs);
+`;
+var Small = css10`
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--fs-xs);
+`;
+var Base = css10`
   padding: var(--spacing-sm) var(--spacing-base);
   font-size: var(--fs-sm);
 `;
+var Caution = css10`
+  background-color: var(--caution-container);
+  color: var(--caution-title);
+`;
+var Info = css10`
+  background-color: var(--info-container);
+  color: var(--info-title);
+`;
+var Note = css10`
+  background-color: var(--note-container);
+  color: var(--note-title);
+`;
+var Success = css10`
+  background-color: var(--success-container);
+  color: var(--success-title);
+`;
+var Error2 = css10`
+  background-color: var(--danger-container);
+  color: var(--danger-title);
+`;
+var Unimportant = css10`
+  background: var(--brand-secondary-2);
+  color: var(--brand-secondary-1);
+`;
+var UppercaseText = css10`
+  text-transform: uppercase;
+`;
 
 // src/components/Badges/Badge.tsx
 import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
-var Badge = ({ text }) => {
-  return /* @__PURE__ */ jsx9("span", { css: BadgeContainer, children: text });
+var Badge = ({
+  text,
+  theme = "unimportant",
+  size = "base",
+  uppercaseText,
+  ...props
+}) => {
+  const themeStyles = {
+    caution: Caution,
+    error: Error2,
+    info: Info,
+    note: Note,
+    success: Success,
+    unimportant: Unimportant
+  };
+  const sizeStyles = {
+    xs: ExtraSmall,
+    sm: Small,
+    base: Base
+  };
+  return /* @__PURE__ */ jsx9(
+    "span",
+    {
+      css: [
+        BadgeContainer,
+        themeStyles[theme],
+        sizeStyles[size],
+        uppercaseText ? UppercaseText : void 0
+      ],
+      ...props,
+      children: text
+    }
+  );
 };
 
 // src/components/Typography/Link.tsx
@@ -10391,6 +10491,7 @@ var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
       primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
@@ -12295,27 +12396,22 @@ var Textarea = ({
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
-import { ClassNames } from "@emotion/react";
 import MonacoEditor from "@monaco-editor/react";
-
-// src/components/JsonEditor/JsonEditor.styles.ts
-import { css as css35 } from "@emotion/react";
-var JsonEditorContainer = css35`
-  min-height: 150px;
-`;
-
-// src/components/JsonEditor/JsonEditor.tsx
 import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
+var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
   let effectiveHeight = height;
   if (typeof height === "number" && height < 0) {
     effectiveHeight = typeof window === "undefined" ? "100%" : window.innerHeight + height;
   }
-  return /* @__PURE__ */ jsx47(ClassNames, { children: ({ css: css67, cx }) => /* @__PURE__ */ jsx47(
+  if (typeof effectiveHeight === "number" && effectiveHeight < minEditorHeightPx) {
+    effectiveHeight = minEditorHeightPx;
+  }
+  return /* @__PURE__ */ jsx47(
     MonacoEditor,
     {
       height: effectiveHeight,
-      className: cx("uniform-json-editor", css67(JsonEditorContainer)),
+      className: "uniform-json-editor",
       defaultLanguage: "json",
       defaultValue,
       options: {
@@ -12344,12 +12440,12 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
       },
       onChange
     }
-  ) });
+  );
 };
 
 // src/components/Layout/styles/Container.styles.ts
-import { css as css36 } from "@emotion/react";
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => css36`
+import { css as css35 } from "@emotion/react";
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => css35`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -12387,8 +12483,8 @@ var Container2 = ({
 };
 
 // src/components/Layout/styles/VerticalRhythm.styles.ts
-import { css as css37 } from "@emotion/react";
-var VerticalRhythmContainer = (size) => css37`
+import { css as css36 } from "@emotion/react";
+var VerticalRhythmContainer = (size) => css36`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -12402,34 +12498,34 @@ var VerticalRhythm = ({ tag = "div", gap = "base", children, ...props }) => {
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-import { css as css38 } from "@emotion/react";
-var LimitsBarContainer = css38`
+import { css as css37 } from "@emotion/react";
+var LimitsBarContainer = css37`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = css38`
+var LimitsBarProgressBar = css37`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = css38`
+var LimitsBarProgressBarLine = css37`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = css38`
+var LimitsBarLabelContainer = css37`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = css38`
+var LimitsBarLabel = css37`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => css38`
+var LimitsBarBgColor = (statusColor) => css37`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => css38`
+var LimitsBarTextColor = (statusColor) => css37`
   color: ${statusColor};
 `;
 
@@ -12479,8 +12575,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-import { css as css39 } from "@emotion/react";
-var LinkListContainer = css39`
+import { css as css38 } from "@emotion/react";
+var LinkListContainer = css38`
   padding: var(--spacing-md) var(--spacing-lg) var(--spacing-2xl);
   ${mq("sm")} {
     grid-column: last-col / span 1;
@@ -12498,14 +12594,14 @@ var LinkList = ({ title, children, ...props }) => {
 };
 
 // src/components/List/ScrollableList.tsx
-import { css as css41 } from "@emotion/react";
+import { css as css40 } from "@emotion/react";
 
 // src/components/List/styles/ScrollableList.styles.ts
-import { css as css40 } from "@emotion/react";
-var ScrollableListContainer = css40`
+import { css as css39 } from "@emotion/react";
+var ScrollableListContainer = css39`
   position: relative;
 `;
-var ScrollableListInner = css40`
+var ScrollableListInner = css39`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -12529,7 +12625,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ jsx52(
       "span",
       {
-        css: css41`
+        css: css40`
             ${labelText}
           `,
         children: label
@@ -12543,8 +12639,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 import { CgCheck } from "react-icons/cg";
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-import { css as css42 } from "@emotion/react";
-var ScrollableListItemContainer = css42`
+import { css as css41 } from "@emotion/react";
+var ScrollableListItemContainer = css41`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -12554,10 +12650,10 @@ var ScrollableListItemContainer = css42`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemActive = css42`
+var ScrollableListItemActive = css41`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = css42`
+var ScrollableListItemBtn = css41`
   align-items: center;
   border: none;
   background: transparent;
@@ -12572,26 +12668,26 @@ var ScrollableListItemBtn = css42`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = css42`
+var ScrollableListInputLabel = css41`
   align-items: center;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = css42`
+var ScrollableListInputText = css41`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   font-weight: var(--fw-bold);
   flex-grow: 1;
 `;
-var ScrollableListHiddenInput = css42`
+var ScrollableListHiddenInput = css41`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = css42`
+var ScrollableListIcon = css41`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -12619,7 +12715,7 @@ var ScrollableListInputItem = ({
 };
 
 // src/components/List/ScrollableListItem.tsx
-import { css as css43 } from "@emotion/react";
+import { css as css42 } from "@emotion/react";
 import { jsx as jsx54, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({ buttonText, active, ...props }) => {
   return /* @__PURE__ */ jsx54("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs32("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
@@ -12633,10 +12729,10 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
         fill: "currentColor",
         xmlns: "http://www.w3.org/2000/svg",
         "aria-hidden": !active,
-        css: css43`
+        css: css42`
             color: var(--brand-secondary-3);
             transition: opacity var(--duration-fast) var(--timing-ease-out);
-            ${active ? css43`
+            ${active ? css42`
                   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
                 ` : "opacity: 0;"}
           `,
@@ -12654,7 +12750,7 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-import { css as css44, keyframes as keyframes3 } from "@emotion/react";
+import { css as css43, keyframes as keyframes3 } from "@emotion/react";
 var bounceFade = keyframes3`
     0%, 100% {
         opacity: 1.0;
@@ -12672,11 +12768,11 @@ var bounceFade = keyframes3`
         transform: translateY(-5px);
     }
 `;
-var loader = css44`
+var loader = css43`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = css44`
+var loadingDot = css43`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -12701,8 +12797,8 @@ var loadingDot = css44`
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
-var LoadingIndicator = () => {
-  return /* @__PURE__ */ jsxs33("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+var LoadingIndicator = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs33("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot })
@@ -12713,8 +12809,8 @@ var LoadingIndicator = () => {
 import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef4 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-import { css as css45 } from "@emotion/react";
-var loadingOverlayContainer = css45`
+import { css as css44 } from "@emotion/react";
+var loadingOverlayContainer = css44`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -12722,24 +12818,24 @@ var loadingOverlayContainer = css45`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = css45`
+var loadingOverlayVisible = css44`
   display: flex;
 `;
-var loadingOverlayHidden = css45`
+var loadingOverlayHidden = css44`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => css45`
+var loadingOverlayBackground = (bgColor) => css44`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = css45`
+var loadingOverlayBody = css44`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = css45`
+var loadingOverlayMessage = css44`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -12777,6 +12873,7 @@ var LoadingOverlay = ({
       role: "alert",
       css: [loadingOverlayContainer, { zIndex }, isActive ? loadingOverlayVisible : loadingOverlayHidden],
       "aria-hidden": !isActive,
+      "aria-busy": isActive && !isPaused,
       children: [
         /* @__PURE__ */ jsx56("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
         /* @__PURE__ */ jsx56("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs34("div", { css: loadingOverlayBody, children: [
@@ -12833,12 +12930,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { css as css47 } from "@emotion/react";
+import { css as css46 } from "@emotion/react";
 import { CgAdd as CgAdd2, CgChevronRight as CgChevronRight2 } from "react-icons/cg";
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-import { css as css46 } from "@emotion/react";
-var IntegrationTileContainer = css46`
+import { css as css45 } from "@emotion/react";
+var IntegrationTileContainer = css45`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -12869,22 +12966,22 @@ var IntegrationTileContainer = css46`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = css46`
+var IntegrationTileBtnDashedBorder = css45`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = css46`
+var IntegrationTileTitle = css45`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = css46`
+var IntegrationTitleLogo = css45`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = css46`
+var IntegrationTileName = css45`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -12897,7 +12994,7 @@ var IntegrationTileName = css46`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = css46`
+var IntegrationAddedText = css45`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -12912,7 +13009,7 @@ var IntegrationAddedText = css46`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => css46`
+var IntegrationCustomBadgeText = (theme) => css45`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -12926,26 +13023,26 @@ var IntegrationCustomBadgeText = (theme) => css46`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = css46`
+var IntegrationAuthorBadgeIcon = css45`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = css46`
+var IntegrationTitleFakeButton = css45`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = css46`
+var IntegrationTileFloatingButton = css45`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => css46`
+var IntegrationTileFloatingButtonMessage = (clicked) => css45`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -12992,7 +13089,7 @@ var CreateTeamIntegrationTile = ({
               icon: CgChevronRight2,
               iconColor: "currentColor",
               size: 20,
-              css: css47`
+              css: css46`
               order: 1;
             `
             }
@@ -13002,7 +13099,7 @@ var CreateTeamIntegrationTile = ({
               icon: CgAdd2,
               iconColor: "currentColor",
               size: 16,
-              css: css47`
+              css: css46`
               order: -1;
             `
             }
@@ -13090,7 +13187,7 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-import { css as css48 } from "@emotion/react";
+import { css as css47 } from "@emotion/react";
 import { useEffect as useEffect7, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
@@ -13139,7 +13236,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ jsx61(
                 "span",
                 {
-                  css: css48`
+                  css: css47`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -13159,8 +13256,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-import { css as css49 } from "@emotion/react";
-var IntegrationLoadingTileContainer = css49`
+import { css as css48 } from "@emotion/react";
+var IntegrationLoadingTileContainer = css48`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -13187,17 +13284,17 @@ var IntegrationLoadingTileContainer = css49`
     }
   }
 `;
-var IntegrationLoadingTileImg = css49`
+var IntegrationLoadingTileImg = css48`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = css49`
+var IntegrationLoadingTileText = css48`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = css49`
+var IntegrationLoadingFrame = css48`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -13213,13 +13310,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-import { css as css50 } from "@emotion/react";
-var IntegrationModalIconContainer = css50`
+import { css as css49 } from "@emotion/react";
+var IntegrationModalIconContainer = css49`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = css50`
+var IntegrationModalImage = css49`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -13295,13 +13392,13 @@ var IntegrationTile = ({
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-import { css as css51 } from "@emotion/react";
-var TileContainerWrapper = css51`
+import { css as css50 } from "@emotion/react";
+var TileContainerWrapper = css50`
   background: var(--brand-secondary-2);
   padding: var(--spacing-base);
   margin-bottom: var(--spacing-lg);
 `;
-var TileContainerInner = css51`
+var TileContainerInner = css50`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: var(--spacing-base);
@@ -13314,31 +13411,31 @@ var TileContainer = ({ children, ...props }) => {
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-import { css as css52 } from "@emotion/react";
-var IntegrationModalHeaderSVGBackground = css52`
+import { css as css51 } from "@emotion/react";
+var IntegrationModalHeaderSVGBackground = css51`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = css52`
+var IntegrationModalHeaderGroup = css51`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = css52`
+var IntegrationModalHeaderTitleGroup = css51`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = css52`
+var IntegrationModalHeaderTitle = css51`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = css52`
+var IntegrationModalHeaderMenuPlacement = css51`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = css52`
+var IntegrationModalHeaderContentWrapper = css51`
   position: relative;
   z-index: var(--z-10);
 `;
@@ -13409,8 +13506,8 @@ import {
 } from "reakit/Tooltip";
 
 // src/components/Tooltip/Tooltip.styles.ts
-import { css as css53 } from "@emotion/react";
-var TooltipContainer = css53`
+import { css as css52 } from "@emotion/react";
+var TooltipContainer = css52`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -13418,7 +13515,7 @@ var TooltipContainer = css53`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = css53`
+var TooltipArrowStyles = css52`
   svg {
     fill: var(--gray-300);
   }
@@ -13438,8 +13535,8 @@ function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
 }
 
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-import { css as css54 } from "@emotion/react";
-var inputIconBtn = css54`
+import { css as css53 } from "@emotion/react";
+var inputIconBtn = css53`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -13517,8 +13614,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css55 } from "@emotion/react";
-var inputContainer2 = css55`
+import { css as css54 } from "@emotion/react";
+var inputContainer2 = css54`
   position: relative;
 
   &:hover,
@@ -13530,14 +13627,14 @@ var inputContainer2 = css55`
     }
   }
 `;
-var labelText2 = css55`
+var labelText2 = css54`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css55`
+var input2 = css54`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -13581,18 +13678,18 @@ var input2 = css55`
     color: var(--gray-400);
   }
 `;
-var selectInput = css55`
+var selectInput = css54`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = css55`
+var inputWrapper = css54`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css55`
+var inputIcon2 = css54`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -13608,7 +13705,7 @@ var inputIcon2 = css55`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css55`
+var inputToggleLabel2 = css54`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -13619,7 +13716,7 @@ var inputToggleLabel2 = css55`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css55`
+var toggleInput2 = css54`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -13658,7 +13755,7 @@ var toggleInput2 = css55`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css55`
+var inlineLabel2 = css54`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -13674,7 +13771,7 @@ var inlineLabel2 = css55`
     }
   }
 `;
-var inputMenu = css55`
+var inputMenu = css54`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -13690,14 +13787,14 @@ var inputMenu = css55`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css55`
+var textarea2 = css54`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = css55`
+var imageWrapper = css54`
   background: var(--white);
 `;
-var img = css55`
+var img = css54`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -13705,7 +13802,7 @@ var img = css55`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = css55`
+var dataConnectButton = css54`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -13740,7 +13837,7 @@ var dataConnectButton = css55`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css55`
+var linkParameterBtn = css54`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -13752,10 +13849,10 @@ var linkParameterBtn = css55`
   inset: 0 var(--spacing-base) 0 auto;
   padding: 0 var(--spacing-base);
 `;
-var linkParameterInput = css55`
+var linkParameterInput = css54`
   padding-right: calc(var(--spacing-2xl) + var(--spacing-base));
 `;
-var linkParameterIcon = css55`
+var linkParameterIcon = css54`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -13804,20 +13901,20 @@ function ParameterDataResource({
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css56 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css56`
+import { css as css55 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css55`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css56`
+var ParameterDrawerHeaderTitleGroup = css55`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css56`
+var ParameterDrawerHeaderTitle = css55`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -13840,8 +13937,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef7 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css57 } from "@emotion/react";
-var fieldsetStyles = css57`
+import { css as css56 } from "@emotion/react";
+var fieldsetStyles = css56`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -13852,7 +13949,7 @@ var fieldsetStyles = css57`
     }
   }
 `;
-var fieldsetLegend2 = css57`
+var fieldsetLegend2 = css56`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -13909,15 +14006,15 @@ var ParameterMenuButton = forwardRef8(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css58 } from "@emotion/react";
-var emptyParameterShell = css58`
+import { css as css57 } from "@emotion/react";
+var emptyParameterShell = css57`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = css58`
+var emptyParameterShellText = css57`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -13925,7 +14022,7 @@ var emptyParameterShellText = css58`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css58`
+var overrideMarker = css57`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -14433,13 +14530,13 @@ import {
 import { Portal as Portal2 } from "reakit/Portal";
 
 // src/components/Popover/Popover.styles.ts
-import { css as css59 } from "@emotion/react";
-var PopoverBtn = css59`
+import { css as css58 } from "@emotion/react";
+var PopoverBtn = css58`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = css59`
+var Popover = css58`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -14471,19 +14568,19 @@ var Popover2 = ({
 };
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css61 } from "@emotion/react";
+import { css as css60 } from "@emotion/react";
 import { useMemo as useMemo2 } from "react";
 import { CgCheckO, CgRadioCheck, CgRecord } from "react-icons/cg";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css60 } from "@emotion/react";
-var progressListStyles = css60`
+import { css as css59 } from "@emotion/react";
+var progressListStyles = css59`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css60`
+var progressListItemStyles = css59`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -14538,12 +14635,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo2(() => {
     if (error) {
-      return errorLevel === "caution" ? css61`
+      return errorLevel === "caution" ? css60`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css61`
+          ` : css60`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -14551,13 +14648,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css61`
+      completed: css60`
         opacity: 0.75;
       `,
-      inProgress: css61`
+      inProgress: css60`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css61`
+      queued: css60`
         opacity: 0.5;
       `
     };
@@ -14573,12 +14670,12 @@ var ProgressListItem = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css62, keyframes as keyframes4 } from "@emotion/react";
+import { css as css61, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css62`
+var skeletonStyles = css61`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -14615,8 +14712,8 @@ var Skeleton = ({
 import * as React17 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css63 } from "@emotion/react";
-var SwitchInputContainer = css63`
+import { css as css62 } from "@emotion/react";
+var SwitchInputContainer = css62`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -14625,7 +14722,7 @@ var SwitchInputContainer = css63`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css63`
+var SwitchInput = css62`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -14663,7 +14760,7 @@ var SwitchInput = css63`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css63`
+var SwitchInputDisabled = css62`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -14671,7 +14768,7 @@ var SwitchInputDisabled = css63`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css63`
+var SwitchInputLabel = css62`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -14693,7 +14790,7 @@ var SwitchInputLabel = css63`
     top: 0;
   }
 `;
-var SwitchText = css63`
+var SwitchText = css62`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -14722,28 +14819,28 @@ var Switch = React17.forwardRef(
 import * as React18 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css64 } from "@emotion/react";
-var table = css64`
+import { css as css63 } from "@emotion/react";
+var table = css63`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css64`
+var tableHead = css63`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css64`
+var tableRow = css63`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css64`
+var tableCellHead = css63`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css64`
+var tableCellData = css63`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
@@ -14793,8 +14890,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css65 } from "@emotion/react";
-var tabButtonStyles = css65`
+import { css as css64 } from "@emotion/react";
+var tabButtonStyles = css64`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -14811,7 +14908,7 @@ var tabButtonStyles = css65`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = css65`
+var tabButtonGroupStyles = css64`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -14863,8 +14960,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css66 } from "@emotion/react";
-var StatusBulletContainer = css66`
+import { css as css65 } from "@emotion/react";
+var StatusBulletContainer = css65`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -14881,44 +14978,44 @@ var StatusBulletContainer = css66`
     display: block;
   }
 `;
-var StatusBulletBase = css66`
+var StatusBulletBase = css65`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css66`
+var StatusBulletSmall = css65`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css66`
+var StatusDraft = css65`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css66`
+var StatusModified = css65`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusError = css66`
+var StatusError = css65`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = css66`
+var StatusPublished = css65`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css66`
+var StatusOrphan = css65`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -15070,6 +15167,7 @@ export {
   buttonGhost,
   buttonGhostDestructive,
   buttonPrimary,
+  buttonPrimaryInvert,
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,