@uniformdev/design-system 18.34.0 → 18.35.1-alpha.12

package/dist/esm/index.js

@@ -306,6 +306,20 @@ var buttonSecondaryInvert = css`
 
   ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
 `;
+var buttonPrimaryInvert = css`
+  background: var(--white);
+  color: var(--brand-secondary-1);
+  box-shadow: 0 0 0 1px var(--brand-secondary-1);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+  gap: var(--spacing-sm);
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonUnimportant = css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
@@ -1408,18 +1422,104 @@ var Heading = ({
 // src/components/Badges/Badge.styles.ts
 import { css as css10 } from "@emotion/react";
 var BadgeContainer = css10`
-  background: var(--brand-secondary-2);
+  --caution-desc: rgb(161, 98, 7);
+  --caution-title: rgb(133, 77, 14);
+  --caution-container: rgb(254, 252, 232);
+
+  --danger-desc: rgb(185, 28, 28);
+  --danger-title: rgb(153, 27, 27);
+  --danger-container: rgb(254, 242, 242);
+
+  --info-desc: rgb(29, 78, 216);
+  --info-title: rgb(30, 64, 175);
+  --info-container: rgb(239, 246, 255);
+
+  --note-desc: var(--gray-700);
+  --note-title: var(--gray-800);
+  --note-container: var(--gray-50);
+
+  --success-desc: rgb(21, 128, 61);
+  --success-title: rgb(22, 101, 52);
+  --success-container: rgb(240, 253, 250);
+
   border-radius: var(--rounded-base);
-  color: var(--brand-secondary-1);
   display: inline-block;
+`;
+var ExtraSmall = css10`
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--fs-xxs);
+`;
+var Small = css10`
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--fs-xs);
+`;
+var Base = css10`
   padding: var(--spacing-sm) var(--spacing-base);
   font-size: var(--fs-sm);
 `;
+var Caution = css10`
+  background-color: var(--caution-container);
+  color: var(--caution-title);
+`;
+var Info = css10`
+  background-color: var(--info-container);
+  color: var(--info-title);
+`;
+var Note = css10`
+  background-color: var(--note-container);
+  color: var(--note-title);
+`;
+var Success = css10`
+  background-color: var(--success-container);
+  color: var(--success-title);
+`;
+var Error2 = css10`
+  background-color: var(--danger-container);
+  color: var(--danger-title);
+`;
+var Unimportant = css10`
+  background: var(--brand-secondary-2);
+  color: var(--brand-secondary-1);
+`;
+var UppercaseText = css10`
+  text-transform: uppercase;
+`;
 
 // src/components/Badges/Badge.tsx
 import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
-var Badge = ({ text }) => {
-  return /* @__PURE__ */ jsx9("span", { css: BadgeContainer, children: text });
+var Badge = ({
+  text,
+  theme = "unimportant",
+  size = "base",
+  uppercaseText,
+  ...props
+}) => {
+  const themeStyles = {
+    caution: Caution,
+    error: Error2,
+    info: Info,
+    note: Note,
+    success: Success,
+    unimportant: Unimportant
+  };
+  const sizeStyles = {
+    xs: ExtraSmall,
+    sm: Small,
+    base: Base
+  };
+  return /* @__PURE__ */ jsx9(
+    "span",
+    {
+      css: [
+        BadgeContainer,
+        themeStyles[theme],
+        sizeStyles[size],
+        uppercaseText ? UppercaseText : void 0
+      ],
+      ...props,
+      children: text
+    }
+  );
 };
 
 // src/components/Typography/Link.tsx
@@ -10520,6 +10620,7 @@ var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
       primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
@@ -12829,8 +12930,8 @@ var loadingDot = css46`
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
-var LoadingIndicator = () => {
-  return /* @__PURE__ */ jsxs35("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+var LoadingIndicator = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs35("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
     /* @__PURE__ */ jsx57("span", { css: loadingDot }),
     /* @__PURE__ */ jsx57("span", { css: loadingDot }),
     /* @__PURE__ */ jsx57("span", { css: loadingDot })
@@ -13360,6 +13461,16 @@ var IntegrationModalImage = css52`
 import { jsx as jsx65, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
+  let iconSrc = void 0;
+  if (icon && typeof icon === "string") {
+    try {
+      const iconUrl = new URL(icon);
+      if (iconUrl.protocol === "data:" || iconUrl.protocol === "https:") {
+        iconSrc = iconUrl.href;
+      }
+    } catch (e) {
+    }
+  }
   return /* @__PURE__ */ jsxs42("div", { css: IntegrationModalIconContainer, children: [
     /* @__PURE__ */ jsxs42("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
       /* @__PURE__ */ jsx65(
@@ -13379,7 +13490,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
     CompIcon ? /* @__PURE__ */ jsx65(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ jsx65(
       "img",
       {
-        src: icon,
+        src: iconSrc,
         alt: name,
         "data-test-id": "integration-modal-icon",
         css: IntegrationModalImage,
@@ -15392,6 +15503,7 @@ export {
   buttonGhost,
   buttonGhostDestructive,
   buttonPrimary,
+  buttonPrimaryInvert,
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { RefObject, ReactNode, HTMLAttributes, FocusEventHandler, ChangeEvent } from 'react';
+import React__default, { RefObject, HTMLAttributes, ReactNode, FocusEventHandler, ChangeEvent } from 'react';
 import { GroupBase } from 'react-select';
 export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
 import * as _emotion_react from '@emotion/react';
@@ -68,6 +68,7 @@ declare const buttonRippleEffect: (props: {
 declare const buttonPrimary: _emotion_react.SerializedStyles;
 declare const buttonSecondary: _emotion_react.SerializedStyles;
 declare const buttonSecondaryInvert: _emotion_react.SerializedStyles;
+declare const buttonPrimaryInvert: _emotion_react.SerializedStyles;
 declare const buttonUnimportant: _emotion_react.SerializedStyles;
 declare const buttonGhost: _emotion_react.SerializedStyles;
 declare const buttonGhostDestructive: _emotion_react.SerializedStyles;
@@ -20155,15 +20156,29 @@ type AnimationFileProps = LottieComponentProps & {
  */
 declare const AnimationFile: ({ label, loop, autoplay, width, height, ...props }: AnimationFileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+type BadgeThemeProps = 'caution' | 'info' | 'note' | 'success' | 'error' | 'unimportant';
+type SizeProps = 'xs' | 'sm' | 'base';
 type BadgeProps = {
     /** sets the text of the badge */
     text: string;
-};
+    /** sets the theme of the badge
+     * @default unimportant
+     */
+    theme?: BadgeThemeProps;
+    /** sets the size of the badge
+     * @default 'base'
+     */
+    size?: SizeProps;
+    /** sets text to uppercase */
+    uppercaseText?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+type BadgeThemeStyleProps = Record<BadgeThemeProps, SerializedStyles>;
+type BadgeSizeProps = Record<SizeProps, SerializedStyles>;
 /**
  * Uniform Badge Component
- * @example <Badge text="My badge" />
+ * @example <Badge text="My badge" theme="success" size="base" />
  */
-declare const Badge: ({ text }: BadgeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Badge: ({ text, theme, size, uppercaseText, ...props }: BadgeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type BannerType = 'note' | 'info' | 'caution' | 'danger' | 'success';
 type BannerProps = React__default.HTMLAttributes<HTMLDivElement> & {
@@ -20210,7 +20225,7 @@ declare const UniformBadge: ({ theme, ...props }: React__default.SVGAttributes<S
 declare const UniformLogo: ({ theme, ...props }: UniformLogoProps & React.SVGAttributes<SVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Button themes that are available to use with our brand */
-type ButtonThemeProps$1 = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'secondaryInvert';
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert';
 /** Button sizes that are available to use with our brand */
 type ButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonProps = ButtonProps$1 & {
@@ -20224,8 +20239,6 @@ type ButtonProps = ButtonProps$1 & {
      * @default "md"
      * @deprecated size might no longer be used as we are trying to consolidate button designs */
     size?: ButtonSizeProps;
-    /** @deprecated rounded is no longer used */
-    rounded?: boolean;
 };
 /**
  * Uniform Button Component
@@ -20986,7 +20999,7 @@ declare const ScrollableListItem: ({ buttonText, active, ...props }: ScrollableL
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const LoadingIndicator: ({ ...props }: HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -21890,4 +21903,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, Tooltip, TooltipProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, VerticalRhythm, VerticalRhythmProps, WarningMessage, WarningMessageProps, borderTopIcon, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, canvasAlertIcon, cardIcon, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, rectangleRoundedIcon, ripple, scrollbarStyles, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawerRenderer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, Tooltip, TooltipProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, VerticalRhythm, VerticalRhythmProps, WarningMessage, WarningMessageProps, borderTopIcon, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, canvasAlertIcon, cardIcon, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, rectangleRoundedIcon, ripple, scrollbarStyles, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawerRenderer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon };

package/dist/index.js

@@ -150,6 +150,7 @@ __export(src_exports, {
   buttonGhost: () => buttonGhost,
   buttonGhostDestructive: () => buttonGhostDestructive,
   buttonPrimary: () => buttonPrimary,
+  buttonPrimaryInvert: () => buttonPrimaryInvert,
   buttonRippleEffect: () => buttonRippleEffect,
   buttonSecondary: () => buttonSecondary,
   buttonSecondaryInvert: () => buttonSecondaryInvert,
@@ -508,6 +509,20 @@ var buttonSecondaryInvert = import_react3.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
 `;
+var buttonPrimaryInvert = import_react3.css`
+  background: var(--white);
+  color: var(--brand-secondary-1);
+  box-shadow: 0 0 0 1px var(--brand-secondary-1);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+  gap: var(--spacing-sm);
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonUnimportant = import_react3.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
@@ -1610,18 +1625,104 @@ var Heading = ({
 // src/components/Badges/Badge.styles.ts
 var import_react16 = require("@emotion/react");
 var BadgeContainer = import_react16.css`
-  background: var(--brand-secondary-2);
+  --caution-desc: rgb(161, 98, 7);
+  --caution-title: rgb(133, 77, 14);
+  --caution-container: rgb(254, 252, 232);
+
+  --danger-desc: rgb(185, 28, 28);
+  --danger-title: rgb(153, 27, 27);
+  --danger-container: rgb(254, 242, 242);
+
+  --info-desc: rgb(29, 78, 216);
+  --info-title: rgb(30, 64, 175);
+  --info-container: rgb(239, 246, 255);
+
+  --note-desc: var(--gray-700);
+  --note-title: var(--gray-800);
+  --note-container: var(--gray-50);
+
+  --success-desc: rgb(21, 128, 61);
+  --success-title: rgb(22, 101, 52);
+  --success-container: rgb(240, 253, 250);
+
   border-radius: var(--rounded-base);
-  color: var(--brand-secondary-1);
   display: inline-block;
+`;
+var ExtraSmall = import_react16.css`
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--fs-xxs);
+`;
+var Small = import_react16.css`
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--fs-xs);
+`;
+var Base = import_react16.css`
   padding: var(--spacing-sm) var(--spacing-base);
   font-size: var(--fs-sm);
 `;
+var Caution = import_react16.css`
+  background-color: var(--caution-container);
+  color: var(--caution-title);
+`;
+var Info = import_react16.css`
+  background-color: var(--info-container);
+  color: var(--info-title);
+`;
+var Note = import_react16.css`
+  background-color: var(--note-container);
+  color: var(--note-title);
+`;
+var Success = import_react16.css`
+  background-color: var(--success-container);
+  color: var(--success-title);
+`;
+var Error2 = import_react16.css`
+  background-color: var(--danger-container);
+  color: var(--danger-title);
+`;
+var Unimportant = import_react16.css`
+  background: var(--brand-secondary-2);
+  color: var(--brand-secondary-1);
+`;
+var UppercaseText = import_react16.css`
+  text-transform: uppercase;
+`;
 
 // src/components/Badges/Badge.tsx
 var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
-var Badge = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { css: BadgeContainer, children: text });
+var Badge = ({
+  text,
+  theme = "unimportant",
+  size = "base",
+  uppercaseText,
+  ...props
+}) => {
+  const themeStyles = {
+    caution: Caution,
+    error: Error2,
+    info: Info,
+    note: Note,
+    success: Success,
+    unimportant: Unimportant
+  };
+  const sizeStyles = {
+    xs: ExtraSmall,
+    sm: Small,
+    base: Base
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "span",
+    {
+      css: [
+        BadgeContainer,
+        themeStyles[theme],
+        sizeStyles[size],
+        uppercaseText ? UppercaseText : void 0
+      ],
+      ...props,
+      children: text
+    }
+  );
 };
 
 // src/components/Typography/Link.tsx
@@ -10722,6 +10823,7 @@ var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
       primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
@@ -13027,8 +13129,8 @@ var loadingDot = import_react59.css`
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
-var LoadingIndicator = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+var LoadingIndicator = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: loadingDot })
@@ -13558,6 +13660,16 @@ var IntegrationModalImage = import_react67.css`
 var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
+  let iconSrc = void 0;
+  if (icon && typeof icon === "string") {
+    try {
+      const iconUrl = new URL(icon);
+      if (iconUrl.protocol === "data:" || iconUrl.protocol === "https:") {
+        iconSrc = iconUrl.href;
+      }
+    } catch (e) {
+    }
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: IntegrationModalIconContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
@@ -13577,7 +13689,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
     CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CompIcon, { role: "img", css: IntegrationModalImage, ...imgProps }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "img",
       {
-        src: icon,
+        src: iconSrc,
         alt: name,
         "data-test-id": "integration-modal-icon",
         css: IntegrationModalImage,
@@ -15577,6 +15689,7 @@ var StatusBullet = ({
   buttonGhost,
   buttonGhostDestructive,
   buttonPrimary,
+  buttonPrimaryInvert,
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.34.0",
+  "version": "18.35.1-alpha.12+d5e86f567",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
     "@storybook/addon-docs": "6.5.16",
     "@storybook/client-api": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.0.31",
+    "@types/react": "18.0.33",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
     "postcss": "8.4.21",
@@ -34,7 +34,7 @@
     "@emotion/react": "11.10.5",
     "@monaco-editor/react": "4.4.6",
     "lottie-react": "^2.3.1",
-    "monaco-editor": "0.36.1",
+    "monaco-editor": "0.37.1",
     "param-case": "3.0.4",
     "react-hotkeys-hook": "4.3.8",
     "react-icons": "4.8.0",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "563ab31aa4308102c988bea321028e73efe836d0"
+  "gitHead": "d5e86f5673575aecfcf517e684922871315f279b"
 }