colibri-ui 0.8.84 → 0.8.87

package/esm/TextArea/index.js

@@ -1,29 +1,33 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React, { useId } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import clsx from 'clsx';
 import { FormField } from '../base/FormField/index.js';
 import { InputRoot } from '../base/InputRoot/index.js';
 import styles from './TextArea.module.css';
 
-var TextArea = function TextArea(_a) {
-  var className = _a.className,
-    _a$value = _a.value,
-    value = _a$value === void 0 ? "" : _a$value,
-    _a$minRows = _a.minRows,
-    minRows = _a$minRows === void 0 ? 3 : _a$minRows,
-    _a$maxRows = _a.maxRows,
-    maxRows = _a$maxRows === void 0 ? 6 : _a$maxRows,
-    onChange = _a.onChange,
-    label = _a.label,
-    required = _a.required,
-    hasError = _a.hasError,
-    hint = _a.hint,
-    disabled = _a.disabled,
-    inputRef = _a.inputRef,
-    ref = _a.ref,
-    props = __rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "hasError", "hint", "disabled", "inputRef", "ref"]);
-  var onChangeHandler = function onChangeHandler(event) {
+const TextArea = _a => {
+  var _b;
+  var {
+      className,
+      value = "",
+      minRows = 3,
+      maxRows = 6,
+      onChange,
+      label,
+      required,
+      hasError,
+      hint,
+      disabled,
+      inputRef,
+      ref,
+      id
+    } = _a,
+    props = __rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "hasError", "hint", "disabled", "inputRef", "ref", "id"]);
+  const generatedId = useId();
+  const textareaId = id !== null && id !== void 0 ? id : generatedId;
+  const hintId = hint ? `${textareaId}-hint` : undefined;
+  const onChangeHandler = event => {
     if (onChange) onChange(event.target.value, event);
   };
   return /*#__PURE__*/React.createElement(FormField, {
@@ -31,7 +35,9 @@ var TextArea = function TextArea(_a) {
     className: clsx(className),
     required: required,
     label: label,
+    htmlFor: textareaId,
     hint: hint,
+    hintId: hintId,
     hasError: hasError
   }, /*#__PURE__*/React.createElement(InputRoot, {
     disabled: !!disabled,
@@ -45,7 +51,12 @@ var TextArea = function TextArea(_a) {
     value: value,
     className: clsx(styles.textarea, className),
     onChange: onChangeHandler
-  }, props))));
+  }, props, {
+    id: textareaId,
+    required: required,
+    "aria-invalid": (_b = props["aria-invalid"]) !== null && _b !== void 0 ? _b : hasError || undefined,
+    "aria-describedby": clsx(props["aria-describedby"], hintId) || undefined
+  }))));
 };
 
 export { TextArea };

package/esm/Theme/breakpoints.js

@@ -2,7 +2,7 @@
  * Breakpoints shared with the apps that use the kit.
  * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
  */
-var BREAKPOINTS = {
+const BREAKPOINTS = {
   sm: "40rem",
   md: "48rem",
   lg: "64rem",
@@ -10,16 +10,10 @@ var BREAKPOINTS = {
   "2xl": "96rem"
 };
 /** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
-var media = {
-  up: function up(name) {
-    return "(width >= ".concat(BREAKPOINTS[name], ")");
-  },
-  down: function down(name) {
-    return "(width < ".concat(BREAKPOINTS[name], ")");
-  },
-  between: function between(from, to) {
-    return "(".concat(BREAKPOINTS[from], " <= width < ").concat(BREAKPOINTS[to], ")");
-  }
+const media = {
+  up: name => `(width >= ${BREAKPOINTS[name]})`,
+  down: name => `(width < ${BREAKPOINTS[name]})`,
+  between: (from, to) => `(${BREAKPOINTS[from]} <= width < ${BREAKPOINTS[to]})`
 };
 
 export { BREAKPOINTS, media };

package/esm/Theme/colors/theme_buenos_aires.js

@@ -1,11 +1,11 @@
-var BrandBA = {
+const BrandBA = {
   BRAND_BA_LIME: "#9FE870",
   BRAND_BA_FOREST: "#163300",
   BRAND_BA_INK: "#0D1F12",
   BRAND_BA_CANVAS: "#F5F7F2",
   BRAND_BA_WHITE: "#FFFFFF"
 };
-var NeutralBA = {
+const NeutralBA = {
   NEUTRAL_BA_0: "#FFFFFF",
   NEUTRAL_BA_50: "#F5F7F2",
   NEUTRAL_BA_100: "#EDF0EA",
@@ -19,7 +19,7 @@ var NeutralBA = {
   NEUTRAL_BA_900: "#203025",
   NEUTRAL_BA_950: "#0D1F12"
 };
-var LimeBA = {
+const LimeBA = {
   LIME_BA_50: "#F4FFEC",
   LIME_BA_100: "#E4FFD2",
   LIME_BA_200: "#D0FBAF",
@@ -32,7 +32,7 @@ var LimeBA = {
   LIME_BA_900: "#163300",
   LIME_BA_950: "#0D1F12"
 };
-var BlueBA = {
+const BlueBA = {
   BLUE_BA_50: "#EFFBFB",
   BLUE_BA_100: "#DDF7F7",
   BLUE_BA_200: "#BCECEF",
@@ -44,7 +44,7 @@ var BlueBA = {
   BLUE_BA_800: "#185159",
   BLUE_BA_900: "#123B40"
 };
-var PinkBA = {
+const PinkBA = {
   PINK_BA_50: "#FFF5F8",
   PINK_BA_100: "#FFE7F0",
   PINK_BA_200: "#FFD2E3",
@@ -56,7 +56,7 @@ var PinkBA = {
   PINK_BA_800: "#702645",
   PINK_BA_900: "#541B35"
 };
-var OrangeBA = {
+const OrangeBA = {
   ORANGE_BA_50: "#FFF7F1",
   ORANGE_BA_100: "#FFE8D7",
   ORANGE_BA_200: "#FFD0AD",
@@ -68,7 +68,7 @@ var OrangeBA = {
   ORANGE_BA_800: "#6D2E13",
   ORANGE_BA_900: "#542610"
 };
-var YellowBA = {
+const YellowBA = {
   YELLOW_BA_50: "#FFFBEB",
   YELLOW_BA_100: "#FFF4BD",
   YELLOW_BA_200: "#FFE982",
@@ -80,7 +80,7 @@ var YellowBA = {
   YELLOW_BA_800: "#59470C",
   YELLOW_BA_900: "#3C3609"
 };
-var PurpleBA = {
+const PurpleBA = {
   PURPLE_BA_50: "#F8F6FF",
   PURPLE_BA_100: "#EAE4FF",
   PURPLE_BA_200: "#D6CAFF",
@@ -92,7 +92,7 @@ var PurpleBA = {
   PURPLE_BA_800: "#402E78",
   PURPLE_BA_900: "#30215C"
 };
-var StatusBA = {
+const StatusBA = {
   STATUS_BA_SUCCESS: "#244F18",
   STATUS_BA_SUCCESS_BG: "#E4FFD2",
   STATUS_BA_SUCCESS_BG_HOVER: LimeBA.LIME_BA_200,
@@ -105,7 +105,7 @@ var StatusBA = {
   STATUS_BA_INFO: "#123B40",
   STATUS_BA_INFO_BG: "#DDF7F7"
 };
-var PromoBA = {
+const PromoBA = {
   PROMO_SILVER: "#EDF0EA",
   PROMO_GOLD: "#FFF4BD",
   PROMO_ASPHALT: "#E2E7DF",
@@ -115,27 +115,27 @@ var PromoBA = {
   PROMO_SKY: "#DDF7F7",
   PROMO_NEON: "#EAE4FF"
 };
-var PrimaryBA = {
+const PrimaryBA = {
   PRIMARY_BA_1: LimeBA.LIME_BA_100,
   PRIMARY_BA_2: LimeBA.LIME_BA_200,
   PRIMARY_BA_3: LimeBA.LIME_BA_300,
   PRIMARY_BA_4: LimeBA.LIME_BA_400,
   PRIMARY_BA_5: LimeBA.LIME_BA_500
 };
-var SecondaryBA = {
+const SecondaryBA = {
   SECONDARY_BA_1: NeutralBA.NEUTRAL_BA_100,
   SECONDARY_BA_2: NeutralBA.NEUTRAL_BA_300,
   SECONDARY_BA_3: NeutralBA.NEUTRAL_BA_700,
   SECONDARY_BA_4: BrandBA.BRAND_BA_FOREST,
   SECONDARY_BA_5: BrandBA.BRAND_BA_INK
 };
-var TretiaryBA = {
+const TretiaryBA = {
   TRETIARY_BA_1: BlueBA.BLUE_BA_50,
   TRETIARY_BA_2: BlueBA.BLUE_BA_100,
   TRETIARY_BA_3: BlueBA.BLUE_BA_300,
   TRETIARY_BA_4: BlueBA.BLUE_BA_500,
   TRETIARY_BA_5: BlueBA.BLUE_BA_700
 };
-var Color = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BrandBA), NeutralBA), LimeBA), BlueBA), PinkBA), OrangeBA), YellowBA), PurpleBA), StatusBA), PromoBA), PrimaryBA), SecondaryBA), TretiaryBA);
+const Color = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BrandBA), NeutralBA), LimeBA), BlueBA), PinkBA), OrangeBA), YellowBA), PurpleBA), StatusBA), PromoBA), PrimaryBA), SecondaryBA), TretiaryBA);
 
 export { BlueBA, BrandBA, LimeBA, NeutralBA, OrangeBA, PinkBA, PrimaryBA, PromoBA, PurpleBA, SecondaryBA, StatusBA, TretiaryBA, YellowBA, Color as default };

package/esm/Theme/colors/theme_jaipur.js

@@ -1,11 +1,11 @@
-var BrandJP = {
+const BrandJP = {
   BRAND_JP_PINK: "#FFA8CD",
   BRAND_JP_EGGPLANT: "#2C2242",
   BRAND_JP_INK: "#0B051D",
   BRAND_JP_CANVAS: "#F9F8F5",
   BRAND_JP_WHITE: "#FFFFFF"
 };
-var NeutralJP = {
+const NeutralJP = {
   NEUTRAL_JP_0: "#FFFFFF",
   NEUTRAL_JP_50: "#F9F8F5",
   NEUTRAL_JP_100: "#F2F1EE",
@@ -19,7 +19,7 @@ var NeutralJP = {
   NEUTRAL_JP_900: "#211A31",
   NEUTRAL_JP_950: "#0B051D"
 };
-var PinkJP = {
+const PinkJP = {
   PINK_JP_50: "#FFF5F9",
   PINK_JP_100: "#FFE8F2",
   PINK_JP_200: "#FFD3E5",
@@ -32,7 +32,7 @@ var PinkJP = {
   PINK_JP_900: "#5C2042",
   PINK_JP_950: "#351126"
 };
-var PurpleJP = {
+const PurpleJP = {
   PURPLE_JP_50: "#F8F5FA",
   PURPLE_JP_100: "#EEE7F1",
   PURPLE_JP_200: "#DED1E3",
@@ -45,7 +45,7 @@ var PurpleJP = {
   PURPLE_JP_900: "#2C2242",
   PURPLE_JP_950: "#171022"
 };
-var LimeJP = {
+const LimeJP = {
   LIME_JP_50: "#FBFFF2",
   LIME_JP_100: "#F5FFDD",
   LIME_JP_200: "#EEFFC6",
@@ -57,7 +57,7 @@ var LimeJP = {
   LIME_JP_800: "#526820",
   LIME_JP_900: "#374715"
 };
-var BlueJP = {
+const BlueJP = {
   BLUE_JP_50: "#F3F7FF",
   BLUE_JP_100: "#E4EDFF",
   BLUE_JP_200: "#CDDCFF",
@@ -69,7 +69,7 @@ var BlueJP = {
   BLUE_JP_800: "#303F6C",
   BLUE_JP_900: "#252F50"
 };
-var OrangeJP = {
+const OrangeJP = {
   ORANGE_JP_50: "#FFF8F3",
   ORANGE_JP_100: "#FFEBDD",
   ORANGE_JP_200: "#FFD8BE",
@@ -81,7 +81,7 @@ var OrangeJP = {
   ORANGE_JP_800: "#713721",
   ORANGE_JP_900: "#51291B"
 };
-var YellowJP = {
+const YellowJP = {
   YELLOW_JP_50: "#FFFDF2",
   YELLOW_JP_100: "#FFF8D8",
   YELLOW_JP_200: "#FFF0AD",
@@ -93,7 +93,7 @@ var YellowJP = {
   YELLOW_JP_800: "#624D15",
   YELLOW_JP_900: "#443612"
 };
-var StatusJP = {
+const StatusJP = {
   STATUS_JP_SUCCESS: "#46591B",
   STATUS_JP_SUCCESS_BG: "#E6FFA9",
   STATUS_JP_SUCCESS_BG_HOVER: LimeJP.LIME_JP_200,
@@ -106,7 +106,7 @@ var StatusJP = {
   STATUS_JP_INFO: "#303F6C",
   STATUS_JP_INFO_BG: "#E4EDFF"
 };
-var PromoJP = {
+const PromoJP = {
   PROMO_SILVER: "#F2F1EE",
   PROMO_GOLD: "#FFF0AD",
   PROMO_ASPHALT: "#E4E3DF",
@@ -116,27 +116,27 @@ var PromoJP = {
   PROMO_SKY: "#E4EDFF",
   PROMO_NEON: "#EEE7F1"
 };
-var PrimaryJP = {
+const PrimaryJP = {
   PRIMARY_JP_1: PinkJP.PINK_JP_100,
   PRIMARY_JP_2: PinkJP.PINK_JP_200,
   PRIMARY_JP_3: PinkJP.PINK_JP_300,
   PRIMARY_JP_4: PinkJP.PINK_JP_400,
   PRIMARY_JP_5: PinkJP.PINK_JP_500
 };
-var SecondaryJP = {
+const SecondaryJP = {
   SECONDARY_JP_1: NeutralJP.NEUTRAL_JP_100,
   SECONDARY_JP_2: NeutralJP.NEUTRAL_JP_300,
   SECONDARY_JP_3: NeutralJP.NEUTRAL_JP_700,
   SECONDARY_JP_4: BrandJP.BRAND_JP_EGGPLANT,
   SECONDARY_JP_5: BrandJP.BRAND_JP_INK
 };
-var TretiaryJP = {
+const TretiaryJP = {
   TRETIARY_JP_1: PurpleJP.PURPLE_JP_50,
   TRETIARY_JP_2: PurpleJP.PURPLE_JP_100,
   TRETIARY_JP_3: PurpleJP.PURPLE_JP_300,
   TRETIARY_JP_4: PurpleJP.PURPLE_JP_500,
   TRETIARY_JP_5: PurpleJP.PURPLE_JP_700
 };
-var Color = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BrandJP), NeutralJP), PinkJP), PurpleJP), LimeJP), BlueJP), OrangeJP), YellowJP), StatusJP), PromoJP), PrimaryJP), SecondaryJP), TretiaryJP);
+const Color = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BrandJP), NeutralJP), PinkJP), PurpleJP), LimeJP), BlueJP), OrangeJP), YellowJP), StatusJP), PromoJP), PrimaryJP), SecondaryJP), TretiaryJP);
 
 export { BlueJP, BrandJP, LimeJP, NeutralJP, OrangeJP, PinkJP, PrimaryJP, PromoJP, PurpleJP, SecondaryJP, StatusJP, TretiaryJP, YellowJP, Color as default };

package/esm/Theme/global.css

@@ -19,7 +19,6 @@
   border: none;
   box-sizing: border-box;
   margin: 0;
-  outline: none;
   padding: 0;
   text-decoration: none;
 }

package/esm/Theme/index.js

@@ -3,7 +3,7 @@ import theme_jaipur from './themes/jaipur.js';
 import THEME_BA from './themes/buenos_aires.js';
 export { BREAKPOINTS, media } from './breakpoints.js';
 
-var THEMES = {
+const THEMES = {
   JAIPUR: Object.assign(Object.assign({}, theme_jaipur), BUTTON_TOKENS),
   BA: Object.assign(Object.assign({}, THEME_BA), BUTTON_TOKENS)
 };

package/esm/TimeSelect/Label/index.js

@@ -1,17 +1,15 @@
 import React from 'react';
 
-var OptionLabel = function OptionLabel(_ref) {
-  var time = _ref.time,
-    onClick = _ref.onClick,
-    onMouseEnter = _ref.onMouseEnter;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React.createElement("span", {
-      onClick: onClick,
-      onMouseEnter: onMouseEnter
-    }, time)
-  );
-};
+const OptionLabel = ({
+  time,
+  onClick,
+  onMouseEnter
+}) => (
+/*#__PURE__*/
+// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+React.createElement("span", {
+  onClick: onClick,
+  onMouseEnter: onMouseEnter
+}, time));
 
 export { OptionLabel };

package/esm/TimeSelect/helpers.js

@@ -1,54 +1,39 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { addMinutes, parse, isBefore, format } from 'date-fns';
 
-var day = new Date();
+const day = new Date();
 day.setHours(24, 0, 0, 0);
-var formatTime = function formatTime(date) {
-  return format(date, "HH:mm");
-};
-var generateSuggest = function generateSuggest() {
-  var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 15;
-  return new Array(24 * 60 / interval).fill(null).map(function (_, index) {
-    var date = addMinutes(day, index * interval);
-    return {
-      time: formatTime(date)
-    };
-  });
-};
-var checkIsBeforeNow = function checkIsBeforeNow(time, currentDate) {
+const formatTime = date => format(date, "HH:mm");
+const generateSuggest = (interval = 15) => new Array(24 * 60 / interval).fill(null).map((_, index) => {
+  const date = addMinutes(day, index * interval);
+  return {
+    time: formatTime(date)
+  };
+});
+const checkIsBeforeNow = (time, currentDate) => {
   if (!currentDate) return false;
-  var baseDate = new Date(currentDate);
+  const baseDate = new Date(currentDate);
   baseDate.setHours(0, 0, 0, 0);
-  var parsedTime = parse(time, "HH:mm", baseDate);
+  const parsedTime = parse(time, "HH:mm", baseDate);
   return isBefore(parsedTime, currentDate);
 };
-var checkIsBeforeSelectedDate = function checkIsBeforeSelectedDate(time, interval, date) {
+const checkIsBeforeSelectedDate = (time, interval, date) => {
   if (date) {
-    var selectedDate = new Date(date);
+    const selectedDate = new Date(date);
     selectedDate.setMinutes(selectedDate.getMinutes() + interval);
-    var baseDate = new Date(date);
+    const baseDate = new Date(date);
     baseDate.setHours(0, 0, 0, 0);
-    var parsedTime = parse(time, "HH:mm", baseDate);
+    const parsedTime = parse(time, "HH:mm", baseDate);
     return isBefore(parsedTime, selectedDate);
   }
   return false;
 };
-var isTimeInRange = function isTimeInRange(timeString, range) {
-  var _timeString$split$map = timeString.split(":").map(Number),
-    _timeString$split$map2 = _slicedToArray(_timeString$split$map, 2),
-    hours = _timeString$split$map2[0],
-    minutes = _timeString$split$map2[1];
-  var totalMinutes = hours * 60 + minutes;
-  var _range$start$split$ma = range.start.split(":").map(Number),
-    _range$start$split$ma2 = _slicedToArray(_range$start$split$ma, 2),
-    startHours = _range$start$split$ma2[0],
-    startMinutes = _range$start$split$ma2[1];
-  var startTotalMinutes = startHours * 60 + startMinutes;
-  var _range$end$split$map = range.end.split(":").map(Number),
-    _range$end$split$map2 = _slicedToArray(_range$end$split$map, 2),
-    endHours = _range$end$split$map2[0],
-    endMinutes = _range$end$split$map2[1];
-  var endTotalMinutes = endHours * 60 + endMinutes;
+const isTimeInRange = (timeString, range) => {
+  const [hours, minutes] = timeString.split(":").map(Number);
+  const totalMinutes = hours * 60 + minutes;
+  const [startHours, startMinutes] = range.start.split(":").map(Number);
+  const startTotalMinutes = startHours * 60 + startMinutes;
+  const [endHours, endMinutes] = range.end.split(":").map(Number);
+  const endTotalMinutes = endHours * 60 + endMinutes;
   return totalMinutes >= startTotalMinutes && totalMinutes <= endTotalMinutes;
 };
 

package/esm/TimeSelect/index.js

@@ -3,45 +3,39 @@ import { Select } from '../Select/index.js';
 import { generateSuggest, isTimeInRange, checkIsBeforeSelectedDate, checkIsBeforeNow } from './helpers.js';
 import { OptionLabel } from './Label/index.js';
 
-var TimeSelect = function TimeSelect(_ref) {
-  var value = _ref.value,
-    name = _ref.name,
-    className = _ref.className,
-    currentDate = _ref.currentDate,
-    selectedDate = _ref.selectedDate,
-    label = _ref.label,
-    _ref$interval = _ref.interval,
-    interval = _ref$interval === void 0 ? 15 : _ref$interval,
-    onChange = _ref.onChange,
-    disabled = _ref.disabled,
-    allowedTimeRange = _ref.allowedTimeRange,
-    placeholder = _ref.placeholder,
-    fullWidth = _ref.fullWidth,
-    customInputRoot = _ref.customInputRoot,
-    fontSize = _ref.fontSize,
-    required = _ref.required,
-    size = _ref.size,
-    zIndex = _ref.zIndex,
-    hasError = _ref.hasError,
-    hint = _ref.hint;
-  var baseOptions = useMemo(function () {
-    return generateSuggest(interval).map(function (item) {
-      return {
-        value: item.time,
-        label: /*#__PURE__*/React.createElement(OptionLabel, {
-          time: item.time
-        })
-      };
+const TimeSelect = ({
+  value,
+  name,
+  className,
+  currentDate,
+  selectedDate,
+  label,
+  interval = 15,
+  onChange,
+  disabled,
+  allowedTimeRange,
+  placeholder,
+  fullWidth,
+  customInputRoot,
+  fontSize,
+  required,
+  size,
+  zIndex,
+  hasError,
+  hint
+}) => {
+  const baseOptions = useMemo(() => generateSuggest(interval).map(item => ({
+    value: item.time,
+    label: /*#__PURE__*/React.createElement(OptionLabel, {
+      time: item.time
+    })
+  })), [interval]);
+  const options = useMemo(() => baseOptions.map(option => {
+    const isDisabled = !!allowedTimeRange && !isTimeInRange(option.value, allowedTimeRange) || !!selectedDate && checkIsBeforeSelectedDate(option.value, interval, selectedDate) || !!currentDate && checkIsBeforeNow(option.value, currentDate);
+    return Object.assign(Object.assign({}, option), {
+      disabled: isDisabled
     });
-  }, [interval]);
-  var options = useMemo(function () {
-    return baseOptions.map(function (option) {
-      var isDisabled = !!allowedTimeRange && !isTimeInRange(option.value, allowedTimeRange) || !!selectedDate && checkIsBeforeSelectedDate(option.value, interval, selectedDate) || !!currentDate && checkIsBeforeNow(option.value, currentDate);
-      return Object.assign(Object.assign({}, option), {
-        disabled: isDisabled
-      });
-    });
-  }, [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
+  }), [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React.createElement(Select, {
     className: className,
     customInputRoot: customInputRoot,

package/esm/Tooltip/index.js

@@ -1,62 +1,57 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useState, useRef, useMemo, cloneElement } from 'react';
 import { useFloating, offset, flip, shift, arrow, useHover, useDismiss, useRole, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
 import clsx from 'clsx';
 import styles from './Tooltip.module.css';
 
-var Tooltip = function Tooltip(_ref) {
-  var children = _ref.children,
-    content = _ref.content,
-    _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
-    _ref$withTail = _ref.withTail,
-    withTail = _ref$withTail === void 0 ? false : _ref$withTail,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
-    _ref$strategy = _ref.strategy,
-    strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-    className = _ref.className;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var arrowRef = useRef(null);
-  var _useFloating = useFloating({
-      placement: placement,
-      strategy: strategy,
-      open: isOpen,
-      onOpenChange: setIsOpen,
-      middleware: [offset(8), flip(), shift({
-        padding: 8
-      }), arrow({
-        element: arrowRef
-      })]
-    }),
-    refs = _useFloating.refs,
-    context = _useFloating.context,
-    floatingStyles = _useFloating.floatingStyles;
-  var hover = useHover(context, {
+const Tooltip = ({
+  children,
+  content,
+  zIndex = 1000,
+  withTail = false,
+  placement = "bottom",
+  strategy = "absolute",
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const {
+    refs,
+    context,
+    floatingStyles
+  } = useFloating({
+    placement,
+    strategy,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset(8), flip(), shift({
+      padding: 8
+    }), arrow({
+      element: arrowRef
+    })]
+  });
+  const hover = useHover(context, {
     move: false,
     delay: {
       open: 100,
       close: 100
     }
   });
-  var dismiss = useDismiss(context);
-  var role = useRole(context, {
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
     role: "tooltip"
   });
-  var _useInteractions = useInteractions([hover, dismiss, role]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
-  var reference = useMemo(function () {
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([hover, dismiss, role]);
+  const reference = useMemo(() => {
     if (!children) return null;
     if (typeof children === "string") {
       return /*#__PURE__*/React.createElement("span", null, children);
     }
     return children;
   }, [children]);
-  var trigger = reference ? /*#__PURE__*/cloneElement(reference, Object.assign({
+  const trigger = reference ? /*#__PURE__*/cloneElement(reference, Object.assign({
     ref: refs.setReference
   }, getReferenceProps())) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, trigger, isOpen && (/*#__PURE__*/React.createElement(FloatingPortal, null, /*#__PURE__*/React.createElement("div", Object.assign({
@@ -64,7 +59,7 @@ var Tooltip = function Tooltip(_ref) {
   }, getFloatingProps(), {
     className: clsx(styles.tooltip, className),
     style: Object.assign(Object.assign({}, floatingStyles), {
-      zIndex: zIndex
+      zIndex
     })
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.content