@algolia/satellite 1.0.0-beta.132 → 1.0.0-beta.135

package/esm/DatePicker/components/Modal.js

@@ -11,9 +11,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import cx from "classnames";
 import { useState } from "react";
-import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { ClickAwayContainer } from "../../ClickAwayContainer";
+import { useCreatePortal } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS = [{
@@ -33,6 +33,7 @@ var Modal = function Modal(_ref) {
       _ref$modifiers = _ref.modifiers,
       modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
       className = _ref.className;
+  var createPortal = useCreatePortal();
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -51,7 +52,7 @@ var Modal = function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
+  return createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
     element: datePickerElement,
     onClickAway: function onClickAway(evt) {
       return _onClickAway === null || _onClickAway === void 0 ? void 0 : _onClickAway(evt);
@@ -63,7 +64,7 @@ var Modal = function Modal(_ref) {
       style: styles.popper,
       children: children
     }))
-  }), document.body);
+  }));
 };
 
 export default Modal;

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

@@ -1,5 +1,7 @@
 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;
 } | {
@@ -7,6 +9,8 @@ export declare type NavBarYearProps = {
     years: number[];
     onYearChange: (year: number) => void;
 };
-export declare type NavBarProps = NavbarElementProps & NavBarYearProps;
+export declare type NavBarProps = Omit<NavbarElementProps, "locale"> & NavBarYearProps & {
+    locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
+};
 declare const NavBar: FunctionComponent<NavBarProps>;
 export default NavBar;

package/esm/DatePicker/components/NavBar.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "localeUtils"];
+var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "locale", "localeUtils"];
 import cx from "classnames";
 import { useMemo } from "react";
 import { ChevronLeft, ChevronRight } from "react-feather";
@@ -19,6 +19,7 @@ var NavBar = function NavBar(_ref) {
       showPreviousButton = _ref.showPreviousButton,
       showNextButton = _ref.showNextButton,
       month = _ref.month,
+      locale = _ref.locale,
       localeUtils = _ref.localeUtils,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -39,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: "Previous month",
+      title: locale.previousMonth,
       onClick: function onClick() {
         return onPreviousClick();
       },
@@ -64,7 +65,7 @@ var NavBar = function NavBar(_ref) {
       })
     }), /*#__PURE__*/_jsx(IconButton, {
       icon: ChevronRight,
-      title: "Next month",
+      title: locale.nextMonth,
       onClick: function onClick() {
         return onNextClick();
       },

package/esm/DatePicker/types.d.ts

@@ -0,0 +1,17 @@
+import type { ModalProps } from "./components/Modal";
+export declare type DatePickerLocale = {
+    openButton?: string;
+    cancel?: string;
+    apply?: string;
+    nextMonth?: string;
+    previousMonth?: string;
+};
+export declare type SharedDatePickerProps = {
+    modalPlacement?: ModalProps["placement"];
+    locale?: DatePickerLocale;
+} & ({
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+});

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/Dropdown.js

@@ -11,10 +11,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import cx from "classnames";
 import { useState } from "react";
-import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import Card from "../Card";
 import { ClickAwayContainer } from "../ClickAwayContainer";
+import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import DropdownButtonItem from "./components/DropdownButtonItem";
 import { DropdownCollapsibleItem, DropdownCollapsibleItemsSingleGroup } from "./components/DropdownCollapsibleItem";
@@ -55,6 +55,7 @@ export var Dropdown = function Dropdown(_ref) {
       renderTarget = _ref.renderTarget,
       renderFooter = _ref.renderFooter,
       children = _ref.children;
+  var createPortal = useCreatePortal();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -100,7 +101,7 @@ export var Dropdown = function Dropdown(_ref) {
         className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-block leading-none"]))),
         ref: setTargetEl,
         children: target
-      }), showMenu && targetEl && /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
+      }), showMenu && targetEl && createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
         element: menuContainerEl,
         onClickAway: function onClickAway(evt) {
           var isContainedInTarget = targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target);
@@ -122,7 +123,7 @@ export var Dropdown = function Dropdown(_ref) {
             }) : null]
           })
         }))
-      }), document.body)]
+      }))]
     })
   });
 };

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/DropdownButtonItem.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var _excluded = ["children", "variant", "toggle", "startIcon"];
+var _excluded = ["toggle", "children", "variant", "startIcon"];
 
 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; }
 
@@ -19,9 +19,9 @@ export var DropdownButtonItem = function DropdownButtonItem(props) {
   var dropdownItemProps = useDropdownItemProps(props);
 
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+      toggle = _props$dropdownItemPr.toggle,
       children = _props$dropdownItemPr.children,
       variant = _props$dropdownItemPr.variant,
-      toggle = _props$dropdownItemPr.toggle,
       StartIcon = _props$dropdownItemPr.startIcon,
       mergedProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
 

package/esm/Dropdown/components/DropdownLinkItem.js

@@ -29,11 +29,10 @@ export var DropdownLinkItem = function DropdownLinkItem(props) {
       mergedProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
 
   return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({
-    tabIndex: disabled ? -1 : undefined,
     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/Dropdown/useDropdownItemProps.d.ts

@@ -6,8 +6,16 @@ export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
     onClick?: EventHandler<MouseEvent<T>>;
 }
 export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
+    disabled: boolean;
+    "aria-disabled": boolean;
+    tabIndex: number;
+    onClick: undefined;
     className: string;
+} | {
+    disabled?: undefined;
+    "aria-disabled"?: undefined;
+    tabIndex?: undefined;
     onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
-    disabled: boolean | undefined;
+    className: string;
 };
 export default useDropdownItemProps;

package/esm/Dropdown/useDropdownItemProps.js

@@ -1,7 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
+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 stl from "../styles/helpers/satellitePrefixer";
 import { useDropdownContext } from "./DropdownContext";
@@ -10,11 +15,15 @@ export var useDropdownItemProps = function useDropdownItemProps(props) {
       showMenu = _useDropdownContext.showMenu;
 
   var className = cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
-  return {
+  var disabledProps = props.disabled ? {
+    disabled: true,
+    "aria-disabled": true,
+    tabIndex: -1,
+    onClick: undefined
+  } : {};
+  return _objectSpread({
     className: className,
-    onClick: props.disabled ? function (evt) {
-      return evt.preventDefault();
-    } : function (evt) {
+    onClick: function onClick(evt) {
       if (props.onClick) {
         props.onClick(evt);
       }
@@ -22,8 +31,7 @@ export var useDropdownItemProps = function useDropdownItemProps(props) {
       if (!evt.defaultPrevented && props.toggle) {
         showMenu(false);
       }
-    },
-    disabled: props.disabled
-  };
+    }
+  }, disabledProps);
 };
 export default useDropdownItemProps;

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;
+};

package/esm/Flag/Flag.tailwind.js

@@ -1,40 +1,33 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var flagPlugin = function flagPlugin(_ref) {
+var plugin = _plugin;
+var flagPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
-
-  /**
-   * @param {string} color
-   */
   var TRANSITION_TIMEOUT = 500;
   addComponents({
     ".flag": {
-      width: 320
+      width: "320px"
     }
   });
   addComponents({
     ".flags_item-enter": {
-      opacity: 0.01,
+      opacity: "0.01",
       transform: "translate(0, 80px)"
     },
     ".flags_item-enter-active": {
-      opacity: 1,
+      opacity: "1",
       transform: "translate(0, 0)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     },
     ".flags_item-exit": {
-      opacity: 1,
+      opacity: "1",
       transform: "translate(0, 0)"
     },
     ".flags_item-exit-active": {
-      opacity: 0.01,
+      opacity: "0.01",
       transform: "translate(0, 80px)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     }
   });
-};
-
+});
 export default flagPlugin;

package/esm/Flag/Flags.d.ts

@@ -44,5 +44,5 @@ export interface FlagsProps {
  *
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
  */
-export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
+export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Flags;

package/esm/Flag/Flags.js

@@ -9,8 +9,8 @@ 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 { createPortal } from "react-dom";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import Flag from "./Flag";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -56,7 +56,8 @@ var TRANSITION_TIMEOUT = 500;
 export var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
+  var createPortal = useCreatePortal();
+  return createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
     component: "ul",
     children: notifications.map(function (_ref2) {
@@ -81,6 +82,6 @@ export var Flags = function Flags(_ref) {
         })
       }, id);
     })
-  }), document.body);
+  }));
 };
 export default Flags;

package/esm/Flag/types.d.ts

@@ -15,4 +15,8 @@ export interface Notification {
     variant?: ColorVariant;
     onDismiss?: () => void;
     autoDismissAfter?: number;
+    locale?: {
+        dismissText?: string;
+    };
+    children?: ReactNode;
 }

package/esm/FlexGrid/FlexGrid.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, ReactNode } from "react";
 export declare type FlexGridDirection = "row" | "column";
 export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
 export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
@@ -11,6 +11,7 @@ export interface FlexGridProps {
     alignment?: FlexGridAlignment;
     distribution?: FlexGridDistribution;
     spacing?: FlexGridSpacing;
+    children: ReactNode;
 }
 export declare const FlexGrid: FunctionComponent<FlexGridProps>;
 export default FlexGrid;

package/esm/FlexGrid/FlexGrid.tailwind.d.ts

@@ -1,5 +1,8 @@
 export = flexGridPlugin;
 /**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const flexGridPlugin: import('../tailwind-types').TailwindPlugin;
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+declare const flexGridPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};