@algolia/satellite 1.0.0-beta.133 → 1.0.0-beta.134

package/esm/DatePicker/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -9,6 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 import { useMemo, useReducer, useState } from "react";
+import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Calendar from "../components/Calendar";
 import Display from "../components/Display";
@@ -16,14 +17,18 @@ import Footer from "../components/Footer";
 import FooterActions from "../components/FooterActions";
 import Modal from "../components/Modal";
 import SidePanel from "../components/SidePanel";
-import { formatDate } from "../utils";
+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";
 
 var DatePicker = function DatePicker(props) {
-  var _props$initialValue, _props$validate, _props$validate$call, _props$locale, _props$calendarProps;
+  var _props$initialValue, _props$validate, _props$validate$call, _props$calendarProps;
+
+  var contextLocale = useLocale("datePicker");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), contextLocale), props.locale);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -108,7 +113,7 @@ var DatePicker = function DatePicker(props) {
         children: value ? /*#__PURE__*/_jsx("time", {
           dateTime: value.toISOString(),
           children: formatDate(value)
-        }) : ((_props$locale = props.locale) === null || _props$locale === void 0 ? void 0 : _props$locale.openButton) || "Enter a date..."
+        }) : locale.openButton
       })
     }), /*#__PURE__*/_jsx(Modal, {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["date-picker"]))),
@@ -132,7 +137,7 @@ var DatePicker = function DatePicker(props) {
             selectedDays: value !== null && value !== void 0 ? value : undefined,
             onDayClick: handleDayClick
           }, yearProps), {}, {
-            locale: props.locale
+            locale: locale
           })), /*#__PURE__*/_jsxs(Footer, {
             children: [props.renderLeftFooter && /*#__PURE__*/_jsx("div", {
               children: props.renderLeftFooter({
@@ -143,7 +148,7 @@ var DatePicker = function DatePicker(props) {
               onCancel: handleClose,
               onApply: handleApply,
               disableApply: !isValid,
-              locale: props.locale
+              locale: locale
             })]
           })]
         }), props.renderRightPanel && /*#__PURE__*/_jsxs(_Fragment, {
@@ -157,7 +162,7 @@ var DatePicker = function DatePicker(props) {
               onCancel: handleClose,
               onApply: handleApply,
               disableApply: !isValid,
-              locale: props.locale
+              locale: locale
             })]
           })]
         })]

package/esm/DatePicker/DatePicker.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = datePickerPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const datePickerPlugin: import('../tailwind-types').TailwindPlugin;
+declare const datePickerPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator; /** @type {string} */
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/DatePicker/DatePicker.tailwind.js

@@ -1,16 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var datePickerPlugin = function datePickerPlugin(_ref) {
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var datePickerPlugin = plugin(function (_ref) {
   var _DayPickerDay, _DayPickerDay3, _addComponents;
 
   var addComponents = _ref.addComponents,
       theme = _ref.theme,
       prefix = _ref.prefix;
+
+  /** @type {string} */
   var defaultRadius = theme("borderRadius.DEFAULT");
+  /** @type {string} */
+
   var nebula600 = theme("colors.nebula.600");
+  /** @type {string} */
+
   var nebula200 = theme("colors.nebula.200");
 
   var not = function not() {
@@ -51,13 +56,13 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
         position: "absolute",
         backgroundColor: theme("colors.blue.200"),
         border: "1px solid ".concat(theme("colors.blue.300")),
-        borderRadius: 9999,
-        width: 32,
-        height: 32,
+        borderRadius: "9999px",
+        width: "32px",
+        height: "32px",
         left: "50%",
         top: "50%",
         transform: "translate(-50%, -50%)",
-        zIndex: -1
+        zIndex: "-1"
       }
     }), _defineProperty(_DayPickerDay, "&--selected".concat(not("outside")), {
       color: theme("colors.white")
@@ -81,7 +86,7 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
     }
   })), _defineProperty(_addComponents, prefix(".date-range-picker"), {
     "& .DayPicker-Day": (_DayPickerDay3 = {}, _defineProperty(_DayPickerDay3, "&--displayedRanges".concat(not("outside")), {
-      borderRadius: 0,
+      borderRadius: "0px",
       backgroundColor: theme("colors.grey.200")
     }), _defineProperty(_DayPickerDay3, "&--displayedRangesStart".concat(not("outside")), {
       color: theme("colors.white"),
@@ -95,14 +100,14 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
       borderBottomRightRadius: defaultRadius
     }), _defineProperty(_DayPickerDay3, "&--selected".concat(not("outside")), {
       color: theme("colors.black"),
-      borderRadius: 0,
+      borderRadius: "0px",
       backgroundColor: nebula200,
       "&:hover": {
         backgroundColor: nebula200
       }
     }), _defineProperty(_DayPickerDay3, "&--start".concat(not("outside")), {
       color: theme("colors.white"),
-      borderRadius: 0,
+      borderRadius: "0px",
       borderTopLeftRadius: defaultRadius,
       borderBottomLeftRadius: defaultRadius,
       backgroundColor: nebula600,
@@ -111,7 +116,7 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
       }
     }), _defineProperty(_DayPickerDay3, "&--end".concat(not("outside")), {
       color: theme("colors.white"),
-      borderRadius: 0,
+      borderRadius: "0px",
       borderTopRightRadius: defaultRadius,
       borderBottomRightRadius: defaultRadius,
       backgroundColor: nebula600,
@@ -122,6 +127,5 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
   }), _addComponents), {
     respectPrefix: false
   });
-};
-
+});
 export default datePickerPlugin;

package/esm/DatePicker/DateRangePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -12,12 +12,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 import { useMemo, useReducer, useState } from "react";
+import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Calendar from "../components/Calendar";
 import Footer from "../components/Footer";
 import FooterActions from "../components/FooterActions";
 import Modal from "../components/Modal";
 import SidePanel from "../components/SidePanel";
+import { DEFAULT_DATE_PICKER_LOCALE } from "../utils";
 import DateRangePickerDisplay from "./DateRangePickerDisplay";
 import { DateRangePickerActionTypes, dateRangePickerReducer, initDateRangePickerReducer } from "./dateRangePickerReducer";
 import { isCompleteTimeRange, isEmptyTimeRange } from "./dateRangePickerTimeRange";
@@ -30,6 +32,10 @@ var defaultValidator = function defaultValidator(_ref) {
   return isCompleteTimeRange(candidateRange) ? null : [new Error("Invalid time range")];
 };
 
+var DEFAULT_DATE_RANGE_PICKER_LOCALE = _objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), {}, {
+  openButton: "Enter a date period..."
+});
+
 var DateRangePicker = function DateRangePicker(_ref2) {
   var _validate, _displayedRange$start, _displayedRange$start2, _displayedRange$end, _displayOnlyRanges$ma, _state$hovered;
 
@@ -50,9 +56,13 @@ var DateRangePicker = function DateRangePicker(_ref2) {
       renderRightPanel = _ref2.renderRightPanel,
       buttonSize = _ref2.buttonSize,
       modalPlacement = _ref2.modalPlacement,
-      locale = _ref2.locale,
+      propsLocale = _ref2.locale,
       props = _objectWithoutProperties(_ref2, _excluded);
 
+  var contextLocale = useLocale("datePicker");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_RANGE_PICKER_LOCALE), contextLocale), propsLocale);
+
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       targetElement = _useState2[0],

package/esm/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from "react";
+import type { WithRequiredProperty } from "../../types";
 import { DisplayProps } from "../components/Display";
 import type { DatePickerLocale } from "../types";
 import { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
@@ -7,7 +8,7 @@ export interface DateRangePickerDisplayProps {
     onClick: DisplayProps["onClick"];
     range: DateRangePickerTimeRange;
     buttonSize?: DisplayProps["size"];
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "openButton">;
 }
 declare const DateRangePickerDisplay: FunctionComponent<DateRangePickerDisplayProps>;
 export default DateRangePickerDisplay;

package/esm/DatePicker/DateRangePicker/DateRangePickerDisplay.js

@@ -30,7 +30,7 @@ var DateRangePickerDisplay = function DateRangePickerDisplay(_ref) {
         dateTime: range.end.toISOString(),
         children: formatDate(range.end)
       })]
-    }) : (locale === null || locale === void 0 ? void 0 : locale.openButton) || "Enter a date period..."
+    }) : locale.openButton
   });
 };
 

package/esm/DatePicker/components/Calendar.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "react";
 import { DayPickerProps } from "react-day-picker";
+import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumbers" | "showWeekDays" | "todayButton" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";
 export declare type EditableYearProps = {
@@ -10,7 +11,7 @@ export declare type EditableYearProps = {
     initialDate?: Date;
 };
 export declare type CalendarProps = Omit<Omit<DayPickerProps, "locale">, ExcludedDayPickerProps> & EditableYearProps & {
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
 declare const Calendar: FunctionComponent<CalendarProps>;
 export default Calendar;

package/esm/DatePicker/components/FooterActions.d.ts

@@ -1,11 +1,12 @@
 import type { FunctionComponent } from "react";
 import { ButtonProps } from "../../Button";
+import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 export interface FooterActionsProps {
     onCancel: ButtonProps["onClick"];
     onApply: ButtonProps["onClick"];
     disableApply: boolean;
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "cancel" | "apply">;
 }
 declare const FooterActions: FunctionComponent<FooterActionsProps>;
 export default FooterActions;

package/esm/DatePicker/components/FooterActions.js

@@ -17,12 +17,12 @@ var FooterActions = function FooterActions(_ref) {
     children: [/*#__PURE__*/_jsx(Button, {
       onClick: onCancel,
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2"]))),
-      children: (locale === null || locale === void 0 ? void 0 : locale.cancel) || "Cancel"
+      children: locale.cancel
     }), /*#__PURE__*/_jsx(Button, {
       disabled: disableApply,
       onClick: onApply,
       variant: "primary",
-      children: (locale === null || locale === void 0 ? void 0 : locale.apply) || "Apply"
+      children: locale.apply
     })]
   });
 };

package/esm/DatePicker/components/NavBar.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "react";
 import type { NavbarElementProps } from "react-day-picker";
+import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 export declare type NavBarYearProps = {
     editableYear?: false;
@@ -9,7 +10,7 @@ export declare type NavBarYearProps = {
     onYearChange: (year: number) => void;
 };
 export declare type NavBarProps = Omit<NavbarElementProps, "locale"> & NavBarYearProps & {
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
 declare const NavBar: FunctionComponent<NavBarProps>;
 export default NavBar;

package/esm/DatePicker/components/NavBar.js

@@ -40,7 +40,7 @@ var NavBar = function NavBar(_ref) {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-5 px-5 pb-2 flex justify-between"]))),
     children: [/*#__PURE__*/_jsx(IconButton, {
       icon: ChevronLeft,
-      title: (locale === null || locale === void 0 ? void 0 : locale.previousMonth) || "Previous month",
+      title: locale.previousMonth,
       onClick: function onClick() {
         return onPreviousClick();
       },
@@ -65,7 +65,7 @@ var NavBar = function NavBar(_ref) {
       })
     }), /*#__PURE__*/_jsx(IconButton, {
       icon: ChevronRight,
-      title: (locale === null || locale === void 0 ? void 0 : locale.nextMonth) || "Next month",
+      title: locale.nextMonth,
       onClick: function onClick() {
         return onNextClick();
       },

package/esm/DatePicker/utils.d.ts

@@ -1 +1,3 @@
+import type { DatePickerLocale } from "./types";
 export declare const formatDate: (date: Date | number) => string;
+export declare const DEFAULT_DATE_PICKER_LOCALE: Required<DatePickerLocale>;

package/esm/DatePicker/utils.js

@@ -1,4 +1,11 @@
 import format from "date-fns/format";
 export var formatDate = function formatDate(date) {
   return format(date, "MMM do, yyyy");
+};
+export var DEFAULT_DATE_PICKER_LOCALE = {
+  apply: "Apply",
+  cancel: "Cancel",
+  openButton: "Enter a date...",
+  previousMonth: "Previous month",
+  nextMonth: "Next month"
 };

package/esm/Dropdown/Dropdown.d.ts

@@ -59,6 +59,6 @@ export declare const Dropdown: {
         children: ReactNode;
     }) => JSX.Element | null;
     Divider: () => JSX.Element;
-    Title: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    Title: import("react").FunctionComponent<import("./components/DropdownTitle").DropdownTitleProps>;
 };
 export default Dropdown;

package/esm/Dropdown/DropdownButton.d.ts

@@ -5,6 +5,7 @@ export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title"
     /** Descriptive title for `Dropdown` */
     title: ReactNode;
     renderFooter?: (args: RenderTargetParams) => ReactNode;
+    children: ReactNode;
 }
 export declare const DropdownButton: FunctionComponent<DropdownButtonProps>;
 export default DropdownButton;

package/esm/Dropdown/components/DropdownLinkItem.js

@@ -33,7 +33,7 @@ export var DropdownLinkItem = function DropdownLinkItem(props) {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className)
   }, mergedProps), {}, {
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 flex-shrink-0 text-grey-500"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
       size: "1rem"
     }), /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate"]))),

package/esm/Dropdown/components/DropdownTitle.d.ts

@@ -1,4 +1,6 @@
-import type { FunctionComponent } from "react";
-export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"];
+import type { FunctionComponent, ReactNode } from "react";
+export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"] & {
+    children: ReactNode;
+};
 export declare const DropdownTitle: FunctionComponent<DropdownTitleProps>;
 export default DropdownTitle;

package/esm/Dropdown/components/DropdownToggleItem.js

@@ -29,13 +29,13 @@ export var DropdownToggleItem = function DropdownToggleItem(props) {
   return /*#__PURE__*/_jsxs("label", {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 flex-shrink-0 text-grey-500"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
       size: "1rem"
     }), /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
       children: children
     }), /*#__PURE__*/_jsx(Toggle, _objectSpread({
-      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex-shrink-0"])))
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0"])))
     }, toggleProps))]
   });
 };

package/esm/Dropzone/Dropzone.d.ts

@@ -1,6 +1,9 @@
 import type { FC } from "react";
 import { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
-interface DropzoneBaseProps {
+export declare type DropzoneLocale = {
+    clearInput?: string;
+};
+export interface DropzoneBaseProps {
     id?: string;
     onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
     placeholder?: string;
@@ -10,6 +13,7 @@ interface DropzoneBaseProps {
     className?: string;
     /** @default false */
     multiple?: boolean;
+    locale?: DropzoneLocale;
 }
 export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
 export declare const Dropzone: FC<DropzoneProps>;

package/esm/Dropzone/Dropzone.js

@@ -1,9 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className"];
+var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -17,6 +17,7 @@ import { useDropzone } from "react-dropzone";
 import { Check, UploadCloud, X } from "react-feather";
 import { IconButton } from "../Button";
 import { useFieldState } from "../Field";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { formatHumanSize } from "../utils/formatters";
 import { uniqueId } from "../utils/uniqueId";
@@ -36,6 +37,9 @@ var STATUS_CLASSNAMES = {
   invalid: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-invalid"]))),
   validated: ""
 };
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input"
+};
 
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/_jsx(X, {
@@ -59,8 +63,13 @@ export var Dropzone = function Dropzone(_ref2) {
       clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
       onChange = _ref2.onChange,
       className = _ref2.className,
+      propsLocale = _ref2.locale,
       props = _objectWithoutProperties(_ref2, _excluded);
 
+  var contextLocale = useLocale("dropzone");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
+
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       files = _useState2[0],
@@ -139,14 +148,14 @@ export var Dropzone = function Dropzone(_ref2) {
           className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
         }), /*#__PURE__*/_jsx("p", {
           className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
-          children: placeholder !== null && placeholder !== void 0 ? placeholder : "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
+          children: placeholder || "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""]))),
       children: /*#__PURE__*/_jsx(IconButton, {
         className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-        title: "Clear input",
+        title: locale.clearInput,
         icon: X,
         variant: "subtle",
         size: "small",

package/esm/EmptyState/EmptyState.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = emptyStatePlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const emptyStatePlugin: import('../tailwind-types').TailwindPlugin;
+declare const emptyStatePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/EmptyState/EmptyState.tailwind.js

@@ -1,17 +1,14 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var emptyStatePlugin = function emptyStatePlugin(_ref) {
+var plugin = _plugin;
+var emptyStatePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
   // Empty State illustration
   addComponents({
     ".empty-state-illustration": {
-      minWidth: 500,
-      minHeight: 500
+      minWidth: "500px",
+      minHeight: "500px"
     }
   });
-};
-
+});
 export default emptyStatePlugin;

package/esm/Field/Field.d.ts

@@ -14,6 +14,7 @@ export interface FieldProps {
      */
     state?: FieldState;
     inline?: boolean;
+    children: ReactNode;
 }
 /**
  * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card

package/esm/Flag/Flag.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "react";
 import type { Notification } from "./types";
+export declare type FlagLocale = Notification["locale"];
 export declare type FlagProps = Omit<Notification, "id" | "content">;
 export declare const Flag: FunctionComponent<FlagProps>;
 export default Flag;

package/esm/Flag/Flag.js

@@ -1,17 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
+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; }
+
 import cx from "classnames";
 import { useEffect, useRef, useState } from "react";
 import { Check, X } from "react-feather";
 import { IconButton } from "../Button";
 import { Card } from "../Card";
 import ProgressSpinner from "../ProgressSpinner";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_FLAG_LOCALE = {
+  dismissText: "Dismiss"
+};
 var VARIANT_CLASSNAMES = {
   grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-500"]))),
   accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-accent-500"]))),
@@ -38,7 +47,11 @@ export var Flag = function Flag(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "accent" : _ref$variant,
       autoDismissAfter = _ref.autoDismissAfter,
+      propsLocale = _ref.locale,
       children = _ref.children;
+  var contextLocale = useLocale("flag");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -74,7 +87,7 @@ export var Flag = function Flag(_ref) {
         size: 16,
         className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
       }) : /*#__PURE__*/_jsx(Icon, {
-        className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
         size: 16
       }), /*#__PURE__*/_jsxs("div", {
         className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"]))),
@@ -86,7 +99,7 @@ export var Flag = function Flag(_ref) {
             children: children
           }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
             icon: X,
-            title: "Dismiss",
+            title: locale.dismissText,
             variant: "subtle",
             size: "small",
             onClick: onDismiss

package/esm/Flag/Flag.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = flagPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const flagPlugin: import('../tailwind-types').TailwindPlugin;
+declare const flagPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};