colibri-ui 0.8.83 → 0.8.86

package/esm/Typography/index.js

@@ -1,25 +1,30 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { __rest } from 'tslib';
 import React from 'react';
 import clsx from 'clsx';
 import styles from './Typography.module.css';
 
-var Typography = function Typography(_a) {
-  var _a$tag = _a.tag,
-    Component = _a$tag === void 0 ? "span" : _a$tag,
-    children = _a.children,
-    variant = _a.variant,
-    size = _a.size,
-    style = _a.style,
-    fontWeight = _a.fontWeight,
-    lines = _a.lines,
-    className = _a.className,
+const Typography = _a => {
+  var {
+      tag: Component = "span",
+      children,
+      variant,
+      size,
+      style,
+      fontWeight,
+      lines,
+      className
+    } = _a,
     props = __rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "lines", "className"]);
   return /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
     style: lines ? Object.assign(Object.assign({}, style), {
       "--typography-lines": lines
     }) : Object.assign({}, style),
-    className: clsx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles["size_".concat(size)], Boolean(size)), styles["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles["variant_".concat(variant)], Boolean(variant)), styles.clamp, Boolean(lines)), className)
+    className: clsx({
+      [styles[`size_${size}`]]: Boolean(size),
+      [styles[`font-weight_${fontWeight}`]]: Boolean(fontWeight),
+      [styles[`variant_${variant}`]]: Boolean(variant),
+      [styles.clamp]: Boolean(lines)
+    }, className)
   }), children);
 };
 

package/esm/Typography/index.props.d.ts

@@ -5,6 +5,9 @@ export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "t
 export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
 export type TypographyProps = {
     className?: string;
+    /** Associates the text with a form control when `tag` is `label`. */
+    htmlFor?: string;
+    id?: string;
     tag?: TypographyTag;
     variant?: TypographyVariant;
     size?: TypographySize;

package/esm/base/BaseInput/index.js

@@ -3,15 +3,17 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './BaseInput.module.css';
 
-var BaseInput = function BaseInput(_a) {
-  var className = _a.className,
-    onFocus = _a.onFocus,
-    onChange = _a.onChange,
-    onBlur = _a.onBlur,
-    onKeyDown = _a.onKeyDown,
-    ref = _a.ref,
+const BaseInput = _a => {
+  var {
+      className,
+      onFocus,
+      onChange,
+      onBlur,
+      onKeyDown,
+      ref
+    } = _a,
     props = __rest(_a, ["className", "onFocus", "onChange", "onBlur", "onKeyDown", "ref"]);
-  var onChangeHandler = function onChangeHandler(e) {
+  const onChangeHandler = e => {
     if (onChange) onChange(e, e.target.value);
   };
   return /*#__PURE__*/React.createElement("input", Object.assign({

package/esm/base/FormField/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-export declare const FormField: ({ label, hint, children, hasError, required, className, ref, }: FormFieldProps) => React.JSX.Element;
+export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, required, className, ref, }: FormFieldProps) => React.JSX.Element;

package/esm/base/FormField/index.js

@@ -1,28 +1,34 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
 import clsx from 'clsx';
 import { Typography } from '../../Typography/index.js';
 import styles from './FormField.module.css';
 
-var FormField = function FormField(_ref) {
-  var label = _ref.label,
-    hint = _ref.hint,
-    children = _ref.children,
-    hasError = _ref.hasError,
-    required = _ref.required,
-    className = _ref.className,
-    ref = _ref.ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles.container, className),
-    ref: ref
-  }, label && (/*#__PURE__*/React.createElement(Typography, {
-    className: clsx(styles.label, _defineProperty({}, styles.label_required, Boolean(required))),
-    tag: "label"
-  }, label)), children, hint && (/*#__PURE__*/React.createElement(Typography, {
-    className: clsx(_defineProperty({}, styles.hint_error, hasError)),
-    variant: hasError ? "alert" : "secondary",
-    tag: "span"
-  }, hint)));
-};
+const FormField = ({
+  label,
+  hint,
+  children,
+  hasError,
+  hintId,
+  htmlFor,
+  required,
+  className,
+  ref
+}) => (/*#__PURE__*/React.createElement("div", {
+  className: clsx(styles.container, className),
+  ref: ref
+}, label && (/*#__PURE__*/React.createElement(Typography, {
+  className: clsx(styles.label, {
+    [styles.label_required]: Boolean(required)
+  }),
+  tag: "label",
+  htmlFor: htmlFor
+}, label)), children, hint && (/*#__PURE__*/React.createElement(Typography, {
+  id: hintId,
+  className: clsx({
+    [styles.hint_error]: hasError
+  }),
+  variant: hasError ? "alert" : "secondary",
+  tag: "span"
+}, hint))));
 
 export { FormField };

package/esm/base/FormField/index.props.d.ts

@@ -4,6 +4,10 @@ export type FormFieldProps = PropsWithChildren<{
     className?: string;
     hasError?: boolean;
     hint?: ReactNode;
+    /** Id of the hint, referenced by the control's `aria-describedby`. */
+    hintId?: string;
+    /** Id of the control the label belongs to. */
+    htmlFor?: string;
     label?: ReactNode;
     ref?: React.Ref<HTMLDivElement>;
     required?: boolean;

package/esm/base/InputRoot/index.js

@@ -1,32 +1,33 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
 import clsx from 'clsx';
 import styles from './InputRoot.module.css';
 
-var InputRoot = function InputRoot(_ref) {
-  var active = _ref.active,
-    className = _ref.className,
-    startIcon = _ref.startIcon,
-    endIcon = _ref.endIcon,
-    children = _ref.children,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
-    disabled = _ref.disabled,
-    hasError = _ref.hasError,
-    style = _ref.style,
-    size = _ref.size,
-    ref = _ref.ref;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    style: style,
-    className: clsx(styles.root, styles["variant_".concat(variant)], size && styles["size_".concat(size)], _defineProperty(_defineProperty(_defineProperty({}, styles["variant_".concat(variant, "_active")], active), styles["variant_".concat(variant, "_disabled")], disabled), styles["variant_".concat(variant, "_error")], hasError), className)
-  }, startIcon && /*#__PURE__*/React.createElement("div", {
-    className: styles["base-icon"]
-  }, startIcon), children, endIcon && /*#__PURE__*/React.createElement("div", {
-    className: styles["base-icon"]
-  }, endIcon), disabled && /*#__PURE__*/React.createElement("div", {
-    className: styles["base-disable-wrapper"]
-  }));
-};
+const InputRoot = ({
+  active,
+  className,
+  startIcon,
+  endIcon,
+  children,
+  variant = "primary",
+  disabled,
+  hasError,
+  style,
+  size,
+  ref
+}) => (/*#__PURE__*/React.createElement("div", {
+  ref: ref,
+  style: style,
+  className: clsx(styles.root, styles[`variant_${variant}`], size && styles[`size_${size}`], {
+    [styles[`variant_${variant}_active`]]: active,
+    [styles[`variant_${variant}_disabled`]]: disabled,
+    [styles[`variant_${variant}_error`]]: hasError
+  }, className)
+}, startIcon && /*#__PURE__*/React.createElement("div", {
+  className: styles["base-icon"]
+}, startIcon), children, endIcon && /*#__PURE__*/React.createElement("div", {
+  className: styles["base-icon"]
+}, endIcon), disabled && /*#__PURE__*/React.createElement("div", {
+  className: styles["base-disable-wrapper"]
+})));
 
 export { InputRoot };

package/esm/helpers/date/index.js

@@ -2,20 +2,16 @@ import { parseISO, isValid, format } from 'date-fns';
 import 'date-fns/locale';
 
 // Helper to parse date strings with fallback
-var parse = function parse(dateInput) {
+const parse = dateInput => {
   if (!dateInput) {
     return new Date();
   }
-  var date = typeof dateInput === "string" ? parseISO(dateInput) : dateInput;
+  const date = typeof dateInput === "string" ? parseISO(dateInput) : dateInput;
   return isValid(date) ? date : new Date(dateInput);
 };
 // Convert date to ISO format (YYYY-MM-DD)
-var toISODate = function toISODate(date) {
-  return format(date, "yyyy-MM-dd");
-};
+const toISODate = date => format(date, "yyyy-MM-dd");
 // Convert date to DMY format (dd.MM.yyyy)
-var toDMYDate = function toDMYDate(dateISO) {
-  return dateISO ? format(new Date(dateISO), "dd.MM.yyyy") : "";
-};
+const toDMYDate = dateISO => dateISO ? format(new Date(dateISO), "dd.MM.yyyy") : "";
 
 export { parse, toDMYDate, toISODate };

package/esm/hooks/useMediaSizes/index.js

@@ -1,28 +1,22 @@
 import { useCallback, useSyncExternalStore } from 'react';
 import { media } from '../../Theme/breakpoints.js';
 
-var getServerSnapshot = function getServerSnapshot() {
-  return false;
-};
-var getMediaQueryList = function getMediaQueryList(query) {
-  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
-};
+const getServerSnapshot = () => false;
+const getMediaQueryList = query => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
 /**
  * Returns whether the media query matches.
  * Returns `false` on the server and during hydration, the real value right after.
  */
-var useMediaSizes = function useMediaSizes(queryInput) {
+const useMediaSizes = queryInput => {
   // A function input is a new function every render: memoize on the query string.
-  var query = (typeof queryInput === "function" ? queryInput(media) : queryInput).replace(/^\s*@media\s*/, "");
-  var subscribe = useCallback(function (onChange) {
-    var queryList = getMediaQueryList(query);
-    if (!queryList) return function () {};
+  const query = (typeof queryInput === "function" ? queryInput(media) : queryInput).replace(/^\s*@media\s*/, "");
+  const subscribe = useCallback(onChange => {
+    const queryList = getMediaQueryList(query);
+    if (!queryList) return () => {};
     queryList.addEventListener("change", onChange);
-    return function () {
-      return queryList.removeEventListener("change", onChange);
-    };
+    return () => queryList.removeEventListener("change", onChange);
   }, [query]);
-  var getSnapshot = useCallback(function () {
+  const getSnapshot = useCallback(() => {
     var _a, _b;
     return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
   }, [query]);

package/esm/hooks/useModalStack/index.js

@@ -1,24 +1,21 @@
 import { useEffect, useCallback } from 'react';
 
-var stack = [];
+const stack = [];
 /**
  * Tracks open modals so only the topmost one reacts to Escape and Tab.
  * An inactive entry is not registered and counts as topmost only while no
  * modal is open.
  */
-var useModalStack = function useModalStack(id) {
-  var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  useEffect(function () {
+const useModalStack = (id, active = true) => {
+  useEffect(() => {
     if (!active) return;
     stack.push(id);
-    return function () {
-      var index = stack.lastIndexOf(id);
+    return () => {
+      const index = stack.lastIndexOf(id);
       if (index !== -1) stack.splice(index, 1);
     };
   }, [id, active]);
-  return useCallback(function () {
-    return stack.length ? stack[stack.length - 1] === id : !active;
-  }, [id, active]);
+  return useCallback(() => stack.length ? stack[stack.length - 1] === id : !active, [id, active]);
 };
 
 export { useModalStack };

package/esm/hooks/useOnClickOutside/index.js

@@ -1,16 +1,16 @@
 import { useEffect } from 'react';
 
-var element = {
+let element = {
   current: undefined
 };
 function useOnClickOutside(ref, handler) {
-  useEffect(function () {
-    var previous = element;
+  useEffect(() => {
+    const previous = element;
     element = ref;
-    var listener = function listener(event) {
+    const listener = event => {
       // Ensure this hook belongs to the current element.
       if ((ref === null || ref === void 0 ? void 0 : ref.current) !== (element === null || element === void 0 ? void 0 : element.current)) return;
-      var el = element.current;
+      const el = element.current;
       if (!el) return;
       // Ignore clicks inside the element.
       if (el.contains(event.target)) return;
@@ -18,7 +18,7 @@ function useOnClickOutside(ref, handler) {
     };
     document.addEventListener("mousedown", listener, false);
     document.addEventListener("touchstart", listener, false);
-    return function () {
+    return () => {
       document.removeEventListener("mousedown", listener, false);
       document.removeEventListener("touchstart", listener, false);
       element = previous;

package/esm/hooks/useScrollLock/index.js

@@ -1,18 +1,19 @@
 import { useEffect } from 'react';
 
-var useScrollLock = function useScrollLock() {
-  useEffect(function () {
-    var body = document.querySelector("body");
+const useScrollLock = () => {
+  useEffect(() => {
+    const body = document.querySelector("body");
     if (!body) return undefined;
-    var _body$style = body.style,
-      overflow = _body$style.overflow,
-      width = _body$style.width;
-    var scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const {
+      overflow,
+      width
+    } = body.style;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
     body.style.overflow = "hidden";
     if (scrollBarWidth > 0) {
-      body.style.width = "calc(100% - ".concat(scrollBarWidth, "px)");
+      body.style.width = `calc(100% - ${scrollBarWidth}px)`;
     }
-    return function () {
+    return () => {
       body.style.overflow = overflow;
       body.style.width = width;
     };

package/esm/hooks/useTrapFocus/index.js

@@ -1,18 +1,16 @@
 import { useEffect } from 'react';
 
-var getFocusableModalElements = function getFocusableModalElements(element) {
-  return element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select');
-};
+const getFocusableModalElements = element => element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select');
 function useTrapFocus(refObject, isActive) {
-  useEffect(function () {
-    var handler = function handler(event) {
+  useEffect(() => {
+    const handler = event => {
       if (!refObject.current || event.code !== "Tab") return;
       if (isActive && !isActive()) return;
-      var focusable = Array.from(getFocusableModalElements(refObject.current));
-      var firstElement = focusable[0];
-      var lastElement = focusable[focusable.length - 1];
+      const focusable = Array.from(getFocusableModalElements(refObject.current));
+      const firstElement = focusable[0];
+      const lastElement = focusable[focusable.length - 1];
       if (!lastElement || !firstElement) return;
-      var focusOutside = document.activeElement ? !focusable.includes(document.activeElement) : true;
+      const focusOutside = document.activeElement ? !focusable.includes(document.activeElement) : true;
       if (event.shiftKey && (document.activeElement === firstElement || focusOutside)) {
         lastElement.focus();
         event.preventDefault();
@@ -22,7 +20,7 @@ function useTrapFocus(refObject, isActive) {
       }
     };
     document.addEventListener("keydown", handler);
-    return function () {
+    return () => {
       document.removeEventListener("keydown", handler);
     };
   }, [refObject, isActive]);

package/esm/lib/keyboard.js

@@ -1,4 +1,4 @@
-var Keys = {
+const Keys = {
   BACKSPACE: "Backspace",
   TAB: "Tab",
   ENTER: "Enter",
@@ -17,9 +17,7 @@ var Keys = {
   DELETE: "Delete"
 };
 function isKey(eventKey, keys) {
-  return keys.some(function (value) {
-    return Keys[value] === eventKey || value === eventKey;
-  });
+  return keys.some(value => Keys[value] === eventKey || value === eventKey);
 }
 
 export { Keys, isKey };

package/helpers/date/index.js

@@ -4,69 +4,58 @@ var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 
 // Helper to parse date strings with fallback
-var parse = function parse(dateInput) {
+const parse = dateInput => {
   if (!dateInput) {
     return new Date();
   }
-  var date = typeof dateInput === "string" ? dateFns.parseISO(dateInput) : dateInput;
+  const date = typeof dateInput === "string" ? dateFns.parseISO(dateInput) : dateInput;
   return dateFns.isValid(date) ? date : new Date(dateInput);
 };
 // Get full month name with the first letter capitalized
-var getUpperMonthName = function getUpperMonthName(date) {
-  var parsedDate = parse(date);
+const getUpperMonthName = date => {
+  const parsedDate = parse(date);
   return dateFns.format(parsedDate, "LLLL", {
     locale: locale.enGB
   });
 };
 // Get short weekday name by index (e.g., Mo, Tu, etc.)
-var getShortWeekDayNameByIndex = function getShortWeekDayNameByIndex(index) {
-  var firstDayOfWeek = dateFns.startOfWeek(new Date());
+const getShortWeekDayNameByIndex = index => {
+  const firstDayOfWeek = dateFns.startOfWeek(new Date());
   return dateFns.format(dateFns.addDays(firstDayOfWeek, index), "EEEEEE", {
     locale: locale.enGB
   });
 };
 // Get formatted date string with month and day
-var getDateMonth = function getDateMonth(date) {
-  var parsedDate = parse(date);
+const getDateMonth = date => {
+  const parsedDate = parse(date);
   return dateFns.format(parsedDate, "MMMM d", {
     locale: locale.enGB
   });
 };
 // Shift the date by a number of days
-var shiftDate = function shiftDate(date, days) {
-  return dateFns.addDays(date, days);
-};
+const shiftDate = (date, days) => dateFns.addDays(date, days);
 // Check if two dates are in the same month and year
-var isSameMonthAndYear = function isSameMonthAndYear(date, otherDate) {
-  return date.getFullYear() === otherDate.getFullYear() && date.getMonth() === otherDate.getMonth();
-};
+const isSameMonthAndYear = (date, otherDate) => date.getFullYear() === otherDate.getFullYear() && date.getMonth() === otherDate.getMonth();
 // Convert date to ISO format (YYYY-MM-DD)
-var toISODate = function toISODate(date) {
-  return dateFns.format(date, "yyyy-MM-dd");
-};
+const toISODate = date => dateFns.format(date, "yyyy-MM-dd");
 // Convert date to DMY format (dd.MM.yyyy)
-var toDMYDate = function toDMYDate(dateISO) {
-  return dateISO ? dateFns.format(new Date(dateISO), "dd.MM.yyyy") : "";
-};
+const toDMYDate = dateISO => dateISO ? dateFns.format(new Date(dateISO), "dd.MM.yyyy") : "";
 // Get the period dates as a formatted string
-var getPeriodDates = function getPeriodDates(startDate) {
-  var period = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  var start = parse(startDate);
+const getPeriodDates = (startDate, period = 1) => {
+  const start = parse(startDate);
   if (period === 1) {
     return getDateMonth(start);
   }
-  var end = shiftDate(start, period - 1);
-  var startDateFormat = isSameMonthAndYear(start, end) ? dateFns.format(start, "d") : getDateMonth(start);
-  return "".concat(startDateFormat, " \u2013 ").concat(getDateMonth(end));
+  const end = shiftDate(start, period - 1);
+  const startDateFormat = isSameMonthAndYear(start, end) ? dateFns.format(start, "d") : getDateMonth(start);
+  return `${startDateFormat} – ${getDateMonth(end)}`;
 };
 // Clear time from a date
-var clearTime = function clearTime(date) {
-  return new Date(date.setHours(0, 0, 0, 0));
-};
+const clearTime = date => new Date(date.setHours(0, 0, 0, 0));
 // Get the difference in days between two dates
-var getDaysDiff = function getDaysDiff(dateStart, dateEnd) {
-  var start = clearTime(dateStart).getTime();
-  var end = clearTime(dateEnd).getTime();
+const getDaysDiff = (dateStart, dateEnd) => {
+  const start = clearTime(dateStart).getTime();
+  const end = clearTime(dateEnd).getTime();
   return Math.round((end - start) / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
 };
 

package/hooks/useMediaSizes/index.js

@@ -3,28 +3,22 @@
 var React = require('react');
 var breakpoints = require('../../Theme/breakpoints.js');
 
-var getServerSnapshot = function getServerSnapshot() {
-  return false;
-};
-var getMediaQueryList = function getMediaQueryList(query) {
-  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
-};
+const getServerSnapshot = () => false;
+const getMediaQueryList = query => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
 /**
  * Returns whether the media query matches.
  * Returns `false` on the server and during hydration, the real value right after.
  */
-var useMediaSizes = function useMediaSizes(queryInput) {
+const useMediaSizes = queryInput => {
   // A function input is a new function every render: memoize on the query string.
-  var query = (typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput).replace(/^\s*@media\s*/, "");
-  var subscribe = React.useCallback(function (onChange) {
-    var queryList = getMediaQueryList(query);
-    if (!queryList) return function () {};
+  const query = (typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput).replace(/^\s*@media\s*/, "");
+  const subscribe = React.useCallback(onChange => {
+    const queryList = getMediaQueryList(query);
+    if (!queryList) return () => {};
     queryList.addEventListener("change", onChange);
-    return function () {
-      return queryList.removeEventListener("change", onChange);
-    };
+    return () => queryList.removeEventListener("change", onChange);
   }, [query]);
-  var getSnapshot = React.useCallback(function () {
+  const getSnapshot = React.useCallback(() => {
     var _a, _b;
     return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
   }, [query]);

package/hooks/useModalStack/index.js

@@ -2,25 +2,22 @@
 
 var React = require('react');
 
-var stack = [];
+const stack = [];
 /**
  * Tracks open modals so only the topmost one reacts to Escape and Tab.
  * An inactive entry is not registered and counts as topmost only while no
  * modal is open.
  */
-var useModalStack = function useModalStack(id) {
-  var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  React.useEffect(function () {
+const useModalStack = (id, active = true) => {
+  React.useEffect(() => {
     if (!active) return;
     stack.push(id);
-    return function () {
-      var index = stack.lastIndexOf(id);
+    return () => {
+      const index = stack.lastIndexOf(id);
       if (index !== -1) stack.splice(index, 1);
     };
   }, [id, active]);
-  return React.useCallback(function () {
-    return stack.length ? stack[stack.length - 1] === id : !active;
-  }, [id, active]);
+  return React.useCallback(() => stack.length ? stack[stack.length - 1] === id : !active, [id, active]);
 };
 
 exports.useModalStack = useModalStack;

package/hooks/useOnClickOutside/index.js

@@ -2,17 +2,17 @@
 
 var React = require('react');
 
-var element = {
+let element = {
   current: undefined
 };
 function useOnClickOutside(ref, handler) {
-  React.useEffect(function () {
-    var previous = element;
+  React.useEffect(() => {
+    const previous = element;
     element = ref;
-    var listener = function listener(event) {
+    const listener = event => {
       // Ensure this hook belongs to the current element.
       if ((ref === null || ref === void 0 ? void 0 : ref.current) !== (element === null || element === void 0 ? void 0 : element.current)) return;
-      var el = element.current;
+      const el = element.current;
       if (!el) return;
       // Ignore clicks inside the element.
       if (el.contains(event.target)) return;
@@ -20,7 +20,7 @@ function useOnClickOutside(ref, handler) {
     };
     document.addEventListener("mousedown", listener, false);
     document.addEventListener("touchstart", listener, false);
-    return function () {
+    return () => {
       document.removeEventListener("mousedown", listener, false);
       document.removeEventListener("touchstart", listener, false);
       element = previous;