welcome-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/Toast.mjs

@@ -0,0 +1,264 @@
+"use client";
+import d, { useEffect as C, useCallback as I, useState as M, useMemo as R, cloneElement as z, useContext as H } from "react";
+import v, { css as w, th as m, ThemeContext as L, ThemeProvider as W } from "@xstyled/styled-components";
+import { r as Y } from "./index-BYdkhqH4.mjs";
+import { Box as $ } from "./Box.mjs";
+import { Alert as _ } from "./Alert.mjs";
+import { CloseButton as B } from "./CloseButton.mjs";
+import { forwardRef as D } from "./System.mjs";
+import { Button as U } from "./Button.mjs";
+var j = (t) => typeof t == "function", A = (t, e) => j(t) ? t(e) : t, q = /* @__PURE__ */ (() => {
+  let t = 0;
+  return () => (++t).toString();
+})(), F = 20, E = /* @__PURE__ */ new Map(), J = 1e3, O = (t) => {
+  if (E.has(t)) return;
+  let e = setTimeout(() => {
+    E.delete(t), h({ type: 4, toastId: t });
+  }, J);
+  E.set(t, e);
+}, K = (t) => {
+  let e = E.get(t);
+  e && clearTimeout(e);
+}, S = (t, e) => {
+  switch (e.type) {
+    case 0:
+      return { ...t, toasts: [e.toast, ...t.toasts].slice(0, F) };
+    case 1:
+      return e.toast.id && K(e.toast.id), { ...t, toasts: t.toasts.map((o) => o.id === e.toast.id ? { ...o, ...e.toast } : o) };
+    case 2:
+      let { toast: s } = e;
+      return t.toasts.find((o) => o.id === s.id) ? S(t, { type: 1, toast: s }) : S(t, { type: 0, toast: s });
+    case 3:
+      let { toastId: a } = e;
+      return a ? O(a) : t.toasts.forEach((o) => {
+        O(o.id);
+      }), { ...t, toasts: t.toasts.map((o) => o.id === a || a === void 0 ? { ...o, visible: !1 } : o) };
+    case 4:
+      return e.toastId === void 0 ? { ...t, toasts: [] } : { ...t, toasts: t.toasts.filter((o) => o.id !== e.toastId) };
+    case 5:
+      return { ...t, pausedAt: e.time };
+    case 6:
+      let r = e.time - (t.pausedAt || 0);
+      return { ...t, pausedAt: void 0, toasts: t.toasts.map((o) => ({ ...o, pauseDuration: o.pauseDuration + r })) };
+  }
+}, k = [], T = { toasts: [], pausedAt: void 0 }, h = (t) => {
+  T = S(T, t), k.forEach((e) => {
+    e(T);
+  });
+}, Q = { blank: 4e3, error: 4e3, success: 2e3, loading: 1 / 0, custom: 4e3 }, V = (t = {}) => {
+  let [e, s] = M(T);
+  C(() => (k.push(s), () => {
+    let r = k.indexOf(s);
+    r > -1 && k.splice(r, 1);
+  }), [e]);
+  let a = e.toasts.map((r) => {
+    var o, i;
+    return { ...t, ...t[r.type], ...r, duration: r.duration || ((o = t[r.type]) == null ? void 0 : o.duration) || (t == null ? void 0 : t.duration) || Q[r.type], style: { ...t.style, ...(i = t[r.type]) == null ? void 0 : i.style, ...r.style } };
+  });
+  return { ...e, toasts: a };
+}, X = (t, e = "blank", s) => ({ createdAt: Date.now(), visible: !0, type: e, ariaProps: { role: "status", "aria-live": "polite" }, message: t, pauseDuration: 0, ...s, id: (s == null ? void 0 : s.id) || q() }), x = (t) => (e, s) => {
+  let a = X(e, t, s);
+  return h({ type: 2, toast: a }), a.id;
+}, u = (t, e) => x("blank")(t, e);
+u.error = x("error");
+u.success = x("success");
+u.loading = x("loading");
+u.custom = x("custom");
+u.dismiss = (t) => {
+  h({ type: 3, toastId: t });
+};
+u.remove = (t) => h({ type: 4, toastId: t });
+u.promise = (t, e, s) => {
+  let a = u.loading(e.loading, { ...s, ...s == null ? void 0 : s.loading });
+  return t.then((r) => (u.success(A(e.success, r), { id: a, ...s, ...s == null ? void 0 : s.success }), r)).catch((r) => {
+    u.error(A(e.error, r), { id: a, ...s, ...s == null ? void 0 : s.error });
+  }), t;
+};
+var Z = (t, e) => {
+  h({ type: 1, toast: { id: t, height: e } });
+}, tt = () => {
+  h({ type: 5, time: Date.now() });
+}, et = (t) => {
+  let { toasts: e, pausedAt: s } = V(t);
+  C(() => {
+    if (s) return;
+    let o = Date.now(), i = e.map((n) => {
+      if (n.duration === 1 / 0) return;
+      let c = (n.duration || 0) + n.pauseDuration - (o - n.createdAt);
+      if (c < 0) {
+        n.visible && u.dismiss(n.id);
+        return;
+      }
+      return setTimeout(() => u.dismiss(n.id), c);
+    });
+    return () => {
+      i.forEach((n) => n && clearTimeout(n));
+    };
+  }, [e, s]);
+  let a = I(() => {
+    s && h({ type: 6, time: Date.now() });
+  }, [s]), r = I((o, i) => {
+    let { reverseOrder: n = !1, gutter: c = 8, defaultPosition: f } = i || {}, p = e.filter((l) => (l.position || f) === (o.position || f) && l.height), g = p.findIndex((l) => l.id === o.id), y = p.filter((l, b) => b < g && l.visible).length;
+    return p.filter((l) => l.visible).slice(...n ? [y + 1] : [0, y]).reduce((l, b) => l + (b.height || 0) + c, 0);
+  }, [e]);
+  return { toasts: e, handlers: { updateHeight: Z, startPause: tt, endPause: a, calculateOffset: r } };
+}, P = u;
+function st(t = !1) {
+  const [e, s] = M(!1);
+  return C(() => {
+    s(!0);
+  }, []), R(() => t ? (a) => a : e ? (a, r, o) => Y.createPortal(a, r || document.body, o) : () => null, [t, e]);
+}
+const ot = v($)(
+  ({ isBottom: t }) => w`
+    ${m("toasts.default")}
+    ${t ? m("toasts.bottom") : m("toasts.top")}
+
+    position: fixed;
+    z-index: 9999;
+    transition: all 400ms ease-out;
+  `
+), rt = v(_)(
+  () => w`
+    position: relative;
+    padding: lg;
+    ${m("toasts.growls.default")};
+
+    div:first-of-type {
+      align-self: baseline;
+    }
+
+    button {
+      flex-shrink: 0;
+    }
+  `
+), at = v($)(
+  () => w`
+    display: flex;
+    align-items: center;
+    padding-bottom: xs;
+    ${m("toasts.growls.title")};
+
+    & > *:first-child {
+      flex-shrink: 0;
+    }
+  `
+), nt = v(_)`
+  display: flex;
+  align-items: center;
+  padding: sm md;
+  ${m("toasts.snackbar.default")};
+
+  > div {
+    align-self: center !important;
+  }
+`, it = v.box(
+  ({ variant: t }) => w`
+    ${m("toasts.snackbar.separator.default")};
+    ${m(`toasts.snackbar.separator.${t}`)};
+    padding-left: sm;
+  `
+), lt = {
+  "top-left": { top: 0, left: 0 },
+  "top-center": { top: 0, left: "50%" },
+  "top-right": { top: 0, right: 0 },
+  "bottom-left": { bottom: 0, left: 0 },
+  "bottom-center": { bottom: 0, left: "50%" },
+  "bottom-right": { bottom: 0, right: 0 }
+}, dt = ({
+  calculateOffset: t,
+  toast: e,
+  updateHeight: s
+}) => {
+  var p, g, y;
+  if (typeof e.message == "string")
+    return console.warn("You must pass a React component or a HTML element."), null;
+  const a = t(e, { reverseOrder: !1, gutter: 0 }), r = (l) => {
+    if (l && typeof e.height != "number") {
+      const b = l.getBoundingClientRect().height;
+      s(e.id, b);
+    }
+  }, o = (p = e.position) == null ? void 0 : p.includes("center"), i = (g = e.position) == null ? void 0 : g.includes("top"), n = (y = e.position) == null ? void 0 : y.includes("bottom"), c = () => {
+    e.onClose && e.onClose(), P.dismiss(e.id);
+  }, f = {
+    opacity: e.visible ? 1 : 0,
+    transform: `translate(${o ? "-50%" : "0"}, ${a * (i ? 1 : -1)}px)`,
+    ...lt[e.position]
+  };
+  return /* @__PURE__ */ d.createElement(
+    ot,
+    {
+      isBottom: n,
+      opacity: f.opacity,
+      ref: r,
+      style: f,
+      transform: f.transform,
+      ...e.ariaProps
+    },
+    z(e.message, { onClose: c })
+  );
+}, N = D(
+  ({ children: t, dataTestId: e, hasCloseButton: s = !0, icon: a, onClose: r, variant: o = "default" }, i) => {
+    const n = e ? `${e}-close-button` : void 0;
+    return /* @__PURE__ */ d.createElement(
+      rt,
+      {
+        "data-testid": e,
+        hasCloseButton: s,
+        icon: a,
+        ref: i,
+        variant: o
+      },
+      s && /* @__PURE__ */ d.createElement(
+        B,
+        {
+          dataTestId: n,
+          onClick: r,
+          position: "absolute",
+          right: "sm",
+          top: "sm"
+        }
+      ),
+      /* @__PURE__ */ d.createElement($, { pr: "xl" }, t)
+    );
+  }
+);
+N.displayName = "Growl";
+const G = D(
+  ({ children: t, cta: e, hasCloseButton: s = !0, icon: a, onClose: r, variant: o = "default", ...i }, n) => /* @__PURE__ */ d.createElement(nt, { icon: a, ref: n, variant: o, ...i }, /* @__PURE__ */ d.createElement($, { alignItems: "center", display: "flex", gap: "sm" }, t, e && /* @__PURE__ */ d.createElement(it, { variant: o }, e), s && /* @__PURE__ */ d.createElement(B, { onClick: r, size: "xs" })))
+), ut = D((t, e) => /* @__PURE__ */ d.createElement(U, { flexShrink: 0, ref: e, size: "xs", variant: "ghost", ...t }));
+G.displayName = "Snackbar";
+const Et = ({ pauseOnHover: t = !0 }) => {
+  const e = H(L), s = st(), { handlers: a, toasts: r } = et(), { calculateOffset: o, endPause: i, startPause: n, updateHeight: c } = a, f = t ? n : void 0, p = t ? i : void 0;
+  return /* @__PURE__ */ d.createElement(W, { theme: e }, r.length > 0 && s(
+    /* @__PURE__ */ d.createElement("div", { onMouseEnter: f, onMouseLeave: p }, r.map((g) => /* @__PURE__ */ d.createElement(
+      dt,
+      {
+        calculateOffset: o,
+        key: g.id,
+        toast: g,
+        updateHeight: c
+      }
+    )))
+  ));
+}, ct = ({ children: t, ...e }) => /* @__PURE__ */ d.createElement(at, { ...e }, t), ft = (t, e) => {
+  var o, i;
+  const r = {
+    duration: 7e3,
+    position: (typeof t == "string" ? void 0 : ((o = t == null ? void 0 : t.type) == null ? void 0 : o.displayName) || ((i = t == null ? void 0 : t.type) == null ? void 0 : i.name)) === "Growl" ? "top-right" : "bottom-center",
+    ...e
+  };
+  return P(t, r);
+}, kt = (t) => {
+  P.remove(t);
+}, Tt = (t) => {
+  P.dismiss(t);
+}, wt = () => ft, $t = { Title: ct, Growl: N, Snackbar: G, SnackbarAction: ut };
+export {
+  Et as Notifications,
+  $t as Toast,
+  Tt as dismiss,
+  kt as remove,
+  ft as toast,
+  wt as useToast
+};

package/dist/Toggle.js

@@ -0,0 +1,75 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),a=require("./index-C_r0bVmL.js"),s=require("./System.js"),t=require("@xstyled/styled-components"),p=t(a.Checkbox).withConfig({shouldForwardProp:s.shouldForwardProp})(({order:o="-1",size:e})=>t.css`
+    ${t.th("toggles.item.default")};
+    ${t.th(`toggles.item.sizes.${e}`)};
+    position: relative;
+    display: block;
+    appearance: none;
+    outline: none !important; /* important for firefox */
+    cursor: pointer;
+    transition: medium;
+    order: ${o};
+
+    &::after {
+      ${t.th("toggles.after.default")};
+      ${t.th(`toggles.after.sizes.${e}`)};
+      content: '';
+      top: 0;
+      bottom: 0;
+      left: 2;
+      position: absolute;
+      margin: auto;
+      transition: medium;
+      z-index: 1;
+    }
+
+    &:disabled {
+      ${t.th("toggles.item.disabled")};
+      cursor: not-allowed;
+
+      &::after {
+        ${t.th("toggles.after.disabled")};
+      }
+    }
+
+    &:checked {
+      &::after {
+        /* border + left padding + right padding */
+        transform: translateX(calc(${t.th(`toggles.item.sizes.${e}.width`)} - 100% - 0.3rem));
+      }
+
+      &:not(:disabled) {
+        ${t.th("toggles.item.checked")};
+
+        &::after {
+          ${t.th("toggles.after.checked")};
+        }
+      }
+    }
+
+    ${t.system};
+  `),m=t.box`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+`,$=t.box.withConfig({shouldForwardProp:s.shouldForwardProp})(({checked:o,size:e})=>t.css`
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    height: ${t.th(`toggles.item.sizes.${e}.height`)};
+    bottom: 0;
+
+    > svg,
+    i {
+      ${t.th(`toggles.icon.sizes.${e}`)}
+    }
+
+    ${o&&t.css`
+      left: ${t.th(`toggles.icon.position.${e}.left`)};
+      color: neutral-90;
+    `}
+
+    ${!o&&t.css`
+      right: ${t.th(`toggles.icon.position.${e}.right`)};
+    `}
+  `),g=s.forwardRef(({checked:o,checkedIcon:e,onClick:i,size:l="xs",uncheckedIcon:n,...d},c)=>{const h=e&&n;return r.createElement(m,{onClick:i},h&&r.createElement($,{checked:o,onClick:i,size:l},o?e:n),r.createElement(a.Checkbox$1,{...d,Component:p,checked:o,ref:c,size:l}))});g.displayName="Toggle";exports.Toggle=g;

package/dist/Toggle.mjs

@@ -0,0 +1,93 @@
+"use client";
+import r from "react";
+import { C as f, a as $ } from "./index-DCOLdphy.mjs";
+import { shouldForwardProp as g, forwardRef as c } from "./System.mjs";
+import s, { css as i, th as t, system as u } from "@xstyled/styled-components";
+const b = s(f).withConfig({ shouldForwardProp: g })(
+  ({ order: o = "-1", size: e }) => i`
+    ${t("toggles.item.default")};
+    ${t(`toggles.item.sizes.${e}`)};
+    position: relative;
+    display: block;
+    appearance: none;
+    outline: none !important; /* important for firefox */
+    cursor: pointer;
+    transition: medium;
+    order: ${o};
+
+    &::after {
+      ${t("toggles.after.default")};
+      ${t(`toggles.after.sizes.${e}`)};
+      content: '';
+      top: 0;
+      bottom: 0;
+      left: 2;
+      position: absolute;
+      margin: auto;
+      transition: medium;
+      z-index: 1;
+    }
+
+    &:disabled {
+      ${t("toggles.item.disabled")};
+      cursor: not-allowed;
+
+      &::after {
+        ${t("toggles.after.disabled")};
+      }
+    }
+
+    &:checked {
+      &::after {
+        /* border + left padding + right padding */
+        transform: translateX(calc(${t(`toggles.item.sizes.${e}.width`)} - 100% - 0.3rem));
+      }
+
+      &:not(:disabled) {
+        ${t("toggles.item.checked")};
+
+        &::after {
+          ${t("toggles.after.checked")};
+        }
+      }
+    }
+
+    ${u};
+  `
+), h = s.box`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+`, x = s.box.withConfig({ shouldForwardProp: g })(
+  ({ checked: o, size: e }) => i`
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    height: ${t(`toggles.item.sizes.${e}.height`)};
+    bottom: 0;
+
+    > svg,
+    i {
+      ${t(`toggles.icon.sizes.${e}`)}
+    }
+
+    ${o && i`
+      left: ${t(`toggles.icon.position.${e}.left`)};
+      color: neutral-90;
+    `}
+
+    ${!o && i`
+      right: ${t(`toggles.icon.position.${e}.right`)};
+    `}
+  `
+), w = c(
+  ({ checked: o, checkedIcon: e, onClick: a, size: l = "xs", uncheckedIcon: n, ...m }, d) => {
+    const p = e && n;
+    return /* @__PURE__ */ r.createElement(h, { onClick: a }, p && /* @__PURE__ */ r.createElement(x, { checked: o, onClick: a, size: l }, o ? e : n), /* @__PURE__ */ r.createElement($, { ...m, Component: b, checked: o, ref: d, size: l }));
+  }
+);
+w.displayName = "Toggle";
+export {
+  w as Toggle
+};

package/dist/Tooltip.js

@@ -0,0 +1,68 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),F=require("./Box.js"),I=require("./System.js"),i=require("@xstyled/styled-components"),T=require("./BYC7LY2E-BkAEL2VD.js"),S=require("./YV4JVR4I-DIthYWMj.js"),r=require("./LVA2YJMS-B2HZjIhJ.js"),q=require("./JC64G2H7-YkBMNrtl.js");function N(e={}){var n;process.env.NODE_ENV!=="production"&&e.type==="label"&&console.warn("The `type` option on the tooltip store is deprecated.","Render a visually hidden label or use the `aria-label` or `aria-labelledby` attributes on the anchor element instead.","See https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names");const o=(n=e.store)==null?void 0:n.getState(),t=T.createHovercardStore(r.__spreadProps$1(r.__spreadValues$1({},e),{placement:r.defaultValue(e.placement,o==null?void 0:o.placement,"top"),hideTimeout:r.defaultValue(e.hideTimeout,o==null?void 0:o.hideTimeout,0)})),m=r.__spreadProps$1(r.__spreadValues$1({},t.getState()),{type:r.defaultValue(e.type,o==null?void 0:o.type,"description"),skipTimeout:r.defaultValue(e.skipTimeout,o==null?void 0:o.skipTimeout,300)}),a=S.createStore(m,t,e.store);return r.__spreadValues$1(r.__spreadValues$1({},t),a)}function M(e,n,o){return S.useStoreProps(e,o,"type"),S.useStoreProps(e,o,"skipTimeout"),T.useHovercardStoreProps(e,n,o)}function j(e={}){const[n,o]=S.useStore(N,e);return M(n,o,e)}var R=r.createStoreContext([T.HovercardContextProvider],[T.HovercardScopedContextProvider]),O=R.useProviderContext,D=R.ScopedContextProvider,Y="div",L=r.createHook(function(n){var o=n,{store:t,portal:m=!0,gutter:a=8,preserveTabOrder:x=!1,hideOnHoverOutside:v=!0,hideOnInteractOutside:f=!0}=o,c=r.__objRest(o,["store","portal","gutter","preserveTabOrder","hideOnHoverOutside","hideOnInteractOutside"]);const b=O();t=t||b,r.invariant(t,process.env.NODE_ENV!=="production"&&"Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component."),c=r.useWrapElement(c,u=>r.jsxRuntimeExports.jsx(D,{value:t,children:u}),[t]);const g=t.useState(u=>u.type==="description"?"tooltip":"none");return c=r.__spreadValues({role:g},c),c=T.useHovercard(r.__spreadProps(r.__spreadValues({},c),{store:t,portal:m,gutter:a,preserveTabOrder:x,hideOnHoverOutside(u){if(r.isFalsyBooleanCallback(v,u))return!1;const d=t==null?void 0:t.getState().anchorElement;return d?!("focusVisible"in d.dataset):!0},hideOnInteractOutside:u=>{if(r.isFalsyBooleanCallback(f,u))return!1;const d=t==null?void 0:t.getState().anchorElement;return d?!r.contains(d,u.target):!0}})),c}),z=q.createDialogComponent(r.forwardRef2(function(n){const o=L(n);return r.createElement(Y,o)}),O),J="div",h=S.createStore({activeStore:null});function C(e){return()=>{const{activeStore:n}=h.getState();n===e&&h.setState("activeStore",null)}}var G=r.createHook(function(n){var o=n,{store:t,showOnHover:m=!0}=o,a=r.__objRest(o,["store","showOnHover"]);const x=O();t=t||x,r.invariant(t,process.env.NODE_ENV!=="production"&&"TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component.");const v=l.useRef(!1);l.useEffect(()=>S.sync(t,["mounted"],s=>{s.mounted||(v.current=!1)}),[t]),l.useEffect(()=>{if(t)return r.chain(C(t),S.sync(t,["mounted","skipTimeout"],s=>{if(!t)return;if(s.mounted){const{activeStore:E}=h.getState();return E!==t&&(E==null||E.hide()),h.setState("activeStore",t)}const p=setTimeout(C(t),s.skipTimeout);return()=>clearTimeout(p)}))},[t]);const f=a.onMouseEnter,c=r.useEvent(s=>{f==null||f(s),v.current=!0}),b=a.onFocusVisible,g=r.useEvent(s=>{b==null||b(s),!s.defaultPrevented&&(t==null||t.setAnchorElement(s.currentTarget),t==null||t.show())}),u=a.onBlur,d=r.useEvent(s=>{if(u==null||u(s),s.defaultPrevented)return;const{activeStore:p}=h.getState();v.current=!1,p===t&&h.setState("activeStore",null)}),$=t.useState("type"),P=t.useState(s=>{var p;return(p=s.contentElement)==null?void 0:p.id});return a=r.__spreadProps(r.__spreadValues({"aria-labelledby":$==="label"?P:void 0},a),{onMouseEnter:c,onFocusVisible:g,onBlur:d}),a=T.useHovercardAnchor(r.__spreadValues({store:t,showOnHover(s){if(!v.current||r.isFalsyBooleanCallback(m,s))return!1;const{activeStore:p}=h.getState();return p?(t==null||t.show(),!1):!0}},a)),a}),K=r.forwardRef2(function(n){const o=G(n);return r.createElement(J,o)});const W={top:"translate3d(0, -4px, 0)",right:"translate3d(4px, 0, 0)",bottom:"translate3d(0, 4px, 0)",left:"translate3d(-4px, 0, 0)",auto:"translate3d(0, 0, 0)"},X=e=>{const n=e==null?void 0:e.split("-"),o=n[0];if(n.length<2)return W[o];{let t="0, 0";return(e=="right-end"||e=="bottom-end")&&(t="4px, 4px"),(e=="right-start"||e=="top-end")&&(t="4px, -4px"),(e=="left-end"||e=="bottom-start")&&(t="-4px, 4px"),(e=="left-start"||e=="top-start")&&(t="-4px, -4px"),`translate3d(${t}, 0)`}},Q=i.css`
+  visibility: visible;
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+`,y=12,_=y*1.5,k=e=>e.includes("start")?_:e.includes("end")?`calc(100% - ${_+"px"})`:"50%",H=(e,n)=>{const o=n-_<y;return e.includes("end")?o?`${y}px`:`calc(100% - ${_}px)`:e.includes("start")?o?`${y}px`:`${_}px`:"50%"},U=i.divBox(({fixed:e,placement:n,popoverHeight:o,withArrow:t})=>i.css`
+    ${i.th("tooltips")};
+    ${i.system};
+    transition:
+      opacity ${i.th.transition("medium")},
+      transform ${i.th.transition("medium")},
+      visibility ${i.th.transition("medium")};
+    visibility: hidden;
+    opacity: 0;
+    transform-origin: top center;
+    z-index: 10;
+
+    ${e&&t&&i.css`
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        width: ${y};
+        height: ${y};
+        border-width: inherit;
+        border-style: solid;
+        border-color: transparent neutral-60 neutral-60 transparent;
+        border-bottom-right-radius: inherit;
+        clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 0%);
+        z-index: 0;
+        translate: -50% -50%;
+
+        ${n.includes("top")&&i.css`
+          top: 100%;
+          left: ${k(n)};
+          rotate: 45deg;
+        `}
+
+        ${n.includes("bottom")&&i.css`
+          bottom: 100%;
+          left: ${k(n)};
+          translate: -50% 50%;
+          rotate: 225deg;
+        `}
+
+        ${n.includes("left")&&i.css`
+          top: ${H(n,o)};
+          left: 100%;
+          rotate: -45deg;
+        `}
+
+        ${n.includes("right")&&i.css`
+          top: ${H(n,o)};
+          left: 0%;
+          rotate: 135deg;
+        `}
+      }
+    `}
+
+    ${e&&i.css`
+      transform: ${X(n)};
+    `}
+
+    [data-enter] & {
+      ${Q}
+    }
+  `),Z=i.div`
+  display: inline-block;
+`,ee=I.forwardRef(({children:e,content:n,fixed:o=!1,placement:t=o?"top":"bottom",gutter:m=8,withArrow:a,...x},v)=>{var V;const f=j({placement:t,animated:300}),[c,b]=l.useState({x:0,y:0}),{render:g,stopAnimation:u}=f,{anchorElement:d,currentPlacement:$,mounted:P,popoverElement:s}=f.useState(),p=()=>{s&&Object.assign(s.style,{display:P?"block":"none",position:"absolute",left:`${c.x}px`,top:`${c.y+window.scrollY+20}px`})},E=(V=e==null?void 0:e.props)!=null&&V.disabled?l.Children.only(l.createElement(Z,null,e)):e;return l.useEffect(()=>{function w({clientX:B,clientY:A}){b({x:B,y:A}),g()}if(d&&!o)return d.addEventListener("mousemove",w),()=>{d.removeEventListener("mousemove",w)}},[g,o,d]),n?l.createElement(l.Fragment,null,l.createElement(K,{render:E,store:f}),l.createElement(z,{fixed:o,gutter:m,ref:v,render:l.createElement(F.Box,{...x}),store:f,updatePosition:o?void 0:p},l.createElement(U,{fixed:o,onTransitionEnd:u,placement:$,popoverHeight:s==null?void 0:s.getBoundingClientRect().height,withArrow:a},n))):e});exports.Tooltip=ee;