@mirohq/design-system-popover 6.1.15 → 6.2.0-fix-stitches-types.1

package/dist/main.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var RadixPopover = require('@radix-ui/react-popover');
@@ -12,10 +10,7 @@ var designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemIcons = require('@mirohq/design-system-icons');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -28,16 +23,15 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
+var RadixPopover__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixPopover);
 
 const StyledTrigger = designSystemStitches.styled(RadixPopover.Trigger);
 
-const Trigger = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledTrigger, { ...props, ref: forwardRef }));
+const Trigger = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledTrigger, { ...props, ref: forwardRef }));
 
 const StyledContent = designSystemStitches.styled(RadixPopover.Content, {
   backgroundColor: "$black",
@@ -80,7 +74,7 @@ const StyledLine = designSystemStitches.styled(designSystemPrimitive.Primitive.s
   fill: "$black"
 });
 
-const Line = React__default["default"].forwardRef(
+const Line = React.forwardRef(
   (props, forwardRef) => (
     // We have to use RadixArrow with asChild here instead of styling it,
     // otherwise it's not possible to pass children, it will use arrow svg.
@@ -139,12 +133,12 @@ const PopoverProvider = ({
 );
 const usePopoverContext = () => React.useContext(PopoverContext);
 
-const Arrow = React__default["default"].forwardRef((props, forwardRef) => {
+const Arrow = React.forwardRef((props, forwardRef) => {
   const { variant } = usePopoverContext();
   return /* @__PURE__ */ jsxRuntime.jsx(StyledArrow, { ...props, variant, "aria-hidden": true, ref: forwardRef });
 });
 
-const Content = React__default["default"].forwardRef(
+const Content = React.forwardRef(
   ({
     align = "center",
     alignOffset = 0,
@@ -159,7 +153,7 @@ const Content = React__default["default"].forwardRef(
     ...restProps
   }, forwardRef) => {
     const { variant } = usePopoverContext();
-    const anchorEl = React__default["default"].useMemo(() => {
+    const anchorEl = React.useMemo(() => {
       switch (anchor) {
         case "arrow":
           return /* @__PURE__ */ jsxRuntime.jsx(Arrow, {});
@@ -230,7 +224,7 @@ const StyledClose = designSystemStitches.styled(RadixPopover.Close, {
   }
 });
 
-const Close = React__default["default"].forwardRef((props, forwardRef) => {
+const Close = React.forwardRef((props, forwardRef) => {
   const { variant } = usePopoverContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledClose,

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$black',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$black',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$white',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof RadixPopover.Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = RadixPopover.Anchor\n"],"names":["styled","RadixTrigger","React","jsx","RadixContent","animations","Primitive","RadixArrow","jsxs","createContext","useContext","RadixClose","focus","IconCross","RadixPortal","useBaseTooltipContext","usePrevious","useEffect","RadixPopover","BaseTooltipProvider"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$black',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$black',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$white',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof RadixPopover.Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = RadixPopover.Anchor\n"],"names":["styled","RadixTrigger","jsx","RadixContent","animations","Primitive","RadixArrow","jsxs","createContext","useContext","RadixClose","focus","IconCross","RadixPortal","useBaseTooltipContext","usePrevious","useEffect","RadixPopover","BaseTooltipProvider"],"mappings":"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"}

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$black',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$black',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$white',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof RadixPopover.Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = RadixPopover.Anchor\n"],"names":["RadixTrigger","RadixContent","RadixArrow","RadixClose","RadixPortal"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$black',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$black',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$white',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof RadixPopover.Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = RadixPopover.Anchor\n"],"names":["RadixTrigger","RadixContent","RadixArrow","RadixClose","RadixPortal"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,12 +1,31 @@
 import * as _radix_ui_react_popover from '@radix-ui/react-popover';
 import { PopoverPortalProps, PopoverAnchorProps } from '@radix-ui/react-popover';
-import * as react from 'react';
-import react__default from 'react';
-import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+import * as React from 'react';
+import React__default from 'react';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
 
-declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>, {}, {}>;
+/* Utilities */
+/* ========================================================================== */
+
+/** Returns a string with the given prefix followed by the given values. */
+type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
+
+type TransformProps<Props, Media> = {
+	[K in keyof Props]: (
+		| Props[K]
+		| (
+			& {
+				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
+			}
+			& {
+				[KMedia in string]: Props[K]
+			}
+		)
+	)
+}
+
+declare const StyledTrigger: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {}>;
 type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
 
 interface TriggerProps extends StyledTriggerProps {
@@ -14,11 +33,11 @@ interface TriggerProps extends StyledTriggerProps {
 /**
  * The trigger component is used to render the trigger element for the popover.
  */
-declare const Trigger: react__default.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+declare const Trigger: React__default.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
-declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const StyledContent: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverContentProps & React.RefAttributes<HTMLDivElement>>>, "variant"> & TransformProps<{
     variant?: "dark" | "light" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>, {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverContentProps & React.RefAttributes<HTMLDivElement>>, {
     variant?: "dark" | "light" | undefined;
 }, {}>;
 type StyledContentProps = StrictComponentProps<typeof StyledContent>;
@@ -34,21 +53,14 @@ type FocusOutsideEvent = CustomEvent<{
     originalEvent: FocusEvent;
 }>;
 
+type types_Align = Align;
 type types_AnchorType = AnchorType;
+type types_FocusOutsideEvent = FocusOutsideEvent;
+type types_PointerDownOutsideEvent = PointerDownOutsideEvent;
 type types_Side = Side;
-type types_Align = Align;
 type types_Variant = Variant;
-type types_PointerDownOutsideEvent = PointerDownOutsideEvent;
-type types_FocusOutsideEvent = FocusOutsideEvent;
 declare namespace types {
-  export {
-    types_AnchorType as AnchorType,
-    types_Side as Side,
-    types_Align as Align,
-    types_Variant as Variant,
-    types_PointerDownOutsideEvent as PointerDownOutsideEvent,
-    types_FocusOutsideEvent as FocusOutsideEvent,
-  };
+  export type { types_Align as Align, types_AnchorType as AnchorType, types_FocusOutsideEvent as FocusOutsideEvent, types_PointerDownOutsideEvent as PointerDownOutsideEvent, types_Side as Side, types_Variant as Variant };
 }
 
 interface ContentProps extends StyledContentProps {
@@ -154,11 +166,11 @@ interface ContentProps extends StyledContentProps {
 /**
  * The content component is used to render rich content elements for the popover.
  */
-declare const Content: react__default.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+declare const Content: React__default.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledClose: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const StyledClose: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>>, "variant"> & TransformProps<{
     variant?: "dark" | "light" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>, {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>, {
     variant?: "dark" | "light" | undefined;
 }, {}>;
 type StyledCloseProps = StrictComponentProps<typeof StyledClose>;
@@ -169,7 +181,7 @@ interface CloseProps extends StyledCloseProps {
      */
     variant?: StyledCloseProps['variant'];
 }
-declare const Close: react__default.ForwardRefExoticComponent<Omit<CloseProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+declare const Close: React__default.ForwardRefExoticComponent<Omit<CloseProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface PortalProps extends PopoverPortalProps {
     /**
@@ -183,7 +195,7 @@ interface PortalProps extends PopoverPortalProps {
      */
     container?: HTMLElement | null;
 }
-declare const Portal: (props: PortalProps) => react__default.ReactNode;
+declare const Portal: (props: PortalProps) => React__default.ReactNode;
 
 interface PopoverProps {
     /**
@@ -216,9 +228,9 @@ interface PopoverProps {
     /**
      * The content.
      */
-    children: react__default.ReactNode;
+    children: React__default.ReactNode;
 }
-declare const Popover: ((props: PopoverProps) => react__default.ReactNode) & Partials;
+declare const Popover: ((props: PopoverProps) => React__default.ReactNode) & Partials;
 interface Partials {
     Trigger: typeof Trigger;
     Content: typeof Content;
@@ -227,9 +239,9 @@ interface Partials {
     Anchor: typeof _radix_ui_react_popover.Anchor;
 }
 
-declare const StyledArrow: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverArrowProps & react.RefAttributes<SVGSVGElement>>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const StyledArrow: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverArrowProps & React.RefAttributes<SVGSVGElement>>>, "variant"> & TransformProps<{
     variant?: "dark" | "light" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<SVGSVGElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverArrowProps & react.RefAttributes<SVGSVGElement>>, {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<SVGSVGElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverArrowProps & React.RefAttributes<SVGSVGElement>>, {
     variant?: "dark" | "light" | undefined;
 }, {}>;
 type StyledArrowProps = StrictComponentProps<typeof StyledArrow>;
@@ -243,4 +255,5 @@ interface ArrowProps extends StyledArrowProps {
 
 type AnchorProps = PopoverAnchorProps;
 
-export { Popover, AnchorProps as PopoverAnchorProps, ArrowProps as PopoverArrowProps, CloseProps as PopoverCloseProps, ContentProps as PopoverContentProps, PortalProps as PopoverPortalProps, PopoverProps, TriggerProps as PopoverTriggerProps, types as PopoverTypes };
+export { Popover, types as PopoverTypes };
+export type { AnchorProps as PopoverAnchorProps, ArrowProps as PopoverArrowProps, CloseProps as PopoverCloseProps, ContentProps as PopoverContentProps, PortalProps as PopoverPortalProps, PopoverProps, TriggerProps as PopoverTriggerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-popover",
-  "version": "6.1.15",
+  "version": "6.2.0-fix-stitches-types.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
-    "@mirohq/design-system-base-tooltip": "^1.1.0",
-    "@mirohq/design-system-icons": "^1.27.1",
-    "@mirohq/design-system-primitive": "^2.1.0",
-    "@mirohq/design-system-stitches": "^3.1.2",
-    "@mirohq/design-system-styles": "^3.0.1",
+    "@mirohq/design-system-base-tooltip": "^1.2.0-fix-stitches-types.1",
+    "@mirohq/design-system-icons": "^1.28.0-fix-stitches-types.1",
+    "@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.1",
+    "@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.1",
+    "@mirohq/design-system-styles": "^3.1.0-fix-stitches-types.1",
     "@mirohq/design-system-use-previous": "^1.1.0"
   },
   "scripts": {