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

package/dist/esm/index.js

@@ -328,6 +328,34 @@ var buttonRippleEffect = (props) => css`
     transition: background 0s;
   }
 `;
+var buttonAccentAltDark = css`
+  background: var(--accent-alt-dark);
+  color: var(--white);
+
+  &:disabled {
+    background: var(--gray-300);
+    color: var(--white);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-1)" })}
+`;
+var buttonAccentAltDarkOutline = css`
+  background: var(--white);
+  color: var(--accent-alt-dark);
+  box-shadow: 0 0 0 1px var(--accent-alt-dark);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonPrimary = css`
   background: var(--brand-secondary-1);
   color: var(--white);
@@ -1025,6 +1053,9 @@ var IconImg = css8`
     vertical-align: middle;
   }
 `;
+var IconWhite = css8`
+  color: var(--white);
+`;
 var IconColorDefault = css8`
   color: var(--brand-secondary-3);
 `;
@@ -1079,6 +1110,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
   const isIconName = typeof icon === "string";
   const { iconsMap, isLoading } = useIconContext();
   const customColor = {
+    white: IconWhite,
     action: IconColorAction,
     default: IconColorDefault,
     gray: IconColorGray,
@@ -1688,6 +1720,60 @@ var diamondFill = GenIcon({
     }
   ]
 });
+var magicWand = GenIcon({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M12.6021 0.799316C12.5443 0.799316 12.487 0.802204 12.4305 0.807862C12.3484 1.91145 11.5902 2.79082 10.6387 2.88601C10.6338 2.9516 10.6313 3.01798 10.6313 3.08503C10.6313 3.15208 10.6338 3.21846 10.6387 3.28405C11.5902 3.37924 12.3484 4.25862 12.4305 5.3622C12.487 5.36786 12.5443 5.37074 12.6021 5.37074C12.6599 5.37074 12.7171 5.36786 12.7737 5.3622C12.8558 4.25862 13.614 3.37924 14.5655 3.28405C14.5704 3.21846 14.5729 3.15208 14.5729 3.08503C14.5729 3.01798 14.5704 2.9516 14.5655 2.88601C13.614 2.79082 12.8558 1.91145 12.7737 0.807862C12.7171 0.802204 12.6599 0.799316 12.6021 0.799316Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M17.8945 12.4247C17.8367 12.4247 17.7795 12.4276 17.7229 12.4332C17.6409 13.5368 16.8826 14.4162 15.9311 14.5114C15.9262 14.577 15.9237 14.6433 15.9237 14.7104C15.9237 14.7774 15.9262 14.8438 15.9311 14.9094C16.8826 15.0046 17.6409 15.884 17.7229 16.9876C17.7795 16.9932 17.8367 16.9961 17.8945 16.9961C17.9523 16.9961 18.0096 16.9932 18.0661 16.9876C18.1482 15.884 18.9064 15.0046 19.858 14.9094C19.8628 14.8438 19.8653 14.7774 19.8653 14.7104C19.8653 14.6433 19.8628 14.577 19.858 14.5114C18.9064 14.4162 18.1482 13.5368 18.0661 12.4332C18.0096 12.4276 17.9523 12.4247 17.8945 12.4247Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillOpacity: "0.5",
+        d: "M21.571 1.6413C21.509 1.6413 21.4476 1.6449 21.387 1.65195C21.299 3.02718 20.4858 4.12302 19.4653 4.24164C19.4601 4.32337 19.4574 4.40609 19.4574 4.48965C19.4574 4.57321 19.4601 4.65592 19.4653 4.73766C20.4858 4.85628 21.299 5.95211 21.387 7.32734C21.4476 7.33439 21.509 7.33799 21.571 7.33799C21.633 7.33799 21.6944 7.33439 21.755 7.32734C21.8431 5.95211 22.6562 4.85628 23.6767 4.73766C23.6819 4.65592 23.6846 4.57321 23.6846 4.48965C23.6846 4.40609 23.6819 4.32337 23.6767 4.24164C22.6562 4.12302 21.8431 3.02718 21.755 1.65195C21.6944 1.6449 21.633 1.6413 21.571 1.6413Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M15.6875 11.9141L12.5116 8.73823L2.07262 19.1773C1.9166 19.3333 1.9166 19.5862 2.07262 19.7422L4.68354 22.3532C4.83956 22.5092 5.0925 22.5092 5.24852 22.3532L15.6875 11.9141Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16.8929 4.92196L19.5038 7.53288L14.8688 12.1679L12.2578 9.55702L16.8929 4.92196ZM19.7863 7.2504C19.9423 7.40641 19.9423 7.65936 19.7863 7.81537L15.6875 11.9141L12.5116 8.73823L16.6104 4.63947C16.7664 4.48346 17.0194 4.48346 17.1754 4.63947L19.7863 7.2504Z"
+      },
+      child: []
+    }
+  ]
+});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1711,7 +1797,8 @@ var customIcons = {
   "clear-formatting": clearFormatting,
   "yes-no": yesNoIcon,
   "diamond-outline": diamondOutline,
-  "diamond-fill": diamondFill
+  "diamond-fill": diamondFill,
+  "magic-wand": magicWand
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -11299,6 +11386,8 @@ var Button = React6.forwardRef(
     const buttonTheme = {
       primary: buttonPrimary,
       primaryInvert: buttonPrimaryInvert,
+      "accent-alt-dark": buttonAccentAltDark,
+      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
       destructive: buttonDestructive,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
@@ -15203,6 +15292,7 @@ import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
 import { jsx as jsx82, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
+  icon,
   active,
   disableShadow,
   ...props
@@ -15216,7 +15306,10 @@ var ScrollableListItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs53("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ jsx82("span", { children: buttonText }),
+        /* @__PURE__ */ jsxs53(HorizontalRhythm, { gap: "xs", align: "center", children: [
+          icon,
+          /* @__PURE__ */ jsx82("span", { children: buttonText })
+        ] }),
         /* @__PURE__ */ jsx82(
           Icon,
           {
@@ -16311,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
@@ -16426,6 +16520,7 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
+  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
   title,
@@ -16447,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,
@@ -16683,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,
@@ -16835,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;
@@ -16862,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);
 
@@ -16931,7 +17038,7 @@ var paragraphElement = css79`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css79`
+var orderedListElement = css80`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -16960,7 +17067,7 @@ var orderedListElement = css79`
     }
   }
 `;
-var unorderedListElement = css79`
+var unorderedListElement = css80`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -16981,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);
@@ -16997,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;
@@ -17014,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";
@@ -17355,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}
 `;
@@ -17611,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,
@@ -17635,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;
@@ -17647,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;
@@ -17663,7 +17770,7 @@ var toolbarGroup = css81`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css81`
+var richTextToolbarButton = css82`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17676,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 }) => {
@@ -18096,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
@@ -18118,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);
@@ -18361,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;
@@ -18430,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);
@@ -18443,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;
       `
     };
@@ -18465,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);
@@ -18490,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);
   }
@@ -18505,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;
@@ -18575,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";
@@ -18613,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]);
@@ -18672,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);
 `;
@@ -18714,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;
@@ -18724,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);
@@ -18762,7 +18869,7 @@ var SwitchInput = css88`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css88`
+var SwitchInputDisabled = css89`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -18770,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;
@@ -18792,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;
@@ -18821,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%;
@@ -18833,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);
@@ -18895,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;
@@ -18913,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);
@@ -18965,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);
@@ -18983,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 */
@@ -19022,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);
   }
@@ -19207,6 +19314,8 @@ export {
   borderTopIcon,
   breakpoints,
   button,
+  buttonAccentAltDark,
+  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,