@algolia/satellite 1.0.0-beta.164 → 1.0.0-beta.166

package/esm/Separator/Separator.js

@@ -1,17 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as RadixSeparator from "@radix-ui/react-separator";
 import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Separator = function Separator(_ref) {
   var className = _ref.className,
+    interactive = _ref.interactive,
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation;
-  return /*#__PURE__*/_jsx(RadixSeparator.Root, {
-    decorative: true,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["separator"]))), className),
+  var interactiveProps = interactive ? {
+    decorative: false,
+    tabIndex: 0,
+    "aria-valuemax": 100,
+    "aria-valuemin": 0,
+    "aria-valuenow": 50
+  } : {
+    decorative: true
+  };
+  return /*#__PURE__*/_jsx(RadixSeparator.Root, _objectSpread({
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["separator"]))), className, interactive && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["interactive"])))),
     orientation: orientation
-  });
+  }, interactiveProps));
 };
 export default Separator;

package/esm/Separator/Separator.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = separatorPlugin;
 declare const separatorPlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss").Config> | undefined;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/esm/Separator/Separator.tailwind.js

@@ -8,15 +8,44 @@ var separatorPlugin = plugin(function (_ref) {
   addComponents({
     ".separator": {
       backgroundColor: theme("colors.grey.200"),
+      "&.interactive:hover": {
+        backgroundColor: theme("colors.xenon.600")
+      },
+      "&.interactive:focus": {
+        backgroundColor: theme("colors.xenon.600"),
+        outline: "solid 1px ".concat(theme("colors.xenon.600"))
+      },
       '&[data-orientation="horizontal"]': {
         height: "1px",
         width: "100%",
-        margin: "".concat(margin, " 0")
+        margin: "".concat(margin, " 0"),
+        "&.interactive": {
+          position: "relative",
+          "&::after": {
+            position: "absolute",
+            right: "0px",
+            left: "0px",
+            top: "-10px",
+            height: "20px",
+            content: '" "'
+          }
+        }
       },
       '&[data-orientation="vertical"]': {
         height: "100%",
         width: "1px",
-        margin: "0 ".concat(margin)
+        margin: "0 ".concat(margin),
+        "&.interactive": {
+          position: "relative",
+          "&::after": {
+            position: "absolute",
+            width: "20px",
+            left: "-10px",
+            top: "0px",
+            bottom: "0px",
+            content: '" "'
+          }
+        }
       }
     }
   });

package/esm/Sidebar/Sidebar.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode, VFC } from "react";
 import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
 export interface SidebarProps {
     id?: string;
+    /** @ignore */
     className?: string;
     label?: string;
     locale?: SidebarLocale;

package/esm/Sidebar/Sidebar.js

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2, _templateObject3;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { useCallback } from "react";
 import { useLocale } from "../Satellite";

package/esm/Sidebar/SidebarButtonLink.js

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useState } from "react";
 import { ExternalLink } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/Sidebar/SidebarHeader.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, VFC } from "react";
 export declare type SidebarHeaderProps = {
+    /** @ignore */
     className?: string;
     children?: ReactNode;
 };

package/esm/Sidebar/SidebarHeading.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode, VFC } from "react";
 export declare type SidebarHeadingProps = {
     id?: string;
+    /** @ignore */
     className?: string;
     children: ReactNode;
 };

package/esm/Sidebar/SidebarLink.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { ExternalLink } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts

@@ -1,5 +1,6 @@
 import type { VFC } from "react";
 declare type ActiveLinkIndicatorProps = {
+    /** @ignore */
     className?: string;
     activeIndex?: number;
     linksCount: number;

package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js

@@ -19,7 +19,7 @@ export var ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
     children: /*#__PURE__*/_jsx("div", {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-px h-full bg-grey-200"]))),
       children: /*#__PURE__*/_jsx("div", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            w-px bg-accent-500\n            transition-transform duration-100 ease-in-out\n            ", "\n          "])), showIndicator ? "visible" : "hidden"),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            w-px bg-accent-500\n            motion-safe:transition-transform motion-safe:duration-100 ease-in-out\n            ", "\n          "])), showIndicator ? "visible" : "hidden"),
         style: {
           height: LINK_HEIGHT_PX,
           transform: typeof activeIndex === "number" ? "translateY(".concat(activeIndex * (LINK_HEIGHT_PX + LINKS_SPACING_PX), "px)") : undefined

package/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ExternalLink } from "react-feather";
 import stl from "../../styles/helpers/satellitePrefixer";
 import useLinkProps from "../../utils/useLinkProps";

package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -3,6 +3,7 @@ import type { IconComponentType } from "../../types";
 import type { SidebarLinksGroupLink } from "./types";
 declare type SidebarLinksGroupBaseProps = {
     id?: string;
+    /** @ignore */
     className?: string;
     links: SidebarLinksGroupLink[];
 };

package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import uniqueId from "lodash/uniqueId";
 import { useEffect, useMemo, useState } from "react";
 import { ChevronRight } from "react-feather";
@@ -38,7 +38,7 @@ export var SidebarLinksGroup = function SidebarLinksGroup(props) {
   useEffect(function () {
     if (isCollapsibleSidebarLinksGroupProps(props)) {
       var _props$onGroupToggle;
-      (_props$onGroupToggle = props.onGroupToggle) === null || _props$onGroupToggle === void 0 ? void 0 : _props$onGroupToggle.call(props, isOpen);
+      (_props$onGroupToggle = props.onGroupToggle) === null || _props$onGroupToggle === void 0 || _props$onGroupToggle.call(props, isOpen);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
@@ -59,12 +59,13 @@ export var SidebarLinksGroup = function SidebarLinksGroup(props) {
       "aria-controls": contentId,
       children: [/*#__PURE__*/_jsx(props.icon, {
         className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0 text-grey-500 mr-3"]))),
-        size: "1rem"
+        width: "1rem",
+        height: "1rem"
       }), /*#__PURE__*/_jsx("span", {
         className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
         children: props.title
       }), /*#__PURE__*/_jsx(ChevronRight, {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0 text-grey-500 transition-all duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0 text-grey-500 motion-safe:transition-all motion-safe:duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
         size: "1rem"
       })]
     }), /*#__PURE__*/_jsxs("div", {

package/esm/Sidebar/SidebarNav.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode, VFC } from "react";
 export declare type SidebarNavSpacing = "small" | "large";
 export declare type SidebarNavProps = {
     id?: string;
+    /** @ignore */
     className?: string;
     spacing?: SidebarNavSpacing;
     label: string;

package/esm/Switch/Switch.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode, VFC } from "react";
 import type { SwitchSize } from "./types";
 export interface SwitchProps {
+    /** @ignore */
     className?: string;
     value: string;
     disabled?: boolean;

package/esm/Switch/Switch.js

@@ -6,6 +6,7 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { BUTTON_SIZE_CLASSNAMES } from "../Button/styles";
 import { RadioGroupContext } from "../RadioGroup";
 import stl from "../styles/helpers/satellitePrefixer";
+import { prefersReducedMotion } from "../utils/prefersReducedMotion";
 import uniqueId from "../utils/uniqueId";
 import { buildAnimationKeySelector } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -45,12 +46,13 @@ export var Switch = function Switch(_ref) {
     }
     var containerRect = containerRef.current.getBoundingClientRect();
     var targetRect = targetEl.getBoundingClientRect();
+    var duration = prefersReducedMotion ? "0ms" : "200ms";
     var newValueIndicatorStyle = {
       width: targetRect.width,
       transform: "translateX(".concat(targetRect.x - containerRect.x, "px)"),
       visibility: "visible",
       transitionProperty: "width, transform",
-      transitionDuration: "200ms",
+      transitionDuration: duration,
       transitionTimingFunction: "ease-in-out"
     };
     if (newValueIndicatorStyle.transform !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.transform) || newValueIndicatorStyle.width !== (valueIndicatorStyle === null || valueIndicatorStyle === void 0 ? void 0 : valueIndicatorStyle.width)) {

package/esm/Switch/Switch.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = switchPlugin;
 declare const switchPlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss").Config> | undefined;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/esm/Switch/SwitchOption.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useRadioGroupContext } from "../RadioGroup";
 import stl from "../styles/helpers/satellitePrefixer";
 import { OverflowTooltipWrapper } from "../Tooltip/OverflowTooltipWrapper";
@@ -17,7 +17,7 @@ export var SwitchOption = function SwitchOption(_ref) {
   var checked = context.value === value;
   var inputDisabled = context.disabled || disabled;
   return /*#__PURE__*/_jsxs("label", _objectSpread(_objectSpread({
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer", !checked && !inputDisabled && "rounded hover:bg-accent-200/20 transition-colors duration-100 ease-linear")
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10 text-grey-600\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer hover:text-grey-900", !checked && !inputDisabled && "rounded motion-safe:transition-colors active:bg-accent-200/20 motion-safe:duration-100 ease-linear")
   }, buildAnimationProps(context.name, value)), {}, {
     children: [/*#__PURE__*/_jsx("input", {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-0 h-0 opacity-0"]))),

package/esm/Tables/DataTable/DataTable.d.ts

@@ -12,14 +12,21 @@ export declare type DataTableLocale = {
     errorDescription?: string;
 };
 interface BaseDataTableProps<Item> {
+    /** The data which will be passed along to the table for rendering */
     data: Item[];
+    /** Quite a few cases require you to specify the `itemID` which you can do using this prop */
     itemId?: GetItemId<Item>;
+    /** The columns define the layout of your table and the respective rows and cells */
+    columns: ColumnDefinition<Item>[];
     pagination?: PaginationConfiguration;
+    /** the `onChange` is triggered when either sorting or paginating */
     onChange?(dataConfiguration: DataConfiguration): void;
+    /** Specify the global status of the table */
     status?: Status;
+    /** Allows for specifying a custom empty state */
     noDataContent?: ReactNode;
+    /** Allows for specifying a custom error state */
     errorContent?: ReactNode;
-    columns: ColumnDefinition<Item>[];
     canHoverRow?(row: Row<Item>): boolean;
     onRowHoveredChanged?(row: Row<Item> | null): void;
     sorting?: Sorting[];

package/esm/Tables/DataTable/DataTable.js

@@ -3,8 +3,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import compact from "lodash/compact";
 import get from "lodash/get";
 import { useEffect, useState } from "react";
@@ -202,7 +202,7 @@ export var DataTable = function DataTable(_ref) {
   };
   var onRowHoverChange = function onRowHoverChange(row) {
     setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
-    onRowHoveredChanged === null || onRowHoveredChanged === void 0 ? void 0 : onRowHoveredChanged(row);
+    onRowHoveredChanged === null || onRowHoveredChanged === void 0 || onRowHoveredChanged(row);
   };
   var onToggleSort = function onToggleSort(columnId, direction) {
     var newSorting = internalSorting.map(function (_ref7) {
@@ -211,7 +211,7 @@ export var DataTable = function DataTable(_ref) {
         d = _ref8[1];
       return columnId === colId ? [columnId, direction] : [colId, sortMode === "multi" ? d : "none"];
     });
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+    onChange === null || onChange === void 0 || onChange({
       pagination: pagination,
       sorting: newSorting
     });

package/esm/Tables/DataTable/DataTable.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = datatablePlugin;
 declare const datatablePlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss").Config> | undefined;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/esm/Tables/DataTable/components/Body.js

@@ -2,8 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var _templateObject, _templateObject2, _templateObject3;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import EmptyState from "../../../EmptyState";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { getCellValue } from "../utils";

package/esm/Tables/DataTable/components/Footer.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import Pagination, { CompactPagination } from "../../../Pagination";
 import { isDeterminatePagination, isIndeterminatePagination } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Tables/DataTable/components/HeaderCell.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["sortingDirection", "onToggleSort", "column", "disabled", "children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { ChevronDown, ChevronUp } from "react-feather";
 import stl from "../../../styles/helpers/satellitePrefixer";
@@ -38,13 +38,13 @@ export var HeaderCell = function HeaderCell(_ref) {
     "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
     className: className,
     children: /*#__PURE__*/_jsxs(InternalCellComponent, _objectSpread(_objectSpread({}, sortButtonProps), {}, {
-      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["px-4 py-[14px] inline-flex items-center focus:outline-none focus:text-accent-600"]))), sortButtonProps.className),
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["group/cell px-4 py-[14px] inline-flex items-center focus:outline-none focus:text-accent-600"]))), sortButtonProps.className),
       children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/_jsx(ChevronDown, {
         className: iconClassName
       }) : sortingDirection === "asc" ? /*#__PURE__*/_jsx(ChevronUp, {
         className: iconClassName
       }) : /*#__PURE__*/_jsx(ChevronDown, {
-        className: cx(iconClassName, stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["text-grey-300"]))))
+        className: cx(iconClassName, stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["text-grey-300 invisible group-hover/cell:visible group-focus/cell:visible"]))))
       }) : null]
     }))
   }));

package/esm/Tables/DataTable/components/Loader.d.ts

@@ -1,6 +1,7 @@
 import type { VFC } from "react";
 import type { DataTableLocale } from "../DataTable";
 export interface LoaderProps {
+    /** @ignore */
     className?: string;
     locale: Required<DataTableLocale>;
 }

package/esm/Tables/DataTable/components/Loader.js

@@ -27,7 +27,7 @@ export var Loader = function Loader(_ref) {
     className: className,
     children: showLoadMessage ? /*#__PURE__*/_jsx(EmptyState, {
       usageContext: "result",
-      medallion: /*#__PURE__*/_jsx("div", {
+      leadIllustration: /*#__PURE__*/_jsx("div", {
         className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex justify-center"]))),
         children: /*#__PURE__*/_jsx(ProgressSpinner, {})
       }),

package/esm/Tables/DataTable/types.d.ts

@@ -5,18 +5,30 @@ export declare type SortingDirection = "asc" | "desc" | "none";
 export declare type Sorting = [columnId: string, direction: SortingDirection];
 export declare type GetItemId<Item> = string | ((item: Item, idx: number) => string);
 export interface Row<Item> {
+    /** The item for the given row */
     item: Item;
+    /** The row id */
     id: string;
+    /** Is the row hovered? */
     hovered: boolean;
+    /** Is the row selected? */
     selected: boolean;
+    /** Can the row be selected? */
     selectable: boolean;
 }
 export interface CellProps<Item> {
+    /** The value of the given cell */
     value: any;
+    /**
+     * The row of the cell, which lets you access other keys
+     * Useful for example when you want to calculate a sum of values in a column
+     */
     row: Row<Item>;
+    /** The column of the given cell */
     column: AdvancedColumnDefinition<Item>;
 }
 export interface HeaderProps<Item> {
+    /** The column of the given header */
     column: AdvancedColumnDefinition<Item>;
 }
 export interface AdvancedColumnDefinition<Item> {
@@ -27,8 +39,10 @@ export interface AdvancedColumnDefinition<Item> {
     sort?: boolean;
     Header?: ComponentType<HeaderProps<Item>> | string | false;
     Cell?: ComponentType<CellProps<Item>>;
+    /** @ignore */
     className?: string;
 }
+/** A column can be defined as a `string`, or as an `AdvancedColumnDefinition` in more complex cases */
 export declare type ColumnDefinition<Item> = string | AdvancedColumnDefinition<Item>;
 export interface IndeterminatePagination {
     currentPage: number;

package/esm/Tables/Table/Table.js

@@ -3,8 +3,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject, _templateObject2, _templateObject3;
 var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import TableFooter from "./components/TableFooter";

package/esm/Tables/Table/Table.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = tablePlugin;
 declare const tablePlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss").Config> | undefined;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/esm/Tabs/Tabs.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = tabsPlugin;
 declare const tabsPlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss").Config> | undefined;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/esm/Tabs/Tabs.tailwind.js

@@ -6,7 +6,11 @@ var tabsPlugin = plugin(function (_ref) {
     theme = _ref.theme;
   addComponents({
     ".tabs-tabbar": {
-      scrollBehavior: "smooth"
+      scrollBehavior: "smooth",
+      padding: "0 3px",
+      "&:is(nav)": {
+        padding: "0 4px"
+      }
     },
     ".tab[aria-selected=true]": {
       color: theme("colors.grey.900")
@@ -31,6 +35,8 @@ var tabsPlugin = plugin(function (_ref) {
     },
     ".tab": {
       flexShrink: "0",
+      padding: "3px",
+      marginTop: "3px",
       borderBottomWidth: "3px",
       borderBottomColor: "transparent",
       color: theme("colors.grey.600"),
@@ -45,6 +51,19 @@ var tabsPlugin = plugin(function (_ref) {
       },
       "&:focus": {
         outline: "none"
+      },
+      "&:focus-visible": {
+        outline: "3px solid ".concat(theme("colors.accent.600")),
+        marginBottom: "3px",
+        borderBottom: "transparent"
+      },
+      "&:is(a)": {
+        marginTop: "5px",
+        "&:focus-visible": {
+          margin: "4px 0",
+          paddingTop: "4px",
+          paddingBottom: "3px"
+        }
       }
     }
   });