@uniformdev/design-system 19.165.2-alpha.0 → 19.166.1

package/dist/esm/index.js

@@ -7,7 +7,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
     /* @__PURE__ */ jsx2(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Quantico:wght@700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap",
+        href: "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap",
         rel: "stylesheet"
       }
     ),
@@ -151,7 +151,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           /* font family */
           --ff-base: 'DM Sans', sans-serif;
           --ff-heading: 'Quantico', sans-serif;
-          --ff-mono: 'Space Mono', monospace;
+          --ff-mono: 'DM Mono', monospace;
 
           /* max text width */
           --prose: 65ch;
@@ -177,6 +177,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --rounded-sm: 0.125rem;   /* 2px */
           --rounded-base: 0.25rem;  /* 4px */
           --rounded-md: 0.375rem;   /* 6px */
+          --rounded-lg: 0.5rem;   /* 8px */
 
           /* anything below here should be removed as its not in our style guide */
           --rounded-xl: 0.75rem;
@@ -12182,15 +12183,18 @@ import { CgChevronDown as CgChevronDown3 } from "@react-icons/all-files/cg/CgChe
 import { css as css24 } from "@emotion/react";
 import { CgChevronDown } from "@react-icons/all-files/cg/CgChevronDown";
 import { jsx as jsx25, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
-var buttonStyle = css24`
+var buttonStyle = (bgColor) => css24`
   border: 0;
-  background-color: white;
+  background-color: ${bgColor};
   display: block;
   font-size: var(--fs-sm);
   line-height: 1.5;
+  transition: background-color var(--duration-fast) var(--timing-ease-out),
+    outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
 
   &:hover {
-    outline: 1px solid var(--gray-300);
+    outline-color: var(--gray-300);
     background-color: var(--gray-100);
   }
 
@@ -12198,8 +12202,12 @@ var buttonStyle = css24`
     color: var(--gray-400);
   }
 `;
-function DropdownStyleMenuTrigger({ children, ...buttonProps }) {
-  return /* @__PURE__ */ jsx25("button", { ...buttonProps, css: buttonStyle, type: "button", children: /* @__PURE__ */ jsxs13(HorizontalRhythm, { align: "center", gap: "xs", children: [
+function DropdownStyleMenuTrigger({
+  bgColor = "var(--white)",
+  children,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ jsx25("button", { ...buttonProps, css: buttonStyle(bgColor), type: "button", children: /* @__PURE__ */ jsxs13(HorizontalRhythm, { align: "center", gap: "xs", children: [
     /* @__PURE__ */ jsx25("div", { children }),
     /* @__PURE__ */ jsx25(CgChevronDown, { size: "1rem" })
   ] }) });
@@ -12427,19 +12435,14 @@ var Menu = React7.forwardRef(function Menu2({
         "data-testid": testId != null ? testId : "more-menu",
         hideOnHoverOutside: (event) => {
           var _a;
-          if (!menu.parent)
-            return false;
+          if (!menu.parent) return false;
           const { contentElement, anchorElement } = menu.getState();
           const [target] = event.composedPath();
-          if (!target)
-            return false;
+          if (!target) return false;
           const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
-          if (anchorElement == null ? void 0 : anchorElement.contains(target))
-            return false;
-          if (contentElement == null ? void 0 : contentElement.contains(target))
-            return false;
-          if (activeElement && target.contains(activeElement))
-            return false;
+          if (anchorElement == null ? void 0 : anchorElement.contains(target)) return false;
+          if (contentElement == null ? void 0 : contentElement.contains(target)) return false;
+          if (activeElement && target.contains(activeElement)) return false;
           return true;
         },
         children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
@@ -13260,8 +13263,7 @@ var InputInlineSelect = ({
             "aria-expanded": menuVisible,
             css: inlineSelectBtn,
             onClick: () => {
-              if (!disabled2)
-                setMenuVisible((prev) => !prev);
+              if (!disabled2) setMenuVisible((prev) => !prev);
             },
             disabled: disabled2,
             ...props,
@@ -14865,6 +14867,7 @@ var ChipMultiline = css48`
   padding-inline: var(--spacing-sm);
 `;
 var ChipThemeAccentLight = css48`
+  --outline-color: var(--accent-light);
   background: var(--accent-light);
   color: var(--typography-base);
 
@@ -14890,6 +14893,7 @@ var ChipThemeAccentLight = css48`
   }
 `;
 var ChipThemeAccentDark = css48`
+  --outline-color: var(--accent-dark);
   background: var(--accent-dark);
   color: var(--white);
 
@@ -14911,6 +14915,7 @@ var ChipThemeAccentDark = css48`
   }
 `;
 var ChipAltThemeAccentLight = css48`
+  --outline-color: var(--accent-alt-light);
   background: var(--accent-alt-light);
   color: var(--typography-base);
 
@@ -14936,6 +14941,7 @@ var ChipAltThemeAccentLight = css48`
   }
 `;
 var ChipAltThemeAccentDark = css48`
+  --outline-color: var(--accent-alt-dark);
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -14957,6 +14963,7 @@ var ChipAltThemeAccentDark = css48`
   }
 `;
 var ChipThemeNeutralLight = css48`
+  --outline-color: var(--gray-300);
   background: var(--gray-100);
   color: var(--typography-base);
   :where([role='button']) {
@@ -14967,6 +14974,7 @@ var ChipThemeNeutralLight = css48`
   }
 `;
 var ChipThemeNeutralDark = css48`
+  --outline-color: var(--gray-700);
   background: var(--gray-700);
   color: var(--white);
   :where([role='button']) {
@@ -14986,6 +14994,15 @@ var ChipActionButton = css48`
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
   padding: 0;
 `;
+var ChipOutlined = css48`
+  background: var(--white);
+  color: var(--typography-light);
+  box-shadow: inset 0 0 0 1px var(--outline-color);
+
+  > [role='separator'] {
+    border-color: var(--outline-color);
+  }
+`;
 
 // src/components/Chip/Chip.tsx
 import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
@@ -15002,6 +15019,7 @@ var Chip = ({
   text,
   size = "sm",
   theme = "accent-light",
+  variant = "solid",
   chipAction,
   as = "span",
   ...props
@@ -15012,14 +15030,26 @@ var Chip = ({
     md: ChipMedium
   };
   const ElementType = as;
-  return /* @__PURE__ */ jsxs38(ElementType, { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
-    icon ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
-      /* @__PURE__ */ jsx61("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx61(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
-      /* @__PURE__ */ jsx61("span", { role: "separator", css: ChipSeparator })
-    ] }) : null,
-    /* @__PURE__ */ jsx61("span", { css: ChipText, children: text }),
-    chipAction
-  ] });
+  return /* @__PURE__ */ jsxs38(
+    ElementType,
+    {
+      css: [
+        ChipContainer,
+        chipSize[size],
+        chipTheme[theme],
+        variant === "outlined" ? ChipOutlined : void 0
+      ],
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
+          /* @__PURE__ */ jsx61("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx61(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx61("span", { role: "separator", css: ChipSeparator })
+        ] }) : null,
+        /* @__PURE__ */ jsx61("span", { css: ChipText, children: text }),
+        chipAction
+      ]
+    }
+  );
 };
 var DismissibleChipAction = ({ onDismiss, ...props }) => {
   return /* @__PURE__ */ jsx61(
@@ -17726,6 +17756,7 @@ import {
   Popover as AriakitPopover,
   PopoverDisclosure as PopoverDisclosure2,
   PopoverProvider,
+  usePopoverContext,
   usePopoverStore
 } from "@ariakit/react";
 import { useEffect as useEffect12 } from "react";
@@ -17764,6 +17795,10 @@ var Popover3 = ({
     /* @__PURE__ */ jsx97(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
+var usePopoverComponentContext = () => {
+  const contextValue = usePopoverContext();
+  return contextValue;
+};
 
 // src/components/MediaCard/MediaCard.styles.ts
 import { css as css76 } from "@emotion/react";
@@ -19862,8 +19897,7 @@ var getElementNodesInSelection = (selection) => {
 };
 var getAncestor = (node, predicate) => {
   let parent = node;
-  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
-    ;
+  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent)) ;
   return parent;
 };
 var getSelectedNode = (selection) => {
@@ -21966,8 +22000,7 @@ var Tabs = ({
   ...props
 }) => {
   const selected = useMemo7(() => {
-    if (selectedId)
-      return selectedId;
+    if (selectedId) return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
@@ -22371,6 +22404,7 @@ export {
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  usePopoverComponentContext,
   useShortcut,
   functionalColors as utilityColors,
   warningIcon,

package/dist/index.d.mts

@@ -21353,6 +21353,10 @@ type ChipProps = {
     theme?: ChipTheme;
     chipAction?: React.ReactNode;
     size?: ChipSizeProp;
+    /** sets whether to use outlined chip variant
+     * @default 'solid'
+     */
+    variant?: 'solid' | 'outlined';
     /**
      * The HTML element to render
      * @default 'span'
@@ -21366,7 +21370,7 @@ type ChipProps = {
  * To represent a different object, as a reference
  * @example <Chip text="productId" theme="accent-light" chipAction={<DismissibleChipAction onDismiss={() => {...}}/>} />
  */
-declare const Chip: ({ icon, text, size, theme, chipAction, as, ...props }: ChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Chip: ({ icon, text, size, theme, variant, chipAction, as, ...props }: ChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 type DismissibleChipActionProps = {
     onDismiss: () => void;
 } & HTMLAttributes<HTMLButtonElement>;
@@ -22546,9 +22550,11 @@ declare const LoadingIcon: ({ height, width, ...props }: LoadingIconProps) => _e
 
 interface DropdownStyleMenuTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
+    /** sets the background color of the button */
+    bgColor?: string;
 }
 /** Renders a dropdown menu style menu trigger button */
-declare function DropdownStyleMenuTrigger({ children, ...buttonProps }: DropdownStyleMenuTriggerProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function DropdownStyleMenuTrigger({ bgColor, children, ...buttonProps }: DropdownStyleMenuTriggerProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare const legacyPlacements: readonly ["auto", "auto-start", "auto-end"];
 type LegacyPlacement = (typeof legacyPlacements)[number];
@@ -23310,6 +23316,13 @@ type PopoverProps = PopoverProps$1 & {
     }) => void;
 };
 declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, baseId, onInit, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+/**
+ * Hook to get the current popover context
+ * @description This hook is used to get the current popover context
+ * useful for closing the popover with a nested button or interative element
+ * @example const currentPopoverContext = usePopoverComponentContext();
+ */
+declare const usePopoverComponentContext: () => PopoverStore | undefined;
 
 interface ProgressBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     current: number;
@@ -23677,8 +23690,6 @@ type ToastContainerProps = {
 /**
  * A component to render toasts in your app. This component is supposed to be used just once in your app. Typically inside _app.tsx
  * @example <App><ToastContainer autoCloseDelay="normal" /></App>
- *
- * @deprecated This component is in beta, and might receive breaking changes in minor releases!
  */
 declare const ToastContainer: ({ limit, autoCloseDelay }: ToastContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -23826,4 +23837,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeSizeProps, type BadgeThemeProps, type BadgeThemeStyleProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, ConnectToDataElementButton, type ConnectToDataElementButtonProps, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationHeaderSection, type IntegrationHeaderSectionProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, Label, LabelLeadingIcon, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, MediaCard, type MediaCardProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, type ObjectGridItemProps, type ObjectGridItemTitleProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, type ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, ShortcutContext, type ShortcutReference, ShortcutRevealer, Skeleton, type SkeletonProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spin, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, uniformComponentIcon, uniformComponentPatternIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon };
+export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeSizeProps, type BadgeThemeProps, type BadgeThemeStyleProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, ConnectToDataElementButton, type ConnectToDataElementButtonProps, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationHeaderSection, type IntegrationHeaderSectionProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, Label, LabelLeadingIcon, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, MediaCard, type MediaCardProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, type ObjectGridItemProps, type ObjectGridItemTitleProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, type ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, ShortcutContext, type ShortcutReference, ShortcutRevealer, Skeleton, type SkeletonProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spin, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, uniformComponentIcon, uniformComponentPatternIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, usePopoverComponentContext, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon };

package/dist/index.d.ts

@@ -21353,6 +21353,10 @@ type ChipProps = {
     theme?: ChipTheme;
     chipAction?: React.ReactNode;
     size?: ChipSizeProp;
+    /** sets whether to use outlined chip variant
+     * @default 'solid'
+     */
+    variant?: 'solid' | 'outlined';
     /**
      * The HTML element to render
      * @default 'span'
@@ -21366,7 +21370,7 @@ type ChipProps = {
  * To represent a different object, as a reference
  * @example <Chip text="productId" theme="accent-light" chipAction={<DismissibleChipAction onDismiss={() => {...}}/>} />
  */
-declare const Chip: ({ icon, text, size, theme, chipAction, as, ...props }: ChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Chip: ({ icon, text, size, theme, variant, chipAction, as, ...props }: ChipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 type DismissibleChipActionProps = {
     onDismiss: () => void;
 } & HTMLAttributes<HTMLButtonElement>;
@@ -22546,9 +22550,11 @@ declare const LoadingIcon: ({ height, width, ...props }: LoadingIconProps) => _e
 
 interface DropdownStyleMenuTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
+    /** sets the background color of the button */
+    bgColor?: string;
 }
 /** Renders a dropdown menu style menu trigger button */
-declare function DropdownStyleMenuTrigger({ children, ...buttonProps }: DropdownStyleMenuTriggerProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function DropdownStyleMenuTrigger({ bgColor, children, ...buttonProps }: DropdownStyleMenuTriggerProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare const legacyPlacements: readonly ["auto", "auto-start", "auto-end"];
 type LegacyPlacement = (typeof legacyPlacements)[number];
@@ -23310,6 +23316,13 @@ type PopoverProps = PopoverProps$1 & {
     }) => void;
 };
 declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, baseId, onInit, ...otherProps }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+/**
+ * Hook to get the current popover context
+ * @description This hook is used to get the current popover context
+ * useful for closing the popover with a nested button or interative element
+ * @example const currentPopoverContext = usePopoverComponentContext();
+ */
+declare const usePopoverComponentContext: () => PopoverStore | undefined;
 
 interface ProgressBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     current: number;
@@ -23677,8 +23690,6 @@ type ToastContainerProps = {
 /**
  * A component to render toasts in your app. This component is supposed to be used just once in your app. Typically inside _app.tsx
  * @example <App><ToastContainer autoCloseDelay="normal" /></App>
- *
- * @deprecated This component is in beta, and might receive breaking changes in minor releases!
  */
 declare const ToastContainer: ({ limit, autoCloseDelay }: ToastContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -23826,4 +23837,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeSizeProps, type BadgeThemeProps, type BadgeThemeStyleProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, ConnectToDataElementButton, type ConnectToDataElementButtonProps, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationHeaderSection, type IntegrationHeaderSectionProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, Label, LabelLeadingIcon, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, MediaCard, type MediaCardProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, type ObjectGridItemProps, type ObjectGridItemTitleProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, type ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, ShortcutContext, type ShortcutReference, ShortcutRevealer, Skeleton, type SkeletonProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spin, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, uniformComponentIcon, uniformComponentPatternIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon };
+export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeSizeProps, type BadgeThemeProps, type BadgeThemeStyleProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, ConnectToDataElementButton, type ConnectToDataElementButtonProps, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationHeaderSection, type IntegrationHeaderSectionProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, Label, LabelLeadingIcon, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, MediaCard, type MediaCardProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, type ObjectGridItemProps, type ObjectGridItemTitleProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, type ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, ShortcutContext, type ShortcutReference, ShortcutRevealer, Skeleton, type SkeletonProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spin, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, uniformComponentIcon, uniformComponentPatternIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, usePopoverComponentContext, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon };

package/dist/index.js

@@ -1599,6 +1599,7 @@ __export(src_exports, {
   useIconContext: () => useIconContext,
   useOutsideClick: () => useOutsideClick,
   useParameterShell: () => useParameterShell,
+  usePopoverComponentContext: () => usePopoverComponentContext,
   useShortcut: () => useShortcut,
   utilityColors: () => functionalColors,
   warningIcon: () => warningIcon,
@@ -1615,7 +1616,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Quantico:wght@700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap",
+        href: "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap",
         rel: "stylesheet"
       }
     ),
@@ -1759,7 +1760,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           /* font family */
           --ff-base: 'DM Sans', sans-serif;
           --ff-heading: 'Quantico', sans-serif;
-          --ff-mono: 'Space Mono', monospace;
+          --ff-mono: 'DM Mono', monospace;
 
           /* max text width */
           --prose: 65ch;
@@ -1785,6 +1786,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --rounded-sm: 0.125rem;   /* 2px */
           --rounded-base: 0.25rem;  /* 4px */
           --rounded-md: 0.375rem;   /* 6px */
+          --rounded-lg: 0.5rem;   /* 8px */
 
           /* anything below here should be removed as its not in our style guide */
           --rounded-xl: 0.75rem;
@@ -13867,15 +13869,18 @@ init_emotion_jsx_shim();
 var import_react32 = require("@emotion/react");
 var import_CgChevronDown2 = require("@react-icons/all-files/cg/CgChevronDown");
 var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
-var buttonStyle = import_react32.css`
+var buttonStyle = (bgColor) => import_react32.css`
   border: 0;
-  background-color: white;
+  background-color: ${bgColor};
   display: block;
   font-size: var(--fs-sm);
   line-height: 1.5;
+  transition: background-color var(--duration-fast) var(--timing-ease-out),
+    outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
 
   &:hover {
-    outline: 1px solid var(--gray-300);
+    outline-color: var(--gray-300);
     background-color: var(--gray-100);
   }
 
@@ -13883,8 +13888,12 @@ var buttonStyle = import_react32.css`
     color: var(--gray-400);
   }
 `;
-function DropdownStyleMenuTrigger({ children, ...buttonProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ...buttonProps, css: buttonStyle, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
+function DropdownStyleMenuTrigger({
+  bgColor = "var(--white)",
+  children,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ...buttonProps, css: buttonStyle(bgColor), type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_CgChevronDown2.CgChevronDown, { size: "1rem" })
   ] }) });
@@ -14118,19 +14127,14 @@ var Menu = React7.forwardRef(function Menu2({
         "data-testid": testId != null ? testId : "more-menu",
         hideOnHoverOutside: (event) => {
           var _a;
-          if (!menu.parent)
-            return false;
+          if (!menu.parent) return false;
           const { contentElement, anchorElement } = menu.getState();
           const [target] = event.composedPath();
-          if (!target)
-            return false;
+          if (!target) return false;
           const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
-          if (anchorElement == null ? void 0 : anchorElement.contains(target))
-            return false;
-          if (contentElement == null ? void 0 : contentElement.contains(target))
-            return false;
-          if (activeElement && target.contains(activeElement))
-            return false;
+          if (anchorElement == null ? void 0 : anchorElement.contains(target)) return false;
+          if (contentElement == null ? void 0 : contentElement.contains(target)) return false;
+          if (activeElement && target.contains(activeElement)) return false;
           return true;
         },
         children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
@@ -14977,8 +14981,7 @@ var InputInlineSelect = ({
             "aria-expanded": menuVisible,
             css: inlineSelectBtn,
             onClick: () => {
-              if (!disabled2)
-                setMenuVisible((prev) => !prev);
+              if (!disabled2) setMenuVisible((prev) => !prev);
             },
             disabled: disabled2,
             ...props,
@@ -16611,6 +16614,7 @@ var ChipMultiline = import_react69.css`
   padding-inline: var(--spacing-sm);
 `;
 var ChipThemeAccentLight = import_react69.css`
+  --outline-color: var(--accent-light);
   background: var(--accent-light);
   color: var(--typography-base);
 
@@ -16636,6 +16640,7 @@ var ChipThemeAccentLight = import_react69.css`
   }
 `;
 var ChipThemeAccentDark = import_react69.css`
+  --outline-color: var(--accent-dark);
   background: var(--accent-dark);
   color: var(--white);
 
@@ -16657,6 +16662,7 @@ var ChipThemeAccentDark = import_react69.css`
   }
 `;
 var ChipAltThemeAccentLight = import_react69.css`
+  --outline-color: var(--accent-alt-light);
   background: var(--accent-alt-light);
   color: var(--typography-base);
 
@@ -16682,6 +16688,7 @@ var ChipAltThemeAccentLight = import_react69.css`
   }
 `;
 var ChipAltThemeAccentDark = import_react69.css`
+  --outline-color: var(--accent-alt-dark);
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -16703,6 +16710,7 @@ var ChipAltThemeAccentDark = import_react69.css`
   }
 `;
 var ChipThemeNeutralLight = import_react69.css`
+  --outline-color: var(--gray-300);
   background: var(--gray-100);
   color: var(--typography-base);
   :where([role='button']) {
@@ -16713,6 +16721,7 @@ var ChipThemeNeutralLight = import_react69.css`
   }
 `;
 var ChipThemeNeutralDark = import_react69.css`
+  --outline-color: var(--gray-700);
   background: var(--gray-700);
   color: var(--white);
   :where([role='button']) {
@@ -16732,6 +16741,15 @@ var ChipActionButton = import_react69.css`
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
   padding: 0;
 `;
+var ChipOutlined = import_react69.css`
+  background: var(--white);
+  color: var(--typography-light);
+  box-shadow: inset 0 0 0 1px var(--outline-color);
+
+  > [role='separator'] {
+    border-color: var(--outline-color);
+  }
+`;
 
 // src/components/Chip/Chip.tsx
 var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
@@ -16748,6 +16766,7 @@ var Chip = ({
   text,
   size = "sm",
   theme = "accent-light",
+  variant = "solid",
   chipAction,
   as = "span",
   ...props
@@ -16758,14 +16777,26 @@ var Chip = ({
     md: ChipMedium
   };
   const ElementType = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(ElementType, { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
-    icon ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "separator", css: ChipSeparator })
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ChipText, children: text }),
-    chipAction
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    ElementType,
+    {
+      css: [
+        ChipContainer,
+        chipSize[size],
+        chipTheme[theme],
+        variant === "outlined" ? ChipOutlined : void 0
+      ],
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "separator", css: ChipSeparator })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ChipText, children: text }),
+        chipAction
+      ]
+    }
+  );
 };
 var DismissibleChipAction = ({ onDismiss, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -19600,6 +19631,10 @@ var Popover3 = ({
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_react108.Popover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
+var usePopoverComponentContext = () => {
+  const contextValue = (0, import_react108.usePopoverContext)();
+  return contextValue;
+};
 
 // src/components/MediaCard/MediaCard.styles.ts
 init_emotion_jsx_shim();
@@ -21734,8 +21769,7 @@ var getElementNodesInSelection = (selection) => {
 };
 var getAncestor = (node, predicate) => {
   let parent = node;
-  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
-    ;
+  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent)) ;
   return parent;
 };
 var getSelectedNode = (selection) => {
@@ -23836,8 +23870,7 @@ var Tabs = ({
   ...props
 }) => {
   const selected = (0, import_react159.useMemo)(() => {
-    if (selectedId)
-      return selectedId;
+    if (selectedId) return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = (0, import_react158.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
@@ -24246,6 +24279,7 @@ var StatusBullet = ({
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  usePopoverComponentContext,
   useShortcut,
   utilityColors,
   warningIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.165.2-alpha.0+323887559d",
+  "version": "19.166.1",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,15 +24,15 @@
     "@storybook/react": "8.0.10",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.165.2-alpha.0+323887559d",
-    "@uniformdev/richtext": "^19.165.2-alpha.0+323887559d",
+    "@uniformdev/canvas": "^19.166.1",
+    "@uniformdev/richtext": "^19.166.1",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-select-event": "^5.5.1",
-    "tsup": "8.0.2"
+    "tsup": "8.1.0"
   },
   "dependencies": {
     "@ariakit/react": "^0.3.5",
@@ -54,11 +54,11 @@
     "lottie-react": "^2.3.1",
     "monaco-editor": "0.45.0",
     "react-aria-components": "^1.1.1",
-    "react-hotkeys-hook": "4.4.1",
+    "react-hotkeys-hook": "4.5.0",
     "react-paginate": "8.2.0",
     "react-select": "5.8.0",
     "react-toastify": "10.0.5",
-    "react-use": "17.4.2",
+    "react-use": "17.5.0",
     "reakit": "1.3.11",
     "zod-to-json-schema": "3.21.4"
   },
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "323887559d1bdc7432f91d305afaec90b98f660f"
+  "gitHead": "d6a92d76bb91fa41a51cf27a69d81e0cc985f80f"
 }