@uniformdev/design-system 19.214.1-alpha.10 → 19.214.1-alpha.17

package/dist/esm/index.js

@@ -67,11 +67,9 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           --action-destructive-default: var(--brand-secondary-5);
           --action-destructive-hover: #e07571;
-          --action-destructive-active: rbga(210, 50, 45, 0.05); /* #d2322d */
+          --action-destructive-active: rgba(210, 50, 45, 0.05); /* #d2322d */
           --action-destructive-disabled: #f87171;
 
-          
-
           /* tertiary action */
           --tertiary-action-default: var(--gray-700);
           --tertiary-action-hover: var(--gray-600);
@@ -1061,7 +1059,7 @@ var buttonTertiary = css8`
   }
 
   ${buttonRippleEffect({
-  hoverColor: " var(--tertiary-action-default)",
+  hoverColor: "var(--tertiary-action-default)",
   activeColor: "var(--tertiary-action-active)"
 })}
 `;
@@ -1099,6 +1097,62 @@ var buttonGhostUnimportant = css8`
 
   ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-2)", activeColor: "var(--gray-100)" })}
 `;
+var buttonSoftPrimary = css8`
+  --local-action-default: 219, 100%, 46%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--primary-action-default);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    outline: 1px solid var(--primary-action-hover);
+  }
+`;
+var buttonSoftTertiary = css8`
+  --local-action-default: 215, 28%, 17%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--gray-800);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover,
+  &:focus {
+    outline: 1px solid var(--gray-700);
+  }
+`;
+var buttonSoftAlt = css8`
+  --local-action-default: 328, 100%, 40%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--accent-alt-dark);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover {
+    outline: 1px solid var(--accent-alt-dark);
+  }
+`;
+var buttonSoftDestructive = css8`
+  background-color: var(--action-destructive-active);
+  color: var(--action-destructive-default);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover,
+  &:focus {
+    outline: 1px solid var(--action-destructive-hover);
+  }
+`;
+var buttonSoftAccentPrimary = css8`
+  --local-action-default: 260, 45%, 46%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--accent-dark-active);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover,
+  &:focus {
+    outline: 1px solid var(--accent-dark-hover);
+  }
+`;
 
 // src/components/Input/styles/Inputs.styles.ts
 import { css as css11 } from "@emotion/react";
@@ -1479,6 +1533,54 @@ function Tooltip({
   ] });
 }
 
+// src/components/Button/hooks/useButtonStyles.ts
+var useButtonStyles = ({ size, ...props }) => {
+  const btnSize = {
+    zero: "padding: 0",
+    xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
+    sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
+    md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
+    lg: "padding: var(--spacing-sm) var(--spacing-base)",
+    xl: "padding: 0.75rem var(--spacing-md)"
+  };
+  if ("variant" in props && props.variant === "soft") {
+    const buttonSoftTheme = {
+      primary: buttonSoftPrimary,
+      tertiary: buttonSoftTertiary,
+      alt: buttonSoftAlt,
+      destructive: buttonSoftDestructive,
+      "accent-primary": buttonSoftAccentPrimary
+    };
+    if (props.theme in buttonSoftTheme) {
+      const theme2 = props.theme;
+      return {
+        buttonTheme: buttonSoftTheme[theme2],
+        btnSize: btnSize[size]
+      };
+    }
+  }
+  const theme = props.theme;
+  const buttonTheme2 = {
+    primary: buttonPrimary,
+    primaryInvert: buttonPrimaryInvert,
+    "accent-alt-dark": buttonAccentAltDark,
+    "accent-alt-dark-outline": buttonAccentAltDarkOutline,
+    destructive: buttonDestructive,
+    secondary: buttonSecondary,
+    secondaryInvert: buttonSecondaryInvert,
+    ghost: buttonGhost,
+    ghostDestructive: buttonGhostDestructive,
+    unimportant: buttonUnimportant,
+    ghostUnimportant: buttonGhostUnimportant,
+    tertiary: buttonTertiary,
+    tertiaryOutline: buttonTertiaryOutline
+  };
+  return {
+    buttonTheme: buttonTheme2[theme],
+    btnSize: btnSize[size]
+  };
+};
+
 // src/components/Button/Button.tsx
 import { Fragment as Fragment2, jsx as jsx12 } from "@emotion/react/jsx-runtime";
 var Button = React3.forwardRef(
@@ -1493,36 +1595,18 @@ var Button = React3.forwardRef(
     disabled: disabled2,
     ...props
   }, ref) => {
-    const buttonTheme2 = {
-      primary: buttonPrimary,
-      primaryInvert: buttonPrimaryInvert,
-      "accent-alt-dark": buttonAccentAltDark,
-      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
-      destructive: buttonDestructive,
-      secondary: buttonSecondary,
-      secondaryInvert: buttonSecondaryInvert,
-      ghost: buttonGhost,
-      ghostDestructive: buttonGhostDestructive,
-      unimportant: buttonUnimportant,
-      ghostUnimportant: buttonGhostUnimportant,
-      tertiary: buttonTertiary,
-      tertiaryOutline: buttonTertiaryOutline
-    };
-    const btnSize = {
-      zero: "padding: 0",
-      xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
-      sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
-      md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
-      lg: "padding: var(--spacing-sm) var(--spacing-base)",
-      xl: "padding: 0.75rem var(--spacing-md)"
-    };
+    const { btnSize, buttonTheme: buttonTheme2 } = useButtonStyles({
+      theme: buttonType,
+      size,
+      ..."variant" in props ? { variant: props.variant } : {}
+    });
     const clickHandler = onClick != null ? onClick : shortcut == null ? void 0 : shortcut.handler;
     const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
     const buttonContent = /* @__PURE__ */ jsx12(
       BaseButton,
       {
         ref,
-        css: [button, buttonTheme2[buttonType], btnSize[size]],
+        css: [button, buttonTheme2, btnSize],
         ...props,
         onClick: clickHandler,
         disabled: disabledValue,
@@ -18815,7 +18899,7 @@ var ObjectListItemContentWrapper = css80`
   flex-grow: 1;
 
   ${cq("34rem")} {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
   }
 `;
 var ObjectListItemRightSlot = css80`
@@ -18916,7 +19000,7 @@ var ObjectListItem2 = (props) => {
         /* @__PURE__ */ jsx105(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
         /* @__PURE__ */ jsxs70("div", { css: ObjectListItemContentWrapper, children: [
           /* @__PURE__ */ jsx105(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
-          /* @__PURE__ */ jsxs70(VerticalRhythm, { gap: "0", children: [
+          /* @__PURE__ */ jsxs70(VerticalRhythm, { gap: "0", justify: renderAs === "multi" ? "flex-start" : "center", children: [
             /* @__PURE__ */ jsx105(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
             renderAs === "multi" ? props.children : null
           ] }),
@@ -24117,6 +24201,11 @@ export {
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,
+  buttonSoftAccentPrimary,
+  buttonSoftAlt,
+  buttonSoftDestructive,
+  buttonSoftPrimary,
+  buttonSoftTertiary,
   buttonTertiary,
   buttonTertiaryOutline,
   buttonUnimportant,
@@ -24181,6 +24270,7 @@ export {
   uniformLocaleDisabledIcon,
   uniformLocaleIcon,
   useBreakpoint,
+  useButtonStyles,
   useCloseCurrentDrawer,
   useCurrentDrawer,
   useCurrentTab,

package/dist/index.d.mts

@@ -121,6 +121,11 @@ declare const buttonGhostDestructive: _emotion_react.SerializedStyles;
 declare const buttonTertiary: _emotion_react.SerializedStyles;
 declare const buttonTertiaryOutline: _emotion_react.SerializedStyles;
 declare const buttonGhostUnimportant: _emotion_react.SerializedStyles;
+declare const buttonSoftPrimary: _emotion_react.SerializedStyles;
+declare const buttonSoftTertiary: _emotion_react.SerializedStyles;
+declare const buttonSoftAlt: _emotion_react.SerializedStyles;
+declare const buttonSoftDestructive: _emotion_react.SerializedStyles;
+declare const buttonSoftAccentPrimary: _emotion_react.SerializedStyles;
 
 declare const labelText: _emotion_react.SerializedStyles;
 declare const input: (whiteSpaceWrap: "wrap" | "nowrap") => _emotion_react.SerializedStyles;
@@ -20370,10 +20375,27 @@ type TooltipProps = TooltipOptions & {
 } & Pick<HTMLAttributes<HTMLDivElement>, 'className'>;
 declare function Tooltip({ children, title, placement, visible, withoutPortal, ...props }: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
 
-/** Button themes that are available to use with our brand */
-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$1 = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Button themes that are available to use with our brand */
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'accent-alt-dark' | 'accent-alt-dark-outline' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
+/** @deprecated - Beta Button themes for the soft variant */
+type ButtonSoftThemeProps = 'primary' | 'tertiary' | 'alt' | 'destructive' | 'accent-primary';
+type ButtonStylesProps = ButtonDefaultStylesProps | ButtonSoftStylesProps;
+type ButtonDefaultStylesProps = {
+    theme: ButtonThemeProps$1;
+    size: ButtonSizeProps$1;
+};
+type ButtonSoftStylesProps = {
+    theme: ButtonSoftThemeProps;
+    size: ButtonSizeProps$1;
+    variant?: 'soft' | undefined;
+};
+declare const useButtonStyles: ({ size, ...props }: ButtonStylesProps) => {
+    buttonTheme: SerializedStyles;
+    btnSize: string;
+};
+
 type ButtonProps = ButtonProps$1 & {
     /** sets the theme of the button
      * @default "primary"
@@ -20401,11 +20423,16 @@ type ButtonProps = ButtonProps$1 & {
      */
     shortcut?: ShortcutReference;
 };
+/** @deprecated - Beta Button component using the soft variant */
+type ButtonWithVariantProps = Omit<ButtonProps, 'buttonType'> & {
+    variant?: 'soft';
+    buttonType?: ButtonSoftThemeProps;
+};
 /**
  * Uniform Button Component
  * @example <Button buttonType="secondary" size="md" onClick={() => alert('hello world!')}>Click me</Button>
  */
-declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<ButtonWithVariantProps, "ref">) & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const allSupportedIcons: {
     'rectangle-rounded': (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
@@ -22912,7 +22939,7 @@ type ObjectItemLoadingSkeletonProps = {
 declare const ObjectItemLoadingSkeleton: ({ showCover, renderAs, }: ObjectItemLoadingSkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /** @deprecated - Beta Object list item component  */
-type ObjectListItemProps = ObjectListItemSingleProps | (ObjectListItemMultiProps & HTMLAttributes<HTMLDivElement>);
+type ObjectListItemProps = (ObjectListItemSingleProps & HTMLAttributes<HTMLDivElement>) | (ObjectListItemMultiProps & HTMLAttributes<HTMLDivElement>);
 type ObjectListItemSingleProps = Omit<ObjectItemProps, 'cover' | 'children'> & {
     cover?: ReactNode;
     dragHandle?: ReactNode;
@@ -23944,4 +23971,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, compact, ...props }: StatusBulletProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, 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, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, 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, DragHandle, type DraggableHandleProps, 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, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, 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, 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, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, 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, type ShortcutReference, 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, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };
+export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonSoftThemeProps, 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, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, 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, DragHandle, type DraggableHandleProps, 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, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, 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, 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, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, 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, type ShortcutReference, 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, buttonSoftAccentPrimary, buttonSoftAlt, buttonSoftDestructive, buttonSoftPrimary, buttonSoftTertiary, 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, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, useBreakpoint, useButtonStyles, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };

package/dist/index.d.ts

@@ -121,6 +121,11 @@ declare const buttonGhostDestructive: _emotion_react.SerializedStyles;
 declare const buttonTertiary: _emotion_react.SerializedStyles;
 declare const buttonTertiaryOutline: _emotion_react.SerializedStyles;
 declare const buttonGhostUnimportant: _emotion_react.SerializedStyles;
+declare const buttonSoftPrimary: _emotion_react.SerializedStyles;
+declare const buttonSoftTertiary: _emotion_react.SerializedStyles;
+declare const buttonSoftAlt: _emotion_react.SerializedStyles;
+declare const buttonSoftDestructive: _emotion_react.SerializedStyles;
+declare const buttonSoftAccentPrimary: _emotion_react.SerializedStyles;
 
 declare const labelText: _emotion_react.SerializedStyles;
 declare const input: (whiteSpaceWrap: "wrap" | "nowrap") => _emotion_react.SerializedStyles;
@@ -20370,10 +20375,27 @@ type TooltipProps = TooltipOptions & {
 } & Pick<HTMLAttributes<HTMLDivElement>, 'className'>;
 declare function Tooltip({ children, title, placement, visible, withoutPortal, ...props }: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
 
-/** Button themes that are available to use with our brand */
-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$1 = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Button themes that are available to use with our brand */
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'accent-alt-dark' | 'accent-alt-dark-outline' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
+/** @deprecated - Beta Button themes for the soft variant */
+type ButtonSoftThemeProps = 'primary' | 'tertiary' | 'alt' | 'destructive' | 'accent-primary';
+type ButtonStylesProps = ButtonDefaultStylesProps | ButtonSoftStylesProps;
+type ButtonDefaultStylesProps = {
+    theme: ButtonThemeProps$1;
+    size: ButtonSizeProps$1;
+};
+type ButtonSoftStylesProps = {
+    theme: ButtonSoftThemeProps;
+    size: ButtonSizeProps$1;
+    variant?: 'soft' | undefined;
+};
+declare const useButtonStyles: ({ size, ...props }: ButtonStylesProps) => {
+    buttonTheme: SerializedStyles;
+    btnSize: string;
+};
+
 type ButtonProps = ButtonProps$1 & {
     /** sets the theme of the button
      * @default "primary"
@@ -20401,11 +20423,16 @@ type ButtonProps = ButtonProps$1 & {
      */
     shortcut?: ShortcutReference;
 };
+/** @deprecated - Beta Button component using the soft variant */
+type ButtonWithVariantProps = Omit<ButtonProps, 'buttonType'> & {
+    variant?: 'soft';
+    buttonType?: ButtonSoftThemeProps;
+};
 /**
  * Uniform Button Component
  * @example <Button buttonType="secondary" size="md" onClick={() => alert('hello world!')}>Click me</Button>
  */
-declare const Button: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<ButtonWithVariantProps, "ref">) & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const allSupportedIcons: {
     'rectangle-rounded': (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
@@ -22912,7 +22939,7 @@ type ObjectItemLoadingSkeletonProps = {
 declare const ObjectItemLoadingSkeleton: ({ showCover, renderAs, }: ObjectItemLoadingSkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /** @deprecated - Beta Object list item component  */
-type ObjectListItemProps = ObjectListItemSingleProps | (ObjectListItemMultiProps & HTMLAttributes<HTMLDivElement>);
+type ObjectListItemProps = (ObjectListItemSingleProps & HTMLAttributes<HTMLDivElement>) | (ObjectListItemMultiProps & HTMLAttributes<HTMLDivElement>);
 type ObjectListItemSingleProps = Omit<ObjectItemProps, 'cover' | 'children'> & {
     cover?: ReactNode;
     dragHandle?: ReactNode;
@@ -23944,4 +23971,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, compact, ...props }: StatusBulletProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, 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, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, 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, DragHandle, type DraggableHandleProps, 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, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, 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, 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, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, 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, type ShortcutReference, 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, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };
+export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonSoftThemeProps, 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, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, 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, DragHandle, type DraggableHandleProps, 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, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, 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, 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, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, 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, type ShortcutReference, 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, buttonSoftAccentPrimary, buttonSoftAlt, buttonSoftDestructive, buttonSoftPrimary, buttonSoftTertiary, 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, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, useBreakpoint, useButtonStyles, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };

package/dist/index.js

@@ -1543,6 +1543,11 @@ __export(src_exports, {
   buttonRippleEffect: () => buttonRippleEffect,
   buttonSecondary: () => buttonSecondary,
   buttonSecondaryInvert: () => buttonSecondaryInvert,
+  buttonSoftAccentPrimary: () => buttonSoftAccentPrimary,
+  buttonSoftAlt: () => buttonSoftAlt,
+  buttonSoftDestructive: () => buttonSoftDestructive,
+  buttonSoftPrimary: () => buttonSoftPrimary,
+  buttonSoftTertiary: () => buttonSoftTertiary,
   buttonTertiary: () => buttonTertiary,
   buttonTertiaryOutline: () => buttonTertiaryOutline,
   buttonUnimportant: () => buttonUnimportant,
@@ -1607,6 +1612,7 @@ __export(src_exports, {
   uniformLocaleDisabledIcon: () => uniformLocaleDisabledIcon,
   uniformLocaleIcon: () => uniformLocaleIcon,
   useBreakpoint: () => useBreakpoint,
+  useButtonStyles: () => useButtonStyles,
   useCloseCurrentDrawer: () => useCloseCurrentDrawer,
   useCurrentDrawer: () => useCurrentDrawer,
   useCurrentTab: () => useCurrentTab,
@@ -1695,11 +1701,9 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           --action-destructive-default: var(--brand-secondary-5);
           --action-destructive-hover: #e07571;
-          --action-destructive-active: rbga(210, 50, 45, 0.05); /* #d2322d */
+          --action-destructive-active: rgba(210, 50, 45, 0.05); /* #d2322d */
           --action-destructive-disabled: #f87171;
 
-          
-
           /* tertiary action */
           --tertiary-action-default: var(--gray-700);
           --tertiary-action-hover: var(--gray-600);
@@ -2720,7 +2724,7 @@ var buttonTertiary = import_react10.css`
   }
 
   ${buttonRippleEffect({
-  hoverColor: " var(--tertiary-action-default)",
+  hoverColor: "var(--tertiary-action-default)",
   activeColor: "var(--tertiary-action-active)"
 })}
 `;
@@ -2758,6 +2762,62 @@ var buttonGhostUnimportant = import_react10.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-2)", activeColor: "var(--gray-100)" })}
 `;
+var buttonSoftPrimary = import_react10.css`
+  --local-action-default: 219, 100%, 46%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--primary-action-default);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    outline: 1px solid var(--primary-action-hover);
+  }
+`;
+var buttonSoftTertiary = import_react10.css`
+  --local-action-default: 215, 28%, 17%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--gray-800);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover,
+  &:focus {
+    outline: 1px solid var(--gray-700);
+  }
+`;
+var buttonSoftAlt = import_react10.css`
+  --local-action-default: 328, 100%, 40%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--accent-alt-dark);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover {
+    outline: 1px solid var(--accent-alt-dark);
+  }
+`;
+var buttonSoftDestructive = import_react10.css`
+  background-color: var(--action-destructive-active);
+  color: var(--action-destructive-default);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover,
+  &:focus {
+    outline: 1px solid var(--action-destructive-hover);
+  }
+`;
+var buttonSoftAccentPrimary = import_react10.css`
+  --local-action-default: 260, 45%, 46%;
+  background-color: hsla(var(--local-action-default), 0.05);
+  color: var(--accent-dark-active);
+  transition: outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
+
+  &:hover,
+  &:focus {
+    outline: 1px solid var(--accent-dark-hover);
+  }
+`;
 
 // src/components/Input/styles/Inputs.styles.ts
 init_emotion_jsx_shim();
@@ -3144,6 +3204,55 @@ function Tooltip({
   ] });
 }
 
+// src/components/Button/hooks/useButtonStyles.ts
+init_emotion_jsx_shim();
+var useButtonStyles = ({ size, ...props }) => {
+  const btnSize = {
+    zero: "padding: 0",
+    xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
+    sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
+    md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
+    lg: "padding: var(--spacing-sm) var(--spacing-base)",
+    xl: "padding: 0.75rem var(--spacing-md)"
+  };
+  if ("variant" in props && props.variant === "soft") {
+    const buttonSoftTheme = {
+      primary: buttonSoftPrimary,
+      tertiary: buttonSoftTertiary,
+      alt: buttonSoftAlt,
+      destructive: buttonSoftDestructive,
+      "accent-primary": buttonSoftAccentPrimary
+    };
+    if (props.theme in buttonSoftTheme) {
+      const theme2 = props.theme;
+      return {
+        buttonTheme: buttonSoftTheme[theme2],
+        btnSize: btnSize[size]
+      };
+    }
+  }
+  const theme = props.theme;
+  const buttonTheme2 = {
+    primary: buttonPrimary,
+    primaryInvert: buttonPrimaryInvert,
+    "accent-alt-dark": buttonAccentAltDark,
+    "accent-alt-dark-outline": buttonAccentAltDarkOutline,
+    destructive: buttonDestructive,
+    secondary: buttonSecondary,
+    secondaryInvert: buttonSecondaryInvert,
+    ghost: buttonGhost,
+    ghostDestructive: buttonGhostDestructive,
+    unimportant: buttonUnimportant,
+    ghostUnimportant: buttonGhostUnimportant,
+    tertiary: buttonTertiary,
+    tertiaryOutline: buttonTertiaryOutline
+  };
+  return {
+    buttonTheme: buttonTheme2[theme],
+    btnSize: btnSize[size]
+  };
+};
+
 // src/components/Button/Button.tsx
 var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
 var Button = React3.forwardRef(
@@ -3158,36 +3267,18 @@ var Button = React3.forwardRef(
     disabled: disabled2,
     ...props
   }, ref) => {
-    const buttonTheme2 = {
-      primary: buttonPrimary,
-      primaryInvert: buttonPrimaryInvert,
-      "accent-alt-dark": buttonAccentAltDark,
-      "accent-alt-dark-outline": buttonAccentAltDarkOutline,
-      destructive: buttonDestructive,
-      secondary: buttonSecondary,
-      secondaryInvert: buttonSecondaryInvert,
-      ghost: buttonGhost,
-      ghostDestructive: buttonGhostDestructive,
-      unimportant: buttonUnimportant,
-      ghostUnimportant: buttonGhostUnimportant,
-      tertiary: buttonTertiary,
-      tertiaryOutline: buttonTertiaryOutline
-    };
-    const btnSize = {
-      zero: "padding: 0",
-      xs: "padding: 0.375rem 0.625rem; font-size: var(--fs-xs); line-height: 1.5;",
-      sm: "padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",
-      md: "padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",
-      lg: "padding: var(--spacing-sm) var(--spacing-base)",
-      xl: "padding: 0.75rem var(--spacing-md)"
-    };
+    const { btnSize, buttonTheme: buttonTheme2 } = useButtonStyles({
+      theme: buttonType,
+      size,
+      ..."variant" in props ? { variant: props.variant } : {}
+    });
     const clickHandler = onClick != null ? onClick : shortcut == null ? void 0 : shortcut.handler;
     const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
     const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react16.Button,
       {
         ref,
-        css: [button, buttonTheme2[buttonType], btnSize[size]],
+        css: [button, buttonTheme2, btnSize],
         ...props,
         onClick: clickHandler,
         disabled: disabledValue,
@@ -20671,7 +20762,7 @@ var ObjectListItemContentWrapper = import_react122.css`
   flex-grow: 1;
 
   ${cq("34rem")} {
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
   }
 `;
 var ObjectListItemRightSlot = import_react122.css`
@@ -20773,7 +20864,7 @@ var ObjectListItem2 = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
         /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: ObjectListItemContentWrapper, children: [
           /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
-          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(VerticalRhythm, { gap: "0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(VerticalRhythm, { gap: "0", justify: renderAs === "multi" ? "flex-start" : "center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
             renderAs === "multi" ? props.children : null
           ] }),
@@ -25953,6 +26044,11 @@ var StatusBullet = ({
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,
+  buttonSoftAccentPrimary,
+  buttonSoftAlt,
+  buttonSoftDestructive,
+  buttonSoftPrimary,
+  buttonSoftTertiary,
   buttonTertiary,
   buttonTertiaryOutline,
   buttonUnimportant,
@@ -26017,6 +26113,7 @@ var StatusBullet = ({
   uniformLocaleDisabledIcon,
   uniformLocaleIcon,
   useBreakpoint,
+  useButtonStyles,
   useCloseCurrentDrawer,
   useCurrentDrawer,
   useCurrentTab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.214.1-alpha.10+98dac3377a",
+  "version": "19.214.1-alpha.17+15e689c12c",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -26,8 +26,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^19.214.1-alpha.10+98dac3377a",
-    "@uniformdev/richtext": "^19.214.1-alpha.10+98dac3377a",
+    "@uniformdev/canvas": "^19.214.1-alpha.17+15e689c12c",
+    "@uniformdev/richtext": "^19.214.1-alpha.17+15e689c12c",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.47",
@@ -78,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "98dac3377a8313b1d70d0b02632a6a7192f2409c"
+  "gitHead": "15e689c12ce848ce17d170f9be8c6f3d2c29ffe1"
 }