@uniformdev/design-system 19.53.0 → 19.53.1-alpha.41

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
@@ -2010,7 +2097,7 @@ var Link = React4.forwardRef(
     ] });
   }
 );
-var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, ...props }, ref) => /* @__PURE__ */ jsx11(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx11(Link, { ...props }) }));
+var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ jsx11(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx11(Link, { ...props, onClick }) }));
 
 // src/components/Typography/styles/Paragraph.styles.ts
 import { css as css13 } from "@emotion/react";
@@ -11300,6 +11387,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,
@@ -15385,6 +15474,7 @@ import { CgCheck as CgCheck3 } from "@react-icons/all-files/cg/CgCheck";
 import { jsx as jsx83, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({
   buttonText,
+  icon,
   active,
   disableShadow,
   ...props
@@ -15398,7 +15488,10 @@ var ScrollableListItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ jsxs54("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ jsx83("span", { children: buttonText }),
+        /* @__PURE__ */ jsxs54(HorizontalRhythm, { gap: "xs", align: "center", children: [
+          icon,
+          /* @__PURE__ */ jsx83("span", { children: buttonText })
+        ] }),
         /* @__PURE__ */ jsx83(
           Icon,
           {
@@ -16394,6 +16487,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
+import { css as css80 } from "@emotion/react";
 import { useState as useState11 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
@@ -16509,6 +16603,7 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
+  actionItems,
   hasOverriddenValue,
   onResetOverriddenValue,
   title,
@@ -16530,6 +16625,18 @@ var ParameterShell = ({
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs65("div", { css: inputWrapper, children: [
+      actionItems ? /* @__PURE__ */ jsx96(
+        "div",
+        {
+          css: [
+            inputMenu,
+            menuItems ? css80`
+                    right: 1.25rem;
+                  ` : void 0
+          ],
+          children: actionItems
+        }
+      ) : null,
       menuItems ? /* @__PURE__ */ jsx96(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
       /* @__PURE__ */ jsx96(
         ParameterShellContext.Provider,
@@ -16766,7 +16873,7 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css83 } from "@emotion/react";
+import { css as css84 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import {
   CODE,
@@ -16918,23 +17025,23 @@ function DisableStylesPlugin() {
 }
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css80 } from "@emotion/css";
-var textBold = css80`
+import { css as css81 } from "@emotion/css";
+var textBold = css81`
   font-weight: 700;
 `;
-var textItalic = css80`
+var textItalic = css81`
   font-style: italic;
 `;
-var textUnderline = css80`
+var textUnderline = css81`
   text-decoration: underline;
 `;
-var textStrikethrough = css80`
+var textStrikethrough = css81`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css80`
+var textUnderlineStrikethrough = css81`
   text-decoration: underline line-through;
 `;
-var textCode = css80`
+var textCode = css81`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -16945,68 +17052,68 @@ var textCode = css80`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css80`
+var textSuperscript = css81`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css80`
+var textSubscript = css81`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css80`
+var linkElement = css81`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css80`
+var h12 = css81`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css80`
+var h22 = css81`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css80`
+var h32 = css81`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css80`
+var h42 = css81`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css80`
+var h52 = css81`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css80`
+var h62 = css81`
   font-size: var(--fs-base);
 `;
-var heading1Element = css80`
+var heading1Element = css81`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css80`
+var heading2Element = css81`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css80`
+var heading3Element = css81`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css80`
+var heading4Element = css81`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css80`
+var heading5Element = css81`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css80`
+var heading6Element = css81`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css80`
+var paragraphElement = css81`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -17014,7 +17121,7 @@ var paragraphElement = css80`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css80`
+var orderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -17043,7 +17150,7 @@ var orderedListElement = css80`
     }
   }
 `;
-var unorderedListElement = css80`
+var unorderedListElement = css81`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -17064,13 +17171,13 @@ var unorderedListElement = css80`
     }
   }
 `;
-var listItemElement = css80`
+var listItemElement = css81`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css80`
+var nestedListItemElement = css81`
   list-style-type: none;
 `;
-var blockquoteElement = css80`
+var blockquoteElement = css81`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -17080,7 +17187,7 @@ var blockquoteElement = css80`
     margin-bottom: 0;
   }
 `;
-var codeElement = css80`
+var codeElement = css81`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -17097,7 +17204,7 @@ var codeElement = css80`
 `;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css81 } from "@emotion/react";
+import { css as css82 } 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";
@@ -17438,16 +17545,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css81`
+var linkPopover = css82`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css81`
+var linkPopoverContainer = css82`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css81`
+var linkPopoverAnchor = css82`
   ${link}
   ${linkColorDefault}
 `;
@@ -17694,7 +17801,7 @@ function ListIndentPlugin({ maxDepth }) {
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css82 } from "@emotion/react";
+import { css as css83 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -17718,7 +17825,7 @@ import {
 } from "lexical";
 import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState13 } from "react";
 import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
-var toolbar = css82`
+var toolbar = css83`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -17730,7 +17837,7 @@ var toolbar = css82`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css82`
+var toolbarGroup = css83`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -17746,7 +17853,7 @@ var toolbarGroup = css82`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css82`
+var richTextToolbarButton = css83`
   align-items: center;
   appearance: none;
   border: 0;
@@ -17759,13 +17866,13 @@ var richTextToolbarButton = css82`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css82`
+var richTextToolbarButtonActive = css83`
   background: var(--gray-200);
 `;
-var toolbarIcon = css82`
+var toolbarIcon = css83`
   color: inherit;
 `;
-var toolbarChevron = css82`
+var toolbarChevron = css83`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
@@ -18179,18 +18286,18 @@ var ParameterRichText = ({
     }
   );
 };
-var editorWrapper = css83`
+var editorWrapper = css84`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css83`
+var editorContainer = css84`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css83`
+var editorPlaceholder = css84`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -18201,7 +18308,7 @@ var editorPlaceholder = css83`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css83`
+var editorInput = css84`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
@@ -18444,21 +18551,21 @@ var ParameterToggleInner = forwardRef17(
 );
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css85 } from "@emotion/react";
+import { css as css86 } 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 css84 } from "@emotion/react";
-var progressListStyles = css84`
+import { css as css85 } from "@emotion/react";
+var progressListStyles = css85`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css84`
+var progressListItemStyles = css85`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
@@ -18513,12 +18620,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo4(() => {
     if (error) {
-      return errorLevel === "caution" ? css85`
+      return errorLevel === "caution" ? css86`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css85`
+          ` : css86`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -18526,13 +18633,13 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css85`
+      completed: css86`
         opacity: 0.75;
       `,
-      inProgress: css85`
+      inProgress: css86`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css85`
+      queued: css86`
         opacity: 0.5;
       `
     };
@@ -18548,13 +18655,13 @@ var ProgressListItem = ({
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css87 } from "@emotion/react";
+import { css as css88 } 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 css86 } from "@emotion/react";
-var segmentedControlStyles = css86`
+import { css as css87 } from "@emotion/react";
+var segmentedControlStyles = css87`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -18573,14 +18680,14 @@ var segmentedControlStyles = css86`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css86`
+var segmentedControlVerticalStyles = css87`
   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 = css86`
+var segmentedControlItemStyles = css87`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -18588,10 +18695,10 @@ var segmentedControlItemStyles = css86`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css86`
+var segmentedControlInputStyles = css87`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled) => css86`
+var segmentedControlLabelStyles = (checked, disabled) => css87`
   position: relative;
   display: flex;
   align-items: center;
@@ -18658,20 +18765,20 @@ var segmentedControlLabelStyles = (checked, disabled) => css86`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css86`
+var segmentedControlLabelIconOnlyStyles = css87`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css86`
+var segmentedControlLabelCheckStyles = css87`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css86`
+var segmentedControlLabelContentStyles = css87`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css86``;
+var segmentedControlLabelTextStyles = css87``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx109, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
@@ -18696,9 +18803,9 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo5(() => {
     const map = {
-      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)" })
+      sm: css88({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css88({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css88({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
@@ -18755,12 +18862,12 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css88, keyframes as keyframes4 } from "@emotion/react";
+import { css as css89, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css88`
+var skeletonStyles = css89`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
@@ -18797,8 +18904,8 @@ var Skeleton = ({
 import * as React23 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css89 } from "@emotion/react";
-var SwitchInputContainer = css89`
+import { css as css90 } from "@emotion/react";
+var SwitchInputContainer = css90`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -18807,7 +18914,7 @@ var SwitchInputContainer = css89`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css89`
+var SwitchInput = css90`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -18845,7 +18952,7 @@ var SwitchInput = css89`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css89`
+var SwitchInputDisabled = css90`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -18853,7 +18960,7 @@ var SwitchInputDisabled = css89`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css89`
+var SwitchInputLabel = css90`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -18875,7 +18982,7 @@ var SwitchInputLabel = css89`
     top: 0;
   }
 `;
-var SwitchText = css89`
+var SwitchText = css90`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
@@ -18904,8 +19011,8 @@ var Switch = React23.forwardRef(
 import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css90 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css90`
+import { css as css91 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css91`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -18916,15 +19023,15 @@ var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => css90
     padding: ${cellPadding};
   }
 `;
-var tableHead = css90`
+var tableHead = css91`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css90`
+var tableRow = css91`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css90`
+var tableCellHead = css91`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -18978,8 +19085,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css91 } from "@emotion/react";
-var tabButtonStyles = css91`
+import { css as css92 } from "@emotion/react";
+var tabButtonStyles = css92`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -18996,7 +19103,7 @@ var tabButtonStyles = css91`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css91`
+var tabButtonGroupStyles = css92`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -19048,8 +19155,8 @@ var TabContent = ({ children, ...props }) => {
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css92 } from "@emotion/react";
-var StatusBulletContainer = css92`
+import { css as css93 } from "@emotion/react";
+var StatusBulletContainer = css93`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -19066,33 +19173,33 @@ var StatusBulletContainer = css92`
     display: block;
   }
 `;
-var StatusBulletBase = css92`
+var StatusBulletBase = css93`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css92`
+var StatusBulletSmall = css93`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css92`
+var StatusDraft = css93`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css92`
+var StatusModified = css93`
   &: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 = css92`
+var StatusError = css93`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -19105,12 +19212,12 @@ var StatusError = css92`
     );
   }
 `;
-var StatusPublished = css92`
+var StatusPublished = css93`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css92`
+var StatusOrphan = css93`
   &:before {
     background: var(--brand-secondary-5);
   }
@@ -19291,6 +19398,8 @@ export {
   borderTopIcon,
   breakpoints,
   button,
+  buttonAccentAltDark,
+  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,