@uniformdev/design-system 20.7.1-alpha.23 → 20.7.1-alpha.28

package/dist/index.js

@@ -1495,6 +1495,7 @@ __export(src_exports, {
   ProgressList: () => ProgressList,
   ProgressListItem: () => ProgressListItem,
   ResolveIcon: () => ResolveIcon,
+  ResponsiveTableContainer: () => ResponsiveTableContainer,
   RichTextToolbarIcon: () => RichTextToolbarIcon,
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
@@ -1620,6 +1621,7 @@ __export(src_exports, {
   uniformStatusDraftIcon: () => uniformStatusDraftIcon,
   uniformStatusModifiedIcon: () => uniformStatusModifiedIcon,
   uniformStatusPublishedIcon: () => uniformStatusPublishedIcon,
+  uniformUsageStatusIcon: () => uniformUsageStatusIcon,
   useBreakpoint: () => useBreakpoint,
   useButtonStyles: () => useButtonStyles,
   useCloseCurrentDrawer: () => useCloseCurrentDrawer,
@@ -3253,6 +3255,9 @@ function useShortcut({
   const handle = (0, import_react14.useCallback)(
     (e) => {
       if (disabled2) {
+        if (disabled2 === "silent") {
+          return;
+        }
         import_react_toastify.toast.info(`Shortcut ${getFormattedShortcut(shortcut).join("")} is currently disabled`);
         return;
       }
@@ -5094,6 +5099,24 @@ var uniformStatusPublishedIcon = (0, import_all_files2.GenIcon)({
     }
   ]
 });
+var uniformUsageStatusIcon = (0, import_all_files2.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 12 12",
+    fill: "none"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M9.37501 7.12499C9.04355 7.12482 8.72146 7.23498 8.45954 7.43812L7.37626 6.59437C7.45804 6.40689 7.50017 6.20453 7.50001 5.99999C7.50001 5.96531 7.50001 5.93062 7.49626 5.8964L8.11641 5.68968C8.31261 5.99228 8.61126 6.21406 8.95766 6.3144C9.30406 6.41474 9.67501 6.38692 10.0026 6.23604C10.3301 6.08516 10.5924 5.82131 10.7412 5.49284C10.8901 5.16436 10.9157 4.79324 10.8132 4.44747C10.7107 4.10169 10.4871 3.8044 10.1833 3.61006C9.87954 3.41572 9.5159 3.33733 9.15902 3.38926C8.80214 3.44119 8.47592 3.61996 8.2401 3.89281C8.00429 4.16567 7.87468 4.51436 7.87501 4.87499C7.87501 4.90968 7.87501 4.94437 7.87876 4.97859L7.2586 5.18531C7.12265 4.97514 6.93627 4.80233 6.71644 4.68263C6.49661 4.56293 6.25031 4.50014 6.00001 4.49999C5.91724 4.50017 5.83462 4.50706 5.75297 4.52062L5.43235 3.79687C5.7092 3.57566 5.8988 3.26358 5.96753 2.91594C6.03626 2.5683 5.9797 2.20755 5.80786 1.89763C5.63602 1.58771 5.36 1.34863 5.02873 1.22278C4.69746 1.09693 4.33233 1.09243 3.99805 1.21007C3.66378 1.32771 3.38195 1.5599 3.20251 1.86549C3.02308 2.17108 2.95763 2.53032 3.01777 2.87956C3.07791 3.22879 3.25975 3.54545 3.53106 3.77342C3.80237 4.00139 4.14563 4.12594 4.50001 4.12499C4.58277 4.12482 4.66539 4.11792 4.74704 4.10437L5.06766 4.82624C4.79577 5.04144 4.60706 5.34439 4.53378 5.68331C4.46051 6.02223 4.50722 6.37608 4.66594 6.68437L3.46079 7.75499C3.1575 7.55053 2.79005 7.4637 2.42732 7.51078C2.06459 7.55785 1.73148 7.7356 1.49043 8.01071C1.24938 8.28581 1.11693 8.63939 1.11793 9.00516C1.11892 9.37093 1.25327 9.72379 1.49581 9.99758C1.73835 10.2714 2.07242 10.4473 2.4354 10.4924C2.79838 10.5375 3.16535 10.4487 3.46753 10.2426C3.7697 10.0365 3.98634 9.72728 4.07683 9.37288C4.16732 9.01847 4.12545 8.64323 3.95907 8.31749L5.16422 7.24687C5.42516 7.42256 5.73485 7.51152 6.04925 7.50108C6.36365 7.49064 6.66676 7.38135 6.91547 7.18874L7.99876 8.03249C7.91723 8.21939 7.8751 8.42109 7.87501 8.62499C7.87501 8.92167 7.96298 9.21168 8.1278 9.45835C8.29262 9.70502 8.52689 9.89728 8.80098 10.0108C9.07507 10.1243 9.37667 10.154 9.66764 10.0962C9.95861 10.0383 10.2259 9.89543 10.4357 9.68565C10.6454 9.47588 10.7883 9.2086 10.8462 8.91763C10.9041 8.62666 10.8744 8.32506 10.7608 8.05097C10.6473 7.77688 10.455 7.54261 10.2084 7.37779C9.96169 7.21297 9.67168 7.12499 9.37501 7.12499ZM9.37501 4.12499C9.52334 4.12499 9.66835 4.16898 9.79168 4.25139C9.91502 4.3338 10.0112 4.45094 10.0679 4.58798C10.1247 4.72503 10.1395 4.87583 10.1106 5.02131C10.0817 5.1668 10.0102 5.30044 9.90534 5.40532C9.80045 5.51021 9.66681 5.58164 9.52132 5.61058C9.37584 5.63952 9.22504 5.62467 9.08799 5.5679C8.95095 5.51114 8.83382 5.41501 8.7514 5.29167C8.66899 5.16833 8.62501 5.02333 8.62501 4.87499C8.62501 4.67608 8.70402 4.48532 8.84468 4.34466C8.98533 4.20401 9.17609 4.12499 9.37501 4.12499ZM3.75001 2.62499C3.75001 2.47666 3.79399 2.33165 3.8764 2.20832C3.95881 2.08498 4.07595 1.98885 4.21299 1.93208C4.35004 1.87532 4.50084 1.86047 4.64632 1.88941C4.79181 1.91834 4.92545 1.98978 5.03034 2.09466C5.13522 2.19955 5.20666 2.33319 5.23559 2.47868C5.26453 2.62416 5.24968 2.77496 5.19292 2.91201C5.13615 3.04905 5.04002 3.16619 4.91668 3.2486C4.79335 3.33101 4.64834 3.37499 4.50001 3.37499C4.30109 3.37499 4.11033 3.29598 3.96968 3.15532C3.82902 3.01467 3.75001 2.82391 3.75001 2.62499ZM2.62501 9.74999C2.47667 9.74999 2.33167 9.70601 2.20833 9.6236C2.08499 9.54119 1.98886 9.42405 1.9321 9.28701C1.87533 9.14996 1.86048 8.99916 1.88942 8.85368C1.91836 8.70819 1.98979 8.57455 2.09468 8.46966C2.19957 8.36478 2.3332 8.29334 2.47869 8.26441C2.62417 8.23547 2.77497 8.25032 2.91202 8.30708C3.04906 8.36385 3.1662 8.45998 3.24861 8.58332C3.33102 8.70665 3.37501 8.85166 3.37501 8.99999C3.37501 9.19891 3.29599 9.38967 3.15534 9.53032C3.01468 9.67098 2.82392 9.74999 2.62501 9.74999ZM9.37501 9.37499C9.22667 9.37499 9.08167 9.33101 8.95833 9.2486C8.83499 9.16619 8.73886 9.04905 8.6821 8.91201C8.62533 8.77496 8.61048 8.62416 8.63942 8.47868C8.66836 8.33319 8.73979 8.19955 8.84468 8.09466C8.94957 7.98978 9.0832 7.91834 9.22869 7.88941C9.37417 7.86047 9.52497 7.87532 9.66202 7.93208C9.79906 7.98885 9.9162 8.08498 9.99861 8.20832C10.081 8.33165 10.125 8.47666 10.125 8.62499C10.125 8.82391 10.046 9.01467 9.90534 9.15532C9.76468 9.29598 9.57392 9.37499 9.37501 9.37499Z"
+      },
+      child: []
+    }
+  ]
+});
 
 // src/components/AddListButton/AddListButton.styles.ts
 init_emotion_jsx_shim();
@@ -8253,7 +8276,7 @@ var ChipContainer = import_react67.css`
 `;
 var ChipText = import_react67.css`
   align-self: center;
-  line-height: 1;
+  line-height: 1.1;
   text-wrap: nowrap;
 `;
 var ChipIcon = import_react67.css`
@@ -9556,7 +9579,7 @@ function renderDrawerId(drawer) {
 }
 var DrawerProvider = ({ children }) => {
   const [drawersRegistry, setDrawersRegistry] = (0, import_react81.useState)([]);
-  const providerId = (0, import_react81.useRef)(crypto.randomUUID());
+  const providerId = (0, import_react81.useId)();
   const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react81.useState)(void 0);
   useShortcut({
     handler: () => {
@@ -9638,7 +9661,7 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current,
+        providerId,
         drawerTakeoverStackId,
         registerTakeoverStackId,
         unregisterTakeoverStackId
@@ -10689,21 +10712,28 @@ var import_react97 = require("react");
 init_emotion_jsx_shim();
 var import_react96 = require("@emotion/react");
 var tileBorderSize = "1px";
+var tileBorderRadius = "var(--rounded-2xl)";
+var tileBorderColor = "var(--gray-300)";
 var Tile = import_react96.css`
   background: var(--white);
   cursor: pointer;
-  border: ${tileBorderSize} solid var(--gray-300);
-  display: grid;
+  border: ${tileBorderSize} solid var(--tile-border-color, ${tileBorderColor});
+  display: flex;
+  flex-direction: column;
   padding: var(--spacing-base);
-  place-items: center;
-  place-content: center;
+  align-items: center;
+  justify-content: center;
   gap: var(--spacing-sm);
-  transition: background-color var(--duration-fast) var(--timing-ease-out);
-  min-height: 128px;
+  border-radius: var(--tile-border-radius, ${tileBorderRadius});
+  transition:
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out);
 
   &:hover,
   &:focus {
     background: var(--gray-50);
+    border-color: var(--tile-border-color-hover, var(--accent-dark));
+    z-index: 1;
   }
 
   &[aria-disabled='true'],
@@ -10719,28 +10749,56 @@ var TileIsSelected = import_react96.css`
   border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
   z-index: 1; // Used to elevate active state border over other Tile borders
 `;
+var TileHorizontal = import_react96.css`
+  flex-direction: row;
+  justify-content: flex-start;
+`;
 
 // src/components/Tiles/LinkTile.tsx
 var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
 var LinkTile2 = (0, import_react97.forwardRef)(
-  ({ children, ...props }, ref) => {
+  ({ orientation = "vertical", children, ...props }, ref) => {
     if ("linkManagerComponent" in props) {
       const { linkManagerComponent: LinkManager, ...rest } = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(LinkManager, { css: [Tile, LinkTile], ref, ...rest, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        LinkManager,
+        {
+          css: [
+            Tile,
+            LinkTile,
+            orientation === "horizontal" ? TileHorizontal : void 0
+          ],
+          ref,
+          ...rest,
+          children
+        }
+      );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("a", { ref, css: [Tile, LinkTile], ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      "a",
+      {
+        ref,
+        css: [Tile, LinkTile, orientation === "horizontal" ? TileHorizontal : void 0],
+        ...props,
+        children
+      }
+    );
   }
 );
 
 // src/components/Tiles/Tile.tsx
 init_emotion_jsx_shim();
 var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
-var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
+var Tile2 = ({ children, disabled: disabled2, isSelected, orientation = "vertical", ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "button",
     {
       type: "button",
-      css: [Tile, isSelected ? TileIsSelected : void 0],
+      css: [
+        Tile,
+        orientation === "horizontal" ? TileHorizontal : void 0,
+        isSelected ? TileIsSelected : void 0
+      ],
       disabled: disabled2,
       ...props,
       children
@@ -10759,17 +10817,46 @@ var TileContainerWrapper = (theme, padding) => import_react98.css`
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
 var TileContainerInner = (gap, templateColumns) => import_react98.css`
+  /* We remove the border radius from the tiles when used inside TileContainer */
+  --tile-border-radius: 0;
+  --tile-border-color: ${tileBorderColor};
+  /* We don't want the tiles to change border color on hover, because of the border radius we have on the container-level */
+  --tile-border-color-hover: ${tileBorderColor};
+
+  position: relative;
   display: grid;
   grid-template-columns: ${templateColumns};
+  grid-auto-rows: 1fr;
   gap: var(--spacing-${gap});
+  background-color: var(--gray-5);
   margin-top: ${tileBorderSize};
   margin-left: ${tileBorderSize};
+  border-radius: ${tileBorderRadius};
+  overflow: hidden;
+
+  /* This is used to create a border around the tiles */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: ${tileBorderRadius};
+    border: ${tileBorderSize} solid var(--tile-border-color);
+    pointer-events: none;
+    z-index: 1;
+  }
 
   > * {
     margin-top: -${tileBorderSize};
     margin-left: -${tileBorderSize};
   }
 `;
+var TileContainerInnerWithoutGrouping = import_react98.css`
+  overflow: visible;
+
+  &::after {
+    display: none;
+  }
+`;
 
 // src/components/Tiles/TileContainer.tsx
 var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
@@ -10779,9 +10866,19 @@ var TileContainer = ({
   gap = "base",
   gridTemplateColumns = "repeat(auto-fill, minmax(13rem, 1fr))",
   children,
+  withoutGrouping = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    "div",
+    {
+      css: [
+        TileContainerInner(gap, gridTemplateColumns),
+        withoutGrouping ? TileContainerInnerWithoutGrouping : void 0
+      ],
+      children
+    }
+  ) });
 };
 
 // src/components/Tiles/TileText.tsx
@@ -12508,24 +12605,23 @@ var CoverSelectedChip = import_react119.css`
 var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
-    const { imageUrl, srcSet, ...otherProps } = props;
+    const { imageUrl, srcSet, alt } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       "img",
       {
         src: imageUrl,
         srcSet,
-        alt: props.alt,
         css: CoverImage,
         loading: "lazy",
         role: "presentation",
         "data-testid": "object-grid-item-thumbnail",
-        ...otherProps
+        alt
       }
     ) });
   }
   if ("icon" in props && props.icon) {
-    const { icon, iconColor, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...rest, children: [
+    const { icon, iconColor } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
     ] }) });
@@ -12752,7 +12848,7 @@ var ObjectListItemRightSlot = import_react123.css`
   gap: var(--spacing-sm);
 `;
 var ObjectListItemContainer = import_react123.css`
-  > [role='listitem'] {
+  > [role='listitem']:not(:first-of-type) {
     border-top: 1px solid var(--gray-200);
   }
 `;
@@ -12860,13 +12956,21 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
             css: [
               ObjectListItemContentWrapper,
               `${cq(minContainerQueryWidth)} {
-            grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+            grid-template-columns: ${cover ? "minmax(0, auto)" : ""} minmax(0, 1fr) minmax(0, auto);
           }`
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
+              cover ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(VerticalRhythm, { gap: "0", justify: renderAs === "multi" ? "flex-start" : "center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                  HorizontalRhythm,
+                  {
+                    gap: "xs",
+                    align: renderAs === "multi" ? "flex-start" : "center",
+                    "data-testid": "title",
+                    children: header2
+                  }
+                ),
                 renderAs === "multi" ? props.children : null
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
@@ -17379,6 +17483,7 @@ var SegmentedControl = ({
           }
           const text = option.label ? option.label : option.icon ? null : String(option.value);
           const isDisabled = disabled2 || option.disabled;
+          const isChecked = option.value === value;
           return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
             "div",
             {
@@ -17388,7 +17493,7 @@ var SegmentedControl = ({
                 "label",
                 {
                   css: [
-                    segmentedControlLabelStyles(option.value === value, isDisabled),
+                    segmentedControlLabelStyles(isChecked, isDisabled),
                     sizeStyles,
                     isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                   ],
@@ -17400,7 +17505,7 @@ var SegmentedControl = ({
                         type: "radio",
                         name,
                         value: index,
-                        checked: option.value === value,
+                        checked: isChecked,
                         onChange: onOptionChange,
                         disabled: isDisabled
                       }
@@ -18106,14 +18211,13 @@ var Switch = (0, import_react171.forwardRef)(
   }
 );
 
-// src/components/Table/Table.tsx
+// src/components/Table/ResponsiveTableContainer.tsx
 init_emotion_jsx_shim();
-var React21 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
 var import_react172 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react172.css`
+var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react172.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -18123,10 +18227,11 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
   th,
   td {
     padding: ${cellPadding};
+    vertical-align: top;
   }
 
   thead tr {
-    border-color: var(--gray-300);
+    border-color: var(--gray-200);
   }
 
   tbody tr:hover {
@@ -18138,49 +18243,77 @@ var tableHead = import_react172.css`
   text-align: left;
 `;
 var tableRow = import_react172.css`
-  border-bottom: 1px solid var(--gray-100);
+  border-bottom: 1px solid var(--gray-200);
+  vertical-align: top;
+  font-size: var(--fs-sm);
 `;
 var tableCellHead = import_react172.css`
   font-size: var(--fs-sm);
-  text-transform: uppercase;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-regular);
+  line-height: 1.2;
+  }
 `;
+var responsiveTableContainer = import_react172.css`
+  max-width: calc(100vw - var(--spacing-md) * 2);
+  overflow-x: auto;
+  ${scrollbarStyles}
 
-// src/components/Table/Table.tsx
+  > table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    ${scrollbarStyles}
+
+    ${mq("lg")} {
+      display: table;
+      white-space: initial;
+    }
+  }
+`;
+
+// src/components/Table/ResponsiveTableContainer.tsx
 var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
+var ResponsiveTableContainer = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { css: responsiveTableContainer, children });
+};
+
+// src/components/Table/Table.tsx
+init_emotion_jsx_shim();
+var React21 = __toESM(require("react"));
+var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
 var Table = React21.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("td", { ref, ...otherProps, children });
   }
 );
 
@@ -18216,7 +18349,7 @@ var tabButtonGroupStyles = import_react173.css`
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
   const context = (0, import_react174.useTabStore)();
   if (!context) {
@@ -18247,23 +18380,23 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react174.TabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react174.TabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react174.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react174.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react174.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react174.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react174.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react174.TabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -18349,7 +18482,7 @@ var StatusDeleted = import_react176.css`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({
   status,
   hideText = false,
@@ -18370,7 +18503,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "span",
     {
       role: "status",
@@ -18380,9 +18513,9 @@ var StatusBullet = ({
     }
   );
   if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(StatusComponent, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(StatusComponent, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(StatusComponent, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(StatusComponent, {}) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -18521,6 +18654,7 @@ var StatusBullet = ({
   ProgressList,
   ProgressListItem,
   ResolveIcon,
+  ResponsiveTableContainer,
   RichTextToolbarIcon,
   ScrollableList,
   ScrollableListInputItem,
@@ -18646,6 +18780,7 @@ var StatusBullet = ({
   uniformStatusDraftIcon,
   uniformStatusModifiedIcon,
   uniformStatusPublishedIcon,
+  uniformUsageStatusIcon,
   useBreakpoint,
   useButtonStyles,
   useCloseCurrentDrawer,

package/package.json

@@ -1,8 +1,20 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.7.1-alpha.23+37257141fc",
+  "version": "20.7.1-alpha.28+5b9868df5c",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
@@ -16,7 +28,7 @@
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
     "format": "prettier --write \"src/**/*.{js,ts,tsx}\"",
     "create:component": "hygen component with-prompt",
-    "document": "api-extractor run --local"
+    "document:prebuild": "api-extractor run --local"
   },
   "devDependencies": {
     "@emotion/jest": "11.13.0",
@@ -26,11 +38,11 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.7.1-alpha.23+37257141fc",
-    "@uniformdev/richtext": "^20.7.1-alpha.23+37257141fc",
-    "autoprefixer": "10.4.16",
+    "@uniformdev/canvas": "^20.7.1-alpha.28+5b9868df5c",
+    "@uniformdev/richtext": "^20.7.1-alpha.28+5b9868df5c",
+    "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
-    "postcss": "8.4.47",
+    "postcss": "8.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-select-event": "^5.5.1",
@@ -44,7 +56,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/css": "11.13.5",
     "@emotion/react": "11.13.5",
-    "@internationalized/date": "^3.5.2",
+    "@internationalized/date": "^3.7.0",
     "@lexical/code": "0.25.0",
     "@lexical/link": "0.25.0",
     "@lexical/list": "0.25.0",
@@ -55,7 +67,7 @@
     "@lexical/table": "0.25.0",
     "@lexical/utils": "0.25.0",
     "@monaco-editor/react": "4.6.0",
-    "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.2.1/react-icons-all-files-5.2.1.tgz",
+    "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.5.0/react-icons-all-files-5.5.0.tgz",
     "fast-equals": "^5.0.1",
     "lexical": "0.25.0",
     "monaco-editor": "0.50.0",
@@ -68,8 +80,8 @@
     "zod-to-json-schema": "3.21.4"
   },
   "peerDependencies": {
-    "react": ">=17 || 17 || 18",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "files": [
     "/dist"
@@ -77,5 +89,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "37257141fcca7a9e77b96fad775141380e9dffb0"
+  "gitHead": "5b9868df5c62413be37a4f1e59c11f05d52ac169"
 }