@uniformdev/design-system 20.7.1-alpha.26 → 20.7.1-alpha.32

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,
@@ -5097,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();
@@ -8256,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`
@@ -9559,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: () => {
@@ -9641,7 +9661,7 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current,
+        providerId,
         drawerTakeoverStackId,
         registerTakeoverStackId,
         unregisterTakeoverStackId
@@ -9697,7 +9717,7 @@ var DrawerInner = ({
   instanceKey,
   onRequestClose,
   leftAligned,
-  width,
+  width = "medium",
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
@@ -9850,9 +9870,13 @@ var DrawerRenderer = ({
     if (withoutFluidWidth) {
       return rendererWidth;
     }
-    const drawerWidths = [rendererWidth, ...drawersToRender.map(({ width: width2 }) => width2)].filter(
-      (v) => typeof v === "string"
-    );
+    const drawerWidths = [
+      rendererWidth,
+      ...drawersToRender.map(({ width: width2 }) => {
+        var _a2;
+        return width2 ? (_a2 = drawerWidth[width2]) != null ? _a2 : width2 : null;
+      })
+    ].filter((v) => typeof v === "string");
     return `max(${drawerWidths.join()})`;
   }, [drawersToRender, width, withoutFluidWidth]);
   if (drawersToRender.length === 0) {
@@ -9913,6 +9937,7 @@ var DrawerWrapper = ({
       {
         css: [drawerWrapperStyles, leftAligned ? drawerWrapperLeftAlignedStyles : null],
         style: { width: calculatedWidth, minWidth, maxWidth },
+        "data-testid": "drawer-wrapper",
         children
       }
     )
@@ -10103,7 +10128,7 @@ function Image({
       if (src === "") {
         setLoading(false);
       } else {
-        const url = String(src).startsWith("//") ? `${location.protocol}${src}` : String(src);
+        const url = String(src).startsWith("//") ? `https://${src}` : String(src);
         if (!isValidUrl(url, { allowRelative: true, isSecure: true })) {
           throw Error(errorText);
         }
@@ -10692,21 +10717,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'],
@@ -10722,28 +10754,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
@@ -10762,17 +10822,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");
@@ -10782,9 +10871,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
@@ -12511,24 +12610,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 })
     ] }) });
@@ -12755,7 +12853,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);
   }
 `;
@@ -17381,8 +17479,8 @@ var SegmentedControl = ({
           segmentedControlStyles,
           orientation === "vertical" ? segmentedControlVerticalStyles : void 0
         ],
-        ...props,
         "data-testid": "segmented-control",
+        ...props,
         children: options.map((option, index) => {
           var _a;
           if (!option) {
@@ -18118,14 +18216,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%;
@@ -18135,10 +18232,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 {
@@ -18150,49 +18248,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 });
   }
 );
 
@@ -18228,7 +18354,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) {
@@ -18259,23 +18385,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
@@ -18361,7 +18487,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,
@@ -18382,7 +18508,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",
@@ -18392,9 +18518,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 = {
@@ -18533,6 +18659,7 @@ var StatusBullet = ({
   ProgressList,
   ProgressListItem,
   ResolveIcon,
+  ResponsiveTableContainer,
   RichTextToolbarIcon,
   ScrollableList,
   ScrollableListInputItem,
@@ -18658,6 +18785,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.26+03c49728b3",
+  "version": "20.7.1-alpha.32+616e77445e",
   "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",
@@ -11,12 +23,12 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "clean": "rimraf dist",
-    "test": "jest",
-    "test:coverage": "jest --coverage",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
     "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,15 +38,17 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.7.1-alpha.26+03c49728b3",
-    "@uniformdev/richtext": "^20.7.1-alpha.26+03c49728b3",
-    "autoprefixer": "10.4.16",
+    "@uniformdev/canvas": "^20.7.1-alpha.32+616e77445e",
+    "@uniformdev/richtext": "^20.7.1-alpha.32+616e77445e",
+    "@vitest/coverage-v8": "^3.1.2",
+    "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",
-    "tsup": "8.3.0"
+    "tsup": "8.3.0",
+    "vitest": "^3.1.2"
   },
   "dependencies": {
     "@ariakit/react": "^0.4.15",
@@ -44,7 +58,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",
@@ -68,8 +82,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 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "03c49728b3fb82b57e64265bde2f950f12ee7cb6"
+  "gitHead": "616e77445e7f75fca783616a70b359a2fb7bdfab"
 }