@uniformdev/design-system 19.51.0 → 19.51.1-alpha.10

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,
           {
@@ -19207,6 +19300,8 @@ export {
   borderTopIcon,
   breakpoints,
   button,
+  buttonAccentAltDark,
+  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,

package/dist/index.d.mts

@@ -82,6 +82,8 @@ declare const buttonRippleEffect: (props: {
     hoverColor: string;
     activeColor?: string;
 }) => _emotion_react.SerializedStyles;
+declare const buttonAccentAltDark: _emotion_react.SerializedStyles;
+declare const buttonAccentAltDarkOutline: _emotion_react.SerializedStyles;
 declare const buttonPrimary: _emotion_react.SerializedStyles;
 declare const buttonDestructive: _emotion_react.SerializedStyles;
 declare const buttonSecondary: _emotion_react.SerializedStyles;
@@ -20280,7 +20282,7 @@ declare const UniformLogo: ({ theme, ...props }: UniformLogoProps & React.SVGAtt
 declare const UniformLogoLarge: ({ ...props }: React.SVGAttributes<SVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Button themes that are available to use with our brand */
-type ButtonThemeProps$1 = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'accent-alt-dark' | 'accent-alt-dark-outline' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
 /** Button sizes that are available to use with our brand */
 type ButtonSizeProps = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonProps = ButtonProps$1 & {
@@ -20690,6 +20692,7 @@ declare const allSupportedIcons: {
     'yes-no': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-outline': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-fill': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
+    'magic-wand': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'add-r': _react_icons_all_files_lib.IconType;
     add: _react_icons_all_files_lib.IconType;
     airplane: _react_icons_all_files_lib.IconType;
@@ -21339,7 +21342,7 @@ type IconName = keyof typeof allSupportedIcons;
 /** sets fill color of the svg icon
  * @default 'default'
  */
-type IconColor = 'action' | 'default' | 'red' | 'gray' | 'accent' | 'currentColor' | 'accent-light';
+type IconColor = 'white' | 'action' | 'default' | 'red' | 'gray' | 'accent' | 'currentColor' | 'accent-light';
 /** sets the type of icon to use from the available list */
 type IconType = IconName | IconType$1;
 interface IconProps extends IconBaseProps {
@@ -21396,6 +21399,7 @@ declare const customIcons: {
     'yes-no': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-outline': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-fill': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
+    'magic-wand': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
 };
 
 type IconsMap = Record<string, IconType$1>;
@@ -21991,12 +21995,13 @@ declare const ScrollableListInputItem: ({ label, icon, active, disableShadow, ch
 type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** sets the button text value */
     buttonText: string;
+    icon?: React$1.ReactElement;
 } & ScrollableListContainerProps;
 /**
  * Component used within <ScrollableList /> for adding interactive button components with predefined styles
  * @example <ScrollableListItem buttontext="my button" active={false} />
  */
-declare const ScrollableListItem: ({ buttonText, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * Loading Indicator
@@ -23123,4 +23128,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, ImageBroken, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, borderTopIcon, breakpoints, button, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, ImageBroken, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };

package/dist/index.d.ts

@@ -82,6 +82,8 @@ declare const buttonRippleEffect: (props: {
     hoverColor: string;
     activeColor?: string;
 }) => _emotion_react.SerializedStyles;
+declare const buttonAccentAltDark: _emotion_react.SerializedStyles;
+declare const buttonAccentAltDarkOutline: _emotion_react.SerializedStyles;
 declare const buttonPrimary: _emotion_react.SerializedStyles;
 declare const buttonDestructive: _emotion_react.SerializedStyles;
 declare const buttonSecondary: _emotion_react.SerializedStyles;
@@ -20280,7 +20282,7 @@ declare const UniformLogo: ({ theme, ...props }: UniformLogoProps & React.SVGAtt
 declare const UniformLogoLarge: ({ ...props }: React.SVGAttributes<SVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Button themes that are available to use with our brand */
-type ButtonThemeProps$1 = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'accent-alt-dark' | 'accent-alt-dark-outline' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
 /** Button sizes that are available to use with our brand */
 type ButtonSizeProps = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonProps = ButtonProps$1 & {
@@ -20690,6 +20692,7 @@ declare const allSupportedIcons: {
     'yes-no': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-outline': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-fill': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
+    'magic-wand': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'add-r': _react_icons_all_files_lib.IconType;
     add: _react_icons_all_files_lib.IconType;
     airplane: _react_icons_all_files_lib.IconType;
@@ -21339,7 +21342,7 @@ type IconName = keyof typeof allSupportedIcons;
 /** sets fill color of the svg icon
  * @default 'default'
  */
-type IconColor = 'action' | 'default' | 'red' | 'gray' | 'accent' | 'currentColor' | 'accent-light';
+type IconColor = 'white' | 'action' | 'default' | 'red' | 'gray' | 'accent' | 'currentColor' | 'accent-light';
 /** sets the type of icon to use from the available list */
 type IconType = IconName | IconType$1;
 interface IconProps extends IconBaseProps {
@@ -21396,6 +21399,7 @@ declare const customIcons: {
     'yes-no': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-outline': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
     'diamond-fill': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
+    'magic-wand': (props: _react_icons_all_files.IconBaseProps) => JSX.Element;
 };
 
 type IconsMap = Record<string, IconType$1>;
@@ -21991,12 +21995,13 @@ declare const ScrollableListInputItem: ({ label, icon, active, disableShadow, ch
 type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** sets the button text value */
     buttonText: string;
+    icon?: React$1.ReactElement;
 } & ScrollableListContainerProps;
 /**
  * Component used within <ScrollableList /> for adding interactive button components with predefined styles
  * @example <ScrollableListItem buttontext="my button" active={false} />
  */
-declare const ScrollableListItem: ({ buttonText, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * Loading Indicator
@@ -23123,4 +23128,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, ImageBroken, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, borderTopIcon, breakpoints, button, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, ImageBroken, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };

package/dist/index.js

@@ -1487,6 +1487,8 @@ __export(src_exports, {
   borderTopIcon: () => borderTopIcon,
   breakpoints: () => breakpoints,
   button: () => button,
+  buttonAccentAltDark: () => buttonAccentAltDark,
+  buttonAccentAltDarkOutline: () => buttonAccentAltDarkOutline,
   buttonDestructive: () => buttonDestructive,
   buttonGhost: () => buttonGhost,
   buttonGhostDestructive: () => buttonGhostDestructive,
@@ -1894,6 +1896,34 @@ var buttonRippleEffect = (props) => import_react3.css`
     transition: background 0s;
   }
 `;
+var buttonAccentAltDark = import_react3.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 = import_react3.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 = import_react3.css`
   background: var(--brand-secondary-1);
   color: var(--white);
@@ -2604,6 +2634,9 @@ var IconImg = import_react12.css`
     vertical-align: middle;
   }
 `;
+var IconWhite = import_react12.css`
+  color: var(--white);
+`;
 var IconColorDefault = import_react12.css`
   color: var(--brand-secondary-3);
 `;
@@ -2659,6 +2692,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,
@@ -3268,6 +3302,60 @@ var diamondFill = (0, import_all_files.GenIcon)({
     }
   ]
 });
+var magicWand = (0, import_all_files.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,
@@ -3291,7 +3379,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
@@ -12920,6 +13009,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,
@@ -16969,6 +17060,7 @@ var import_CgCheck4 = require("@react-icons/all-files/cg/CgCheck");
 var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
 var ScrollableListItem = ({
   buttonText,
+  icon,
   active,
   disableShadow,
   ...props
@@ -16982,7 +17074,10 @@ var ScrollableListItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: buttonText }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", children: [
+          icon,
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: buttonText })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           Icon,
           {
@@ -21001,6 +21096,8 @@ var StatusBullet = ({
   borderTopIcon,
   breakpoints,
   button,
+  buttonAccentAltDark,
+  buttonAccentAltDarkOutline,
   buttonDestructive,
   buttonGhost,
   buttonGhostDestructive,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.51.0",
+  "version": "19.51.1-alpha.10+ee32ab8b6",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@uniformdev/canvas": "^19.51.0",
-    "@uniformdev/richtext": "^19.51.0",
+    "@uniformdev/canvas": "^19.51.1-alpha.10+ee32ab8b6",
+    "@uniformdev/richtext": "^19.51.1-alpha.10+ee32ab8b6",
     "autoprefixer": "10.4.15",
     "hygen": "6.2.11",
     "postcss": "8.4.28",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6169b3df00a64ebb66e4c4434cbf171e5cfbe6e4"
+  "gitHead": "ee32ab8b66da53e39f0714b708d5cd2ec49592bd"
 }