@crystallize/design-system 1.11.3 → 1.11.5

package/dist/index.mjs

@@ -191,8 +191,11 @@ function Card({ children, className, variant, ...delegated }) {
 // src/card/index.ts
 var cardToken = "c-card";
 
+// src/action-menu/action-menu.tsx
+import { cva as cva3 } from "class-variance-authority";
+
 // src/dropdown-menu/index.ts
-import { Portal, Separator } from "@radix-ui/react-dropdown-menu";
+import { Portal as Portal2, Separator } from "@radix-ui/react-dropdown-menu";
 
 // src/dropdown-menu/dropdown-menu-item.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -222,9 +225,10 @@ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function DropdownMenuRoot({
   children,
   content,
-  alignContent = "start",
+  alignContent = "center",
   disabled,
   onOpenChange,
+  container,
   ...delegated
 }) {
   return /* @__PURE__ */ jsxs3(DropdownMenuPrimitive3.Root, {
@@ -235,12 +239,15 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
-        align: alignContent,
-        sideOffset: 5,
-        className: "c-dropdown-menu-content",
-        ...delegated,
-        children: content
+      /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Portal, {
+        container,
+        children: /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
+          align: alignContent,
+          sideOffset: 5,
+          className: "c-dropdown-menu-content",
+          ...delegated,
+          children: content
+        })
       })
     ]
   });
@@ -252,7 +259,7 @@ var DropdownMenu = {
   Item: DropdownMenuItem,
   Label: DropdownMenuLabel,
   Separator,
-  Portal
+  Portal: Portal2
 };
 
 // src/action-menu/action-item.tsx
@@ -278,15 +285,28 @@ function Separator2({ className }) {
 
 // src/action-menu/action-menu.tsx
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-function ActionMenu({ children, tabIndex }) {
+var buttonStyles2 = cva3("c-action-menu", {
+  variants: {
+    size: {
+      xs: "c-action-menu-xs",
+      sm: "c-action-menu-sm"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+function ActionMenu({ children, container, tabIndex, size }) {
   return /* @__PURE__ */ jsx9(DropdownMenu.Root, {
     content: children,
     alignContent: "center",
+    container,
     children: /* @__PURE__ */ jsxs4("button", {
+      "aria-label": "more options",
+      className: buttonStyles2({ size }),
+      "data-testid": "action-menu-button",
       tabIndex,
       type: "button",
-      className: "c-action-menu",
-      "aria-label": "more options",
       children: [
         /* @__PURE__ */ jsx9("span", {
           className: "sr-only",
@@ -310,7 +330,7 @@ ActionMenu.Separator = Separator2;
 
 // src/avatar/avatar.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { cva as cva3 } from "class-variance-authority";
+import { cva as cva4 } from "class-variance-authority";
 
 // src/avatar/get-initials.ts
 var getInitials = (name) => {
@@ -321,7 +341,7 @@ var getInitials = (name) => {
 
 // src/avatar/avatar.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var avatarClassName = cva3(["c-avatar"], {
+var avatarClassName = cva4(["c-avatar"], {
   variants: {
     size: {
       md: "c-avatar-md",
@@ -383,7 +403,7 @@ var destroyFns = [];
 
 // src/dialog/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cva as cva4, cx as cx5 } from "class-variance-authority";
+import { cva as cva5, cx as cx5 } from "class-variance-authority";
 
 // src/iconography/add.tsx
 import { forwardRef as forwardRef5 } from "react";
@@ -2912,7 +2932,7 @@ var IconMap = {
   info: Icon.Info,
   warning: Icon.Warning
 };
-var dialogContentStyles = cva4("c-dialog", {
+var dialogContentStyles = cva5("c-dialog", {
   variants: {
     withIcon: {
       true: "c-dialog-with-icon"
@@ -3203,9 +3223,9 @@ function destroyAll() {
 
 // src/icon-button/icon-button.tsx
 import { forwardRef as forwardRef54 } from "react";
-import { cva as cva5 } from "class-variance-authority";
+import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx64 } from "react/jsx-runtime";
-var buttonStyles2 = cva5(["c-icon-button"], {
+var buttonStyles3 = cva6(["c-icon-button"], {
   variants: {
     variant: {
       default: "",
@@ -3229,7 +3249,7 @@ var IconButton = forwardRef54(
     return /* @__PURE__ */ jsx64("button", {
       ref,
       type,
-      className: buttonStyles2({ size, variant, className }),
+      className: buttonStyles3({ size, variant, className }),
       ...delegated,
       children
     });
@@ -3239,9 +3259,9 @@ IconButton.displayName = "Button";
 
 // src/inline-radio/inline-radio.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { cx as cx6, cva as cva6 } from "class-variance-authority";
+import { cx as cx6, cva as cva7 } from "class-variance-authority";
 import { jsx as jsx65 } from "react/jsx-runtime";
-var inlineRadioGroupStyles = cva6("c-inline-radio-group", {
+var inlineRadioGroupStyles = cva7("c-inline-radio-group", {
   variants: {
     size: {
       xs: "c-inline-radio-group-xs",
@@ -3277,13 +3297,13 @@ var InlineRadio = {
 
 // src/input-with-label/input-with-label.tsx
 import { forwardRef as forwardRef58 } from "react";
-import { cva as cva8, cx as cx8 } from "class-variance-authority";
+import { cva as cva9, cx as cx8 } from "class-variance-authority";
 
 // src/input/input.tsx
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 import { forwardRef as forwardRef55 } from "react";
 import { jsx as jsx66 } from "react/jsx-runtime";
-var inputStyles = cva7(["c-input"], {
+var inputStyles = cva8(["c-input"], {
   variants: {},
   defaultVariants: {}
 });
@@ -3333,7 +3353,7 @@ var Triangle = forwardRef57((delegated, ref) => {
 
 // src/input-with-label/input-with-label.tsx
 import { Fragment, jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
-var inputWithLabelStyles = cva8(["c-input-with-label"], {
+var inputWithLabelStyles = cva9(["c-input-with-label"], {
   variants: {
     variant: {
       default: "",
@@ -3434,9 +3454,9 @@ SelectItem.displayName = "SelectItem";
 // src/select/select-root.tsx
 import { forwardRef as forwardRef60 } from "react";
 import * as SelectPrimitives2 from "@radix-ui/react-select";
-import { cva as cva9 } from "class-variance-authority";
+import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx73, jsxs as jsxs56 } from "react/jsx-runtime";
-var selectTriggerStyles = cva9("c-select-trigger", {
+var selectTriggerStyles = cva10("c-select-trigger", {
   variants: {
     size: {
       xs: "c-select-trigger-xs",
@@ -3519,9 +3539,9 @@ var Slider = forwardRef61(({ className, transparentRange, ...delegated }, ref) =
 });
 
 // src/tag/tag.tsx
-import { cva as cva10 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx75 } from "react/jsx-runtime";
-var tagStyles = cva10("c-tag", {
+var tagStyles = cva11("c-tag", {
   variants: {
     variant: {
       default: "",
@@ -3541,7 +3561,7 @@ function Tag({ children, className, variant, ...delegated }) {
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-import { useEffect as useEffect11, useRef as useRef5, useState as useState10 } from "react";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState10 } from "react";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
@@ -5747,6 +5767,7 @@ import {
 } from "@lexical/utils";
 
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
+import { useRef as useRef5 } from "react";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
 import { jsx as jsx87, jsxs as jsxs64 } from "react/jsx-runtime";
@@ -5764,11 +5785,14 @@ function ActionsPlugin({
 }) {
   const [editor] = useLexicalComposerContext10();
   const tr = useTr();
+  const actionMenuAnchorRef = useRef5(null);
   return /* @__PURE__ */ jsxs64("div", {
+    ref: actionMenuAnchorRef,
     className: "z-50 flex items-center ",
     children: [
       /* @__PURE__ */ jsx87("div", {}),
       /* @__PURE__ */ jsxs64(ActionMenu, {
+        container: actionMenuAnchorRef.current,
         children: [
           !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ jsx87(ActionMenu.Item, {
             onSelect: actionItem.action,
@@ -6665,7 +6689,7 @@ function RichTextEditorWithoutContext({
   const [editor] = useLexicalComposerContext12();
   const [floatingAnchorElem, setFloatingAnchorElem] = useState10(null);
   const [isSmallWidthViewport, setIsSmallWidthViewport] = useState10(false);
-  const firstOnChangeTriggeredRef = useRef5(!autoFocus);
+  const firstOnChangeTriggeredRef = useRef6(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.11.3",
+  "version": "1.11.5",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -40,6 +40,7 @@
     "@radix-ui/react-checkbox": "1.0.1",
     "@radix-ui/react-dialog": "1.0.2",
     "@radix-ui/react-dropdown-menu": "2.0.1",
+    "@radix-ui/react-popover": "1.0.0",
     "@radix-ui/react-progress": "^1.0.1",
     "@radix-ui/react-radio-group": "1.1.0",
     "@radix-ui/react-select": "1.1.2",
@@ -88,8 +89,8 @@
     "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
-    "vite": "^4.1.1",
-    "vitest": "^0.29.1",
+    "vite": "^4.2.1",
+    "vitest": "^0.30.1",
     "tsconfig": "0.0.0"
   },
   "keywords": [

package/src/action-menu/ActionMenu.stories.tsx

@@ -23,3 +23,15 @@ export const Default: Story = {
     </ActionMenu>
   ),
 };
+
+export const XS: Story = {
+  args: {},
+  render: () => (
+    <ActionMenu size="xs">
+      <ActionMenu.Item onSelect={() => console.warn('Download')}>Download</ActionMenu.Item>
+      <ActionMenu.Item className="danger" onSelect={() => console.warn('Delete')}>
+        Delete
+      </ActionMenu.Item>
+    </ActionMenu>
+  ),
+};

package/src/action-menu/action-menu.css

@@ -1,12 +1,15 @@
 .c-action-menu {
-  @apply flex h-8 w-8 shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
+  @apply flex shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent -outline-offset-1 transition;
+
   &-dot {
-    @apply h-[4px] w-[4px] rounded-full bg-gray;
+    @apply rounded-full bg-gray;
   }
+
   &[data-state='open'],
   [aria-expanded='true'] {
     @apply flex-row gap-[3px];
   }
+
   &:focus-visible {
     @apply outline outline-1 outline-inherit;
     outline-color: currentColor;
@@ -21,8 +24,24 @@
   }
 }
 
+.c-action-menu-xs {
+  @apply h-6 w-6 p-0.5;
+
+  .c-action-menu-dot {
+    @apply h-0.5 w-0.5;
+  }
+}
+
+.c-action-menu-sm {
+  @apply h-8 w-8 p-1;
+
+  .c-action-menu-dot {
+    @apply h-1 w-1;
+  }
+}
+
 .c-action-menu-item {
-  @apply flex cursor-pointer items-center gap-2 py-2.5 px-5 font-sans text-sm font-medium text-gray;
+  @apply flex cursor-pointer items-center gap-2 px-5 py-2.5 font-sans text-sm font-medium text-gray;
 
   &:hover {
     @apply bg-gray-50-900;

package/src/action-menu/action-menu.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ActionMenu } from './index';
+
+describe('ActionMenu', () => {
+  it('renders correctly', () => {
+    render(
+      <ActionMenu>
+        <ActionMenu.Item onSelect={() => {}}>Delete</ActionMenu.Item>
+      </ActionMenu>,
+    );
+
+    expect(screen.getByLabelText(/more options/i)).toBeInTheDocument();
+  });
+
+  it('opens the menu and selects an option when clicking on an action item', async () => {
+    const onSelectOption = vi.fn();
+    const callbackThatShouldNotBeExecuted = vi.fn();
+    const user = userEvent.setup();
+
+    const touchableProps = { onSelect: onSelectOption, onClick: onSelectOption };
+    const touchablePropsThatShouldNotBeCalled = {
+      onSelect: callbackThatShouldNotBeExecuted,
+      onClick: callbackThatShouldNotBeExecuted,
+    };
+
+    render(
+      <ActionMenu>
+        <ActionMenu.Item {...touchableProps}>Add</ActionMenu.Item>
+        <ActionMenu.Item {...touchablePropsThatShouldNotBeCalled}>Delete</ActionMenu.Item>
+      </ActionMenu>,
+    );
+
+    const triggerButton = screen.getByTestId('action-menu-button') as HTMLButtonElement;
+    await user.click(triggerButton);
+
+    // The user should be able to see the dropdown menu
+    const dropdownMenu = await screen.getByRole('menu');
+    expect(dropdownMenu).toBeInTheDocument();
+
+    // The user should be able to see the list of options
+    const addOption = screen.getByText(/add/i);
+    expect(addOption).toBeInTheDocument();
+
+    // The user can interact with any of the options
+    await user.click(addOption);
+
+    // The following expect is failing
+    expect(onSelectOption).toBeCalledTimes(1);
+    expect(callbackThatShouldNotBeExecuted).toBeCalledTimes(0);
+  });
+});

package/src/action-menu/action-menu.tsx

@@ -1,18 +1,39 @@
 import type { ReactNode } from 'react';
+import { VariantProps, cva } from 'class-variance-authority';
 
-import { DropdownMenu } from '../dropdown-menu';
+import { DropdownMenu, Container } from '../dropdown-menu';
 import { Item } from './action-item';
 import { Separator } from './action-item-separator';
 
-type ActionMenuProps = {
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva('c-action-menu', {
+  variants: {
+    size: {
+      xs: 'c-action-menu-xs',
+      sm: 'c-action-menu-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+type ActionMenuProps = ButtonStylesProps & {
   children: ReactNode;
+  container?: Container;
   tabIndex?: number;
 };
 
-export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
+export function ActionMenu({ children, container, tabIndex, size }: ActionMenuProps) {
   return (
-    <DropdownMenu.Root content={children} alignContent="center">
-      <button tabIndex={tabIndex} type="button" className="c-action-menu" aria-label="more options">
+    <DropdownMenu.Root content={children} alignContent="center" container={container}>
+      <button
+        aria-label="more options"
+        className={buttonStyles({ size })}
+        data-testid="action-menu-button"
+        tabIndex={tabIndex}
+        type="button"
+      >
         <span className="sr-only">Open more options</span>
         <span className="c-action-menu-dot"></span>
         <span className="c-action-menu-dot"></span>

package/src/button/button.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from './index';
+
+describe('Button', () => {
+  it('renders correctly', () => {
+    render(<Button>Hey</Button>);
+
+    expect(screen.getByText(/Hey/i)).toBeInTheDocument();
+  });
+
+  it('fires the onClick event', async () => {
+    const onClick = vi.fn();
+
+    render(<Button onClick={onClick}>Hey</Button>);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    expect(onClick).toBeCalledTimes(1);
+  });
+});

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -1,20 +1,24 @@
 import type { ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
+export type Container = HTMLElement | null | undefined;
+
+export type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
   children: ReactNode;
   content: ReactNode;
   alignContent?: 'start' | 'center' | 'end';
   disabled?: boolean;
   onOpenChange?: (open: boolean) => void;
+  container?: Container;
 };
 
 export function DropdownMenuRoot({
   children,
   content,
-  alignContent = 'start',
+  alignContent = 'center',
   disabled,
   onOpenChange,
+  container,
   ...delegated
 }: DropdownMenuRootProps) {
   return (
@@ -22,14 +26,16 @@ export function DropdownMenuRoot({
       <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
         {children}
       </DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Content
-        align={alignContent}
-        sideOffset={5}
-        className="c-dropdown-menu-content"
-        {...delegated}
-      >
-        {content}
-      </DropdownMenuPrimitive.Content>
+      <DropdownMenuPrimitive.Portal container={container}>
+        <DropdownMenuPrimitive.Content
+          align={alignContent}
+          sideOffset={5}
+          className="c-dropdown-menu-content"
+          {...delegated}
+        >
+          {content}
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
     </DropdownMenuPrimitive.Root>
   );
 }

package/src/dropdown-menu/dropdown-menu.css

@@ -16,5 +16,5 @@
     @apply bg-gray-50-900 outline-none;
   }
 
-  @apply first:rounded-tr first:rounded-tl last:rounded-br last:rounded-bl;
+  @apply first:rounded-tl first:rounded-tr last:rounded-bl last:rounded-br;
 }

package/src/dropdown-menu/index.ts

@@ -2,9 +2,11 @@ import { Portal, Separator } from '@radix-ui/react-dropdown-menu';
 
 import { DropdownMenuItem } from './dropdown-menu-item';
 import { DropdownMenuLabel } from './dropdown-menu-label';
-import { DropdownMenuRoot } from './dropdown-menu-root';
+import { DropdownMenuRoot, type DropdownMenuRootProps, type Container } from './dropdown-menu-root';
 import './dropdown-menu.css';
 
+export { DropdownMenuRootProps, Container };
+
 export const DropdownMenu = {
   Root: DropdownMenuRoot,
   Item: DropdownMenuItem,

package/src/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover';

package/src/popover/popover-close.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { Icon } from '../iconography';
+
+export type PopoverCloseProps = PopoverPrimitive.PopoverCloseProps & {
+  children?: ReactNode;
+};
+
+export function PopoverClose(props: PopoverCloseProps) {
+  const { asChild, children } = props;
+
+  return (
+    <PopoverPrimitive.Close asChild={asChild} className="c-popover-close">
+      {children ?? <Icon.Cancel width={16} height={16} />}
+    </PopoverPrimitive.Close>
+  );
+}

package/src/popover/popover.css

@@ -0,0 +1,11 @@
+.c-popover-content {
+  @apply rounded bg-elevate text-xs text-gray-700-200 shadow focus-visible:outline-none;
+}
+
+.c-popover-close {
+  @apply absolute right-1 top-1 flex cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-1;
+}
+
+.c-popover-arrow {
+  @apply fill-white;
+}

package/src/popover/popover.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Popover } from '.';
+import { Icon } from '../iconography';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Components/Popover',
+  component: Popover,
+  argTypes: {
+    side: {
+      options: ['top', 'right', 'bottom', 'left'],
+      control: {
+        type: 'select',
+      },
+    },
+    align: {
+      options: ['start', 'center', 'end'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const SimpleTemplate: Story = {
+  name: 'Simple Template',
+  render: args => (
+    <div className="flex w-1/2 justify-center pt-14">
+      <Popover {...args} content="Content goes here">
+        <Icon.Customers width={32} height={32} />
+      </Popover>
+    </div>
+  ),
+};
+
+export const WithCustomCloseButton: Story = {
+  name: 'With custom Close button',
+  render: () => (
+    <div className="flex w-1/2 justify-center pt-14">
+      <Popover content="Content goes here" side="left" closeButton={<button>close</button>}>
+        <Icon.Customers width={32} height={32} />
+      </Popover>
+    </div>
+  ),
+};

package/src/popover/popover.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import { cx } from 'class-variance-authority';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import './popover.css';
+import { PopoverClose } from './popover-close';
+
+type PopoverProps = Pick<PopoverPrimitive.PopoverProps, 'open' | 'onOpenChange'> &
+  Pick<PopoverPrimitive.PortalProps, 'container'> &
+  PopoverPrimitive.PopperContentProps & {
+    children: ReactNode;
+    closeButton?: boolean | JSX.Element;
+    hasArrow?: boolean;
+    content: ReactNode;
+  };
+
+export function Popover({
+  children,
+  closeButton,
+  content,
+  side,
+  open,
+  onOpenChange,
+  className,
+  container,
+  hasArrow = true,
+  ...delegatedContent
+}: PopoverProps) {
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal container={container}>
+        <PopoverPrimitive.Content {...delegatedContent} side={side} className={cx('c-popover-content', className)}>
+          {!closeButton ? null : (
+            <PopoverClose asChild={typeof closeButton !== 'boolean'}>
+              {typeof closeButton !== 'boolean' ? closeButton : null}
+            </PopoverClose>
+          )}
+          {hasArrow && <PopoverPrimitive.Arrow className="c-popover-arrow" offset={5} />}
+          {content}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}