@kaizen/components 1.51.0 → 1.52.1

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.mdx

@@ -0,0 +1,182 @@
+import { Canvas, Meta, Controls } from "@storybook/blocks"
+import { CheckIcon, ClearIcon } from "~components/Icon"
+import { ResourceLinks, SbContent, Installation } from "~storybook/components"
+import * as TooltipStories from "./Tooltip.docs.stories"
+import AnatomyPng from "./assets/tooltip_anatomy.png"
+import PlacementPng from "./assets/tooltip_placement.png"
+import Trigger1Png from "./assets/tooltip_trigger_1.png"
+import Trigger2Png from "./assets/tooltip_trigger_2.png"
+import Trigger3Png from "./assets/tooltip_trigger_3.png"
+import WhenToUsePng from "./assets/tooltip_variant.png"
+
+<Meta title="Overlays/Tooltip/v3/Usage Guidelines" />
+
+<SbContent>
+  # Tooltip (v3)
+
+  Updated June 25, 2024
+</SbContent>
+
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
+  designGuidelines="/?path=/docs/overlays-tooltip-v3-usage-guidelines--docs"
+  ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"
+  apiSpecification="/?path=/docs/overlays-tooltip-v3-api-specifications--docs"
+  className="!mb-8"
+/>
+
+<SbContent>
+  <Installation
+    installCommand="pnpm add @kaizen/components"
+    importStatement='import { Tooltip, TooltipTrigger } from "@kaizen/components/v3/overlays"'
+  />
+
+  ## Overview
+
+  Tooltips are brief floating labels used to add additional contextual information when users hover, click or focus on an interactive element. These should offer concise explanations,  elaborating on the element they are associated with.
+</SbContent>
+
+
+<Canvas
+  of={TooltipStories.Playground}
+  source={{code: `
+<TooltipTrigger>
+  <Button label="Button" />
+  <Tooltip>Tooltip content</Tooltip>
+</TooltipTrigger>
+  `}}
+ />
+<Controls of={TooltipStories.Playground} include={["placement", "isOpen"]} className="mb-64" />
+
+
+<SbContent className="mb-64">
+  ### Anatomy
+
+  - The anatomy of a tooltip is made up of a container, description and arrow.
+    - **They do not include a title or heading**. If you need to include a title, use a Popover
+  - A tooltip is connected to a trigger element, such as a button or icon, that shows the tooltip when the interactive trigger element is hovered or focused. (More details below.)
+
+  <img src={AnatomyPng} alt="Indicates the anatomy of the Tooltip component, the Container, Label, Arrow and Trigger" className="mt-24" />
+</ SbContent>
+
+<SbContent className="mb-64">
+  ### When to use
+
+  - Tooltips are used to provide additional information when space is tight.
+  - Tooltips must be concise with one or more lines of text.
+  - Tooltips must be accessible via hover and focus only.
+  - Trigger tooltips from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations Truncated text)—be mindful of keyboard accessibility
+  - **Never include any kind of error messages** in a tooltip
+
+  <img src={WhenToUsePng} alt="Illustration of when to use the Tooltip component" className="mt-24"/>
+</ SbContent>
+
+<SbContent >
+  ### Dos and don'ts
+</SbContent >
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent variant="heading-4">
+      #### Do use tooltips to describe icons
+      Icons are not always easy to identify on their own. When you use components that don&apos;t have labels — for example, icon-only action buttons and tabs — make sure to use tooltips to provide context for the icons.
+    </SbContent>
+    <div className="grid grid-cols-2 gap-16">
+      <div className="relative [&>*]:m-0">
+        <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+          <CheckIcon role="presentation" />
+          <SbContent ><span className="text-white"><strong>Do</strong></span></SbContent>
+        </div>
+        <Canvas of={TooltipStories.Primary} className="border-green-500 !rounded" />
+      </div>
+    </div>
+  </div>
+
+  <div className="flex flex-col gap-16">
+    <SbContent variant="heading-4">
+      #### Don&apos;t use tooltips to communicate crucial information
+
+      Tooltips should never stop a user (or be a gate) from completing a task or performing an action. They disappear so they should never contain critical information that a user would absolutely need to proceed, or information without which a user may cause errors. If the information is crucial for a user to proceed, consider using a modal or inline notification instead.
+    </SbContent>
+    <div className="grid grid-cols-2 gap-16">
+      <div className="relative [&>*]:m-0">
+        <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+          <CheckIcon role="presentation" />
+          <SbContent ><span className="text-white"><strong>Do</strong></span></SbContent>
+        </div>
+        <Canvas of={TooltipStories.DoFieldTooltip} className="border-green-500 !rounded-[10px]" />
+      </div>
+      <div className="relative [&>*]:m-0">
+        <div className="bg-gray-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+          <ClearIcon role="presentation" />
+          <SbContent ><span className="text-white"><strong>Don&apos;t</strong></span></SbContent>
+        </div>
+        <Canvas of={TooltipStories.DontFieldTooltip} className="border-gray-500 !rounded-[10px]" />
+      </div>
+    </div>
+  </div>
+
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent variant="heading-4">
+      #### Do be concise
+
+      Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
+    </SbContent>
+    <div className="grid grid-cols-2 gap-16">
+      <div className="relative [&>*]:m-0">
+        <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+          <CheckIcon role="presentation" />
+          <SbContent ><span className="text-white"><strong>Do</strong></span></SbContent>
+        </div>
+        <Canvas of={TooltipStories.DoConcise} className="border-green-500 !rounded-[10px]" />
+      </div>
+      <div className="relative [&>*]:m-0">
+        <div className="bg-gray-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+          <ClearIcon role="presentation" />
+          <SbContent ><span className="text-white"><strong>Don&apos;t</strong></span></SbContent>
+        </div>
+        <Canvas of={TooltipStories.DontConcise} className="border-gray-500 !rounded-[10px]" />
+      </div>
+    </div>
+  </div>
+</div>
+
+<SbContent className="mb-64">
+  ### Placements
+
+  <img src={PlacementPng} alt="" className="mb-24" />
+
+  - Type: Dropdown to choose from Default (dark tooltip) and Reverse (light tooltip)
+  - Direction: Dropdown to choose where the arrow points
+  - Tooltip label: Input field allows you to type in the label from the properties panel
+  - Use strong signifiers for trigger elements to ensure the tooltip is discoverable.
+  - The proximity of tooltips is always paired to the element with which they are associated.
+</SbContent>
+
+<SbContent className="mb-64">
+  ### Trigger
+
+  - Should be shown on hover, click or on focus events
+  - Needs to be discoverable:
+    - E.g. something like an icon to suggest there’s a tooltip.
+    - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
+
+  <img src={Trigger1Png} alt="" className="my-24" />
+
+  - Only trigger tooltips from interactive elements, such as:
+    - Buttons
+    - Links
+    - Icon buttons
+
+  <img src={Trigger2Png} alt="" className="my-24" />
+
+  - Non-interactive elements (be mindful of keyboard accessibility):
+    - Icons
+    - Abbreviations (e.g. dashed underlined text for HRIS that shows a tooltip that says Human Resource Information System)
+    - Truncated text
+  - For interactive elements that trigger tooltips, only have optional information in the tooltip because it could be missed when the user clicks
+
+  <img src={Trigger3Png} alt="" className="my-24" />
+</SbContent>

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx

@@ -0,0 +1,219 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { expect, userEvent, waitFor, within } from "@storybook/test"
+import isChromatic from "chromatic"
+import { Button, IconButton } from "~components/Button"
+import { AddIcon } from "~components/Icon"
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "~components/Tabs"
+import { Text } from "~components/Text"
+import { Tag } from "~components/__future__/Tag"
+import { Focusable } from "~components/__overlays__/v3"
+import { Tooltip, TooltipTrigger } from "../index"
+
+const meta = {
+  title: "Overlays/Tooltip/v3/Tests",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    defaultOpen: isChromatic(),
+  },
+  argTypes: {
+    // eslint-disable-next-line camelcase
+    UNSTABLE_portalContainer: {
+      control: false,
+      table: { disable: true },
+    },
+    triggerRef: { control: false },
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const OnButton: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button label="Button" />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const button = canvas.queryByRole("button") || canvas.getByRole("link")
+
+    await step("Hover shows", async () => {
+      await userEvent.unhover(button)
+      await userEvent.hover(button)
+      await waitFor(() => expect(canvas.getByRole("tooltip")).toBeVisible())
+      expect(button).toHaveAttribute(
+        "aria-describedby",
+        canvas.getByRole("tooltip").id
+      )
+      await userEvent.unhover(button)
+    })
+
+    await step("Focus shows", async () => {
+      await userEvent.tab() // focus
+      await waitFor(() => expect(canvas.getByRole("tooltip")).toBeVisible())
+      await userEvent.tab() // unfocus
+      await waitFor(() => expect(canvas.queryByRole("tooltip")).toBeNull())
+    })
+
+    await step("Escape closes", async () => {
+      await userEvent.tab() // focus
+      await userEvent.keyboard("{Escape}")
+      await waitFor(() => expect(canvas.queryByRole("tooltip")).toBeNull())
+      await userEvent.tab() // unfocus
+    })
+  },
+}
+
+export const OnLink: Story = {
+  ...OnButton,
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button label="Button" href="#" />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnButtonWithDesc: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <>
+      <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+        <IconButton
+          label="(TESTING) Add label"
+          icon={<AddIcon role="presentation" />}
+          primary
+          aria-describedby="blah"
+        />
+        <Tooltip {...args}>Tooltip content</Tooltip>
+      </TooltipTrigger>
+      <Text variant="body" id="blah" classNameOverride="p-4">
+        This is target of aria-describedby
+      </Text>
+    </>
+  ),
+}
+
+export const OnIconButton: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <IconButton
+        label="Add something"
+        icon={<AddIcon role="presentation" />}
+        primary
+        // Negate the aria description (added by RAC) as it should be the
+        // same as the accessible name, therefore no need to duplicate it
+        aria-describedby={null}
+      />
+      <Tooltip {...args}>Add something</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnDisabledButton: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button label="Button" disabled />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnCustomButtonAnchor: Story = {
+  name: "On Button with custom <a>",
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button
+        label="Button"
+        component={props => (
+          // eslint-disable-next-line jsx-a11y/anchor-is-valid
+          <a {...props} href="#" style={{ padding: "0 1rem" }}>
+            Custom Link
+          </a>
+        )}
+      />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnCustomButton: Story = {
+  ...OnButton,
+  name: "On Button with custom <button>",
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button
+        label="Button"
+        component={props => <button type="button" {...props} />}
+      />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnCustomFocusableElement: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Focusable>
+        <Tag>Non-interactive element</Tag>
+      </Focusable>
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnTabs: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <Tabs>
+      <TabList aria-label="Tabs">
+        <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+          <Tab>Tab 1</Tab>
+          <Tooltip {...args}>Tooltip content</Tooltip>
+        </TooltipTrigger>
+      </TabList>
+      <TabPanels>
+        <TabPanel classNameOverride="p-24 font-family-paragraph">
+          Tab content
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  ),
+}
+
+export const Placement: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button label="Button" />
+      <Tooltip {...args} placement="top" shouldFlip={false}>
+        Placement top
+      </Tooltip>
+      <Tooltip {...args} placement="end" shouldFlip={false}>
+        Placement end
+      </Tooltip>
+      <Tooltip {...args} placement="bottom" shouldFlip={false}>
+        Placement bottom
+      </Tooltip>
+      <Tooltip {...args} placement="start" shouldFlip={false}>
+        Placement start
+      </Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const ReversedColors: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Button label="Button" />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+  parameters: {
+    reverseColors: true,
+  },
+}

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.stickersheet.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { Meta, composeStories } from "@storybook/react"
+import { ReversedColors } from "~components/__utilities__/v3"
+import { StickerSheetStory } from "~storybook/components/StickerSheet"
+import { mergeClassNames } from "~utils/mergeClassNames"
+import * as testStories from "./Tooltip.spec.stories"
+
+export default {
+  title: "Overlays/Tooltip/v3/Tests",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const Stories = composeStories(testStories)
+
+export const Standard: StickerSheetStory = {
+  name: "Sticker Sheet (Default)",
+  render: args => (
+    <div className="grid gap-x-128 gap-y-128 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      {Object.values(Stories).map((Story, index) => (
+        <div
+          key={index}
+          className={mergeClassNames(
+            "flex items-center justify-center min-h-[10rem]",
+            Story.parameters.reverseColors ? "bg-purple-700" : ""
+          )}
+        >
+          <ReversedColors isReversed={!!Story.parameters.reverseColors}>
+            <Story {...args} defaultOpen={true} />
+          </ReversedColors>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...Standard,
+  name: "Sticker Sheet (RTL)",
+  parameters: {
+    ...Standard.parameters,
+    textDirection: "rtl",
+  },
+}

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.stories.tsx

@@ -0,0 +1,72 @@
+import React, { FunctionComponent } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import isChromatic from "chromatic"
+import { Button } from "~components/Button"
+import { Tag } from "~components/__future__"
+import { Focusable } from "~components/__overlays__/v3"
+import { Tooltip, TooltipTrigger } from "../index"
+import * as testStories from "./Tooltip.spec.stories"
+
+const meta = {
+  title: "Overlays/Tooltip/v3",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    defaultOpen: isChromatic(),
+  },
+  subcomponents: { TooltipTrigger } as Record<string, FunctionComponent<any>>,
+  argTypes: {
+    // eslint-disable-next-line camelcase
+    UNSTABLE_portalContainer: {
+      control: false,
+      table: { disable: true },
+    },
+    triggerRef: { control: false },
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ defaultOpen: _, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={true} isOpen={isOpen}>
+      <Button label="Button" />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const OnButton: Story = { ...testStories.OnButton, play: undefined }
+export const OnLink: Story = { ...testStories.OnLink, play: undefined }
+export const OnIconButton: Story = {
+  ...testStories.OnIconButton,
+  play: undefined,
+}
+export const Placement: Story = {
+  ...testStories.OnButton,
+  play: undefined,
+  args: { placement: "end" },
+}
+export const OnTabs: Story = {
+  ...testStories.OnTabs,
+  play: undefined,
+}
+export const OnCustomFocusableElement: Story = {
+  render: ({ defaultOpen, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
+      <Focusable>
+        <Tag>Non-interactive element</Tag>
+      </Focusable>
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+  play: undefined,
+}
+export const OnReversed: Story = {
+  ...testStories.ReversedColors,
+  play: undefined,
+}

package/src/__overlays__/Tooltip/v3/index.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip"
+export * from "./TooltipTrigger"

package/src/__overlays__/v1.ts

@@ -0,0 +1 @@
+export * from "./Tooltip/v1"

package/src/__overlays__/v2.ts

@@ -0,0 +1,2 @@
+// Alias of current
+export * from "./Tooltip/v2"

package/src/__overlays__/v3.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip/v3"
+export * from "./Focusable/v3"

package/src/__react-aria-components__/index.ts

@@ -0,0 +1 @@
+export * from "react-aria-components"

package/src/__react-aria__/index.ts

@@ -0,0 +1 @@
+export * from "react-aria"

package/src/__utilities__/ReversedColors/v3/ReversedColors.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react"
+
+export type ReversedColorsProps = {
+  children: ReactNode
+  isReversed?: boolean
+}
+
+const ReversedColorsContext = React.createContext<boolean>(false)
+
+export const useReversedColors = (): boolean =>
+  React.useContext(ReversedColorsContext)
+
+export const ReversedColors = ({
+  children,
+  isReversed = true,
+}: ReversedColorsProps): JSX.Element => (
+  <ReversedColorsContext.Provider value={isReversed}>
+    {children}
+  </ReversedColorsContext.Provider>
+)

package/src/__utilities__/ReversedColors/v3/index.ts

@@ -0,0 +1 @@
+export * from "./ReversedColors"

package/src/__utilities__/v3.ts

@@ -0,0 +1 @@
+export * from "./ReversedColors/v3"

package/src/index.ts

@@ -56,8 +56,8 @@ export * from "./Tile"
 export * from "./TimeField"
 export * from "./TitleBlockZen"
 export * from "./ToggleSwitch"
-export * from "./Tooltip"
 export * from "./utils"
 export * from "./VisuallyHidden"
 export * from "./Well"
 export * from "./Workflow"
+export * from "./__overlays__/Tooltip/v1"

package/src/types/cssVariables.d.ts

@@ -0,0 +1,7 @@
+import "react"
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number
+  }
+}

package/src/utils/mergeClassNames.ts

@@ -0,0 +1,32 @@
+import classnames from "classnames"
+
+type ClassNameValue = string | number | boolean | undefined | null
+
+/**
+ * Helper to merge classnames together with support for functions that receive state (render props).
+ * This is useful when working with react-aria-components which have a feature where you can pass a function that receives state and returns a classname.
+ * https://react-spectrum.adobe.com/react-aria/styling.html#render-props
+ */
+export const mergeClassNames = <
+  ClassNameTypes extends Array<ClassNameValue | ((state: any) => string)>,
+>(
+  ...classNames: ClassNameTypes
+): (() => string) extends ClassNameTypes[number]
+  ? (state: any) => string
+  : string => {
+  const containsFunction = classNames.some(
+    className => typeof className === "function"
+  )
+
+  // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
+  if (!containsFunction)
+    return classnames(...(classNames as ClassNameValue[])) as any
+
+  // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
+  return ((state: any) =>
+    classnames(
+      ...(classNames.map(className =>
+        typeof className === "function" ? className(state) : className
+      ) as ClassNameValue[])
+    )) as any
+}

package/v1/overlays/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/overlaysV1.cjs",
+  "module": "../../dist/esm/overlaysV1.mjs",
+  "types": "../../dist/types/__overlays__/v1.d.ts"
+}

package/v2/overlays/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/overlaysV2.cjs",
+  "module": "../../dist/esm/overlaysV2.mjs",
+  "types": "../../dist/types/__overlays__/v2.d.ts"
+}

package/v3/overlays/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/overlaysV3.cjs",
+  "module": "../../dist/esm/overlaysV3.mjs",
+  "types": "../../dist/types/__overlays__/v3.d.ts"
+}

package/v3/react-aria/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/reactAriaV3.cjs",
+  "module": "../../dist/esm/reactAriaV3.mjs",
+  "types": "../../dist/types/__react-aria__/index.d.ts"
+}