@clubmed/trident-ui 1.0.1 → 1.1.0-beta.2

package/molecules/Forms/NumberField.js

@@ -1,42 +1,42 @@
 import { jsx as m, jsxs as C } from "react/jsx-runtime";
-import { c as p } from "../../index-Cu0xwYjD.js";
+import { c as g } from "../../index-Cu0xwYjD.js";
 import { useId as y } from "react";
 import { useValue as I } from "../../hooks/useValue.js";
-import { Button as g } from "../Buttons/Button.js";
+import { Button as v } from "../Buttons/Button.js";
 import { FormControl as w } from "./FormControl.js";
 const F = { width: "28px", height: "28px" };
-function V(o) {
+function S(o) {
   const e = y(), {
     id: n = e,
-    name: l = n,
-    value: c = 0,
-    onChange: d,
+    name: r = n,
+    value: d = 0,
+    onChange: c,
     min: t = 0,
-    max: r = 10,
-    disabled: i = !1,
+    max: i = 10,
+    disabled: l = !1,
     dataTestId: u = "NumberField",
     ...f
   } = o, { value: a, setValue: s } = I({
-    name: l,
-    defaultValue: c,
+    name: r,
+    defaultValue: d,
     formatter: Number,
-    onChange: d
+    onChange: c
   });
   return {
     ...f,
     id: n,
     min: t,
-    max: r,
-    name: l,
+    max: i,
+    name: r,
     value: a,
     dataTestId: u,
-    disabled: i,
-    handleChange: (v) => {
-      const h = Number(v.target.value);
-      h >= t && h <= r && s(Number(h));
+    disabled: l,
+    handleChange: (h) => {
+      const N = Number(h.target.value);
+      N >= t && N <= i && s(Number(N));
     },
     increase: () => {
-      a < r && s(a + 1);
+      a < i && s(a + 1);
     },
     decrease: () => {
       a > t && s(a - 1);
@@ -47,42 +47,44 @@ const k = (o) => {
   const {
     disabled: e,
     min: n,
-    max: l,
-    label: c,
-    description: d,
+    max: r,
+    label: d,
+    description: c,
     id: t,
-    dataTestId: r,
-    value: i,
+    dataTestId: i,
+    value: l,
     handleChange: u,
     increase: f,
     decrease: a,
     errorMessage: s,
-    validationStatus: N,
+    validationStatus: x,
+    hideRequiredStar: p,
     required: b,
-    ...x
-  } = V(o);
+    ...h
+  } = S(o);
   return /* @__PURE__ */ m(
     w,
     {
       id: t,
-      label: c,
-      description: d,
-      className: p("flex items-center justify-between", o.className),
+      label: d,
+      description: c,
+      className: g("flex items-center justify-between", o.className),
       dataName: "NumberField",
-      dataTestId: r,
+      dataTestId: i,
       errorMessage: s,
-      validationStatus: N,
+      validationStatus: x,
       disabled: e,
       required: b,
+      hideRequiredStar: p,
       layout: "vertical",
       children: /* @__PURE__ */ C("div", { className: "flex items-center gap-x-8", children: [
         /* @__PURE__ */ m(
-          g,
+          v,
           {
             theme: "yellow",
             onClick: a,
             variant: "icon",
-            disabled: i <= n || e,
+            disabled: l <= n || e,
             icon: "MinusDefault",
             label: "MINUS"
           }
@@ -90,8 +92,8 @@ const k = (o) => {
         /* @__PURE__ */ m(
           "input",
           {
-            ...x,
-            className: p("text-b2 text-center font-normal outline-none", {
+            ...h,
+            className: g("text-b2 text-center font-normal outline-none", {
               "bg-pearl text-grey": e
             }),
             style: F,
@@ -100,18 +102,18 @@ const k = (o) => {
             onChange: u,
             disabled: e,
             required: b,
-            value: i,
+            value: l,
             min: n,
-            max: l
+            max: r
           }
         ),
         /* @__PURE__ */ m(
-          g,
+          v,
           {
             theme: "yellow",
             onClick: f,
             variant: "icon",
-            disabled: i >= l || e,
+            disabled: l >= r || e,
             icon: "PlusDefault",
             label: "PLUS"
           }
@@ -122,6 +124,6 @@ const k = (o) => {
 };
 export {
   k as NumberField,
-  V as useNumberField
+  S as useNumberField
 };
 //# sourceMappingURL=NumberField.js.map

package/molecules/Forms/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../lib/molecules/Forms/NumberField.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, FormControlProps } from './FormControl.js';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    name: name!,\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue));\n    }\n  };\n\n  const increase = () => {\n    if (value < max) {\n      setValue(value + 1);\n    }\n  };\n\n  const decrease = () => {\n    if (value > min) {\n      setValue(value - 1);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    required,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={classnames('flex items-center justify-between', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      layout=\"vertical\"\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          theme=\"yellow\"\n          onClick={decrease}\n          variant=\"icon\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          // TODO have this from prop at some time\n          label=\"MINUS\"\n        />\n        <input\n          {...rest}\n          className={classnames('text-b2 text-center font-normal outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          theme=\"yellow\"\n          onClick={increase}\n          variant=\"icon\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          // TODO have this from prop at some time\n          label=\"PLUS\"\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["INPUT_STYLE","useNumberField","props","internalId","useId","id","name","initialValue","onChange","min","max","disabled","dataTestId","rest","value","setValue","useValue","e","newValue","NumberField","label","description","handleChange","increase","decrease","errorMessage","validationStatus","required","jsx","FormControl","classnames","jsxs","Button"],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sources":["../../../lib/molecules/Forms/NumberField.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, FormControlProps } from './FormControl.js';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    name: name!,\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue));\n    }\n  };\n\n  const increase = () => {\n    if (value < max) {\n      setValue(value + 1);\n    }\n  };\n\n  const decrease = () => {\n    if (value > min) {\n      setValue(value - 1);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={classnames('flex items-center justify-between', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          theme=\"yellow\"\n          onClick={decrease}\n          variant=\"icon\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          // TODO have this from prop at some time\n          label=\"MINUS\"\n        />\n        <input\n          {...rest}\n          className={classnames('text-b2 text-center font-normal outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          theme=\"yellow\"\n          onClick={increase}\n          variant=\"icon\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          // TODO have this from prop at some time\n          label=\"PLUS\"\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["INPUT_STYLE","useNumberField","props","internalId","useId","id","name","initialValue","onChange","min","max","disabled","dataTestId","rest","value","setValue","useValue","e","newValue","NumberField","label","description","handleChange","increase","decrease","errorMessage","validationStatus","hideRequiredStar","required","jsx","FormControl","classnames","jsxs","Button"],"mappings":"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"}

package/molecules/Forms/Password/Password.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { c as m } from "../../../index-Cu0xwYjD.js";
-import { useId as M, useState as P, useEffect as S } from "react";
-import { useValue as T } from "../../../hooks/useValue.js";
+import { useId as M, useState as P, useEffect as T } from "react";
+import { useValue as q } from "../../../hooks/useValue.js";
 import { FormControl as D } from "../FormControl.js";
 import { Icon as n } from "../../../atoms/Icons/Icon.js";
 import "../../../atoms/Icons/contexts/IconsContext.js";
@@ -11,49 +11,51 @@ function K(f) {
     id: r = b,
     name: o = r,
     label: x,
-    value: g,
+    value: h,
     disabled: d = !1,
     required: c = !1,
+    hideRequiredStar: g,
     validationStatus: e = "default",
-    errorMessage: h,
+    errorMessage: v,
     validationMessages: p = [],
     withoutFieldValidation: s = !1,
-    className: v,
-    onChange: w,
-    dataTestId: y = "Password",
-    ...N
-  } = f, { value: C, setValue: V } = T({
+    className: w,
+    onChange: y,
+    dataTestId: N = "Password",
+    ...C
+  } = f, { value: V, setValue: k } = q({
     name: o,
-    initialValue: g,
-    onChange: w
+    initialValue: h,
+    onChange: y
   }), [t, u] = P("password");
-  S(() => u(t), [t]);
-  const k = () => u(t === "password" ? "text" : "password");
+  T(() => u(t), [t]);
+  const I = () => u(t === "password" ? "text" : "password");
   return /* @__PURE__ */ i(
     D,
     {
-      className: v,
+      className: w,
       id: r,
       label: x,
       dataName: "Password",
-      dataTestId: y,
+      dataTestId: N,
       disabled: d,
       required: c,
+      hideRequiredStar: g,
       validationStatus: s ? "default" : e,
-      errorMessage: h,
+      errorMessage: v,
       children: [
         /* @__PURE__ */ i("div", { className: "relative", children: [
           /* @__PURE__ */ a(
             "input",
             {
-              ...N,
+              ...C,
               id: r,
               name: o,
               type: t,
-              value: C,
+              value: V,
               disabled: d,
               required: c,
-              onChange: (l) => V(l.target.value),
+              onChange: (l) => k(l.target.value),
               className: m(
                 "text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black",
                 {
@@ -80,7 +82,7 @@ function K(f) {
                   {
                     type: "button",
                     className: "pointer-events-auto size-24 inline-flex",
-                    onClick: k,
+                    onClick: I,
                     children: /* @__PURE__ */ a(n, { name: t === "password" ? "Invisible" : "Visible", width: "24px", type: "svg" })
                   }
                 )
@@ -88,7 +90,7 @@ function K(f) {
             }
           )
         ] }),
-        p.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: p.map(({ label: l, status: I }, j) => /* @__PURE__ */ a(F, { label: l, status: I }, j)) })
+        p.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: p.map(({ label: l, status: S }, j) => /* @__PURE__ */ a(F, { label: l, status: S }, j)) })
       ]
     }
   );

package/molecules/Forms/Password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, FormControlProps } from '../FormControl';\nimport { Icon } from '@/atoms/Icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => setType(type), [type]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                withoutFieldValidation || validationStatus === 'default',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            <button\n              type=\"button\"\n              className=\"pointer-events-auto size-24 inline-flex\"\n              onClick={toggleType}\n            >\n              <Icon name={type === 'password' ? 'Invisible' : 'Visible'} width=\"24px\" type=\"svg\" />\n            </button>\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"names":["Password","props","internalId","useId","id","name","label","initialValue","disabled","required","validationStatus","errorMessage","validationMessages","withoutFieldValidation","className","onChange","dataTestId","rest","value","setValue","useValue","type","setType","useState","useEffect","toggleType","jsxs","FormControl","jsx","e","classnames","Icon","status","index","ValidationMessage"],"mappings":"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"}
+{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, FormControlProps } from '../FormControl';\nimport { Icon } from '@/atoms/Icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n  validationMessages?: ValidationMessage[];\n  withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    validationStatus = 'default',\n    errorMessage,\n    validationMessages = [],\n    withoutFieldValidation = false,\n    className,\n    onChange,\n    dataTestId = 'Password',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    onChange,\n  });\n  const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n  useEffect(() => setType(type), [type]);\n\n  const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n  return (\n    <FormControl\n      className={className}\n      id={id}\n      label={label}\n      dataName=\"Password\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          value={value as any}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue(e.target.value as Value)}\n          className={classnames(\n            'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black',\n            {\n              'border-lightGrey focus:border-black active:border-black pe-[52px]':\n                withoutFieldValidation || validationStatus === 'default',\n              'pe-[84px]':\n                !withoutFieldValidation &&\n                (validationStatus === 'error' || validationStatus === 'success'),\n              'border-red': !withoutFieldValidation && validationStatus === 'error',\n              'border-green': !withoutFieldValidation && validationStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {!withoutFieldValidation && validationStatus === 'error' && (\n              <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n            )}\n\n            {!withoutFieldValidation && validationStatus === 'success' && (\n              <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n            )}\n\n            <button\n              type=\"button\"\n              className=\"pointer-events-auto size-24 inline-flex\"\n              onClick={toggleType}\n            >\n              <Icon name={type === 'password' ? 'Invisible' : 'Visible'} width=\"24px\" type=\"svg\" />\n            </button>\n          </span>\n        </div>\n      </div>\n\n      {validationMessages.length > 0 && (\n        <div className=\"flex flex-col gap-[10px] mt-8\">\n          {validationMessages.map(({ label, status }, index) => (\n            <ValidationMessage label={label} status={status} key={index} />\n          ))}\n        </div>\n      )}\n    </FormControl>\n  );\n}\n"],"names":["Password","props","internalId","useId","id","name","label","initialValue","disabled","required","hideRequiredStar","validationStatus","errorMessage","validationMessages","withoutFieldValidation","className","onChange","dataTestId","rest","value","setValue","useValue","type","setType","useState","useEffect","toggleType","jsxs","FormControl","jsx","e","classnames","Icon","status","index","ValidationMessage"],"mappings":"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"}

package/molecules/Forms/Radios/Radio.js

@@ -2,7 +2,7 @@ import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { c as b } from "../../../index-Cu0xwYjD.js";
 import { useId as k } from "react";
 import { useValue as w } from "../../../hooks/useValue.js";
-import "../../../controls-l0sNRNKZ.js";
+/* empty css                         */
 function R(d) {
   const n = k(), {
     id: o = n,

package/molecules/Forms/Range.js

@@ -339,8 +339,7 @@ function Pe(e) {
   N(() => (f.current = !0, () => void (f.current = !1)));
   const [T, m, h] = de(() => {
     const c = () => {
-      if (!o.current.element)
-        return;
+      if (!o.current.element) return;
       const {
         left: z,
         top: B,
@@ -399,8 +398,7 @@ function Fe(e, t) {
 }
 function ve(e) {
   const t = [];
-  if (!e || e === document.body)
-    return t;
+  if (!e || e === document.body) return t;
   const {
     overflow: r,
     overflowX: n,