@uniformdev/design-system 18.31.0 → 18.31.1-alpha.22

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);
@@ -1401,18 +1415,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
@@ -10391,6 +10491,7 @@ var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
       primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
@@ -12696,8 +12797,8 @@ var loadingDot = css43`
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
-var LoadingIndicator = () => {
-  return /* @__PURE__ */ jsxs33("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+var LoadingIndicator = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs33("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot })
@@ -15066,6 +15167,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';
@@ -67,6 +67,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;
@@ -20153,15 +20154,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 UniformLogoProps = {
     /** sets a light or dark theme for the uniform badge or logo component
@@ -20184,7 +20199,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 & {
@@ -20925,7 +20940,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 */
@@ -21786,4 +21801,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, 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, 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, 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, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, loader as loaderAnimationData, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, spinner as spinnerAnimationData, supports, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawerRenderer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, 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, 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, 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, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, loader as loaderAnimationData, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, spinner as spinnerAnimationData, supports, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawerRenderer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut };

package/dist/index.js

@@ -146,6 +146,7 @@ __export(src_exports, {
   buttonGhost: () => buttonGhost,
   buttonGhostDestructive: () => buttonGhostDestructive,
   buttonPrimary: () => buttonPrimary,
+  buttonPrimaryInvert: () => buttonPrimaryInvert,
   buttonRippleEffect: () => buttonRippleEffect,
   buttonSecondary: () => buttonSecondary,
   buttonSecondaryInvert: () => buttonSecondaryInvert,
@@ -493,6 +494,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);
@@ -1588,18 +1603,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
@@ -10578,6 +10679,7 @@ var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
       primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
@@ -12879,8 +12981,8 @@ var loadingDot = import_react56.css`
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
-var LoadingIndicator = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+var LoadingIndicator = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot })
@@ -15236,6 +15338,7 @@ var StatusBullet = ({
   buttonGhost,
   buttonGhostDestructive,
   buttonPrimary,
+  buttonPrimaryInvert,
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.31.0",
+  "version": "18.31.1-alpha.22+342a682db",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b7090bc4a0971e51fc9ef8f5cb56ebf6cb3f7f3b"
+  "gitHead": "342a682dbc05a6b97b4d529b7604daa62f7d1066"
 }