@uniformdev/design-system 20.9.1-alpha.3 → 20.11.0

package/dist/esm/index.js

@@ -6484,7 +6484,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 +7640,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 +7751,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 +7770,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 +7852,7 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current,
+        providerId,
         drawerTakeoverStackId,
         registerTakeoverStackId,
         unregisterTakeoverStackId
@@ -7891,7 +7891,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 +7912,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 +8864,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 +8901,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 +8964,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 +9013,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 +9213,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 +9303,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 +10242,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 +10346,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,
@@ -10715,7 +10789,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 +10816,7 @@ var ObjectGridItemHeading2 = ({
   ...props
 }) => {
   const [hasTruncation, setHasTruncation] = useState12(false);
-  const headingRef = useRef9(null);
+  const headingRef = useRef8(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
@@ -10881,7 +10955,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 +12686,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 +13036,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 +13287,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 +13342,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 +13754,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 +13781,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 +15370,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 +15558,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 +15712,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 +16152,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");

package/dist/index.d.mts

@@ -3967,9 +3967,16 @@ type ParagraphProps = {
  */
 declare const Paragraph: ({ className, htmlContent, children, ...pAttributes }: ParagraphProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LinkOrientation = {
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
 type LinkTileProps = {
     children: ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & LinkOrientation;
 type LinkTileWithRefProps = {
     children: ReactNode;
     linkManagerComponent: LinkManagerWithRefType;
@@ -3977,7 +3984,7 @@ type LinkTileWithRefProps = {
     href: string;
     passHref: true;
     legacyBehavior?: boolean;
-} & React.RefAttributes<HTMLAnchorElement>;
+} & React.RefAttributes<HTMLAnchorElement> & LinkOrientation;
 declare const LinkTile: React$1.ForwardRefExoticComponent<(LinkTileProps | Omit<LinkTileWithRefProps, "ref">) & React$1.RefAttributes<HTMLAnchorElement>>;
 
 type ClassNameOptions = 'logo' | 'author';
@@ -3996,8 +4003,13 @@ type TileProps = {
     children: ReactNode;
     disabled?: boolean;
     isSelected?: boolean;
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & HtmlHTMLAttributes<HTMLButtonElement>;
-declare const Tile: ({ children, disabled, isSelected, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Tile: ({ children, disabled, isSelected, orientation, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the background colour of the outter container
@@ -4018,12 +4030,16 @@ type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     gap?: '0' | 'sm' | 'base' | 'md' | 'lg';
     /** sets react child elements */
     children: React$1.ReactNode;
+    /** sets whether to group the tiles in a container without a contour or not
+     * @default false
+     */
+    withoutGrouping?: boolean;
 };
 /**
  * Uniform Tile Container Component
  * @example <TileContainer><div>child content</div></TileContainer>
  */
-declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, withoutGrouping, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileTitleProps = {
     as?: 'heading' | 'description';

package/dist/index.d.ts

@@ -3967,9 +3967,16 @@ type ParagraphProps = {
  */
 declare const Paragraph: ({ className, htmlContent, children, ...pAttributes }: ParagraphProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LinkOrientation = {
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
 type LinkTileProps = {
     children: ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & LinkOrientation;
 type LinkTileWithRefProps = {
     children: ReactNode;
     linkManagerComponent: LinkManagerWithRefType;
@@ -3977,7 +3984,7 @@ type LinkTileWithRefProps = {
     href: string;
     passHref: true;
     legacyBehavior?: boolean;
-} & React.RefAttributes<HTMLAnchorElement>;
+} & React.RefAttributes<HTMLAnchorElement> & LinkOrientation;
 declare const LinkTile: React$1.ForwardRefExoticComponent<(LinkTileProps | Omit<LinkTileWithRefProps, "ref">) & React$1.RefAttributes<HTMLAnchorElement>>;
 
 type ClassNameOptions = 'logo' | 'author';
@@ -3996,8 +4003,13 @@ type TileProps = {
     children: ReactNode;
     disabled?: boolean;
     isSelected?: boolean;
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & HtmlHTMLAttributes<HTMLButtonElement>;
-declare const Tile: ({ children, disabled, isSelected, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Tile: ({ children, disabled, isSelected, orientation, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the background colour of the outter container
@@ -4018,12 +4030,16 @@ type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     gap?: '0' | 'sm' | 'base' | 'md' | 'lg';
     /** sets react child elements */
     children: React$1.ReactNode;
+    /** sets whether to group the tiles in a container without a contour or not
+     * @default false
+     */
+    withoutGrouping?: boolean;
 };
 /**
  * Uniform Tile Container Component
  * @example <TileContainer><div>child content</div></TileContainer>
  */
-declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, withoutGrouping, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileTitleProps = {
     as?: 'heading' | 'description';

package/dist/index.js

@@ -8256,7 +8256,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 +9559,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 +9641,7 @@ var DrawerProvider = ({ children }) => {
         drawersRegistry,
         registerDrawer,
         unregisterDrawer,
-        providerId: providerId.current,
+        providerId,
         drawerTakeoverStackId,
         registerTakeoverStackId,
         unregisterTakeoverStackId
@@ -10692,21 +10692,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 +10729,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 +10797,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 +10846,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
@@ -12755,7 +12829,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);
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.9.1-alpha.3+9f10f56702",
+  "version": "20.11.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -26,8 +26,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.9.1-alpha.3+9f10f56702",
-    "@uniformdev/richtext": "^20.9.1-alpha.3+9f10f56702",
+    "@uniformdev/canvas": "^20.11.0",
+    "@uniformdev/richtext": "^20.11.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.47",
@@ -68,8 +68,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 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9f10f5670229b812c73e7db447e82c2617687f3a"
+  "gitHead": "493d4a260f61ec89f043e67fa8948898ecb2f45e"
 }