colibri-ui 0.8.84 → 0.8.87

package/esm/Slider/Slider.js

@@ -2,118 +2,88 @@ import { __rest } from 'tslib';
 import React, { forwardRef, useRef } from 'react';
 import styles from './Slider.module.css';
 
-var cx = function cx() {
-  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
-    classNames[_key] = arguments[_key];
-  }
-  return classNames.filter(Boolean).join(" ");
-};
-var clamp = function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-};
-var decimals = function decimals(value) {
+const cx = (...classNames) => classNames.filter(Boolean).join(" ");
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const decimals = value => {
   var _a;
   return ((_a = String(value).split(".")[1]) !== null && _a !== void 0 ? _a : "").length;
 };
-var normalize = function normalize(value, min, max, step) {
-  var snapped = min + Math.round((clamp(value, min, max) - min) / step) * step;
+const normalize = (value, min, max, step) => {
+  const snapped = min + Math.round((clamp(value, min, max) - min) / step) * step;
   return Number(clamp(snapped, min, max).toFixed(Math.max(decimals(step), decimals(min))));
 };
-var Slider = /*#__PURE__*/forwardRef(function SliderComponent(props, ref) {
+const Slider = /*#__PURE__*/forwardRef(function SliderComponent(props, ref) {
   var _a;
-  var _props$mode = props.mode,
-    mode = _props$mode === void 0 ? "single" : _props$mode,
-    value = props.value,
-    onChange = props.onChange,
-    onChangeCommitted = props.onChangeCommitted,
-    _props$min = props.min,
-    min = _props$min === void 0 ? 0 : _props$min,
-    _props$max = props.max,
-    max = _props$max === void 0 ? 100 : _props$max,
-    _props$step = props.step,
-    step = _props$step === void 0 ? 1 : _props$step,
-    label = props.label,
-    labelContent = props.labelContent,
-    _props$labelPlacement = props.labelPlacement,
-    labelPlacement = _props$labelPlacement === void 0 ? "top" : _props$labelPlacement,
-    _props$orientation = props.orientation,
-    orientation = _props$orientation === void 0 ? "horizontal" : _props$orientation,
-    _props$reversed = props.reversed,
-    reversed = _props$reversed === void 0 ? false : _props$reversed,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "m" : _props$size,
-    _props$view = props.view,
-    view = _props$view === void 0 ? "default" : _props$view,
-    _props$pointerSize = props.pointerSize,
-    pointerSize = _props$pointerSize === void 0 ? "small" : _props$pointerSize,
-    _props$pointerVisibil = props.pointerVisibility,
-    pointerVisibility = _props$pointerVisibil === void 0 ? "always" : _props$pointerVisibil,
-    _props$showValue = props.showValue,
-    showValue = _props$showValue === void 0 ? false : _props$showValue,
-    _props$valueFormatter = props.valueFormatter,
-    valueFormatter = _props$valueFormatter === void 0 ? function (current) {
-      return current;
-    } : _props$valueFormatter,
-    _props$ticks = props.ticks,
-    ticks = _props$ticks === void 0 ? [] : _props$ticks,
-    _props$tickType = props.tickType,
-    tickType = _props$tickType === void 0 ? "bullet" : _props$tickType,
-    ariaLabel = props.ariaLabel,
-    name = props.name,
-    className = props.className,
+  const {
+      mode = "single",
+      value,
+      onChange,
+      onChangeCommitted,
+      min = 0,
+      max = 100,
+      step = 1,
+      label,
+      labelContent,
+      labelPlacement = "top",
+      orientation = "horizontal",
+      reversed = false,
+      disabled = false,
+      size = "m",
+      view = "default",
+      pointerSize = "small",
+      pointerVisibility = "always",
+      showValue = false,
+      valueFormatter = current => current,
+      ticks = [],
+      tickType = "bullet",
+      ariaLabel,
+      name,
+      className
+    } = props,
     rest = __rest(props, ["mode", "value", "onChange", "onChangeCommitted", "min", "max", "step", "label", "labelContent", "labelPlacement", "orientation", "reversed", "disabled", "size", "view", "pointerSize", "pointerVisibility", "showValue", "valueFormatter", "ticks", "tickType", "ariaLabel", "name", "className"]);
-  var trackRef = useRef(null);
-  var activeThumb = useRef(0);
-  var range = max - min || 1;
-  var values = mode === "range" ? [normalize(value[0], min, max, step), normalize(value[1], min, max, step)] : [min, normalize(value, min, max, step)];
-  var low = Math.min(values[0], values[1]);
-  var high = Math.max(values[0], values[1]);
-  var toPercent = function toPercent(current) {
-    return (current - min) / range * 100;
-  };
-  var toVisualPercent = function toVisualPercent(current) {
-    return reversed ? 100 - toPercent(current) : toPercent(current);
-  };
-  var thumbPercents = [toVisualPercent(values[0]), toVisualPercent(values[1])];
-  var lowPercent = mode === "range" ? Math.min.apply(Math, thumbPercents) : 0;
-  var highPercent = mode === "range" ? Math.max.apply(Math, thumbPercents) : thumbPercents[1];
-  var minDistance = mode === "range" ? Math.max(0, (_a = props.minDistance) !== null && _a !== void 0 ? _a : 0) : 0;
-  var emitValue = function emitValue(index, nextValue) {
-    var committed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var next = normalize(nextValue, min, max, step);
+  const trackRef = useRef(null);
+  const activeThumb = useRef(0);
+  const range = max - min || 1;
+  const values = mode === "range" ? [normalize(value[0], min, max, step), normalize(value[1], min, max, step)] : [min, normalize(value, min, max, step)];
+  const low = Math.min(values[0], values[1]);
+  const high = Math.max(values[0], values[1]);
+  const toPercent = current => (current - min) / range * 100;
+  const toVisualPercent = current => reversed ? 100 - toPercent(current) : toPercent(current);
+  const thumbPercents = [toVisualPercent(values[0]), toVisualPercent(values[1])];
+  const lowPercent = mode === "range" ? Math.min(...thumbPercents) : 0;
+  const highPercent = mode === "range" ? Math.max(...thumbPercents) : thumbPercents[1];
+  const minDistance = mode === "range" ? Math.max(0, (_a = props.minDistance) !== null && _a !== void 0 ? _a : 0) : 0;
+  const emitValue = (index, nextValue, committed = false) => {
+    const next = normalize(nextValue, min, max, step);
     if (mode === "single") {
       if (committed) onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(next);else onChange(next);
       return;
     }
-    var current = values;
-    var nextRange = index === 0 ? [Math.min(next, current[1] - minDistance), current[1]] : [current[0], Math.max(next, current[0] + minDistance)];
+    const current = values;
+    const nextRange = index === 0 ? [Math.min(next, current[1] - minDistance), current[1]] : [current[0], Math.max(next, current[0] + minDistance)];
     if (committed) onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextRange);else onChange(nextRange);
   };
-  var valueFromPointer = function valueFromPointer(event) {
+  const valueFromPointer = event => {
     var _a;
-    var rect = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const rect = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     if (!rect) return min;
-    var rawRatio = orientation === "horizontal" ? (event.clientX - rect.left) / rect.width : (rect.bottom - event.clientY) / rect.height;
-    var ratio = reversed ? 1 - rawRatio : rawRatio;
+    const rawRatio = orientation === "horizontal" ? (event.clientX - rect.left) / rect.width : (rect.bottom - event.clientY) / rect.height;
+    const ratio = reversed ? 1 - rawRatio : rawRatio;
     return min + clamp(ratio, 0, 1) * range;
   };
-  var handlePointerDown = function handlePointerDown(event) {
+  const handlePointerDown = event => {
     if (disabled || event.target instanceof HTMLInputElement) return;
-    var nextValue = valueFromPointer(event);
+    const nextValue = valueFromPointer(event);
     activeThumb.current = mode === "range" && Math.abs(nextValue - values[0]) <= Math.abs(nextValue - values[1]) ? 0 : 1;
     event.currentTarget.setPointerCapture(event.pointerId);
     emitValue(activeThumb.current, nextValue);
   };
-  var normalizedTicks = ticks.map(function (tick) {
-    return typeof tick === "number" ? {
-      value: tick,
-      label: tick
-    } : tick;
-  });
-  var horizontal = orientation === "horizontal";
-  var labelNode = labelPlacement !== "none" && (label || labelContent) && (/*#__PURE__*/React.createElement("div", {
+  const normalizedTicks = ticks.map(tick => typeof tick === "number" ? {
+    value: tick,
+    label: tick
+  } : tick);
+  const horizontal = orientation === "horizontal";
+  const labelNode = labelPlacement !== "none" && (label || labelContent) && (/*#__PURE__*/React.createElement("div", {
     className: styles.label_wrapper
   }, labelContent && (/*#__PURE__*/React.createElement("span", {
     className: styles.label_content
@@ -122,24 +92,24 @@ var Slider = /*#__PURE__*/forwardRef(function SliderComponent(props, ref) {
   }, label)));
   return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
     ref: ref,
-    className: cx(styles.root, styles[size], styles[view], styles[orientation], styles["pointer_".concat(pointerSize)], pointerVisibility === "hover" && styles.pointer_on_hover, labelPlacement === "left" && styles.label_left, reversed && styles.reversed, disabled && styles.disabled, className)
+    className: cx(styles.root, styles[size], styles[view], styles[orientation], styles[`pointer_${pointerSize}`], pointerVisibility === "hover" && styles.pointer_on_hover, labelPlacement === "left" && styles.label_left, reversed && styles.reversed, disabled && styles.disabled, className)
   }), labelPlacement === "top" && labelNode, /*#__PURE__*/React.createElement("div", {
     className: styles.main
   }, labelPlacement === "left" && labelNode, /*#__PURE__*/React.createElement("div", {
     className: cx(styles.slider_area, mode === "range" && styles.range),
     style: {
-      "--slider-low": "".concat(thumbPercents[0], "%"),
-      "--slider-high": "".concat(thumbPercents[1], "%")
+      "--slider-low": `${thumbPercents[0]}%`,
+      "--slider-high": `${thumbPercents[1]}%`
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: trackRef,
     className: cx(styles.track, tickType === "separator" && styles.segmented),
     onPointerDown: handlePointerDown,
-    onPointerMove: function onPointerMove(event) {
+    onPointerMove: event => {
       if (disabled || !event.currentTarget.hasPointerCapture(event.pointerId)) return;
       emitValue(activeThumb.current, valueFromPointer(event));
     },
-    onPointerUp: function onPointerUp(event) {
+    onPointerUp: event => {
       if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
       event.currentTarget.releasePointerCapture(event.pointerId);
       emitValue(activeThumb.current, valueFromPointer(event), true);
@@ -147,28 +117,28 @@ var Slider = /*#__PURE__*/forwardRef(function SliderComponent(props, ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: styles.fill,
     style: horizontal ? {
-      left: "".concat(lowPercent, "%"),
-      width: "".concat(highPercent - lowPercent, "%")
+      left: `${lowPercent}%`,
+      width: `${highPercent - lowPercent}%`
     } : {
-      bottom: "".concat(lowPercent, "%"),
-      height: "".concat(highPercent - lowPercent, "%")
+      bottom: `${lowPercent}%`,
+      height: `${highPercent - lowPercent}%`
     }
-  }), normalizedTicks.map(function (tick) {
-    var percent = toVisualPercent(clamp(tick.value, min, max));
-    var filled = tick.value >= low && tick.value <= high;
+  }), normalizedTicks.map(tick => {
+    const percent = toVisualPercent(clamp(tick.value, min, max));
+    const filled = tick.value >= low && tick.value <= high;
     return /*#__PURE__*/React.createElement("span", {
       key: tick.value,
       className: cx(styles.tick, filled && styles.tick_filled),
       style: horizontal ? {
-        left: "".concat(percent, "%")
+        left: `${percent}%`
       } : {
-        bottom: "".concat(percent, "%")
+        bottom: `${percent}%`
       }
     }, /*#__PURE__*/React.createElement("i", null), tick.label != null && /*#__PURE__*/React.createElement("b", null, tick.label));
-  })), (mode === "range" ? [0, 1] : [1]).map(function (index) {
-    var current = values[index];
-    var inputName = Array.isArray(name) ? name[index] : name;
-    var inputLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
+  })), (mode === "range" ? [0, 1] : [1]).map(index => {
+    const current = values[index];
+    const inputName = Array.isArray(name) ? name[index] : name;
+    const inputLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, /*#__PURE__*/React.createElement("input", {
@@ -181,21 +151,15 @@ var Slider = /*#__PURE__*/forwardRef(function SliderComponent(props, ref) {
       name: inputName,
       "aria-label": inputLabel,
       disabled: disabled,
-      onChange: function onChange(event) {
-        return emitValue(index, Number(event.currentTarget.value));
-      },
-      onPointerUp: function onPointerUp(event) {
-        return emitValue(index, Number(event.currentTarget.value), true);
-      },
-      onKeyUp: function onKeyUp(event) {
-        return emitValue(index, Number(event.currentTarget.value), true);
-      }
+      onChange: event => emitValue(index, Number(event.currentTarget.value)),
+      onPointerUp: event => emitValue(index, Number(event.currentTarget.value), true),
+      onKeyUp: event => emitValue(index, Number(event.currentTarget.value), true)
     }), showValue && (/*#__PURE__*/React.createElement("span", {
       className: styles.current_value,
       style: horizontal ? {
-        left: "".concat(toVisualPercent(current), "%")
+        left: `${toVisualPercent(current)}%`
       } : {
-        bottom: "".concat(toVisualPercent(current), "%")
+        bottom: `${toVisualPercent(current)}%`
       }
     }, valueFormatter(current))));
   }))));

package/esm/Status/index.js

@@ -1,23 +1,23 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
 import clsx from 'clsx';
 import styles from './index.module.css';
 
-var Status = function Status(_ref) {
-  var className = _ref.className,
-    indicator = _ref.indicator,
-    _ref$showIndicator = _ref.showIndicator,
-    showIndicator = _ref$showIndicator === void 0 ? true : _ref$showIndicator,
-    _ref$tag = _ref.tag,
-    Component = _ref$tag === void 0 ? "span" : _ref$tag,
-    children = _ref.children,
-    type = _ref.type;
-  return /*#__PURE__*/React.createElement(Component, {
-    className: clsx(styles.root, _defineProperty({}, styles["root_".concat(type)], Boolean(type)), className)
-  }, showIndicator && (/*#__PURE__*/React.createElement("span", {
-    className: clsx(styles.indicator, _defineProperty({}, styles["indicator_custom"], Boolean(indicator))),
-    "aria-hidden": "true"
-  }, indicator)), children);
-};
+const Status = ({
+  className,
+  indicator,
+  showIndicator = true,
+  tag: Component = "span",
+  children,
+  type
+}) => (/*#__PURE__*/React.createElement(Component, {
+  className: clsx(styles.root, {
+    [styles[`root_${type}`]]: Boolean(type)
+  }, className)
+}, showIndicator && (/*#__PURE__*/React.createElement("span", {
+  className: clsx(styles.indicator, {
+    [styles["indicator_custom"]]: Boolean(indicator)
+  }),
+  "aria-hidden": "true"
+}, indicator)), children));
 
 export { Status };

package/esm/Switch/Switch.module.css

@@ -92,7 +92,8 @@
   color: var(--component-control-text);
   font-size: var(--component-control-font-size);
   line-height: 1.4;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 
 .root_disabled .text {

package/esm/Switch/index.js

@@ -1,23 +1,25 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { __rest } from 'tslib';
 import React from 'react';
 import clsx from 'clsx';
 import { Typography } from '../Typography/index.js';
 import styles from './Switch.module.css';
 
-var Switch = function Switch(_a) {
-  var disabled = _a.disabled,
-    className = _a.className,
-    _a$variant = _a.variant,
-    variant = _a$variant === void 0 ? "primary" : _a$variant,
-    hint = _a.hint,
-    hasError = _a.hasError,
-    id = _a.id,
-    label = _a.label,
-    ref = _a.ref,
+const Switch = _a => {
+  var {
+      disabled,
+      className,
+      variant = "primary",
+      hint,
+      hasError,
+      id,
+      label,
+      ref
+    } = _a,
     props = __rest(_a, ["disabled", "className", "variant", "hint", "hasError", "id", "label", "ref"]);
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles.root, _defineProperty({}, styles["root_disabled"], Boolean(disabled)), className)
+    className: clsx(styles.root, {
+      [styles["root_disabled"]]: Boolean(disabled)
+    }, className)
   }, /*#__PURE__*/React.createElement("label", {
     className: styles.label,
     htmlFor: id
@@ -28,13 +30,19 @@ var Switch = function Switch(_a) {
     type: "checkbox",
     disabled: disabled
   }, props)), /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles.wrapper, _defineProperty(_defineProperty(_defineProperty({}, styles["wrapper_variant_".concat(variant)], Boolean(variant)), styles["wrapper_disabled"], Boolean(disabled)), styles["wrapper_error"], Boolean(hasError)))
+    className: clsx(styles.wrapper, {
+      [styles[`wrapper_variant_${variant}`]]: Boolean(variant),
+      [styles["wrapper_disabled"]]: Boolean(disabled),
+      [styles["wrapper_error"]]: Boolean(hasError)
+    })
   }, /*#__PURE__*/React.createElement("div", {
     className: styles["base-switch"]
   })), label && /*#__PURE__*/React.createElement("span", {
     className: styles.text
   }, label)), hint && (/*#__PURE__*/React.createElement(Typography, {
-    className: clsx(_defineProperty({}, styles.hint_error, hasError)),
+    className: clsx({
+      [styles.hint_error]: hasError
+    }),
     variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/esm/TabsMenu/Tab/Tab.js

@@ -1,21 +1,26 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { __rest } from 'tslib';
 import React from 'react';
 import clsx from 'clsx';
 import styles from './Tab.module.css';
 
-var Tab = function Tab(_a) {
-  var innerRef = _a.innerRef,
-    active = _a.active,
-    className = _a.className,
-    content = _a.content,
-    disabled = _a.disabled,
-    size = _a.size,
+const Tab = _a => {
+  var {
+      innerRef,
+      active,
+      className,
+      content,
+      disabled,
+      size
+    } = _a,
     props = __rest(_a, ["innerRef", "active", "className", "content", "disabled", "size"]);
   return /*#__PURE__*/React.createElement("li", Object.assign({}, props, {
     "aria-selected": active,
     ref: innerRef,
-    className: clsx(styles.tab, _defineProperty(_defineProperty(_defineProperty({}, styles["tab_inactive"], Boolean(!active)), styles["tab_active"], Boolean(active)), styles["tab_disabled"], Boolean(disabled)), className),
+    className: clsx(styles.tab, {
+      [styles["tab_inactive"]]: Boolean(!active),
+      [styles["tab_active"]]: Boolean(active),
+      [styles["tab_disabled"]]: Boolean(disabled)
+    }, className),
     "data-size": size,
     role: "tab",
     tabIndex: disabled ? undefined : active ? 0 : -1

package/esm/TabsMenu/Tab/Tab.module.css

@@ -6,7 +6,8 @@
   transition-duration: 0.3s;
   transition-property: background, box-shadow, transform;
   transition-timing-function: ease;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   white-space: nowrap;
 }
 .tab[data-size=xs] {

package/esm/TabsMenu/index.js

@@ -5,41 +5,38 @@ import { isKey, Keys } from '../lib/keyboard.js';
 import { Tab } from './Tab/Tab.js';
 import styles from './TabsMenu.module.css';
 
-var TabsMenu = function TabsMenu(_a) {
-  var activeTab = _a.activeTab,
-    onChange = _a.onChange,
-    className = _a.className,
-    innerRef = _a.innerRef,
-    tabs = _a.tabs,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? "m" : _a$size,
+const TabsMenu = _a => {
+  var {
+      activeTab,
+      onChange,
+      className,
+      innerRef,
+      tabs,
+      size = "m"
+    } = _a,
     props = __rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "size"]);
-  var tabsRefs = useMemo(function () {
-    return tabs.map(function () {
-      return /*#__PURE__*/createRef();
-    });
-  }, [tabs]);
-  var onKeyDown = useCallback(function (event) {
+  const tabsRefs = useMemo(() => tabs.map(() => /*#__PURE__*/createRef()), [tabs]);
+  const onKeyDown = useCallback(event => {
     if (isKey(event.key, [Keys.LEFT, Keys.DOWN, Keys.RIGHT, Keys.UP])) {
       event.preventDefault();
-      var nextTabMenuIndex = 0;
-      var direction = isKey(event.key, [Keys.LEFT, Keys.UP]) ? -1 : 1;
-      for (var i = 0; i < tabs.length; i++) {
+      let nextTabMenuIndex = 0;
+      const direction = isKey(event.key, [Keys.LEFT, Keys.UP]) ? -1 : 1;
+      for (let i = 0; i < tabs.length; i++) {
         if (tabs[i].id === activeTab) {
           nextTabMenuIndex = i;
           break;
         }
       }
-      for (var _i = nextTabMenuIndex; _i < tabs.length; _i += direction) {
+      for (let i = nextTabMenuIndex; i < tabs.length; i += direction) {
         nextTabMenuIndex += direction;
-        var isEdge = nextTabMenuIndex >= tabs.length || nextTabMenuIndex < 0;
-        var isTabNonDisabled = tabs[nextTabMenuIndex] && !tabs[nextTabMenuIndex].disabled;
+        const isEdge = nextTabMenuIndex >= tabs.length || nextTabMenuIndex < 0;
+        const isTabNonDisabled = tabs[nextTabMenuIndex] && !tabs[nextTabMenuIndex].disabled;
         if (isEdge || isTabNonDisabled) {
           break;
         }
       }
-      var nextTabMenu = tabs[nextTabMenuIndex];
-      var nextTabMenuRef = tabsRefs[nextTabMenuIndex];
+      const nextTabMenu = tabs[nextTabMenuIndex];
+      const nextTabMenuRef = tabsRefs[nextTabMenuIndex];
       if (nextTabMenu !== undefined && nextTabMenuRef !== undefined && nextTabMenuRef.current !== null && (nextTabMenu.onClick !== undefined || onChange !== undefined)) {
         nextTabMenuRef.current.focus();
         if (nextTabMenu.onClick !== undefined) {
@@ -56,15 +53,17 @@ var TabsMenu = function TabsMenu(_a) {
     className: clsx(styles.root, className),
     ref: innerRef,
     role: "tablist"
-  }), tabs.map(function (_a, index) {
-    var id = _a.id,
-      disabled = _a.disabled,
+  }), tabs.map((_a, index) => {
+    var {
+        id,
+        disabled
+      } = _a,
       tabProps = __rest(_a, ["id", "disabled"]);
     return /*#__PURE__*/React.createElement(Tab, Object.assign({}, tabProps, {
       innerRef: tabsRefs[index],
       disabled: disabled,
       size: size,
-      onClick: disabled || !onChange && !tabProps.onClick ? undefined : function (event) {
+      onClick: disabled || !onChange && !tabProps.onClick ? undefined : event => {
         if (tabProps.onClick !== undefined) {
           tabProps.onClick(event);
         }

package/esm/TabsPanels/Panel/index.js

@@ -2,10 +2,12 @@ import { __rest } from 'tslib';
 import React from 'react';
 import clsx from 'clsx';
 
-var TabsPanel = function TabsPanel(_a) {
-  var content = _a.content,
-    className = _a.className,
-    id = _a.id,
+const TabsPanel = _a => {
+  var {
+      content,
+      className,
+      id
+    } = _a,
     props = __rest(_a, ["content", "className", "id"]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     id: id,

package/esm/TabsPanels/index.js

@@ -3,13 +3,15 @@ import React from 'react';
 import clsx from 'clsx';
 import { TabsPanel } from './Panel/index.js';
 
-var TabsPanels = function TabsPanels(_a) {
-  var activePanel = _a.activePanel,
-    className = _a.className,
-    innerRef = _a.innerRef,
-    panels = _a.panels,
+const TabsPanels = _a => {
+  var {
+      activePanel,
+      className,
+      innerRef,
+      panels
+    } = _a,
     props = __rest(_a, ["activePanel", "className", "innerRef", "panels"]);
-  var currentPanel = panels.reduce(function (acc, panel) {
+  const currentPanel = panels.reduce((acc, panel) => {
     if (acc !== null) {
       return acc;
     }
@@ -18,15 +20,16 @@ var TabsPanels = function TabsPanels(_a) {
   if (!currentPanel) {
     return null;
   }
-  var id = currentPanel.id,
-    content = currentPanel.content,
+  const {
+      id,
+      content
+    } = currentPanel,
     panelProps = __rest(currentPanel, ["id", "content"]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     ref: innerRef,
-    role: "menutabpanels",
     className: clsx(className)
   }), /*#__PURE__*/React.createElement(TabsPanel, Object.assign({
-    "aria-labelledby": "tab-".concat(activePanel),
+    "aria-labelledby": `tab-${activePanel}`,
     id: id,
     content: content
   }, panelProps)));

package/esm/TextArea/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ITextAreaProps } from "./index.props";
-export declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, hasError, hint, disabled, inputRef, ref, ...props }: ITextAreaProps) => React.JSX.Element;
+export declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, hasError, hint, disabled, inputRef, ref, id, ...props }: ITextAreaProps) => React.JSX.Element;