@uniformdev/design-system 18.6.0 → 18.7.1-alpha.11

package/dist/esm/index.js

@@ -333,6 +333,14 @@ var buttonGhost = css`
 
   ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
 `;
+var buttonGhostDestructive = css`
+  ${buttonGhost}
+  color: var(--brand-secondary-5);
+
+  &:hover {
+    border-color: var(--brand-secondary-5);
+  }
+`;
 var buttonTertiary = css`
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -1916,6 +1924,7 @@ var Button = React5.forwardRef(
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
+      ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
       tertiary: buttonTertiary
     };
@@ -2790,7 +2799,7 @@ var drawerStyles = (bgColor = "var(--white)") => css27`
   flex-direction: column;
   position: absolute;
   inset: 0;
-  padding: var(--spacing-base);
+  padding-top: var(--spacing-sm);
   height: 100%;
 `;
 var drawerCloseButtonStyles = css27`
@@ -2799,19 +2808,22 @@ var drawerCloseButtonStyles = css27`
   border: none;
   display: block;
   padding: var(--spacing-xs);
+  margin-right: var(--spacing-sm);
 `;
 var drawerHeaderStyles = css27`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
+  padding-inline: var(--spacing-base);
 `;
 var drawerRendererStyles = (position) => css27`
   position: ${position};
   inset: 0;
   overflow: hidden;
-  z-index: var(--z-10);
+  z-index: 40;
 `;
 var drawerInnerStyles = css27`
   height: 100%;
+  padding: var(--spacing-base);
   overflow: auto;
   ${scrollbarStyles}
 `;
@@ -2844,8 +2856,7 @@ var drawerWrapperStyles = css27`
 var drawerWrapperOverlayStyles = css27`
   position: absolute;
   inset: 0;
-  background: rgba(100, 100, 100, 0.01);
-  backdrop-filter: blur(2px);
+  background: rgba(31, 43, 52, 0.4);
   animation: ${fadeIn} var(--duration-fast) ease-out;
 `;
 
@@ -3625,7 +3636,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx41("button", { onClick: onClear, children: /* @__PURE__ */ jsx41(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ jsxs25(
+      icon: value ? /* @__PURE__ */ jsx41("button", { onClick: onClear, css: { pointerEvents: "all" }, children: /* @__PURE__ */ jsx41(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ jsxs25(
         "svg",
         {
           width: "26",
@@ -4750,12 +4761,51 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   ] });
 };
 
+// src/components/Skeleton/Skeleton.styles.ts
+import { css as css51, keyframes as keyframes4 } from "@emotion/react";
+var lightFadingOut = keyframes4`
+  from { opacity: 0.1; }
+  to { opacity: 0.025; }
+`;
+var skeletonStyles = css51`
+  animation: ${lightFadingOut} 1s ease-out infinite alternate;
+  background-color: var(--gray-900);
+`;
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx63 } from "@emotion/react/jsx-runtime";
+var Skeleton = ({
+  width = "100%",
+  height = "1.25rem",
+  inline = false,
+  circle = false,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ jsx63(
+  "div",
+  {
+    css: [
+      skeletonStyles,
+      {
+        width: circle ? height : width,
+        height,
+        display: inline ? "inline-block" : "block",
+        borderRadius: circle ? "var(--rounded-full)" : "var(--rounded-md)"
+      }
+    ],
+    ...otherProps,
+    "aria-busy": "true",
+    "aria-label": "Loading...",
+    children
+  }
+);
+
 // src/components/Switch/Switch.tsx
 import * as React14 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css51 } from "@emotion/react";
-var SwitchInputContainer = css51`
+import { css as css52 } from "@emotion/react";
+var SwitchInputContainer = css52`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -4764,7 +4814,7 @@ var SwitchInputContainer = css51`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css51`
+var SwitchInput = css52`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -4802,7 +4852,7 @@ var SwitchInput = css51`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css51`
+var SwitchInputDisabled = css52`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -4810,7 +4860,7 @@ var SwitchInputDisabled = css51`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css51`
+var SwitchInputLabel = css52`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -4832,14 +4882,14 @@ var SwitchInputLabel = css51`
     top: 0;
   }
 `;
-var SwitchText = css51`
+var SwitchText = css52`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var Switch = React14.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
@@ -4848,10 +4898,10 @@ var Switch = React14.forwardRef(
     }
     return /* @__PURE__ */ jsxs44(Fragment9, { children: [
       /* @__PURE__ */ jsxs44("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx63("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx63("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx64("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx64("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx63("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx64("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -4861,64 +4911,64 @@ var Switch = React14.forwardRef(
 import * as React15 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css52 } from "@emotion/react";
-var table = css52`
+import { css as css53 } from "@emotion/react";
+var table = css53`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css52`
+var tableHead = css53`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css52`
+var tableRow = css53`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css52`
+var tableCellHead = css53`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css52`
+var tableCellData = css53`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx64 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx65 } from "@emotion/react/jsx-runtime";
 var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ jsx64("table", { ref, css: table, ...otherProps, children });
+  return /* @__PURE__ */ jsx65("table", { ref, css: table, ...otherProps, children });
 });
 var TableHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
@@ -4932,8 +4982,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css53 } from "@emotion/react";
-var tabButtonStyles = css53`
+import { css as css54 } from "@emotion/react";
+var tabButtonStyles = css54`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -4950,13 +5000,13 @@ var tabButtonStyles = css53`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = css53`
+var tabButtonGroupStyles = css54`
   display: flex;
   gap: var(--spacing-base);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext4(null);
 var useCurrentTab = () => {
   const context = useContext5(CurrentTabContext);
@@ -4974,24 +5024,24 @@ var Tabs = ({ children, onSelectedIdChange, ...props }) => {
   useEffect8(() => {
     tab.setSelectedId(props.selectedId);
   }, [props.selectedId]);
-  return /* @__PURE__ */ jsx65(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx66(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx65(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx66(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx65(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx66(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx65(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx66(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css54 } from "@emotion/react";
-var StatusBulletContainer = css54`
+import { css as css55 } from "@emotion/react";
+var StatusBulletContainer = css55`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -5011,18 +5061,18 @@ var StatusBulletContainer = css54`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = css54`
+var StatusDraft = css55`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css54`
+var StatusModified = css55`
   &:before {
     background: var(--brand-primary-1);
   }
 `;
-var StatusError = css54`
+var StatusError = css55`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -5038,19 +5088,19 @@ var StatusError = css54`
     rotate: -45deg;
   }
 `;
-var StatusPublished = css54`
+var StatusPublished = css55`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css54`
+var StatusOrphan = css55`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx66 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -5060,7 +5110,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -5129,6 +5179,7 @@ export {
   ScrollableListItem,
   ShortcutContext,
   ShortcutRevealer,
+  Skeleton,
   StatusBullet,
   Switch,
   TabButton,
@@ -5151,6 +5202,7 @@ export {
   breakpoints,
   button,
   buttonGhost,
+  buttonGhostDestructive,
   buttonPrimary,
   buttonRippleEffect,
   buttonSecondary,

package/dist/index.d.ts

@@ -64,6 +64,7 @@ declare const buttonSecondary: _emotion_react.SerializedStyles;
 declare const buttonSecondaryInvert: _emotion_react.SerializedStyles;
 declare const buttonUnimportant: _emotion_react.SerializedStyles;
 declare const buttonGhost: _emotion_react.SerializedStyles;
+declare const buttonGhostDestructive: _emotion_react.SerializedStyles;
 declare const buttonTertiary: _emotion_react.SerializedStyles;
 
 declare const labelText: _emotion_react.SerializedStyles;
@@ -205,7 +206,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' | 'secondaryInvert';
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'secondaryInvert';
 /** Button sizes that are available to use with our brand */
 type ButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonProps = ButtonProps$1 & {
@@ -737,7 +738,7 @@ type InputSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
  */
 declare const InputSelect: ({ label, defaultOption, options, caption, errorMessage, warningMessage, showLabel, labelCta, compact, classNameContainer, classNameControl, classNameLabel, ...props }: InputSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type InputToggleProps = React$1.HTMLAttributes<HTMLInputElement> & {
+type InputToggleProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
     /** sets the label value */
     label: string;
     /** sets the type of input to use, either radio or checkbox */
@@ -1006,6 +1007,18 @@ type UseShortcutOptions = {
 declare function macifyShortcut(shortcut: string | null): string | null;
 declare function useShortcut({ handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, }: UseShortcutOptions): void;
 
+type SkeletonProps = React__default.PropsWithChildren<React__default.HTMLAttributes<HTMLDivElement>> & {
+    width?: string;
+    height?: string;
+    inline?: boolean;
+    circle?: boolean;
+};
+/**
+ * A loading skeleton
+ * @example <Skeleton width="50%" height="32px" />
+ */
+declare const Skeleton: ({ width, height, inline, circle, children, ...otherProps }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     /** sets the label value */
     label: string;
@@ -1339,4 +1352,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, 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, 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, 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, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, 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, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, supports, useBreakpoint, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useShortcut };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, 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, 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, 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, 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, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, supports, useBreakpoint, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useShortcut };

package/dist/index.js

@@ -84,6 +84,7 @@ __export(src_exports, {
   ScrollableListItem: () => ScrollableListItem,
   ShortcutContext: () => ShortcutContext,
   ShortcutRevealer: () => ShortcutRevealer,
+  Skeleton: () => Skeleton,
   StatusBullet: () => StatusBullet,
   Switch: () => Switch,
   TabButton: () => TabButton,
@@ -106,6 +107,7 @@ __export(src_exports, {
   breakpoints: () => breakpoints,
   button: () => button,
   buttonGhost: () => buttonGhost,
+  buttonGhostDestructive: () => buttonGhostDestructive,
   buttonPrimary: () => buttonPrimary,
   buttonRippleEffect: () => buttonRippleEffect,
   buttonSecondary: () => buttonSecondary,
@@ -474,6 +476,14 @@ var buttonGhost = import_react3.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
 `;
+var buttonGhostDestructive = import_react3.css`
+  ${buttonGhost}
+  color: var(--brand-secondary-5);
+
+  &:hover {
+    border-color: var(--brand-secondary-5);
+  }
+`;
 var buttonTertiary = import_react3.css`
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -2057,6 +2067,7 @@ var Button = React5.forwardRef(
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
+      ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
       tertiary: buttonTertiary
     };
@@ -2927,7 +2938,7 @@ var drawerStyles = (bgColor = "var(--white)") => import_react34.css`
   flex-direction: column;
   position: absolute;
   inset: 0;
-  padding: var(--spacing-base);
+  padding-top: var(--spacing-sm);
   height: 100%;
 `;
 var drawerCloseButtonStyles = import_react34.css`
@@ -2936,19 +2947,22 @@ var drawerCloseButtonStyles = import_react34.css`
   border: none;
   display: block;
   padding: var(--spacing-xs);
+  margin-right: var(--spacing-sm);
 `;
 var drawerHeaderStyles = import_react34.css`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
+  padding-inline: var(--spacing-base);
 `;
 var drawerRendererStyles = (position) => import_react34.css`
   position: ${position};
   inset: 0;
   overflow: hidden;
-  z-index: var(--z-10);
+  z-index: 40;
 `;
 var drawerInnerStyles = import_react34.css`
   height: 100%;
+  padding: var(--spacing-base);
   overflow: auto;
   ${scrollbarStyles}
 `;
@@ -2981,8 +2995,7 @@ var drawerWrapperStyles = import_react34.css`
 var drawerWrapperOverlayStyles = import_react34.css`
   position: absolute;
   inset: 0;
-  background: rgba(100, 100, 100, 0.01);
-  backdrop-filter: blur(2px);
+  background: rgba(31, 43, 52, 0.4);
   animation: ${fadeIn} var(--duration-fast) ease-out;
 `;
 
@@ -3762,7 +3775,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { onClick: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { onClick: onClear, css: { pointerEvents: "all" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         "svg",
         {
           width: "26",
@@ -4887,12 +4900,51 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   ] });
 };
 
+// src/components/Skeleton/Skeleton.styles.ts
+var import_react63 = require("@emotion/react");
+var lightFadingOut = import_react63.keyframes`
+  from { opacity: 0.1; }
+  to { opacity: 0.025; }
+`;
+var skeletonStyles = import_react63.css`
+  animation: ${lightFadingOut} 1s ease-out infinite alternate;
+  background-color: var(--gray-900);
+`;
+
+// src/components/Skeleton/Skeleton.tsx
+var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
+var Skeleton = ({
+  width = "100%",
+  height = "1.25rem",
+  inline = false,
+  circle = false,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  "div",
+  {
+    css: [
+      skeletonStyles,
+      {
+        width: circle ? height : width,
+        height,
+        display: inline ? "inline-block" : "block",
+        borderRadius: circle ? "var(--rounded-full)" : "var(--rounded-md)"
+      }
+    ],
+    ...otherProps,
+    "aria-busy": "true",
+    "aria-label": "Loading...",
+    children
+  }
+);
+
 // src/components/Switch/Switch.tsx
 var React14 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
-var import_react63 = require("@emotion/react");
-var SwitchInputContainer = import_react63.css`
+var import_react64 = require("@emotion/react");
+var SwitchInputContainer = import_react64.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -4901,7 +4953,7 @@ var SwitchInputContainer = import_react63.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react63.css`
+var SwitchInput = import_react64.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -4939,7 +4991,7 @@ var SwitchInput = import_react63.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react63.css`
+var SwitchInputDisabled = import_react64.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -4947,7 +4999,7 @@ var SwitchInputDisabled = import_react63.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react63.css`
+var SwitchInputLabel = import_react64.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -4969,26 +5021,26 @@ var SwitchInputLabel = import_react63.css`
     top: 0;
   }
 `;
-var SwitchText = import_react63.css`
+var SwitchText = import_react64.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
 var Switch = React14.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -4998,74 +5050,74 @@ var Switch = React14.forwardRef(
 var React15 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
-var import_react64 = require("@emotion/react");
-var table = import_react64.css`
+var import_react65 = require("@emotion/react");
+var table = import_react65.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = import_react64.css`
+var tableHead = import_react65.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react64.css`
+var tableRow = import_react65.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react64.css`
+var tableCellHead = import_react65.css`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = import_react64.css`
+var tableCellData = import_react65.css`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
 var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("table", { ref, css: table, ...otherProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("table", { ref, css: table, ...otherProps, children });
 });
 var TableHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react65 = require("@emotion/react");
-var tabButtonStyles = import_react65.css`
+var import_react66 = require("@emotion/react");
+var tabButtonStyles = import_react66.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -5082,16 +5134,16 @@ var tabButtonStyles = import_react65.css`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = import_react65.css`
+var tabButtonGroupStyles = import_react66.css`
   display: flex;
   gap: var(--spacing-base);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react66.createContext)(null);
+var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react67.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react66.useContext)(CurrentTabContext);
+  const context = (0, import_react67.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -5099,31 +5151,31 @@ var useCurrentTab = () => {
 };
 var Tabs = ({ children, onSelectedIdChange, ...props }) => {
   const tab = (0, import_Tab.useTabState)(props);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     var _a;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
   }, [tab.selectedId, onSelectedIdChange]);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     tab.setSelectedId(props.selectedId);
   }, [props.selectedId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react67 = require("@emotion/react");
-var StatusBulletContainer = import_react67.css`
+var import_react68 = require("@emotion/react");
+var StatusBulletContainer = import_react68.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -5143,18 +5195,18 @@ var StatusBulletContainer = import_react67.css`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = import_react67.css`
+var StatusDraft = import_react68.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react67.css`
+var StatusModified = import_react68.css`
   &:before {
     background: var(--brand-primary-1);
   }
 `;
-var StatusError = import_react67.css`
+var StatusError = import_react68.css`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -5170,19 +5222,19 @@ var StatusError = import_react67.css`
     rotate: -45deg;
   }
 `;
-var StatusPublished = import_react67.css`
+var StatusPublished = import_react68.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react67.css`
+var StatusOrphan = import_react68.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -5192,7 +5244,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -5262,6 +5314,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   ScrollableListItem,
   ShortcutContext,
   ShortcutRevealer,
+  Skeleton,
   StatusBullet,
   Switch,
   TabButton,
@@ -5284,6 +5337,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   breakpoints,
   button,
   buttonGhost,
+  buttonGhostDestructive,
   buttonPrimary,
   buttonRippleEffect,
   buttonSecondary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.6.0",
+  "version": "18.7.1-alpha.11+7cf93b7e6",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2e2b4d179180900386f8b3ceb30d4a854a7e22fd"
+  "gitHead": "7cf93b7e693ac5a98f87d00f0028c43be13733da"
 }