@uniformdev/design-system 19.50.2-alpha.11 → 19.50.2-alpha.45

package/dist/esm/index.js

@@ -328,7 +328,7 @@ var buttonRippleEffect = (props) => css`
     transition: background 0s;
   }
 `;
-var buttonAccent = css`
+var buttonAccentAltDark = css`
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -339,7 +339,7 @@ var buttonAccent = css`
 
   ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-1)" })}
 `;
-var buttonAccentOutline = css`
+var buttonAccentAltDarkOutline = css`
   background: var(--white);
   color: var(--accent-alt-dark);
   box-shadow: 0 0 0 1px var(--accent-alt-dark);
@@ -11386,8 +11386,8 @@ var Button = React6.forwardRef(
     const buttonTheme = {
       primary: buttonPrimary,
       primaryInvert: buttonPrimaryInvert,
-      accent: buttonAccent,
-      accentOutline: buttonAccentOutline,
+      "accent-alt-dark": buttonAccentAltDark,
+      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
       destructive: buttonDestructive,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
@@ -15306,7 +15306,7 @@ var ScrollableListItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs53("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ jsxs53(HorizontalRhythm, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs53(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
           /* @__PURE__ */ jsx82("span", { children: buttonText })
         ] }),
@@ -16404,6 +16404,7 @@ var Image = ({ src, className }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
+import { css as css79 } from "@emotion/react";
 import { useState as useState10 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
@@ -16519,6 +16520,7 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
+  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
   title,
@@ -16540,6 +16542,18 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs64("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ jsx95(
+        "div",
+        {
+          css: [
+            inputMenu,
+            menuItems ? css79`
+                    right: 1.25rem;
+                  ` : void 0
+          ],
+          children: actionItems
+        }
+      ) : null,
       menuItems ? /* @__PURE__ */ jsx95(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
       /* @__PURE__ */ jsx95(
         ParameterShellContext.Provider,
@@ -16776,7 +16790,7 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css82 } from "@emotion/react";
+import { css as css83 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -16928,23 +16942,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css79 } from "@emotion/css";
-var textBold = css79`
+import { css as css80 } from "@emotion/css";
+var textBold = css80`
   font-weight: 700;
 `;
-var textItalic = css79`
+var textItalic = css80`
   font-style: italic;
 `;
-var textUnderline = css79`
+var textUnderline = css80`
   text-decoration: underline;
 `;
-var textStrikethrough = css79`
+var textStrikethrough = css80`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css79`
+var textUnderlineStrikethrough = css80`
   text-decoration: underline line-through;
 `;
-var textCode = css79`
+var textCode = css80`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -16955,68 +16969,68 @@ var textCode = css79`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css79`
+var textSuperscript = css80`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css79`
+var textSubscript = css80`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css79`
+var linkElement = css80`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css79`
+var h12 = css80`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css79`
+var h22 = css80`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css79`
+var h32 = css80`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css79`
+var h42 = css80`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css79`
+var h52 = css80`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css79`
+var h62 = css80`
   font-size: var(--fs-base);
 `;
-var heading1Element = css79`
+var heading1Element = css80`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css79`
+var heading2Element = css80`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css79`
+var heading3Element = css80`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css79`
+var heading4Element = css80`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css79`
+var heading5Element = css80`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css79`
+var heading6Element = css80`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css79`
+var paragraphElement = css80`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -17024,7 +17038,7 @@ var paragraphElement = css79`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css79`
+var orderedListElement = css80`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17053,7 +17067,7 @@ var orderedListElement = css79`
     }
   }
 `;
-var unorderedListElement = css79`
+var unorderedListElement = css80`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17074,13 +17088,13 @@ var unorderedListElement = css79`
     }
   }
 `;
-var listItemElement = css79`
+var listItemElement = css80`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css79`
+var nestedListItemElement = css80`
   list-style-type: none;
 `;
-var blockquoteElement = css79`
+var blockquoteElement = css80`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -17090,7 +17104,7 @@ var blockquoteElement = css79`
     margin-bottom: 0;
   }
 `;
-var codeElement = css79`
+var codeElement = css80`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -17107,7 +17121,7 @@ var codeElement = css79`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css80 } from "@emotion/react";
+import { css as css81 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
@@ -17448,16 +17462,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css80`
+var linkPopover = css81`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css80`
+var linkPopoverContainer = css81`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css80`
+var linkPopoverAnchor = css81`
   ${link}
   ${linkColorDefault}
 `;
@@ -17704,7 +17718,7 @@ function ListIndentPlugin({ maxDepth }) {
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css81 } from "@emotion/react";
+import { css as css82 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -17728,7 +17742,7 @@ import {
 } from "lexical";
 import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState12 } from "react";
 import { Fragment as Fragment17, jsx as jsx102, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
-var toolbar = css81`
+var toolbar = css82`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -17740,7 +17754,7 @@ var toolbar = css81`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css81`
+var toolbarGroup = css82`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -17756,7 +17770,7 @@ var toolbarGroup = css81`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css81`
+var richTextToolbarButton = css82`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17769,13 +17783,13 @@ var richTextToolbarButton = css81`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css81`
+var richTextToolbarButtonActive = css82`
   background: var(--gray-200);
 `;
-var toolbarIcon = css81`
+var toolbarIcon = css82`
   color: inherit;
 `;
-var toolbarChevron = css81`
+var toolbarChevron = css82`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -18189,18 +18203,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = css82`
+var editorWrapper = css83`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css82`
+var editorContainer = css83`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css82`
+var editorPlaceholder = css83`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -18211,7 +18225,7 @@ var editorPlaceholder = css82`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css82`
+var editorInput = css83`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18454,21 +18468,21 @@ var ParameterToggleInner = forwardRef17(
 );
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css84 } from "@emotion/react";
+import { css as css85 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
 import { useMemo as useMemo4 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css83 } from "@emotion/react";
-var progressListStyles = css83`
+import { css as css84 } from "@emotion/react";
+var progressListStyles = css84`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css83`
+var progressListItemStyles = css84`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -18523,12 +18537,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css84`
+      return errorLevel === "caution" ? css85`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css84`
+          ` : css85`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18536,13 +18550,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css84`
+      completed: css85`
         opacity: 0.75;
       `,
-      inProgress: css84`
+      inProgress: css85`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css84`
+      queued: css85`
         opacity: 0.5;
       `
     };
@@ -18558,13 +18572,13 @@ var ProgressListItem = ({
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css86 } from "@emotion/react";
+import { css as css87 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
 import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css85 } from "@emotion/react";
-var segmentedControlStyles = css85`
+import { css as css86 } from "@emotion/react";
+var segmentedControlStyles = css86`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18583,14 +18597,14 @@ var segmentedControlStyles = css85`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css85`
+var segmentedControlVerticalStyles = css86`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css85`
+var segmentedControlItemStyles = css86`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18598,10 +18612,10 @@ var segmentedControlItemStyles = css85`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css85`
+var segmentedControlInputStyles = css86`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css85`
+var segmentedControlLabelStyles = (checked, disabled) => css86`
   position: relative;
   display: flex;
   align-items: center;
@@ -18668,20 +18682,20 @@ var segmentedControlLabelStyles = (checked, disabled) => css85`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css85`
+var segmentedControlLabelIconOnlyStyles = css86`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css85`
+var segmentedControlLabelCheckStyles = css86`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css85`
+var segmentedControlLabelContentStyles = css86`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css85``;
+var segmentedControlLabelTextStyles = css86``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx108, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
@@ -18706,9 +18720,9 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      sm: css86({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css86({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css86({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css87({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css87({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css87({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
@@ -18765,12 +18779,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css87, keyframes as keyframes4 } from "@emotion/react";
+import { css as css88, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css87`
+var skeletonStyles = css88`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -18807,8 +18821,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css88 } from "@emotion/react";
-var SwitchInputContainer = css88`
+import { css as css89 } from "@emotion/react";
+var SwitchInputContainer = css89`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -18817,7 +18831,7 @@ var SwitchInputContainer = css88`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css88`
+var SwitchInput = css89`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -18855,7 +18869,7 @@ var SwitchInput = css88`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css88`
+var SwitchInputDisabled = css89`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -18863,7 +18877,7 @@ var SwitchInputDisabled = css88`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css88`
+var SwitchInputLabel = css89`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -18885,7 +18899,7 @@ var SwitchInputLabel = css88`
     top: 0;
   }
 `;
-var SwitchText = css88`
+var SwitchText = css89`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -18914,8 +18928,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css89 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css89`
+import { css as css90 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css90`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -18926,15 +18940,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css89
     padding: ${cellPadding};
   }
 `;
-var tableHead = css89`
+var tableHead = css90`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css89`
+var tableRow = css90`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css89`
+var tableCellHead = css90`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -18988,8 +19002,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css90 } from "@emotion/react";
-var tabButtonStyles = css90`
+import { css as css91 } from "@emotion/react";
+var tabButtonStyles = css91`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -19006,7 +19020,7 @@ var tabButtonStyles = css90`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css90`
+var tabButtonGroupStyles = css91`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -19058,8 +19072,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css91 } from "@emotion/react";
-var StatusBulletContainer = css91`
+import { css as css92 } from "@emotion/react";
+var StatusBulletContainer = css92`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19076,33 +19090,33 @@ var StatusBulletContainer = css91`
     display: block;
   }
 `;
-var StatusBulletBase = css91`
+var StatusBulletBase = css92`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css91`
+var StatusBulletSmall = css92`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css91`
+var StatusDraft = css92`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css91`
+var StatusModified = css92`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = css91`
+var StatusError = css92`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19115,12 +19129,12 @@ var StatusError = css91`
     );
   }
 `;
-var StatusPublished = css91`
+var StatusPublished = css92`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css91`
+var StatusOrphan = css92`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -19300,8 +19314,8 @@ export {
   borderTopIcon,
   breakpoints,
   button,
-  buttonAccent,
-  buttonAccentOutline,
+  buttonAccentAltDark,
+  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,