@strapi/design-system 1.6.3 → 1.6.5

package/dist/Tooltip/Tooltip.js

@@ -1,60 +1,69 @@
-import e from "react";
-import o from "prop-types";
-import v from "styled-components";
-import { Box as x } from "../Box/Box.js";
-import { Typography as E } from "../Typography/Typography.js";
-import { Portal as T } from "../Portal/Portal.js";
-import { useTooltipHandlers as h } from "./hooks/useTooltipHandlers.js";
-import { useTooltipLayout as R } from "./hooks/useTooltipLayout.js";
-import { useId as p } from "../helpers/useId.js";
-import { VisuallyHidden as I } from "../VisuallyHidden/VisuallyHidden.js";
-const H = v(x)`
+import { jsxs as l, Fragment as x, jsx as o } from "react/jsx-runtime";
+import * as y from "react";
+import g from "styled-components";
+import { useTooltipHandlers as T } from "./hooks/useTooltipHandlers.js";
+import { useTooltipLayout as v } from "./hooks/useTooltipLayout.js";
+import { Box as I } from "../Box/Box.js";
+import { useId as d } from "../hooks/useId.js";
+import { Portal as R } from "../Portal/Portal.js";
+import { Typography as H } from "../Typography/Typography.js";
+import { VisuallyHidden as W } from "../VisuallyHidden/VisuallyHidden.js";
+const j = g(I)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
-  display: ${({ visible: t }) => t ? "revert" : "none"};
-`, a = ({ children: t, label: n, description: r, delay: d, position: s, id: m, ...c }) => {
-  const i = p(m), f = p(), { visible: l, ...u } = h(d), { tooltipWrapperRef: b, toggleSourceRef: y } = R(l, s), g = e.cloneElement(t, {
+  display: ${({
+  visible: e
+}) => e ? "revert" : "none"};
+`, S = ({
+  children: e,
+  label: n,
+  description: r,
+  delay: s = 500,
+  position: p = "top",
+  id: a,
+  ...m
+}) => {
+  const t = d(a), c = d(), {
+    visible: i,
+    ...f
+  } = T(s), {
+    tooltipWrapperRef: u,
+    toggleSourceRef: b
+  } = v(i, p), h = y.cloneElement(e, {
     tabIndex: 0,
-    "aria-labelledby": n ? i : void 0,
-    "aria-describedby": r ? i : void 0,
-    ...u
+    "aria-labelledby": n ? t : void 0,
+    "aria-describedby": r ? t : void 0,
+    ...f
+  });
+  return l(x, {
+    children: [o(R, {
+      children: l(j, {
+        id: t,
+        background: "neutral900",
+        hasRadius: !0,
+        padding: 2,
+        role: "tooltip",
+        ref: u,
+        visible: i,
+        position: "absolute",
+        ...m,
+        children: [i && o(W, {
+          id: c,
+          children: r
+        }), o(H, {
+          as: "p",
+          variant: "pi",
+          fontWeight: "bold",
+          textColor: "neutral0",
+          children: n || r
+        })]
+      })
+    }), o("span", {
+      ref: b,
+      children: h
+    })]
   });
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(T, null, /* @__PURE__ */ e.createElement(H, {
-    id: i,
-    background: "neutral900",
-    hasRadius: !0,
-    padding: 2,
-    role: "tooltip",
-    ref: b,
-    visible: l,
-    position: "absolute",
-    ...c
-  }, l && /* @__PURE__ */ e.createElement(I, {
-    id: f
-  }, r), /* @__PURE__ */ e.createElement(E, {
-    as: "p",
-    variant: "pi",
-    fontWeight: "bold",
-    textColor: "neutral0"
-  }, n || r))), /* @__PURE__ */ e.createElement("span", {
-    ref: y
-  }, g));
-};
-a.defaultProps = {
-  delay: 500,
-  id: void 0,
-  position: "top",
-  label: void 0,
-  description: void 0
-};
-a.propTypes = {
-  children: o.node.isRequired,
-  delay: o.number,
-  description: o.string,
-  id: o.string,
-  label: o.string,
-  position: o.oneOf(["top", "left", "bottom", "right"])
 };
 export {
-  a as Tooltip
+  S as Tooltip
 };

package/dist/Tooltip/hooks/useTooltipHandlers.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),n=r=>{const[u,e]=o.useState(!1),t=o.useRef(),s=()=>{t.current&&clearTimeout(t.current)};return o.useEffect(()=>()=>{s()},[]),{visible:u,onFocus:()=>{e(!0)},onBlur:()=>{e(!1)},onMouseEnter:()=>{t.current=setTimeout(()=>{e(!0)},r)},onMouseLeave:()=>{s(),e(!1)}}};exports.useTooltipHandlers=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),n=s=>{const[u,e]=o.useState(!1),t=o.useRef(null),r=()=>{typeof t.current=="number"&&(clearTimeout(t.current),t.current=null)};return o.useEffect(()=>()=>{r()},[]),{visible:u,onFocus:()=>{e(!0)},onBlur:()=>{e(!1)},onMouseEnter:()=>{t.current=setTimeout(()=>{e(!0)},s)},onMouseLeave:()=>{r(),e(!1)}}};exports.useTooltipHandlers=n;

package/dist/Tooltip/hooks/useTooltipHandlers.js

@@ -1,22 +1,22 @@
-import { useState as r, useRef as u, useEffect as c } from "react";
-const M = (s) => {
-  const [n, e] = r(!1), o = u(), t = () => {
-    o.current && clearTimeout(o.current);
+import { useState as s, useRef as u, useEffect as c } from "react";
+const p = (n) => {
+  const [r, e] = s(!1), o = u(null), t = () => {
+    typeof o.current == "number" && (clearTimeout(o.current), o.current = null);
   };
   return c(() => () => {
     t();
-  }, []), { visible: n, onFocus: () => {
+  }, []), { visible: r, onFocus: () => {
     e(!0);
   }, onBlur: () => {
     e(!1);
   }, onMouseEnter: () => {
     o.current = setTimeout(() => {
       e(!0);
-    }, s);
+    }, n);
   }, onMouseLeave: () => {
     t(), e(!1);
   } };
 };
 export {
-  M as useTooltipHandlers
+  p as useTooltipHandlers
 };

package/dist/Tooltip/hooks/useTooltipLayout.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),c=require("../utils/positionTooltip.cjs"),n=(e,u)=>{const l=o.useRef(null),s=o.useRef(null);return o.useLayoutEffect(()=>{if(e){const t=l.current,r=s.current,i=c.positionTooltip(t,r,u);t.style.left=`${i.left}px`,t.style.top=`${i.top}px`}},[u,e]),{tooltipWrapperRef:l,toggleSourceRef:s}};exports.useTooltipLayout=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),c=require("../utils/positionTooltip.cjs"),n=(e,u)=>{const l=o.useRef(null),s=o.useRef(null);return o.useLayoutEffect(()=>{if(e){const t=l.current,i=s.current;if(t&&i){const r=c.positionTooltip(t,i,u);t.style.left=`${r.left}px`,t.style.top=`${r.top}px`}}},[u,e]),{tooltipWrapperRef:l,toggleSourceRef:s}};exports.useTooltipLayout=n;

package/dist/Tooltip/hooks/useTooltipLayout.js

@@ -1,11 +1,14 @@
-import { useRef as n, useLayoutEffect as c } from "react";
-import { positionTooltip as s } from "../utils/positionTooltip.js";
+import { useRef as u, useLayoutEffect as c } from "react";
+import { positionTooltip as f } from "../utils/positionTooltip.js";
 const g = (o, e) => {
-  const r = n(null), l = n(null);
+  const r = u(null), l = u(null);
   return c(() => {
     if (o) {
-      const t = r.current, u = l.current, p = s(t, u, e);
-      t.style.left = `${p.left}px`, t.style.top = `${p.top}px`;
+      const t = r.current, p = l.current;
+      if (t && p) {
+        const n = f(t, p, e);
+        t.style.left = `${n.left}px`, t.style.top = `${n.top}px`;
+      }
     }
   }, [e, o]), { tooltipWrapperRef: r, toggleSourceRef: l };
 };

package/dist/Typography/Typography.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("./utils.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=i(n),l={fontSize:!0,fontWeight:!0},a=s.default.span.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("./utils.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=i(n),a={fontSize:!0,fontWeight:!0},l=s.default.span.withConfig({shouldForwardProp:(e,t)=>!a[e]&&t(e)})`
   ${o.variantStyle}
   ${o.ellipsisStyle}
 
@@ -9,5 +9,6 @@
   line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,void 0)};
   color: ${o.handleColor};
   text-align: ${({textAlign:e})=>e};
+  text-decoration: ${({textDecoration:e})=>e};
   text-transform: ${({textTransform:e})=>e};
-`;exports.Typography=a;
+`;exports.Typography=l;

package/dist/Typography/Typography.js

@@ -5,7 +5,7 @@ const s = {
   fontSize: !0,
   fontWeight: !0
 }, d = i.span.withConfig({
-  shouldForwardProp: (e, t) => !s[e] && t(e)
+  shouldForwardProp: (t, e) => !s[t] && e(t)
 })`
   ${r}
   ${n}
@@ -13,24 +13,27 @@ const s = {
   // These properties need to come after {variantStyle}, because they might
   // overwrite a variant attribute
   font-weight: ${({
-  theme: e,
-  fontWeight: t
-}) => o(e.fontWeights, t, void 0)};
+  theme: t,
+  fontWeight: e
+}) => o(t.fontWeights, e, void 0)};
   font-size: ${({
-  theme: e,
-  fontSize: t
-}) => o(e.fontSizes, t, void 0)};
+  theme: t,
+  fontSize: e
+}) => o(t.fontSizes, e, void 0)};
   line-height: ${({
-  theme: e,
-  lineHeight: t
-}) => o(e.lineHeights, t, void 0)};
+  theme: t,
+  lineHeight: e
+}) => o(t.lineHeights, e, void 0)};
   color: ${a};
   text-align: ${({
-  textAlign: e
-}) => e};
+  textAlign: t
+}) => t};
+  text-decoration: ${({
+  textDecoration: t
+}) => t};
   text-transform: ${({
-  textTransform: e
-}) => e};
+  textTransform: t
+}) => t};
 `;
 export {
   d as Typography

package/dist/helpers/deprecations.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="[@strapi/design-system]:",i=n=>{const e=n;let t=!1;if(typeof e!="function")throw new TypeError(`${r} once requires a function parameter`);return(...o)=>{t||(e(...o),t=!0)}};exports.once=i;exports.prefix=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="[@strapi/design-system]:",s=n=>{const e=n;let t=!1;if(typeof e!="function")throw new TypeError(`${r} once requires a function parameter`);return(...o)=>{t||(e(...o),t=!0)}};exports.PREFIX=r;exports.once=s;

package/dist/helpers/deprecations.js

@@ -1,13 +1,13 @@
-const o = "[@strapi/design-system]:", c = (t) => {
-  const e = t;
-  let r = !1;
+const o = "[@strapi/design-system]:", c = (n) => {
+  const e = n;
+  let t = !1;
   if (typeof e != "function")
     throw new TypeError(`${o} once requires a function parameter`);
-  return (...n) => {
-    r || (e(...n), r = !0);
+  return (...r) => {
+    t || (e(...r), t = !0);
   };
 };
 export {
-  c as once,
-  o as prefix
+  o as PREFIX,
+  c as once
 };

package/dist/helpers/objects.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./arrays.cjs");function b(e,i){return typeof e=="string"?!1:i in e}function n(e){return e&&typeof e=="object"&&!Array.isArray(e)}function o(e,...i){if(!i.length)return e;const r=i.shift();if(r==null)return e;const c=n(e)&&n(r),t=f.isArray(e)&&f.isArray(r);if(c||t)for(const s of Object.keys(r)){const u=n(r[s]),y=f.isArray(r[s]);u||y?(e[s]||Object.assign(e,{[s]:u?{}:[]}),o(e[s],r[s])):c?Object.assign(e,{[s]:r[s]}):e.push(r[s])}return o(e,...i)}exports.isKeyOf=b;exports.isObject=n;exports.mergeDeep=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./arrays.cjs");function b(e,i){return typeof e=="string"?!1:i in e}function n(e){return e&&typeof e=="object"&&!Array.isArray(e)}function o(e,...i){if(!i.length)return e;const r=i.shift();if(r===void 0)return e;const c=n(e)&&n(r),t=f.isArray(e)&&f.isArray(r);if(c||t)for(const s of Object.keys(r)){const u=n(r[s]),y=f.isArray(r[s]);u||y?(e[s]||Object.assign(e,{[s]:u?{}:[]}),o(e[s],r[s])):c?Object.assign(e,{[s]:r[s]}):e.push(r[s])}return o(e,...i)}exports.isKeyOf=b;exports.isObject=n;exports.mergeDeep=o;

package/dist/helpers/objects.js

@@ -9,7 +9,7 @@ function u(n, ...s) {
   if (!s.length)
     return n;
   const i = s.shift();
-  if (i == null)
+  if (i === void 0)
     return n;
   const o = f(n) && f(i), b = e(n) && e(i);
   if (o || b)

package/dist/helpers/useElementOnScreen.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),o=r=>{const e=n.useRef(null),[c,u]=n.useState(!0),i=([t])=>{u(t.isIntersecting)};return n.useEffect(()=>{const t=e.current,s=new IntersectionObserver(i,r);return t&&s.observe(e.current),()=>{t&&s.disconnect()}},[e,r]),[e,c]};exports.useElementOnScreen=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),s=require("../hooks/useElementOnScreen.cjs"),r=e.once(console.warn),t=(...n)=>(r(`${e.PREFIX} useElementOnScreen has moved. Please import it from "@strapi/design-system/hooks/useElementOnScreen"`),s.useElementOnScreen(...n));exports.useElementOnScreen=t;

package/dist/helpers/useElementOnScreen.js

@@ -1,15 +1,6 @@
-import { useRef as o, useState as u, useEffect as l } from "react";
-const b = (t) => {
-  const e = o(null), [s, c] = u(!0), i = ([n]) => {
-    c(n.isIntersecting);
-  };
-  return l(() => {
-    const n = e.current, r = new IntersectionObserver(i, t);
-    return n && r.observe(e.current), () => {
-      n && r.disconnect();
-    };
-  }, [e, t]), [e, s];
-};
+import { once as n, PREFIX as r } from "./deprecations.js";
+import { useElementOnScreen as s } from "../hooks/useElementOnScreen.js";
+const t = n(console.warn), c = (...e) => (t(`${r} useElementOnScreen has moved. Please import it from "@strapi/design-system/hooks/useElementOnScreen"`), s(...e));
 export {
-  b as useElementOnScreen
+  c as useElementOnScreen
 };

package/dist/helpers/useId.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(t),r=n.default["useId".toString()]||(()=>{});let a=0;const d=e=>{const[u,o]=t.useState(r());return t.useLayoutEffect(()=>{e||o(s=>s??String(a++))},[e]),e?.toString()??(u||"")};exports.useId=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),o=require("../hooks/useId.cjs"),r=e.once(console.warn),t=(...s)=>(r(`${e.PREFIX} useId has moved. Please import it from "@strapi/design-system/hooks/useId"`),o.useId(...s));exports.useId=t;

package/dist/helpers/useId.js

@@ -1,13 +1,6 @@
-import s, { useState as n, useLayoutEffect as r } from "react";
-const c = s["useId".toString()] || (() => {
-});
-let d = 0;
-const S = (t) => {
-  const [e, o] = n(c());
-  return r(() => {
-    t || o((u) => u ?? String(d++));
-  }, [t]), t?.toString() ?? (e || "");
-};
+import { once as s, PREFIX as o } from "./deprecations.js";
+import { useId as r } from "../hooks/useId.js";
+const t = s(console.warn), n = (...e) => (t(`${o} useId has moved. Please import it from "@strapi/design-system/hooks/useId"`), r(...e));
 export {
-  S as useId
+  n as useId
 };

package/dist/helpers/useIntersection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t,e])};exports.useIntersection=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),t=require("../hooks/useIntersection.cjs"),n=e.once(console.warn),o=(...s)=>(n(`${e.PREFIX} useIntersection has moved. Please import it from "@strapi/design-system/hooks/useIntersection"`),t.useIntersection(...s));exports.useIntersection=o;

package/dist/helpers/useIntersection.js

@@ -1,23 +1,6 @@
-import { useEffect as m } from "react";
-import { useCallbackRef as p } from "@radix-ui/react-use-callback-ref";
-const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
-  const e = p(s);
-  m(() => {
-    if (r)
-      return;
-    const u = {
-      root: t.current,
-      rootMargin: "0px"
-    }, f = (g) => {
-      g.forEach((i) => {
-        i.isIntersecting && t.current.scrollHeight > t.current.clientHeight && e(i);
-      });
-    }, o = new IntersectionObserver(f, u), c = t.current.querySelector(n);
-    return c && o.observe(c), () => {
-      o.disconnect();
-    };
-  }, [r, e, n, t]);
-};
+import { once as s, PREFIX as t } from "./deprecations.js";
+import { useIntersection as o } from "../hooks/useIntersection.js";
+const n = s(console.warn), c = (...e) => (n(`${t} useIntersection has moved. Please import it from "@strapi/design-system/hooks/useIntersection"`), o(...e));
 export {
-  E as useIntersection
+  c as useIntersection
 };

package/dist/helpers/useLockScroll.cjs

@@ -1 +1 @@
-"use strict";const c=require("react"),e=s=>{c.useEffect(()=>(s&&document.body.classList.add("lock-body-scroll"),()=>{document.body.classList.remove("lock-body-scroll")}),[s])};module.exports=e;
+"use strict";const o=require("./deprecations.cjs"),s=require("../hooks/useLockScroll.cjs"),c=o.once(console.warn),r=(...e)=>(c(`${o.PREFIX} useLockScroll has moved. Please import it from "@strapi/design-system/hooks/useLockScroll"`),s(...e));module.exports=r;

package/dist/helpers/useLockScroll.js

@@ -1,9 +1,6 @@
-import { useEffect as s } from "react";
-const e = (o) => {
-  s(() => (o && document.body.classList.add("lock-body-scroll"), () => {
-    document.body.classList.remove("lock-body-scroll");
-  }), [o]);
-};
+import { once as e, PREFIX as r } from "./deprecations.js";
+import s from "../hooks/useLockScroll.js";
+const c = e(console.warn), a = (...o) => (c(`${r} useLockScroll has moved. Please import it from "@strapi/design-system/hooks/useLockScroll"`), s(...o));
 export {
-  e as default
+  a as default
 };

package/dist/helpers/usePrevious.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=t=>{const e=r.useRef();return r.useEffect(()=>{e.current=t}),e.current};exports.usePrevious=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),o=require("../hooks/usePrevious.cjs"),r=e.once(console.warn),u=(...s)=>(r(`${e.PREFIX} usePrevious has moved. Please import it from "@strapi/design-system/hooks/usePrevious"`),o.usePrevious(...s));exports.usePrevious=u;

package/dist/helpers/usePrevious.js

@@ -1,10 +1,6 @@
-import { useRef as t, useEffect as u } from "react";
-const s = (r) => {
-  const e = t();
-  return u(() => {
-    e.current = r;
-  }), e.current;
-};
+import { once as s, PREFIX as o } from "./deprecations.js";
+import { usePrevious as r } from "../hooks/usePrevious.js";
+const i = s(console.warn), m = (...e) => (i(`${o} usePrevious has moved. Please import it from "@strapi/design-system/hooks/usePrevious"`), r(...e));
 export {
-  s as usePrevious
+  m as usePrevious
 };

package/dist/helpers/useResizeObserver.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("@radix-ui/react-use-callback-ref"),n=(e,a)=>{const t=i.useCallbackRef(a);c.useLayoutEffect(()=>{const r=new ResizeObserver(t);return Array.isArray(e)?e.forEach(s=>{s.current&&r.observe(s.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[e,t])};exports.useResizeObserver=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),r=require("../hooks/useResizeObserver.cjs"),o=e.once(console.warn),i=(...s)=>(o(`${e.PREFIX} useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"`),r.useResizeObserver(...s));exports.useResizeObserver=i;

package/dist/helpers/useResizeObserver.js

@@ -1,16 +1,6 @@
-import { useLayoutEffect as f } from "react";
-import { useCallbackRef as s } from "@radix-ui/react-use-callback-ref";
-const c = (e, i) => {
-  const t = s(i);
-  f(() => {
-    const r = new ResizeObserver(t);
-    return Array.isArray(e) ? e.forEach((n) => {
-      n.current && r.observe(n.current);
-    }) : e.current && r.observe(e.current), () => {
-      r.disconnect();
-    };
-  }, [e, t]);
-};
+import { once as s, PREFIX as r } from "./deprecations.js";
+import { useResizeObserver as o } from "../hooks/useResizeObserver.js";
+const i = s(console.warn), n = (...e) => (i(`${r} useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"`), o(...e));
 export {
-  c as useResizeObserver
+  n as useResizeObserver
 };

package/dist/hooks/useElementOnScreen.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),o=r=>{const e=n.useRef(null),[c,u]=n.useState(!0),i=([t])=>{u(t.isIntersecting)};return n.useEffect(()=>{const t=e.current,s=new IntersectionObserver(i,r);return t&&s.observe(e.current),()=>{t&&s.disconnect()}},[e,r]),[e,c]};exports.useElementOnScreen=o;

package/dist/hooks/useElementOnScreen.js

@@ -0,0 +1,15 @@
+import { useRef as o, useState as u, useEffect as l } from "react";
+const b = (t) => {
+  const e = o(null), [s, c] = u(!0), i = ([n]) => {
+    c(n.isIntersecting);
+  };
+  return l(() => {
+    const n = e.current, r = new IntersectionObserver(i, t);
+    return n && r.observe(e.current), () => {
+      n && r.disconnect();
+    };
+  }, [e, t]), [e, s];
+};
+export {
+  b as useElementOnScreen
+};

package/dist/hooks/useId.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(t),r=n.default["useId".toString()]||(()=>{});let a=0;const d=e=>{const[u,o]=t.useState(r());return t.useLayoutEffect(()=>{e||o(s=>s??String(a++))},[e]),e?.toString()??(u||"")};exports.useId=d;

package/dist/hooks/useId.js

@@ -0,0 +1,13 @@
+import s, { useState as n, useLayoutEffect as r } from "react";
+const c = s["useId".toString()] || (() => {
+});
+let d = 0;
+const S = (t) => {
+  const [e, o] = n(c());
+  return r(() => {
+    t || o((u) => u ?? String(d++));
+  }, [t]), t?.toString() ?? (e || "");
+};
+export {
+  S as useId
+};

package/dist/hooks/useIntersection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r||!e.current)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t])};exports.useIntersection=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t,e])};exports.useIntersection=v;

package/dist/hooks/useIntersection.js

@@ -3,20 +3,20 @@ import { useCallbackRef as p } from "@radix-ui/react-use-callback-ref";
 const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
   const e = p(s);
   m(() => {
-    if (r || !t.current)
+    if (r)
       return;
     const u = {
       root: t.current,
       rootMargin: "0px"
     }, f = (g) => {
       g.forEach((i) => {
-        i.isIntersecting && t.current && t.current.scrollHeight > t.current.clientHeight && e(i);
+        i.isIntersecting && t.current.scrollHeight > t.current.clientHeight && e(i);
       });
     }, o = new IntersectionObserver(f, u), c = t.current.querySelector(n);
     return c && o.observe(c), () => {
       o.disconnect();
     };
-  }, [r, e, n]);
+  }, [r, e, n, t]);
 };
 export {
   E as useIntersection

package/dist/hooks/useLockScroll.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react"),e=s=>{c.useEffect(()=>(s&&document.body.classList.add("lock-body-scroll"),()=>{document.body.classList.remove("lock-body-scroll")}),[s])};module.exports=e;

package/dist/hooks/useLockScroll.js

@@ -0,0 +1,9 @@
+import { useEffect as s } from "react";
+const e = (o) => {
+  s(() => (o && document.body.classList.add("lock-body-scroll"), () => {
+    document.body.classList.remove("lock-body-scroll");
+  }), [o]);
+};
+export {
+  e as default
+};

package/dist/hooks/usePrevious.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=t=>{const e=r.useRef();return r.useEffect(()=>{e.current=t}),e.current};exports.usePrevious=u;

package/dist/hooks/usePrevious.js

@@ -0,0 +1,10 @@
+import { useRef as t, useEffect as u } from "react";
+const s = (r) => {
+  const e = t();
+  return u(() => {
+    e.current = r;
+  }), e.current;
+};
+export {
+  s as usePrevious
+};

package/dist/hooks/useResizeObserver.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("@radix-ui/react-use-callback-ref"),n=(e,a)=>{const t=i.useCallbackRef(a);c.useLayoutEffect(()=>{const r=new ResizeObserver(t);return Array.isArray(e)?e.forEach(s=>{s.current&&r.observe(s.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[e,t])};exports.useResizeObserver=n;

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,16 @@
+import { useLayoutEffect as f } from "react";
+import { useCallbackRef as s } from "@radix-ui/react-use-callback-ref";
+const c = (e, i) => {
+  const t = s(i);
+  f(() => {
+    const r = new ResizeObserver(t);
+    return Array.isArray(e) ? e.forEach((n) => {
+      n.current && r.observe(n.current);
+    }) : e.current && r.observe(e.current), () => {
+      r.disconnect();
+    };
+  }, [e, t]);
+};
+export {
+  c as useResizeObserver
+};

package/dist/themes/extendTheme.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../helpers/objects.cjs"),s=require("./lightTheme/index.cjs"),n=t=>`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./lightTheme/index.cjs"),r=require("../helpers/objects.cjs"),n=t=>`
 ${t}
 
 The following is an example:

package/dist/themes/extendTheme.js

@@ -1,5 +1,5 @@
-import { isObject as r, mergeDeep as h } from "../helpers/objects.js";
-import { lightTheme as m } from "./lightTheme/index.js";
+import { lightTheme as h } from "./lightTheme/index.js";
+import { isObject as r, mergeDeep as m } from "../helpers/objects.js";
 const n = (t) => `
 ${t}
 
@@ -9,7 +9,7 @@ The following is an example:
 import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
-    ${Object.keys(m).map((e) => `${e}: /* put the overrides for the ${e} key */,`).join(`
+    ${Object.keys(h).map((e) => `${e}: /* put the overrides for the ${e} key */,`).join(`
 `)}
 })
 `, a = (t, e) => {
@@ -21,7 +21,7 @@ const myCustomTheme = extendTheme(lightTheme, {
     const o = n("The second argument should be an object and corresponds to the keys of the theme you want to override.");
     throw new Error(o);
   }
-  return h(t ?? {}, e ?? {});
+  return m(t ?? {}, e ?? {});
 };
 export {
   a as extendTheme

package/dist/v2/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),h=require("prop-types"),p=require("styled-components"),m=require("../../Box/Box.cjs"),y=require("./Divider.cjs"),s=require("../../Flex/Flex.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(l),t=i(h),b=i(p),g=b.default(s.Flex)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),h=require("prop-types"),p=require("styled-components"),m=require("./Divider.cjs"),y=require("../../Box/Box.cjs"),s=require("../../Flex/Flex.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(l),t=i(h),b=i(p),g=b.default(s.Flex)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
@@ -6,4 +6,4 @@
   :first-child {
     margin-left: ${({theme:e})=>`calc(-1*${e.spaces[2]})`};
   }
-`,n=({label:e,children:o,...d})=>{const a=l.Children.toArray(o);return r.default.createElement(m.Box,{"aria-label":e,...d},r.default.createElement(g,{as:"ol",horizontal:!0},l.Children.map(a,(c,u)=>{const f=a.length>1&&u+1<a.length;return r.default.createElement(s.Flex,{inline:!0,as:"li"},c,f&&r.default.createElement(y.Divider,null))})))};n.displayName="Breadcrumbs";n.propTypes={children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,label:t.default.string.isRequired};exports.Breadcrumbs=n;
+`,n=({label:e,children:o,...d})=>{const a=l.Children.toArray(o);return r.default.createElement(y.Box,{"aria-label":e,...d},r.default.createElement(g,{as:"ol",horizontal:!0},l.Children.map(a,(c,u)=>{const f=a.length>1&&u+1<a.length;return r.default.createElement(s.Flex,{inline:!0,as:"li"},c,f&&r.default.createElement(m.Divider,null))})))};n.displayName="Breadcrumbs";n.propTypes={children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,label:t.default.string.isRequired};exports.Breadcrumbs=n;