@strapi/design-system 1.4.0-beta.0 → 1.4.0-beta.1

package/dist/ToggleInput/ToggleInput.js

@@ -1,63 +1,95 @@
-import r from "react";
-import d from "styled-components";
-import e from "prop-types";
-import { sizes as x } from "../themes/sizes.js";
-import { useId as y } from "../helpers/useId.js";
-import { Field as T } from "../Field/Field.js";
-import { FieldLabel as v } from "../Field/FieldLabel.js";
+var C = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
+var u = (e, t, r) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, x = (e, t) => {
+  for (var r in t || (t = {}))
+    b.call(t, r) && u(e, r, t[r]);
+  if (n)
+    for (var r of n(t))
+      E.call(t, r) && u(e, r, t[r]);
+  return e;
+};
+var y = (e, t) => {
+  var r = {};
+  for (var i in e)
+    b.call(e, i) && t.indexOf(i) < 0 && (r[i] = e[i]);
+  if (e != null && n)
+    for (var i of n(e))
+      t.indexOf(i) < 0 && E.call(e, i) && (r[i] = e[i]);
+  return r;
+};
+import l from "react";
+import T from "styled-components";
+import o from "prop-types";
+import { sizes as I } from "../themes/sizes.js";
+import { useId as O } from "../helpers/useId.js";
+import { Field as z } from "../Field/Field.js";
+import { FieldLabel as q } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as F } from "../Field/FieldHint.js";
-import { FieldError as h } from "../Field/FieldError.js";
+import { FieldHint as A } from "../Field/FieldHint.js";
+import { FieldError as B } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Stack as k } from "../Stack/Stack.js";
-import { Flex as C } from "../Flex/Flex.js";
-import { TextButton as I } from "../TextButton/TextButton.js";
-import { ToggleCheckbox as O } from "../ToggleCheckbox/ToggleCheckbox.js";
-const z = d(T)`
+import { Stack as L } from "../Stack/Stack.js";
+import { Flex as P } from "../Flex/Flex.js";
+import { TextButton as _ } from "../TextButton/TextButton.js";
+import { ToggleCheckbox as j } from "../ToggleCheckbox/ToggleCheckbox.js";
+const w = T(z)`
   max-width: 320px;
-`, q = d(I)`
+`, H = T(_)`
   align-self: flex-end;
   margin-left: auto;
-`, o = ({
-  disabled: t,
-  size: s,
-  error: c,
-  hint: f,
-  label: i,
-  name: l,
-  labelAction: g,
-  required: u,
-  id: b,
-  onClear: n,
-  clearLabel: m,
-  checked: a,
-  ...E
-}) => {
-  const p = y("toggleinput", b);
-  return /* @__PURE__ */ r.createElement(z, {
-    name: l,
-    hint: f,
-    error: c,
-    id: p
-  }, /* @__PURE__ */ r.createElement(k, {
+`, m = (M) => {
+  var f = M, {
+    disabled: e,
+    size: t,
+    error: r,
+    hint: i,
+    label: a,
+    name: p,
+    labelAction: v,
+    required: F,
+    id: h,
+    onClear: d,
+    clearLabel: s,
+    checked: c
+  } = f, k = y(f, [
+    "disabled",
+    "size",
+    "error",
+    "hint",
+    "label",
+    "name",
+    "labelAction",
+    "required",
+    "id",
+    "onClear",
+    "clearLabel",
+    "checked"
+  ]);
+  const g = O("toggleinput", h);
+  return /* @__PURE__ */ l.createElement(w, {
+    name: p,
+    hint: i,
+    error: r,
+    id: g
+  }, /* @__PURE__ */ l.createElement(L, {
     spacing: 1
-  }, /* @__PURE__ */ r.createElement(C, null, /* @__PURE__ */ r.createElement(v, {
-    required: u,
-    action: g
-  }, i), m && n && a !== null && !t && /* @__PURE__ */ r.createElement(q, {
-    onClick: n
-  }, m)), /* @__PURE__ */ r.createElement(O, {
-    id: p,
-    size: s,
-    name: l,
-    checked: a,
-    disabled: t,
-    ...E
-  }, i), /* @__PURE__ */ r.createElement(F, null), /* @__PURE__ */ r.createElement(h, null)));
+  }, /* @__PURE__ */ l.createElement(P, null, /* @__PURE__ */ l.createElement(q, {
+    required: F,
+    action: v
+  }, a), s && d && c !== null && !e && /* @__PURE__ */ l.createElement(H, {
+    onClick: d
+  }, s)), /* @__PURE__ */ l.createElement(j, x({
+    id: g,
+    size: t,
+    name: p,
+    checked: c,
+    disabled: e
+  }, k), a), /* @__PURE__ */ l.createElement(A, null), /* @__PURE__ */ l.createElement(B, null)));
 };
-o.displayName = "ToggleInput";
-o.defaultProps = {
+m.displayName = "ToggleInput";
+m.defaultProps = {
   checked: !1,
   clearLabel: void 0,
   disabled: !1,
@@ -71,20 +103,20 @@ o.defaultProps = {
   required: !1,
   size: "M"
 };
-o.propTypes = {
-  checked: e.bool,
-  clearLabel: e.string,
-  disabled: e.bool,
-  error: e.string,
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
-  id: e.string,
-  label: e.string,
-  labelAction: e.node,
-  name: e.string,
-  onClear: e.func,
-  required: e.bool,
-  size: e.oneOf(Object.keys(x.input))
+m.propTypes = {
+  checked: o.bool,
+  clearLabel: o.string,
+  disabled: o.bool,
+  error: o.string,
+  hint: o.oneOfType([o.string, o.node, o.arrayOf(o.node)]),
+  id: o.string,
+  label: o.string,
+  labelAction: o.node,
+  name: o.string,
+  onClear: o.func,
+  required: o.bool,
+  size: o.oneOf(Object.keys(I.input))
 };
 export {
-  o as ToggleInput
+  m as ToggleInput
 };

package/dist/Tooltip/Tooltip.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),q=require("prop-types"),v=require("styled-components"),j=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),_=require("../Portal/Portal.cjs"),H=require("./hooks/useTooltipHandlers.cjs"),P=require("./hooks/useTooltipLayout.cjs"),n=require("../helpers/useId.cjs"),E=require("../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(m),o=r(q),I=r(v),R=I.default(j.Box)`
+"use strict";var E=Object.defineProperty;var r=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var g=(e,o,t)=>o in e?E(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,n=(e,o)=>{for(var t in o||(o={}))T.call(o,t)&&g(e,t,o[t]);if(r)for(var t of r(o))b.call(o,t)&&g(e,t,o[t]);return e};var u=(e,o)=>{var t={};for(var l in e)T.call(e,l)&&o.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&r)for(var l of r(e))o.indexOf(l)<0&&b.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("react"),R=require("prop-types"),B=require("styled-components"),L=require("../Box/Box.cjs"),V=require("../Typography/Typography.cjs"),k=require("../Portal/Portal.cjs"),M=require("./hooks/useTooltipHandlers.cjs"),S=require("./hooks/useTooltipLayout.cjs"),h=require("../helpers/useId.cjs"),W=require("../VisuallyHidden/VisuallyHidden.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=p(I),i=p(R),z=p(B),C=z.default(L.Box)`
   position: absolute;
   /* z-index exist because of its position inside Modals */
   z-index: 4;
   display: ${({visible:e})=>e?"revert":"none"};
-`,a=({children:e,label:d,description:l,delay:u,position:p,id:c,...f})=>{const s=n.useId("tooltip",c),y=n.useId("description"),{visible:i,...g}=H.useTooltipHandlers(u),{tooltipWrapperRef:T,toggleSourceRef:b}=P.useTooltipLayout(i,p),h=t.default.cloneElement(e,{tabIndex:0,"aria-labelledby":d?s:void 0,"aria-describedby":l?s:void 0,...g});return t.default.createElement(t.default.Fragment,null,t.default.createElement(_.Portal,null,t.default.createElement(R,{id:s,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:T,visible:i,...f},i&&t.default.createElement(E.VisuallyHidden,{id:y},l),t.default.createElement(x.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},d||l))),t.default.createElement("span",{ref:b},h))};a.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};a.propTypes={children:o.default.node.isRequired,delay:o.default.number,description:o.default.string,id:o.default.string,label:o.default.string,position:o.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=a;
+`,c=O=>{var f=O,{children:e,label:o,description:t,delay:l,position:m,id:q}=f,v=u(f,["children","label","description","delay","position","id"]);const a=h.useId("tooltip",q),j=h.useId("description"),y=M.useTooltipHandlers(l),{visible:d}=y,x=u(y,["visible"]),{tooltipWrapperRef:_,toggleSourceRef:H}=S.useTooltipLayout(d,m),P=s.default.cloneElement(e,n({tabIndex:0,"aria-labelledby":o?a:void 0,"aria-describedby":t?a:void 0},x));return s.default.createElement(s.default.Fragment,null,s.default.createElement(k.Portal,null,s.default.createElement(C,n({id:a,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:_,visible:d},v),d&&s.default.createElement(W.VisuallyHidden,{id:j},t),s.default.createElement(V.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},o||t))),s.default.createElement("span",{ref:H},P))};c.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};c.propTypes={children:i.default.node.isRequired,delay:i.default.number,description:i.default.string,id:i.default.string,label:i.default.string,position:i.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=c;

package/dist/Tooltip/Tooltip.js

@@ -1,60 +1,79 @@
-import o from "react";
-import e 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)`
+var P = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var f = (o, t, e) => t in o ? P(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, d = (o, t) => {
+  for (var e in t || (t = {}))
+    u.call(t, e) && f(o, e, t[e]);
+  if (n)
+    for (var e of n(t))
+      b.call(t, e) && f(o, e, t[e]);
+  return o;
+};
+var s = (o, t) => {
+  var e = {};
+  for (var i in o)
+    u.call(o, i) && t.indexOf(i) < 0 && (e[i] = o[i]);
+  if (o != null && n)
+    for (var i of n(o))
+      t.indexOf(i) < 0 && b.call(o, i) && (e[i] = o[i]);
+  return e;
+};
+import r from "react";
+import l from "prop-types";
+import W from "styled-components";
+import { Box as z } from "../Box/Box.js";
+import { Typography as C } from "../Typography/Typography.js";
+import { Portal as _ } from "../Portal/Portal.js";
+import { useTooltipHandlers as k } from "./hooks/useTooltipHandlers.js";
+import { useTooltipLayout as q } from "./hooks/useTooltipLayout.js";
+import { useId as y } from "../helpers/useId.js";
+import { VisuallyHidden as B } from "../VisuallyHidden/VisuallyHidden.js";
+const F = W(z)`
   position: absolute;
   /* z-index exist because of its position inside Modals */
   z-index: 4;
-  display: ${({ visible: t }) => t ? "revert" : "none"};
-`, a = ({ children: t, label: n, description: i, delay: d, position: s, id: m, ...c }) => {
-  const r = p("tooltip", m), f = p("description"), { visible: l, ...u } = h(d), { tooltipWrapperRef: b, toggleSourceRef: y } = R(l, s), g = o.cloneElement(t, {
+  display: ${({ visible: o }) => o ? "revert" : "none"};
+`, g = (L) => {
+  var m = L, { children: o, label: t, description: e, delay: i, position: v, id: x } = m, E = s(m, ["children", "label", "description", "delay", "position", "id"]);
+  const p = y("tooltip", x), T = y("description"), c = k(i), { visible: a } = c, h = s(c, ["visible"]), { tooltipWrapperRef: R, toggleSourceRef: I } = q(a, v), H = r.cloneElement(o, d({
     tabIndex: 0,
-    "aria-labelledby": n ? r : void 0,
-    "aria-describedby": i ? r : void 0,
-    ...u
-  });
-  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(T, null, /* @__PURE__ */ o.createElement(H, {
-    id: r,
+    "aria-labelledby": t ? p : void 0,
+    "aria-describedby": e ? p : void 0
+  }, h));
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(_, null, /* @__PURE__ */ r.createElement(F, d({
+    id: p,
     background: "neutral900",
     hasRadius: !0,
     padding: 2,
     role: "tooltip",
-    ref: b,
-    visible: l,
-    ...c
-  }, l && /* @__PURE__ */ o.createElement(I, {
-    id: f
-  }, i), /* @__PURE__ */ o.createElement(E, {
+    ref: R,
+    visible: a
+  }, E), a && /* @__PURE__ */ r.createElement(B, {
+    id: T
+  }, e), /* @__PURE__ */ r.createElement(C, {
     as: "p",
     variant: "pi",
     fontWeight: "bold",
     textColor: "neutral0"
-  }, n || i))), /* @__PURE__ */ o.createElement("span", {
-    ref: y
-  }, g));
+  }, t || e))), /* @__PURE__ */ r.createElement("span", {
+    ref: I
+  }, H));
 };
-a.defaultProps = {
+g.defaultProps = {
   delay: 500,
   id: void 0,
   position: "top",
   label: void 0,
   description: void 0
 };
-a.propTypes = {
-  children: e.node.isRequired,
-  delay: e.number,
-  description: e.string,
-  id: e.string,
-  label: e.string,
-  position: e.oneOf(["top", "left", "bottom", "right"])
+g.propTypes = {
+  children: l.node.isRequired,
+  delay: l.number,
+  description: l.string,
+  id: l.string,
+  label: l.string,
+  position: l.oneOf(["top", "left", "bottom", "right"])
 };
 export {
-  a as Tooltip
+  g as Tooltip
 };

package/dist/Tooltip/hooks/useTooltipLayout.cjs

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

package/dist/Tooltip/hooks/useTooltipLayout.js

@@ -1,13 +1,13 @@
-import { useRef as l, useLayoutEffect as u } from "react";
-import { positionTooltip as c } from "../utils/positionTooltip.js";
-const g = (t, n) => {
-  const e = l(null), p = l(null);
-  return u(() => {
-    if (t) {
-      const o = e.current, s = p.current, r = c(o, s, n);
-      o.style.left = `${r.left}px`, o.style.top = `${r.top}px`;
+import { useRef as n, useLayoutEffect as c } from "react";
+import { positionTooltip as s } from "../utils/positionTooltip.js";
+const g = (o, e) => {
+  const r = n(null), l = n(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`;
     }
-  }, [t]), { tooltipWrapperRef: e, toggleSourceRef: p };
+  }, [e, o]), { tooltipWrapperRef: r, toggleSourceRef: l };
 };
 export {
   g as useTooltipLayout

package/dist/Typography/TypographyProps.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),i=require("prop-types"),r=require("./constants.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=a(l),t=a(i),o=e=>p.default.createElement("div",{...e}),s={ellipsis:!1,fontWeight:void 0,fontSize:void 0,lineHeight:void 0,textColor:void 0,textAlign:void 0,textTransform:void 0,variant:r.OMEGA},n={ellipsis:t.default.bool,fontSize:t.default.oneOfType([t.default.number,t.default.string]),fontWeight:t.default.string,lineHeight:t.default.oneOfType([t.default.number,t.default.string]),textAlign:t.default.string,textColor:t.default.string,textTransform:t.default.string,variant:t.default.oneOf(r.TEXT_VARIANTS)};o.defaultProps=s;o.propTypes=n;exports.TypographyProps=o;exports.typographyDefaultProps=s;exports.typographyPropTypes=n;
+"use strict";var d=Object.defineProperty;var s=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var n=(t,o,r)=>o in t?d(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r,l=(t,o)=>{for(var r in o||(o={}))y.call(o,r)&&n(t,r,o[r]);if(s)for(var r of s(o))g.call(o,r)&&n(t,r,o[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),T=require("prop-types"),i=require("./constants.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},v=p(c),e=p(T),a=t=>v.default.createElement("div",l({},t)),f={ellipsis:!1,fontWeight:void 0,fontSize:void 0,lineHeight:void 0,textColor:void 0,textAlign:void 0,textTransform:void 0,variant:i.OMEGA},u={ellipsis:e.default.bool,fontSize:e.default.oneOfType([e.default.number,e.default.string]),fontWeight:e.default.string,lineHeight:e.default.oneOfType([e.default.number,e.default.string]),textAlign:e.default.string,textColor:e.default.string,textTransform:e.default.string,variant:e.default.oneOf(i.TEXT_VARIANTS)};a.defaultProps=f;a.propTypes=u;exports.TypographyProps=a;exports.typographyDefaultProps=f;exports.typographyPropTypes=u;

package/dist/Typography/TypographyProps.js

@@ -1,9 +1,18 @@
-import r from "react";
+var f = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var n = (r, o, e) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, p = (r, o) => {
+  for (var e in o || (o = {}))
+    l.call(o, e) && n(r, e, o[e]);
+  if (i)
+    for (var e of i(o))
+      a.call(o, e) && n(r, e, o[e]);
+  return r;
+};
+import g from "react";
 import t from "prop-types";
-import { TEXT_VARIANTS as i, OMEGA as n } from "./constants.js";
-const o = (e) => /* @__PURE__ */ r.createElement("div", {
-  ...e
-}), p = {
+import { TEXT_VARIANTS as m, OMEGA as y } from "./constants.js";
+const s = (r) => /* @__PURE__ */ g.createElement("div", p({}, r)), T = {
   ellipsis: !1,
   fontWeight: void 0,
   fontSize: void 0,
@@ -11,8 +20,8 @@ const o = (e) => /* @__PURE__ */ r.createElement("div", {
   textColor: void 0,
   textAlign: void 0,
   textTransform: void 0,
-  variant: n
-}, s = {
+  variant: y
+}, d = {
   ellipsis: t.bool,
   fontSize: t.oneOfType([t.number, t.string]),
   fontWeight: t.string,
@@ -20,12 +29,12 @@ const o = (e) => /* @__PURE__ */ r.createElement("div", {
   textAlign: t.string,
   textColor: t.string,
   textTransform: t.string,
-  variant: t.oneOf(i)
+  variant: t.oneOf(m)
 };
-o.defaultProps = p;
-o.propTypes = s;
+s.defaultProps = T;
+s.propTypes = d;
 export {
-  o as TypographyProps,
-  p as typographyDefaultProps,
-  s as typographyPropTypes
+  s as TypographyProps,
+  T as typographyDefaultProps,
+  d as typographyPropTypes
 };

package/dist/helpers/getDefaultLocale.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="en-EN",a=()=>typeof navigator>"u"?e:navigator.language?navigator.language:navigator.userLanguage?navigator.userLanguage:e;exports.getDefaultLocale=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="en-EN",a=()=>typeof navigator=="undefined"?e:navigator.language?navigator.language:navigator.userLanguage?navigator.userLanguage:e;exports.getDefaultLocale=a;

package/dist/helpers/getDefaultLocale.js

@@ -1,4 +1,4 @@
-const a = "en-EN", e = () => typeof navigator > "u" ? a : navigator.language ? navigator.language : navigator.userLanguage ? navigator.userLanguage : a;
+const a = "en-EN", e = () => typeof navigator == "undefined" ? a : navigator.language ? navigator.language : navigator.userLanguage ? navigator.userLanguage : a;
 export {
   e as getDefaultLocale
 };

package/dist/helpers/handleResponsiveValues.cjs

@@ -1,5 +1,5 @@
-"use strict";const l=(a,s,e)=>{let i=s;if(!Array.isArray(s)&&typeof s=="object"&&(i=[s?.desktop,s?.tablet,s?.mobile]),i===void 0)return;if(Array.isArray(i)){const[d,o,t]=i;let r=`${a}: ${e.spaces[d]};`;return o!==void 0&&(r+=`${e.mediaQueries.tablet}{
-          ${a}: ${e.spaces[o]};
-        }`),t!==void 0&&(r+=`${e.mediaQueries.mobile}{
-          ${a}: ${e.spaces[t]};
-        }`),r}const c=e.spaces[i]||i;return`${a}: ${c};`};module.exports=l;
+"use strict";const e=(o,s,i)=>{let r=s;if(!Array.isArray(s)&&typeof s=="object"&&(r=[s==null?void 0:s.desktop,s==null?void 0:s.tablet,s==null?void 0:s.mobile]),r===void 0)return;if(Array.isArray(r)){const[n,c,d]=r;let t=`${o}: ${i.spaces[n]};`;return c!==void 0&&(t+=`${i.mediaQueries.tablet}{
+          ${o}: ${i.spaces[c]};
+        }`),d!==void 0&&(t+=`${i.mediaQueries.mobile}{
+          ${o}: ${i.spaces[d]};
+        }`),t}const $=i.spaces[r]||r;return`${o}: ${$};`};module.exports=e;

package/dist/helpers/handleResponsiveValues.js

@@ -1,19 +1,19 @@
-const $ = (i, s, a) => {
-  let e = s;
-  if (!Array.isArray(s) && typeof s == "object" && (e = [s?.desktop, s?.tablet, s?.mobile]), e === void 0)
+const a = (o, s, i) => {
+  let r = s;
+  if (!Array.isArray(s) && typeof s == "object" && (r = [s == null ? void 0 : s.desktop, s == null ? void 0 : s.tablet, s == null ? void 0 : s.mobile]), r === void 0)
     return;
-  if (Array.isArray(e)) {
-    const [l, o, t] = e;
-    let r = `${i}: ${a.spaces[l]};`;
-    return o !== void 0 && (r += `${a.mediaQueries.tablet}{
-          ${i}: ${a.spaces[o]};
-        }`), t !== void 0 && (r += `${a.mediaQueries.mobile}{
-          ${i}: ${a.spaces[t]};
-        }`), r;
+  if (Array.isArray(r)) {
+    const [n, d, $] = r;
+    let t = `${o}: ${i.spaces[n]};`;
+    return d !== void 0 && (t += `${i.mediaQueries.tablet}{
+          ${o}: ${i.spaces[d]};
+        }`), $ !== void 0 && (t += `${i.mediaQueries.mobile}{
+          ${o}: ${i.spaces[$]};
+        }`), t;
   }
-  const d = a.spaces[e] || e;
-  return `${i}: ${d};`;
+  const c = i.spaces[r] || r;
+  return `${o}: ${c};`;
 };
 export {
-  $ as default
+  a as default
 };

package/dist/helpers/useIntersection.cjs

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

package/dist/helpers/useIntersection.js

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

package/dist/helpers/useResizeObserver.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),n=(e,s)=>{i.useLayoutEffect(()=>{const r=new ResizeObserver(s);return Array.isArray(e)?e.map(t=>{t.current&&r.observe(t.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[])};exports.useResizeObserver=n;
+"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/helpers/useResizeObserver.js

@@ -1,14 +1,16 @@
-import { useLayoutEffect as i } from "react";
-const f = (e, n) => {
-  i(() => {
-    const r = new ResizeObserver(n);
-    return Array.isArray(e) ? e.map((t) => {
-      t.current && r.observe(t.current);
+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 {
-  f as useResizeObserver
+  c as useResizeObserver
 };

package/dist/hooks/useControllableState.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react"),i=require("@radix-ui/react-use-callback-ref");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,s=typeof e=="function"?e(t):e,d=r?s:t,a=i.useCallbackRef(n),b=u.useCallback(l=>{if(r){const f=typeof l=="function"?l(s):l;f!==s&&(a(f),c(l))}else c(l)},[r,s,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=i.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;

package/dist/hooks/useControllableState.js

@@ -0,0 +1,25 @@
+import * as r from "react";
+import { useCallbackRef as i } from "@radix-ui/react-use-callback-ref";
+function R({ prop: o, defaultProp: u, onChange: c = () => {
+} }) {
+  const [t, e] = C({ defaultProp: u, onChange: c }), n = o !== void 0, l = typeof o == "function" ? o(t) : o, d = n ? l : t, a = i(c), v = r.useCallback(
+    (s) => {
+      if (n) {
+        const f = typeof s == "function" ? s(l) : s;
+        f !== l && (a(f), e(s));
+      } else
+        e(s);
+    },
+    [n, l, e, a]
+  );
+  return [d, v];
+}
+function C({ defaultProp: o, onChange: u }) {
+  const c = r.useState(o), [t] = c, e = r.useRef(t), n = i(u);
+  return r.useEffect(() => {
+    e.current !== t && (n(t), e.current = t);
+  }, [t, e, n]), c;
+}
+export {
+  R as useControllableState
+};