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

package/dist/esm/index.js

@@ -3398,6 +3398,24 @@ var uniformStatusPublishedIcon = GenIcon2({
     }
   ]
 });
+var uniformUsageStatusIcon = GenIcon2({
+  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
 import { css as css17 } from "@emotion/react";
@@ -6484,7 +6502,7 @@ var ChipContainer = css45`
 `;
 var ChipText = css45`
   align-self: center;
-  line-height: 1;
+  line-height: 1.1;
   text-wrap: nowrap;
 `;
 var ChipIcon = css45`
@@ -7640,7 +7658,7 @@ var DragHandle = forwardRef15(
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React15, { createContext as createContext4, useContext as useContext4, useEffect as useEffect5, useRef as useRef5, useState as useState8 } from "react";
+import React15, { createContext as createContext4, useContext as useContext4, useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -7751,7 +7769,7 @@ var drawerWrapperOverlayStyles = css54`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useRef as useRef4, useState as useState7 } from "react";
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useId, useState as useState7 } from "react";
 import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
   providerId: "",
@@ -7770,7 +7788,7 @@ function renderDrawerId(drawer) {
 }
 var DrawerProvider = ({ children }) => {
   const [drawersRegistry, setDrawersRegistry] = useState7([]);
-  const providerId = useRef4(crypto.randomUUID());
+  const providerId = useId();
   const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState7(void 0);
   useShortcut({
     handler: () => {
@@ -7852,7 +7870,7 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current,
+        providerId,
         drawerTakeoverStackId,
         registerTakeoverStackId,
         unregisterTakeoverStackId
@@ -7891,7 +7909,7 @@ var Drawer = React15.forwardRef(
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    const resolvedStickyStackIdRef = useRef5((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    const resolvedStickyStackIdRef = useRef4((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
     return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx68(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs43(DrawerProvider, { children: [
       /* @__PURE__ */ jsx68(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx68(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
@@ -7912,7 +7930,7 @@ var DrawerInner = ({
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
-  const closeButtonRef = useRef5(null);
+  const closeButtonRef = useRef4(null);
   const [rendererElement, setRendererElement] = useState8(null);
   useEffect5(() => {
     registerDrawer({
@@ -8864,21 +8882,28 @@ import { forwardRef as forwardRef17 } from "react";
 // src/components/Tiles/styles/Tile.styles.ts
 import { css as css63 } from "@emotion/react";
 var tileBorderSize = "1px";
+var tileBorderRadius = "var(--rounded-2xl)";
+var tileBorderColor = "var(--gray-300)";
 var Tile = css63`
   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'],
@@ -8894,27 +8919,55 @@ var TileIsSelected = css63`
   border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
   z-index: 1; // Used to elevate active state border over other Tile borders
 `;
+var TileHorizontal = css63`
+  flex-direction: row;
+  justify-content: flex-start;
+`;
 
 // src/components/Tiles/LinkTile.tsx
 import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
 var LinkTile2 = forwardRef17(
-  ({ children, ...props }, ref) => {
+  ({ orientation = "vertical", children, ...props }, ref) => {
     if ("linkManagerComponent" in props) {
       const { linkManagerComponent: LinkManager, ...rest } = props;
-      return /* @__PURE__ */ jsx83(LinkManager, { css: [Tile, LinkTile], ref, ...rest, children });
+      return /* @__PURE__ */ jsx83(
+        LinkManager,
+        {
+          css: [
+            Tile,
+            LinkTile,
+            orientation === "horizontal" ? TileHorizontal : void 0
+          ],
+          ref,
+          ...rest,
+          children
+        }
+      );
     }
-    return /* @__PURE__ */ jsx83("a", { ref, css: [Tile, LinkTile], ...props, children });
+    return /* @__PURE__ */ jsx83(
+      "a",
+      {
+        ref,
+        css: [Tile, LinkTile, orientation === "horizontal" ? TileHorizontal : void 0],
+        ...props,
+        children
+      }
+    );
   }
 );
 
 // src/components/Tiles/Tile.tsx
 import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
-var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
+var Tile2 = ({ children, disabled: disabled2, isSelected, orientation = "vertical", ...props }) => {
   return /* @__PURE__ */ jsx84(
     "button",
     {
       type: "button",
-      css: [Tile, isSelected ? TileIsSelected : void 0],
+      css: [
+        Tile,
+        orientation === "horizontal" ? TileHorizontal : void 0,
+        isSelected ? TileIsSelected : void 0
+      ],
       disabled: disabled2,
       ...props,
       children
@@ -8929,17 +8982,46 @@ var TileContainerWrapper = (theme, padding) => css64`
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
 var TileContainerInner = (gap, templateColumns) => css64`
+  /* 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 = css64`
+  overflow: visible;
+
+  &::after {
+    display: none;
+  }
+`;
 
 // src/components/Tiles/TileContainer.tsx
 import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
@@ -8949,9 +9031,19 @@ var TileContainer = ({
   gap = "base",
   gridTemplateColumns = "repeat(auto-fill, minmax(13rem, 1fr))",
   children,
+  withoutGrouping = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx85("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx85("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx85("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx85(
+    "div",
+    {
+      css: [
+        TileContainerInner(gap, gridTemplateColumns),
+        withoutGrouping ? TileContainerInnerWithoutGrouping : void 0
+      ],
+      children
+    }
+  ) });
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
@@ -9139,15 +9231,15 @@ import {
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef6, useState as useState11 } from "react";
 
 // src/utils/useDebouncedCallback.ts
-import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef6 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef5 } from "react";
 function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
-  const timeout = useRef6();
-  const waitTimeout = useRef6();
-  const cb = useRef6(callback);
-  const lastCall = useRef6();
+  const timeout = useRef5();
+  const waitTimeout = useRef5();
+  const cb = useRef5(callback);
+  const lastCall = useRef5();
   const clear = () => {
     if (timeout.current) {
       clearTimeout(timeout.current);
@@ -9229,8 +9321,8 @@ var KeyValueInput = ({
   onFocusChange
 }) => {
   const [isDragging, setIsDragging] = useState11(false);
-  const popoverStoresMap = useRef7({});
-  const lastRowFirstInputRef = useRef7(null);
+  const popoverStoresMap = useRef6({});
+  const lastRowFirstInputRef = useRef6(null);
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -10168,7 +10260,7 @@ var LoadingIcon = ({ height, width, ...props }) => {
 // src/components/Modal/Modal.tsx
 import { PortalContext } from "@ariakit/react";
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
-import React17, { useEffect as useEffect12, useRef as useRef8 } from "react";
+import React17, { useEffect as useEffect12, useRef as useRef7 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css75 } from "@emotion/react";
@@ -10272,8 +10364,8 @@ var Modal = React17.forwardRef(
     disableBodyScroll = false,
     ...modalProps
   }, ref) => {
-    const mouseDownInsideModal = useRef8(false);
-    const dialogRef = useRef8(null);
+    const mouseDownInsideModal = useRef7(false);
+    const dialogRef = useRef7(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -10648,24 +10740,23 @@ var CoverSelectedChip = css78`
 import { Fragment as Fragment11, jsx as jsx101, jsxs as jsxs67 } from "@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__ */ jsx101("div", { css: CoverContainer, children: /* @__PURE__ */ jsx101(
       "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__ */ jsx101("div", { css: CoverContainer, children: /* @__PURE__ */ jsxs67("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...rest, children: [
+    const { icon, iconColor } = props;
+    return /* @__PURE__ */ jsx101("div", { css: CoverContainer, children: /* @__PURE__ */ jsxs67("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
       /* @__PURE__ */ jsx101(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
       /* @__PURE__ */ jsx101(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
     ] }) });
@@ -10715,7 +10806,7 @@ var ObjectGridItemCoverButton = ({
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { useEffect as useEffect13, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect13, useRef as useRef8, useState as useState12 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 import { css as css79 } from "@emotion/react";
@@ -10742,7 +10833,7 @@ var ObjectGridItemHeading2 = ({
   ...props
 }) => {
   const [hasTruncation, setHasTruncation] = useState12(false);
-  const headingRef = useRef9(null);
+  const headingRef = useRef8(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
@@ -10881,7 +10972,7 @@ var ObjectListItemRightSlot = css81`
   gap: var(--spacing-sm);
 `;
 var ObjectListItemContainer = css81`
-  > [role='listitem'] {
+  > [role='listitem']:not(:first-of-type) {
     border-top: 1px solid var(--gray-200);
   }
 `;
@@ -12612,7 +12703,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef10, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef9, useState as useState15 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -12962,7 +13053,7 @@ function LinkNodePlugin({
   };
   const [editor] = useLexicalComposerContext3();
   const [linkPopoverState, setLinkPopoverState] = useState15();
-  const linkPopoverElRef = useRef10(null);
+  const linkPopoverElRef = useRef9(null);
   const [isEditorFocused, setIsEditorFocused] = useState15(false);
   const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState15(false);
   useEffect16(() => {
@@ -13213,7 +13304,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useEffect as useEffect17, useRef as useRef11 } from "react";
+import { useEffect as useEffect17, useRef as useRef10 } from "react";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -13268,7 +13359,7 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext4();
-  const isInListItemNode = useRef11(false);
+  const isInListItemNode = useRef10(false);
   useEffect17(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -13680,7 +13771,7 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo6, useRef as useRef12, useState as useState17 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment16, jsx as jsx125, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
@@ -13707,10 +13798,10 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = useRef12(null);
-  const resizerRef = useRef12(null);
-  const tableRectRef = useRef12(null);
-  const mouseStartPosRef = useRef12(null);
+  const targetRef = useRef11(null);
+  const resizerRef = useRef11(null);
+  const tableRectRef = useRef11(null);
+  const mouseStartPosRef = useRef11(null);
   const [mouseCurrentPos, updateMouseCurrentPos] = useState17(null);
   const [activeCell, updateActiveCell] = useState17(null);
   const [isMouseDown, updateIsMouseDown] = useState17(false);
@@ -15296,7 +15387,7 @@ var ProgressListItem = ({
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css101 } from "@emotion/react";
 import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef13, useState as useState21 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef12, useState as useState21 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css100 } from "@emotion/react";
@@ -15484,7 +15575,7 @@ var SegmentedControl = ({
   currentBackgroundColor = "white",
   ...props
 }) => {
-  const wrapperRef = useRef13(null);
+  const wrapperRef = useRef12(null);
   const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState21(false);
   const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState21(false);
   const onOptionChange = useCallback12(
@@ -15638,7 +15729,7 @@ var Skeleton = ({
 );
 
 // src/components/Spinner/Spinner.tsx
-import { useEffect as useEffect25, useRef as useRef14 } from "react";
+import { useEffect as useEffect25, useRef as useRef13 } from "react";
 
 // src/components/Spinner/Spinner.styles.ts
 import { css as css103 } from "@emotion/react";
@@ -16078,7 +16169,7 @@ var Spinner = ({
   label,
   isPaused
 }) => {
-  const ref = useRef14(null);
+  const ref = useRef13(null);
   useEffect25(() => {
     var _a, _b, _c;
     (_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
@@ -16262,12 +16353,9 @@ var Switch = forwardRef29(
   }
 );
 
-// src/components/Table/Table.tsx
-import * as React21 from "react";
-
 // src/components/Table/Table.styles.ts
 import { css as css105 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css105`
+var table = ({ cellPadding = "var(--spacing-sm)" }) => css105`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -16277,10 +16365,11 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css105`
   th,
   td {
     padding: ${cellPadding};
+    vertical-align: top;
   }
 
   thead tr {
-    border-color: var(--gray-300);
+    border-color: var(--gray-200);
   }
 
   tbody tr:hover {
@@ -16292,49 +16381,76 @@ var tableHead = css105`
   text-align: left;
 `;
 var tableRow = css105`
-  border-bottom: 1px solid var(--gray-100);
+  border-bottom: 1px solid var(--gray-200);
+  vertical-align: top;
+  font-size: var(--fs-sm);
 `;
 var tableCellHead = css105`
   font-size: var(--fs-sm);
-  text-transform: uppercase;
-  font-weight: var(--fw-bold);
+  font-weight: var(--fw-regular);
+  line-height: 1.2;
+  }
 `;
+var responsiveTableContainer = css105`
+  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
 import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
+var ResponsiveTableContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx138("div", { css: responsiveTableContainer, children });
+};
+
+// src/components/Table/Table.tsx
+import * as React21 from "react";
+import { jsx as jsx139 } from "@emotion/react/jsx-runtime";
 var Table = React21.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx138("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx139("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx138("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx138("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx138("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx138("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx138("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx138("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx139("td", { ref, ...otherProps, children });
   }
 );
 
@@ -16374,7 +16490,7 @@ var tabButtonGroupStyles = css106`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx139 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -16405,23 +16521,23 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  return /* @__PURE__ */ jsx139(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
+  return /* @__PURE__ */ jsx140(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx139(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx140(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx139(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx140(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx139(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx140(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
@@ -16503,7 +16619,7 @@ var StatusDeleted = css107`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -16524,7 +16640,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  const StatusComponent = () => /* @__PURE__ */ jsx140(
+  const StatusComponent = () => /* @__PURE__ */ jsx141(
     "span",
     {
       role: "status",
@@ -16534,9 +16650,9 @@ var StatusBullet = ({
     }
   );
   if (compact) {
-    return /* @__PURE__ */ jsx140(StatusComponent, {});
+    return /* @__PURE__ */ jsx141(StatusComponent, {});
   }
-  return /* @__PURE__ */ jsx140(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx140("div", { children: /* @__PURE__ */ jsx140(StatusComponent, {}) }) });
+  return /* @__PURE__ */ jsx141(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx141("div", { children: /* @__PURE__ */ jsx141(StatusComponent, {}) }) });
 };
 export {
   AddButton,
@@ -16674,6 +16790,7 @@ export {
   ProgressList,
   ProgressListItem,
   ResolveIcon,
+  ResponsiveTableContainer,
   RichTextToolbarIcon,
   ScrollableList,
   ScrollableListInputItem,
@@ -16799,6 +16916,7 @@ export {
   uniformStatusDraftIcon,
   uniformStatusModifiedIcon,
   uniformStatusPublishedIcon,
+  uniformUsageStatusIcon,
   useBreakpoint,
   useButtonStyles,
   useCloseCurrentDrawer,