@algolia/satellite 1.2.0 → 1.3.0

package/dist/esm/Actions/ToggleButton/ToggleButton.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["className", "size", "icon", "children", "label"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+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 { Toggle } from "@radix-ui/react-toggle";
+import cx from "clsx";
+import { forwardRef } from "react";
+import { TooltipWrapper } from "../../Overlay";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { BUTTON_SIZE_CLASSNAMES } from "../Button/styles";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ICON_ONLY_CLASSNAMES = {
+  small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-6 w-6"]))),
+  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-8 w-8"]))),
+  large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["h-10 w-10"])))
+};
+export var ToggleButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var isIconOnly = !props.children;
+  var _label$props = _objectSpread({
+      label: undefined
+    }, props),
+    className = _label$props.className,
+    _label$props$size = _label$props.size,
+    size = _label$props$size === void 0 ? "medium" : _label$props$size,
+    Icon = _label$props.icon,
+    children = _label$props.children,
+    label = _label$props.label,
+    rest = _objectWithoutProperties(_label$props, _excluded);
+  return /*#__PURE__*/_jsx(TooltipWrapper, {
+    content: label,
+    children: /*#__PURE__*/_jsxs(Toggle, _objectSpread(_objectSpread({
+      ref: ref,
+      type: "button",
+      "aria-label": label,
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["group/toggle-button rounded focusable disabled:cursor-not-allowed"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["aria-pressed:text-accent-600 disabled:!text-grey-300"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-white data-[state=off]:hover:bg-grey-100 aria-pressed:bg-accent-100 disabled:!bg-grey-50"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border border-grey-200  aria-pressed:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : BUTTON_SIZE_CLASSNAMES[size], className)
+    }, rest), {}, {
+      children: [!!Icon && /*#__PURE__*/_jsx(Icon, {
+        "aria-hidden": "true",
+        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["shrink-0 h-4 w-4 text-grey-600 group-aria-pressed/toggle-button:text-inherit group-disabled/toggle-button:text-inherit"])))
+      }), !!children && /*#__PURE__*/_jsx("div", {
+        children: children
+      })]
+    }))
+  });
+});
+ToggleButton.displayName = "ToggleButton";

package/dist/esm/Actions/index.d.ts

@@ -4,4 +4,5 @@ export * from "./ButtonLink/ButtonLink";
 export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./Switch";
+export * from "./ToggleButton/ToggleButton";
 export type { ButtonSize, ButtonVariant } from "./Button/types";

package/dist/esm/Actions/index.js

@@ -4,4 +4,5 @@ export * from "./ButtonLink/ButtonLink";
 export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./Switch";
+export * from "./ToggleButton/ToggleButton";
 export {};

package/dist/esm/Avatars/UserAvatar/UserAvatar.js

@@ -8,8 +8,7 @@ import cx from "clsx";
 import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { getUserBackgroundClassName, getUserInitials } from "../utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_LOCALE = {
   fallbackText: "User's avatar"
 };

package/dist/esm/Fields/AutoComplete/AutoComplete.js

@@ -26,8 +26,7 @@ import { AutoCompleteProvider } from "./components/AutoCompleteContext";
 import { AutoCompleteEmptyState } from "./components/AutoCompleteEmptyState";
 import { DefaultOptionItem } from "./components/DefaultOptionItem";
 import { DEFAULT_AUTOCOMPLETE_LOCALE, defaultCreateFromInputValue, filter, optionToString } from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var MENU_POPPER_OPTIONS = {
   strategy: "fixed",
   placement: "bottom-start",
@@ -332,7 +331,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
         setContainerMeasureRef(el);
       },
       children: [/*#__PURE__*/_jsxs("div", {
-        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["autocomplete-container"]))), variant === "large" && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["autocomplete-large py-1"]))), inputFocused && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["autocomplete-focused"]))), disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["autocomplete-disabled"]))), isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["autocomplete-invalid"]))), noWrap && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["autocomplete-nowrap"])))),
+        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["autocomplete-container"]))), inputFocused && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["focusable-show"]))), variant === "large" && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["autocomplete-large py-1"]))), disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["autocomplete-disabled"]))), isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["autocomplete-invalid"]))), noWrap && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["autocomplete-nowrap"])))),
         onClick: function onClick() {
           var _inputRef$current;
           return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();

package/dist/esm/Fields/AutoComplete/AutoComplete.tailwind.js

@@ -24,8 +24,7 @@ var autoCompletePlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
-      outline: "1px solid transparent",
-      "&:not(.autocomplete-disabled, .autocomplete-focused):hover": {
+      "&:not(.autocomplete-disabled, .focusable-show):hover": {
         borderColor: theme("colors.grey.600")
       },
       // Workaround for ie
@@ -43,11 +42,6 @@ var autoCompletePlugin = plugin(function (_ref) {
         }
       }
     },
-
-    ".autocomplete-focused, .autocomplete-container:focus-within": {
-      borderColor: theme("colors.accent.600"),
-      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
-    },
     ".autocomplete-disabled": {
       cursor: "not-allowed",
       backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
@@ -64,9 +58,6 @@ var autoCompletePlugin = plugin(function (_ref) {
       "&:hover": {
         backgroundColor: theme("colors.red.50"),
         borderColor: theme("colors.red.700")
-      },
-      "&.autocomplete-focused, &.autocomplete-container:focus-within": {
-        outlineColor: theme("colors.red.700")
       }
     },
     ".autocomplete-nowrap": {

package/dist/esm/Fields/AutoComplete/components/AutoCompleteEmptyState.js

@@ -3,8 +3,7 @@ var _templateObject, _templateObject2, _templateObject3;
 import { Medallion } from "../../../Helpers";
 import { XIcon } from "../../../Icons";
 import stl from "../../../styles/helpers/satellitePrefixer";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var AutoCompleteEmptyState = function AutoCompleteEmptyState(_ref) {
   var _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? XIcon : _ref$icon,

package/dist/esm/Fields/AutoComplete/components/DefaultOptionItem.js

@@ -5,8 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 stl from "../../../styles/helpers/satellitePrefixer";
 import { useAutoCompleteLocale } from "./AutoCompleteContext";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var metadataSpacer = /*#__PURE__*/_jsx("span", {
   className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["px-1"]))),
   children: "\xB7"

package/dist/esm/Fields/AutoComplete/utils.js

@@ -39,7 +39,7 @@ export var DEFAULT_AUTOCOMPLETE_LOCALE = {
     return multiple ? "Add" : "Use";
   },
   showMoreButton: function showMoreButton(extraResults) {
-    return "Show ".concat(pluralize(extraResults, "result"), " more");
+    return "Show ".concat(pluralize(extraResults, "more result"));
   }
 };
 export var optionToString = function optionToString(option) {

package/dist/esm/Fields/Checkbox/Checkbox.d.ts

@@ -19,5 +19,5 @@ export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
  *
  * See the [Checkbox documentation page](https://satellite.algolia.com/components/controls/checkbox) for more information.
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "checked" | "required"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "autoFocus" | "onChange" | "disabled" | "checked" | "required"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/esm/Fields/Checkbox/Checkbox.js

@@ -13,8 +13,7 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import { isRenderedChild } from "../../utils/isRenderedChild";
 import { uniqueId } from "../../utils/uniqueId";
 import { useField } from "../Field";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["checkbox-invalid"]))),
@@ -67,7 +66,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/_jsxs("div", {
     className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group/checkbox inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
     children: [/*#__PURE__*/_jsxs("span", {
-      className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
+      className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            checkbox focusable-within\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
       style: {
         color: checkedColor
       },

package/dist/esm/Fields/Checkbox/Checkbox.tailwind.js

@@ -21,10 +21,9 @@ var checkboxPlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
       borderRadius: theme("borderRadius.DEFAULT"),
-      transition: "all 250ms cubic-bezier(0.23, 1, 0.32, 1)",
-      "&:focus-within": {
-        borderColor: "currentColor"
-      },
+      transitionProperty: "color, background-color, border-color",
+      transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
+      transitionDuration: "250ms",
       "& > .checkbox-icon": {
         userSelect: "none",
         color: "currentColor",
@@ -44,18 +43,11 @@ var checkboxPlugin = plugin(function (_ref) {
       borderColor: "currentColor",
       "&:hover": {
         background: theme("colors.red.50")
-      },
-      "&:focus-within": {
-        outline: "1px solid ".concat(theme("colors.red.700"))
       }
     },
     ".checkbox-checked, .checkbox-indeterminate": {
       borderColor: "currentColor",
       boxShadow: "inset 0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
-      "&:focus-within": {
-        borderColor: "currentColor",
-        boxShadow: "\n          inset 0px 1px 0px 0px ".concat(theme("colors.shadow.5"), ",\n          0 0 0 1px currentColor\n        ")
-      },
       "& > .checkbox-icon": {
         opacity: "1",
         transform: "scale(1)"

package/dist/esm/Fields/DatePicker/DatePicker/DatePicker.js

@@ -16,9 +16,7 @@ import { DatePickerModal } from "../components/Modal";
 import { DatePickerSidePanel } from "../components/SidePanel";
 import { DEFAULT_DATE_PICKER_LOCALE, formatDate } from "../utils";
 import { DatePickerActionTypes, datePickerReducer, initDatePickerReducer } from "./datePickerReducer";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * The `DatePicker` component allows users to easily select a date, featuring a calendar view, month/year navigation, and custom options.
  *

package/dist/esm/Fields/DatePicker/DatePicker.tailwind.js

@@ -3,7 +3,6 @@ import _plugin from "tailwindcss/plugin";
 // @ts-check
 var plugin = _plugin;
 var datePickerPlugin = plugin(function (_ref) {
-  var _rdpDay, _rdpDay2, _rdpDay4, _addComponents;
   var addComponents = _ref.addComponents,
     theme = _ref.theme,
     prefix = _ref.prefix;
@@ -21,7 +20,7 @@ var datePickerPlugin = plugin(function (_ref) {
       return ":not(.rdp-day_".concat(modifier, ")");
     }).join("");
   };
-  addComponents((_addComponents = {
+  addComponents(_defineProperty(_defineProperty(_defineProperty({
     ".rdp-year": {
       // ChevronDown svg from lucide-react,
       backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>\')',
@@ -38,7 +37,7 @@ var datePickerPlugin = plugin(function (_ref) {
       marginLeft: "0",
       marginRight: "1em"
     }
-  }, _defineProperty(_addComponents, prefix(".date-picker, .date-range-picker"), {
+  }, prefix(".date-picker, .date-range-picker"), {
     ".rdp[dir='rtl']": {
       ".rdp-months": {
         ".rdp-caption_start": {
@@ -51,20 +50,20 @@ var datePickerPlugin = plugin(function (_ref) {
           marginRight: "0"
         }
       },
-      ".rdp-day": (_rdpDay = {}, _defineProperty(_rdpDay, "&_displayedRanges".concat(not("outside")), {
+      ".rdp-day": _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&_displayedRanges".concat(not("outside")), {
         borderRadius: "0px",
         backgroundColor: theme("colors.grey.200")
-      }), _defineProperty(_rdpDay, "&_displayedRangesStart".concat(not("outside")), {
+      }), "&_displayedRangesStart".concat(not("outside")), {
         color: theme("colors.white"),
         backgroundColor: theme("colors.grey.600"),
         borderTopRightRadius: defaultRadius,
         borderBottomRightRadius: defaultRadius
-      }), _defineProperty(_rdpDay, "&_displayedRangesEnd".concat(not("outside")), {
+      }), "&_displayedRangesEnd".concat(not("outside")), {
         color: theme("colors.white"),
         backgroundColor: theme("colors.grey.600"),
         borderTopLeftRadius: defaultRadius,
         borderBottomLeftRadius: defaultRadius
-      }), _defineProperty(_rdpDay, "&_range_start".concat(not("outside")), {
+      }), "&_range_start".concat(not("outside")), {
         color: theme("colors.white"),
         borderRadius: "0px",
         borderTopRightRadius: defaultRadius,
@@ -73,7 +72,7 @@ var datePickerPlugin = plugin(function (_ref) {
         "&:hover": {
           backgroundColor: accent600
         }
-      }), _defineProperty(_rdpDay, "&_range_end".concat(not("outside")), {
+      }), "&_range_end".concat(not("outside")), {
         color: theme("colors.white"),
         borderRadius: "0px",
         borderTopLeftRadius: defaultRadius,
@@ -82,7 +81,7 @@ var datePickerPlugin = plugin(function (_ref) {
         "&:hover": {
           backgroundColor: accent600
         }
-      }), _rdpDay)
+      })
     },
     "& .rdp-head_cell": {
       textTransform: "capitalize",
@@ -90,9 +89,9 @@ var datePickerPlugin = plugin(function (_ref) {
       fontSize: "0.95em",
       color: theme("colors.grey.600")
     },
-    "& .rdp-day": (_rdpDay2 = {
+    "& .rdp-day": _defineProperty(_defineProperty({
       borderRadius: defaultRadius
-    }, _defineProperty(_rdpDay2, "&_today".concat(not("outside")), {
+    }, "&_today".concat(not("outside")), {
       color: theme("colors.grey.900"),
       position: "relative",
       "&:before": {
@@ -109,10 +108,10 @@ var datePickerPlugin = plugin(function (_ref) {
         transform: "translate(-50%, -50%)",
         zIndex: "-1"
       }
-    }), _defineProperty(_rdpDay2, "&_selected".concat(not("outside")), {
+    }), "&_selected".concat(not("outside")), {
       color: theme("colors.white")
-    }), _rdpDay2)
-  }), _defineProperty(_addComponents, prefix(".date-picker"), _defineProperty({
+    })
+  }), prefix(".date-picker"), _defineProperty({
     ".rdp-day": _defineProperty({
       borderRadius: defaultRadius,
       "&_today": {
@@ -132,21 +131,21 @@ var datePickerPlugin = plugin(function (_ref) {
     "&:hover": {
       backgroundColor: accent600
     }
-  })), _defineProperty(_addComponents, prefix(".date-range-picker"), {
-    "& .rdp-day": (_rdpDay4 = {}, _defineProperty(_rdpDay4, "&_displayedRanges".concat(not("outside")), {
+  })), prefix(".date-range-picker"), {
+    "& .rdp-day": _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&_displayedRanges".concat(not("outside")), {
       borderRadius: "0px",
       backgroundColor: theme("colors.grey.200")
-    }), _defineProperty(_rdpDay4, "&_displayedRangesStart".concat(not("outside")), {
+    }), "&_displayedRangesStart".concat(not("outside")), {
       color: theme("colors.white"),
       backgroundColor: theme("colors.grey.600"),
       borderTopLeftRadius: defaultRadius,
       borderBottomLeftRadius: defaultRadius
-    }), _defineProperty(_rdpDay4, "&_displayedRangesEnd".concat(not("outside")), {
+    }), "&_displayedRangesEnd".concat(not("outside")), {
       color: theme("colors.white"),
       backgroundColor: theme("colors.grey.600"),
       borderTopRightRadius: defaultRadius,
       borderBottomRightRadius: defaultRadius
-    }), _defineProperty(_rdpDay4, "&_selected".concat(not("outside")), {
+    }), "&_selected".concat(not("outside")), {
       color: theme("colors.black"),
       borderRadius: "0px",
       backgroundColor: accent200,
@@ -156,7 +155,7 @@ var datePickerPlugin = plugin(function (_ref) {
       "&:focus": {
         border: "0px"
       }
-    }), _defineProperty(_rdpDay4, "&_range_start".concat(not("outside")), {
+    }), "&_range_start".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopLeftRadius: defaultRadius,
@@ -165,7 +164,7 @@ var datePickerPlugin = plugin(function (_ref) {
       "&:hover": {
         backgroundColor: accent600
       }
-    }), _defineProperty(_rdpDay4, "&_range_end".concat(not("outside")), {
+    }), "&_range_end".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopRightRadius: defaultRadius,
@@ -174,8 +173,8 @@ var datePickerPlugin = plugin(function (_ref) {
       "&:hover": {
         backgroundColor: accent600
       }
-    }), _rdpDay4)
-  }), _addComponents), {
+    })
+  }), {
     respectPrefix: false
   });
 });

package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.js

@@ -18,9 +18,7 @@ import { DEFAULT_DATE_PICKER_LOCALE } from "../utils";
 import { DateRangePickerDisplay } from "./DateRangePickerDisplay";
 import { DateRangePickerActionTypes, dateRangePickerReducer, initDateRangePickerReducer } from "./dateRangePickerReducer";
 import { isCompleteTimeRange, isEmptyTimeRange } from "./dateRangePickerTimeRange";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var defaultValidator = function defaultValidator(_ref) {
   var candidateRange = _ref.candidateRange;
   return isCompleteTimeRange(candidateRange) ? null : [new Error("Invalid time range")];

package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.js

@@ -4,9 +4,7 @@ import stl from "../../../styles/helpers/satellitePrefixer";
 import { DatePickerDisplay } from "../components/Display";
 import { formatDate } from "../utils";
 import { isCompleteTimeRange } from "./dateRangePickerTimeRange";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export var DateRangePickerDisplay = function DateRangePickerDisplay(_ref) {
   var id = _ref.id,
     onClick = _ref.onClick,

package/dist/esm/Fields/DatePicker/components/Calendar.js

@@ -29,7 +29,6 @@ export var DatePickerCalendar = function DatePickerCalendar(props) {
     //stl`bg-grey-600 text-white rounded-l border-0`,
     displayedRangesEnd: "rdp-day_displayedRangesEnd" //stl`bg-grey-600 text-white rounded-r border-0`,
   };
-
   return /*#__PURE__*/_jsx(DayPicker, _objectSpread(_objectSpread({
     mode: props.mode
   }, curatedProps), {}, {

package/dist/esm/Fields/DatePicker/components/FooterActions.js

@@ -2,8 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 import { Button } from "../../../Actions";
 import stl from "../../../styles/helpers/satellitePrefixer";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var DatePickerFooterActions = function DatePickerFooterActions(_ref) {
   var onCancel = _ref.onCancel,
     onApply = _ref.onApply,

package/dist/esm/Fields/DatePicker/components/NavBar.js

@@ -10,8 +10,7 @@ import { IconButton } from "../../../Actions";
 import { ChevronLeftIcon, ChevronRightIcon } from "../../../Icons";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { uniqueId } from "../../../utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var NavBar = function NavBar(props) {
   var _useDayPicker = useDayPicker(),
     numberOfMonths = _useDayPicker.numberOfMonths,

package/dist/esm/Fields/Dropzone/Dropzone.js

@@ -17,8 +17,7 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import { formatHumanSize } from "../../utils/formatters";
 import { uniqueId } from "../../utils/uniqueId";
 import { useField } from "../Field";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 var DropzoneFileItem = function DropzoneFileItem(_ref) {
   var file = _ref.file;
   return /*#__PURE__*/_jsxs("span", {
@@ -68,10 +67,6 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     files = _useState2[0],
     setFiles = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    focused = _useState4[0],
-    setFocused = _useState4[1];
   var _useField = useField({
       required: required
     }),
@@ -112,7 +107,7 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     "aria-labelledby": labelId,
     "aria-describedby": descriptionId,
     "aria-invalid": isInvalid,
-    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            relative flex items-center group/dropzone\n            border rounded\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "shadow-field cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50 focus-within:outline focus-within:outline-red-700 focus-within:outline-1" : "border-grey-500 bg-white focus-within:border-accent-600 hover:bg-grey-50"), className),
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            relative flex items-center group/dropzone\n            border rounded\n            overflow-hidden transition-all ease-in-out delay-100\n            focusable\n            min-h-16\n            ", "\n            ", "\n            ", ""])), disabled ? "cursor-not-allowed border-grey-200/60 shadow-none bg-gradient-to-b from-white to-grey-100" : "shadow-field cursor-pointer border-grey-500", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-50"), className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -122,13 +117,7 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   })), {}, {
     children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
-      required: required,
-      onFocus: function onFocus() {
-        return setFocused(true);
-      },
-      onBlur: function onBlur() {
-        return setFocused(false);
-      }
+      required: required
     }))), /*#__PURE__*/_jsx("div", {
       className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
       children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
@@ -153,7 +142,7 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
+        className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mr-2 invisible group-hover/dropzone:visible group-[:has(&:focus)]/dropzone:visible"]))),
         title: locale.clearInput,
         icon: XIcon,
         variant: "subtle",

package/dist/esm/Fields/Field/Field.js

@@ -9,8 +9,7 @@ import { uniqueId } from "../../utils";
 import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
 import { useExperimentalForm } from "../Form/useForm";
 import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *

package/dist/esm/Fields/Form/Form.js

@@ -8,8 +8,8 @@ var _excluded = ["className", "locale"],
   _excluded3 = ["children"],
   _excluded4 = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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";
@@ -21,9 +21,7 @@ import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { ExperimentalFormContext } from "./FormContext";
 import { useExperimentalForm } from "./useForm";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 var DEFAULT_ERROR_MESSAGE_LOCALE = {
   errorText: function errorText(invalidFields) {
     var firstInvalidField = invalidFields[0];

package/dist/esm/Fields/Form/stories/AsynchronousValidation.js

@@ -17,8 +17,7 @@ import { Field } from "../../Field";
 import { Input } from "../../Input";
 import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   username: "",
   password: ""

package/dist/esm/Fields/Form/stories/Complex.js

@@ -22,8 +22,7 @@ import { TextArea } from "../../TextArea";
 import { Toggle } from "../../Toggle";
 import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   firstName: "",
   lastName: "",

package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js

@@ -15,8 +15,7 @@ import { Field } from "../../Field";
 import { Input } from "../../Input";
 import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   password: "",
   confirmPassword: ""

package/dist/esm/Fields/Form/stories/DirtyFields.js

@@ -18,8 +18,7 @@ import { Field } from "../../Field";
 import { Input } from "../../Input";
 import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   name: "John Doe",
   email: "jdoe@example.com",

package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js

@@ -18,8 +18,7 @@ import { Input } from "../../Input";
 import { Select } from "../../Select";
 import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var professions = ["please select", "doctor", "teacher", "other"];
 var initialFormData = {
   name: "",

package/dist/esm/Fields/Form/stories/FieldArrays.js

@@ -21,9 +21,7 @@ import { AutoComplete } from "../../index";
 import { Select } from "../../Select";
 import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var facets = ["size", "price", "gender", "color", "brand"];
 var autocompleteFacets = facets.map(function (facet) {
   return {