@webstudio-is/sdk-components-react-radix 0.0.0-017f1bd

package/lib/shared/theme.js

@@ -0,0 +1,119 @@
+const n = {
+  sm: "0.875rem",
+  lg: "1.125rem"
+}, t = {
+  sm: "1.25rem"
+}, g = {
+  none: "1",
+  snug: "1.375"
+}, s = {
+  medium: "500"
+}, c = {
+  tight: "-0.025em"
+}, m = {
+  0: "0px",
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem",
+  px: "1px",
+  "0.5": "0.125rem",
+  "1.5": "0.375rem",
+  "2.5": "0.625rem",
+  "3.5": "0.875rem"
+}, p = {
+  ...m,
+  full: "100%"
+}, i = {
+  ...m
+}, b = {
+  sm: "24rem",
+  lg: "32rem"
+}, x = {
+  2: "2px",
+  DEFAULT: "1px"
+}, d = {
+  sm: "0.125rem",
+  md: "0.375rem",
+  full: "9999px"
+}, r = {
+  popover: "rgb(255, 255, 255)",
+  popoverForeground: "rgb(2, 8, 23)",
+  border: "rgb(226, 232, 240)",
+  background: "rgb(255, 255, 255)",
+  foreground: "hsl(222.2 84% 4.9%)",
+  ring: "rgb(148, 163, 184)",
+  mutedForeground: "rgb(100, 116, 139)",
+  muted: "hsl(210 40% 96.1%)",
+  primary: "rgb(15, 23, 42)",
+  primaryForeground: "hsl(210 40% 98%)",
+  accent: "rgb(241, 245, 249)",
+  accentForeground: "rgb(15, 23, 42)",
+  input: "rgb(226, 232, 240)"
+}, l = {
+  all: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
+  transform: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+}, u = {
+  50: "0.5",
+  70: "0.7",
+  100: "1"
+}, o = {
+  2: "2px"
+}, e = {
+  2: "2px"
+}, a = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  // 0 0 0 ringOffsetWidth ringOffsetColor
+  // 0 0 0 ringWidth + ringOffsetWidth ringColor
+  ring: `0 0 0 ${e[2]} ${r.background}, 0 0 0 calc(${o[2]} + ${e[2]}) ${r.ring}`
+}, h = {
+  50: "50"
+}, f = {
+  sm: "blur(0 1px 2px 0 rgb(0 0 0 / 0.05))"
+};
+export {
+  f as blur,
+  d as borderRadius,
+  x as borderWidth,
+  a as boxShadow,
+  r as colors,
+  n as fontSize,
+  t as fontSizeLineHeight,
+  i as height,
+  c as letterSpacing,
+  g as lineHeight,
+  b as maxWidth,
+  u as opacity,
+  m as spacing,
+  l as transition,
+  s as weights,
+  p as width,
+  h as zIndex
+};

package/lib/sheet.template.js

@@ -0,0 +1,129 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { MenuIcon as s, LargeXIcon as b } from "@webstudio-is/icons/svg";
+import { $ as o, PlaceholderValue as n, css as i } from "@webstudio-is/template";
+import { radix as t } from "./shared/proxy.js";
+import { fontSize as d, lineHeight as p, letterSpacing as u, fontSizeLineHeight as w, colors as a, spacing as l, borderRadius as f, opacity as c, height as g, boxShadow as h, width as x, zIndex as m, borderWidth as $, maxWidth as y, blur as S } from "./shared/theme.js";
+import { getButtonStyle as D } from "./shared/styles.js";
+const B = {
+  category: "radix",
+  icon: s,
+  description: "Displays content in a menu that slides out from the side of the screen, triggered by a button. Use this component for a typical mobile hamburger menu.",
+  order: 1,
+  template: /* @__PURE__ */ r(t.Dialog, { "ws:label": "Sheet", children: [
+    /* @__PURE__ */ e(t.DialogTrigger, { "ws:label": "Sheet Trigger", children: /* @__PURE__ */ e(o.Button, { "ws:style": D("ghost", "icon"), children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Hamburger Menu Svg", code: s }) }) }),
+    /* @__PURE__ */ e(
+      t.DialogOverlay,
+      {
+        "ws:label": "Sheet Overlay",
+        "ws:style": i`
+          position: fixed;
+          inset: 0;
+          z-index: ${m[50]};
+          background-color: rgb(255 255 255 / 0.8);
+          backdrop-filter: ${S.sm};
+          /* To allow positioning Content */
+          display: flex;
+          flex-direction: column;
+          overflow: auto;
+        `,
+        children: /* @__PURE__ */ r(
+          t.DialogContent,
+          {
+            "ws:label": "Sheet Content",
+            "ws:style": i`
+            width: ${x.full};
+            z-index: ${m[50]};
+            display: flex;
+            flex-direction: column;
+            gap: ${l[4]};
+            border: ${$.DEFAULT} solid ${a.border};
+            background-color: ${a.background};
+            padding: ${l[6]};
+            box-shadow: ${h.lg};
+            position: relative;
+            /* side=left */
+            margin-right: auto;
+            max-width: ${y.sm};
+            flex-grow: 1;
+          `,
+            children: [
+              /* @__PURE__ */ r(o.Box, { "ws:label": "Navigation", "ws:tag": "nav", children: [
+                /* @__PURE__ */ r(
+                  o.Box,
+                  {
+                    "ws:label": "Sheet Header",
+                    "ws:style": i`
+                display: flex;
+                flex-direction: column;
+                gap: ${l[2]};
+              `,
+                    children: [
+                      /* @__PURE__ */ e(
+                        t.DialogTitle,
+                        {
+                          "ws:label": "Sheet Title",
+                          "ws:style": i`
+                  font-size: ${d.lg};
+                  line-height: ${p.none};
+                  letter-spacing: ${u.tight};
+                  margin: 0;
+                `,
+                          children: new n("Sheet Title")
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        t.DialogDescription,
+                        {
+                          "ws:label": "Sheet Description",
+                          "ws:style": i`
+                  font-size: ${d.sm};
+                  line-height: ${w.sm};
+                  color: ${a.mutedForeground};
+                  margin: 0;
+                `,
+                          children: new n("Sheet description text you can edit")
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(o.Text, { children: new n("The text you can edit") })
+              ] }),
+              /* @__PURE__ */ e(
+                t.DialogClose,
+                {
+                  "ws:label": "Close Button",
+                  "ws:style": i`
+              position: absolute;
+              right: ${l[4]};
+              top: ${l[4]};
+              border-radius: ${f.sm};
+              opacity: ${c[70]};
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: ${g[4]};
+              width: ${g[4]};
+              border: 0;
+              background-color: transparent;
+              outline: none;
+              &:hover {
+                opacity: ${c[100]};
+              }
+              &:focus-visible {
+                box-shadow: ${h.ring};
+              }
+            `,
+                  children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Close Icon", code: b })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] })
+};
+export {
+  B as meta
+};

package/lib/switch.js

@@ -0,0 +1,11 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as m, useState as n, useEffect as s } from "react";
+import { Thumb as d, Root as u } from "@radix-ui/react-switch";
+const C = m(({ defaultChecked: o, ...t }, r) => {
+  const e = t.checked ?? o ?? !1, [h, c] = n(e);
+  return s(() => c(e), [e]), /* @__PURE__ */ f(u, { ...t, ref: r, checked: h, onCheckedChange: c });
+}), w = d;
+export {
+  C as Switch,
+  w as SwitchThumb
+};

package/lib/switch.template.js

@@ -0,0 +1,63 @@
+import { jsx as o } from "react/jsx-runtime";
+import { css as r } from "@webstudio-is/template";
+import { radix as e } from "./shared/proxy.js";
+import { height as d, width as s, borderRadius as a, colors as t, boxShadow as i, transition as n, borderWidth as c, opacity as l } from "./shared/theme.js";
+const m = {
+  category: "radix",
+  description: "A control that allows the user to toggle between checked and not checked.",
+  order: 11,
+  template: /* @__PURE__ */ o(
+    e.Switch,
+    {
+      "ws:style": r`
+        display: inline-flex;
+        height: 24px;
+        width: 44px;
+        flex-shrink: 0;
+        cursor: pointer;
+        align-items: center;
+        border-radius: ${a.full};
+        border: ${c[2]} solid transparent;
+        transition: ${n.all};
+        &:focus-visible {
+          outline: none;
+          box-shadow: ${i.ring};
+        }
+        &:disabled {
+          cursor: not-allowed;
+          opacity: ${l[50]};
+        }
+        &[data-state="checked"] {
+          background-color: ${t.primary};
+        }
+        &[data-state="unchecked"] {
+          background-color: ${t.input};
+        }
+      `,
+      children: /* @__PURE__ */ o(
+        e.SwitchThumb,
+        {
+          "ws:style": r`
+          pointer-events: none;
+          display: block;
+          height: ${d[5]};
+          width: ${s[5]};
+          border-radius: ${a.full};
+          background-color: ${t.background};
+          box-shadow: ${i.lg};
+          transition: ${n.transform};
+          &[data-state="checked"] {
+            transform: translateX(20px);
+          }
+          &[data-state="unchecked"] {
+            transform: translateX(0px);
+          }
+        `
+        }
+      )
+    }
+  )
+};
+export {
+  m as meta
+};

package/lib/switch.ws.js

@@ -0,0 +1,40 @@
+import { SwitchIcon as e, TriggerIcon as t } from "@webstudio-is/icons/svg";
+import { button as c, span as o } from "@webstudio-is/sdk/normalize.css";
+import { radix as a } from "./shared/meta.js";
+import { buttonReset as n } from "./shared/preset-styles.js";
+import { propsSwitch as r, propsSwitchThumb as s } from "./__generated__/switch.props.js";
+const m = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [a.SwitchThumb]
+  },
+  states: [
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
+  ],
+  presetStyle: {
+    button: [c, n].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "checked", "required"],
+  props: r
+}, b = {
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  states: [
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
+  ],
+  presetStyle: {
+    span: o
+  },
+  props: s
+};
+export {
+  m as metaSwitch,
+  b as metaSwitchThumb
+};

package/lib/tabs.js

@@ -0,0 +1,62 @@
+import { jsx as i } from "react/jsx-runtime";
+import f from "await-interaction-response";
+import { forwardRef as c, useState as b, useEffect as T, useCallback as d } from "react";
+import { List as p, Root as h, Trigger as v, Content as P } from "@radix-ui/react-tabs";
+import { getIndexWithinAncestorFromProps as l } from "@webstudio-is/sdk/runtime";
+import { getClosestInstance as u } from "@webstudio-is/react-sdk/runtime";
+const w = c(
+  ({ defaultValue: n, ...e }, o) => {
+    const t = e.value ?? n ?? "", [s, a] = b(t);
+    T(() => a(t), [t]);
+    const m = d(async (g) => {
+      await f(), a(g);
+    }, []);
+    return /* @__PURE__ */ i(
+      h,
+      {
+        ref: o,
+        ...e,
+        value: s,
+        onValueChange: m
+      }
+    );
+  }
+), y = p, A = c(({ value: n, ...e }, o) => {
+  const t = l(e);
+  return /* @__PURE__ */ i(v, { ref: o, value: n ?? t ?? "", ...e });
+}), R = c(({ value: n, ...e }, o) => {
+  const t = l(e);
+  return /* @__PURE__ */ i(P, { ref: o, value: n ?? t ?? "", ...e });
+}), r = "@webstudio-is/sdk-components-react-radix", W = {
+  onNavigatorSelect: (n, e) => {
+    var o;
+    for (const t of e.instancePath)
+      if (t.component === `${r}:TabsContent` || t.component === `${r}:TabsTrigger`) {
+        const s = u(
+          e.instancePath,
+          t,
+          `${r}:Tabs`
+        ), a = n.getPropValue(t, "value") ?? ((o = n.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
+        s && a && n.setMemoryProp(s, "value", a);
+      }
+  },
+  onNavigatorUnselect: (n, e) => {
+    var o;
+    for (const t of e.instancePath)
+      if (t.component === `${r}:TabsContent` || t.component === `${r}:TabsTrigger`) {
+        const s = u(
+          e.instancePath,
+          t,
+          `${r}:Tabs`
+        ), a = n.getPropValue(t, "value") ?? ((o = n.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
+        s && a && n.setMemoryProp(s, "value", void 0);
+      }
+  }
+};
+export {
+  w as Tabs,
+  R as TabsContent,
+  y as TabsList,
+  A as TabsTrigger,
+  W as hooksTabs
+};

package/lib/tabs.template.js

@@ -0,0 +1,66 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { PlaceholderValue as o, css as a } from "@webstudio-is/template";
+import { radix as e } from "./shared/proxy.js";
+import { height as g, borderRadius as l, colors as n, spacing as i, fontSize as h, fontSizeLineHeight as b, weights as p, transition as u, boxShadow as r, opacity as m } from "./shared/theme.js";
+const d = a`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: ${l.md};
+  padding: ${i[1.5]} ${i[3]};
+  font-size: ${h.sm};
+  line-height: ${b.sm};
+  font-weight: ${p.medium};
+  transition: ${u.all};
+  &:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: ${r.ring};
+  }
+  &:disabled {
+    pointer-events: none;
+    opacity: ${m[50]};
+  }
+  &[data-state="active"] {
+    background-color: ${n.background};
+    color: ${n.foreground};
+    box-shadow: ${r.sm};
+  }
+`, c = a`
+  margin-top: ${i[2]};
+  &:focus-visible {
+    outline: none;
+    box-shadow: ${r.ring};
+  }
+`, x = {
+  category: "radix",
+  description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
+  order: 2,
+  template: /* @__PURE__ */ s(e.Tabs, { value: "0", children: [
+    /* @__PURE__ */ s(
+      e.TabsList,
+      {
+        "ws:style": a`
+          display: inline-flex;
+          height: ${g[10]};
+          align-items: center;
+          justify-content: center;
+          border-radius: ${l.md};
+          background-color: ${n.muted};
+          padding: ${i[1]};
+          color: ${n.mutedForeground};
+        `,
+        children: [
+          /* @__PURE__ */ t(e.TabsTrigger, { "ws:style": d, children: new o("Account") }),
+          /* @__PURE__ */ t(e.TabsTrigger, { "ws:style": d, children: new o("Password") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(e.TabsContent, { "ws:style": c, children: new o("Make changes to your account here.") }),
+    /* @__PURE__ */ t(e.TabsContent, { "ws:style": c, children: new o("Change your password here.") })
+  ] })
+};
+export {
+  x as meta
+};

package/lib/tabs.ws.js

@@ -0,0 +1,53 @@
+import { TabsIcon as n, HeaderIcon as o, TriggerIcon as s, ContentIcon as r } from "@webstudio-is/icons/svg";
+import { div as e, button as a } from "@webstudio-is/sdk/normalize.css";
+import { radix as t } from "./shared/meta.js";
+import { buttonReset as c } from "./shared/preset-styles.js";
+import { propsTabs as i, propsTabsList as p, propsTabsTrigger as b, propsTabsContent as T } from "./__generated__/tabs.props.js";
+const y = {
+  icon: n,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [t.TabsList, t.TabsContent]
+  },
+  presetStyle: { div: e },
+  props: i
+}, f = {
+  icon: o,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [t.TabsTrigger]
+  },
+  presetStyle: { div: e },
+  props: p
+}, x = {
+  icon: s,
+  label: "Tab Trigger",
+  indexWithinAncestor: t.Tabs,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [{ label: "Active", selector: "[data-state=active]" }],
+  presetStyle: {
+    button: [a, c].flat()
+  },
+  props: b
+}, C = {
+  label: "Tab Content",
+  icon: r,
+  indexWithinAncestor: t.Tabs,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { div: e },
+  props: T
+};
+export {
+  y as metaTabs,
+  C as metaTabsContent,
+  f as metaTabsList,
+  x as metaTabsTrigger
+};

package/lib/templates.js

@@ -0,0 +1,28 @@
+import { meta as a } from "./label.template.js";
+import { meta as r } from "./tabs.template.js";
+import { meta as p } from "./sheet.template.js";
+import { meta as x } from "./dialog.template.js";
+import { meta as i } from "./switch.template.js";
+import { meta as c } from "./checkbox.template.js";
+import { meta as h } from "./collapsible.template.js";
+import { meta as S } from "./accordion.template.js";
+import { meta as g } from "./tooltip.template.js";
+import { meta as v } from "./popover.template.js";
+import { meta as T } from "./radio-group.template.js";
+import { meta as w } from "./select.template.js";
+import { meta as D } from "./navigation-menu.template.js";
+export {
+  S as Accordion,
+  c as Checkbox,
+  h as Collapsible,
+  x as Dialog,
+  a as Label,
+  D as NavigationMenu,
+  v as Popover,
+  T as RadioGroup,
+  w as Select,
+  p as Sheet,
+  i as Switch,
+  r as Tabs,
+  g as Tooltip
+};

package/lib/tooltip.js

@@ -0,0 +1,48 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-tooltip";
+import { getClosestInstance as p } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as c, useState as l, useEffect as f, Children as d } from "react";
+const T = c((n, e) => {
+  const o = n.open ?? !1, [t, a] = l(o);
+  return f(() => a(o), [o]), /* @__PURE__ */ r(i.Provider, { children: /* @__PURE__ */ r(i.Root, { ...n, open: t, onOpenChange: a }) });
+}), C = c(({ children: n, ...e }, o) => {
+  const t = d.toArray(n)[0];
+  return /* @__PURE__ */ r(i.Trigger, { asChild: !0, ref: o, ...e, children: t ?? /* @__PURE__ */ r("button", { children: "Add button or link" }) });
+}), P = c(({ sideOffset: n = 4, hideWhenDetached: e = !0, ...o }, t) => /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(
+  i.Content,
+  {
+    ref: t,
+    hideWhenDetached: e,
+    sideOffset: n,
+    ...o
+  }
+) })), s = "@webstudio-is/sdk-components-react-radix", g = {
+  onNavigatorUnselect: (n, e) => {
+    for (const o of e.instancePath)
+      if (o.component === `${s}:TooltipContent`) {
+        const t = p(
+          e.instancePath,
+          o,
+          `${s}:Tooltip`
+        );
+        t && n.setMemoryProp(t, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (n, e) => {
+    for (const o of e.instancePath)
+      if (o.component === `${s}:TooltipContent`) {
+        const t = p(
+          e.instancePath,
+          o,
+          `${s}:Tooltip`
+        );
+        t && n.setMemoryProp(t, "open", !0);
+      }
+  }
+};
+export {
+  T as Tooltip,
+  P as TooltipContent,
+  C as TooltipTrigger,
+  g as hooksTooltip
+};

package/lib/tooltip.template.js

@@ -0,0 +1,33 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { $ as t, PlaceholderValue as r, css as l } from "@webstudio-is/template";
+import { radix as e } from "./shared/proxy.js";
+import { getButtonStyle as s } from "./shared/styles.js";
+import { zIndex as a, borderRadius as h, colors as i, spacing as n, fontSize as p, fontSizeLineHeight as c, boxShadow as m } from "./shared/theme.js";
+const $ = {
+  category: "radix",
+  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
+  order: 7,
+  template: /* @__PURE__ */ d(e.Tooltip, { children: [
+    /* @__PURE__ */ o(e.TooltipTrigger, { children: /* @__PURE__ */ o(t.Button, { "ws:style": s("outline"), children: new r("Button") }) }),
+    /* @__PURE__ */ o(
+      e.TooltipContent,
+      {
+        "ws:style": l`
+          z-index: ${a[50]};
+          overflow: hidden;
+          border-radius: ${h.md};
+          background-color: ${i.popover};
+          padding: ${n[1.5]} ${n[3]};
+          font-size: ${p.sm};
+          line-height: ${c.sm};
+          color: ${i.popoverForeground};
+          box-shadow: ${m.md};
+        `,
+        children: /* @__PURE__ */ o(t.Text, { children: new r("The text you can edit") })
+      }
+    )
+  ] })
+};
+export {
+  $ as meta
+};

package/lib/tooltip.ws.js

@@ -0,0 +1,35 @@
+import { TooltipIcon as t, TriggerIcon as n, ContentIcon as e } from "@webstudio-is/icons/svg";
+import { div as i } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { propsTooltip as r, propsTooltipTrigger as p, propsTooltipContent as c } from "./__generated__/tooltip.props.js";
+const g = {
+  icon: n,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  props: p
+}, T = {
+  icon: e,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div: i },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: c
+}, m = {
+  icon: t,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [o.TooltipTrigger, o.TooltipContent]
+  },
+  initialProps: ["open", "delayDuration", "disableHoverableContent"],
+  props: r
+};
+export {
+  m as metaTooltip,
+  T as metaTooltipContent,
+  g as metaTooltipTrigger
+};