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

package/esm/FlexGrid/FlexGrid.tailwind.js

@@ -4,15 +4,13 @@ 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 _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
- **/
-
+var plugin = _plugin;
 /**
  * @param {string} value
  */
+
 var negate = function negate(value) {
   return "-".concat(value);
 };
@@ -34,11 +32,11 @@ var generateSpacing = function generateSpacing(spacing) {
   };
 };
 /**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
 
 
-var flexGridPlugin = function flexGridPlugin(_ref) {
+var flexGridPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -48,7 +46,7 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-inner": {
       "> *": {
         flex: "0 0 auto",
-        minWidth: 0,
+        minWidth: "0px",
         maxWidth: "100%"
       }
     },
@@ -72,6 +70,5 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-lg": _objectSpread({}, generateSpacing(theme("spacing.6"))),
     ".flex-grid-xl": _objectSpread({}, generateSpacing(theme("spacing.8")))
   });
-};
-
+});
 export default flexGridPlugin;

package/esm/HelpUnderline/HelpUnderline.d.ts

@@ -1,6 +1,7 @@
 import type { FunctionComponent } from "react";
 import { TooltipWrapperProps } from "../Tooltip";
 export interface HelpUnderlineProps {
+    /** @ignore */
     className?: string;
     placement?: TooltipWrapperProps["placement"];
     tooltipClassName?: TooltipWrapperProps["tooltipClassName"];

package/esm/HelpUnderline/HelpUnderline.tailwind.d.ts

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

package/esm/HelpUnderline/HelpUnderline.tailwind.js

@@ -1,9 +1,7 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
+var plugin = _plugin;
+var helpUnderlinePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -18,6 +16,5 @@ var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
       }
     }
   });
-};
-
+});
 export default helpUnderlinePlugin;

package/esm/Input/Input.d.ts

@@ -2,12 +2,18 @@ import type { InputHTMLAttributes, ReactNode } from "react";
 import type { IconComponentType } from "../types";
 export declare type InputVariant = "small" | "medium" | "large";
 export declare type InputStatus = "default" | "validated" | "invalid";
+export declare type InputPropsLocale = {
+    clearInput?: string;
+    increment?: string;
+    decrement?: string;
+};
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
     type?: "text" | "number" | "search" | "email" | "password";
     variant?: InputVariant;
     startIcon?: IconComponentType;
     endItem?: ReactNode;
     clearable?: boolean;
+    locale?: InputPropsLocale;
 }
 /**
  * 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/Input/Input.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["className", "style", "startIcon", "endItem", "disabled", "readOnly", "clearable", "type", "variant"];
+var _excluded = ["className", "style", "startIcon", "endItem", "disabled", "readOnly", "clearable", "type", "variant", "locale"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
@@ -15,12 +15,18 @@ import { forwardRef, Fragment, useEffect, useState } from "react";
 import { Check, ChevronDown, ChevronUp, Search, X } from "react-feather";
 import { IconButton } from "../Button";
 import useFieldState from "../Field/useFieldState";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import isNil from "../utils/isNil";
 import useForwardedRef from "../utils/useForwardedRef";
 import useTriggerInputChange from "../utils/useTriggerInputChange";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_INPUT_LOCALE = {
+  clearInput: "Clear input",
+  increment: "Increment",
+  decrement: "Decrement"
+};
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["input-invalid"]))),
@@ -71,8 +77,13 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
       type = _ref$type === void 0 ? "text" : _ref$type,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "medium" : _ref$variant,
+      propsLocale = _ref.locale,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
+  var contextLocale = useLocale("input");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_INPUT_LOCALE), contextLocale), propsLocale);
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       focused = _useState2[0],
@@ -147,7 +158,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
       }
     })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/_jsx(IconButton, {
       className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-      title: "Clear input",
+      title: locale.clearInput,
       icon: X,
       variant: "subtle",
       size: "small",
@@ -167,7 +178,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "increment",
+        "aria-label": locale.increment,
         onClick: function onClick() {
           var _inputRef$current$val, _inputRef$current2;
 
@@ -193,7 +204,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "decrement",
+        "aria-label": locale.decrement,
         onClick: function onClick() {
           var _inputRef$current$val2, _inputRef$current3;
 

package/esm/Input/Input.tailwind.d.ts

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

package/esm/Input/Input.tailwind.js

@@ -1,13 +1,11 @@
-import _disabledColor from "../styles/disabledColor";
 import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-var rgba = _rgba;
+var plugin = _plugin;
 var disabledColor = _disabledColor;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var inputPlugin = function inputPlugin(_ref) {
+var rgba = _rgba;
+var inputPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -25,8 +23,8 @@ var inputPlugin = function inputPlugin(_ref) {
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
       input: {
-        flex: 1,
-        minWidth: 0,
+        flex: "1",
+        minWidth: "0px",
         caretColor: theme("colors.grey.600"),
         color: theme("colors.grey.900"),
         background: "transparent",
@@ -35,7 +33,7 @@ var inputPlugin = function inputPlugin(_ref) {
         },
         "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
           "-webkit-appearance": "none",
-          margin: 0
+          margin: "0px"
         },
         "&:focus": {
           outline: "none"
@@ -78,15 +76,15 @@ var inputPlugin = function inputPlugin(_ref) {
       display: "flex",
       flexDirection: "column",
       height: "100%",
-      width: 24,
-      minWidth: 20
+      width: "24px",
+      minWidth: "20px"
     },
     ".input-spinner-button": {
       background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
       borderColor: theme("colors.grey.200"),
       borderStyle: "solid",
-      borderLeftWidth: 1,
-      flex: 1,
+      borderLeftWidth: "1px",
+      flex: "1",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -94,10 +92,9 @@ var inputPlugin = function inputPlugin(_ref) {
         outline: "none"
       },
       "&:not(:last-child)": {
-        borderBottomWidth: 1
+        borderBottomWidth: "1px"
       }
     }
   });
-};
-
+});
 export default inputPlugin;

package/esm/Insert/Insert.d.ts

@@ -8,6 +8,7 @@ export interface InsertProps {
     /** Descriptive title for the `Insert` */
     title: ReactNode;
     contexts?: Array<string | InsertContext>;
+    children: ReactNode;
 }
 /**
 * Put more emphasis on side content.

package/esm/InstantSearch/InstantSearch.tailwind.d.ts

@@ -1,6 +1,5 @@
-declare function _exports({ addComponents, prefix, theme }: {
-    addComponents: any;
-    prefix: any;
-    theme: any;
-}): void;
+declare const _exports: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};
 export = _exports;

package/esm/InstantSearch/InstantSearch.tailwind.js

@@ -1,22 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _disabledColor from "../styles/disabledColor";
-import _require2 from "../styles/helpers/icons";
 import _rgba from "../styles/rgba";
-var rgba = _rgba;
+import _require2 from "../styles/helpers/icons";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
 var _require = _require2,
     toBG = _require.toBG,
     selectIconBG = _require.selectIconBG;
-var disabledColor = _disabledColor;
-export default (function (_ref) {
-  var _aisSearchBoxForm;
-
+var rgba = _rgba;
+export default plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       prefix = _ref.prefix,
       theme = _ref.theme;
   addComponents(_defineProperty({}, prefix(".instantsearch"), {
     // SearchBox widget
     // ----------------------------------------
-    ".ais-SearchBox-form": (_aisSearchBoxForm = {
+    ".ais-SearchBox-form": {
       position: "relative",
       overflow: "hidden",
       display: "flex",
@@ -26,24 +27,25 @@ export default (function (_ref) {
       cursor: "text",
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
-      backgroundColor: theme("colors.white")
-    }, _defineProperty(_aisSearchBoxForm, "overflow", "hidden"), _defineProperty(_aisSearchBoxForm, "&:before", {
-      content: "''",
-      position: "absolute",
-      left: theme("spacing.4"),
-      top: "50%",
-      marginTop: "-".concat(theme("spacing.2")),
-      width: theme("spacing.4"),
-      height: theme("spacing.4"),
-      background: toBG("Search", {
-        color: theme("colors.grey.600"),
-        size: 16
-      })
-    }), _aisSearchBoxForm),
+      backgroundColor: theme("colors.white"),
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        left: theme("spacing.4"),
+        top: "50%",
+        marginTop: "-".concat(theme("spacing.2")),
+        width: theme("spacing.4"),
+        height: theme("spacing.4"),
+        background: toBG("Search", {
+          color: theme("colors.grey.600"),
+          size: 16
+        })
+      }
+    },
     ".ais-SearchBox-input": {
       appearance: "none",
-      flex: 1,
-      minWidth: 0,
+      flex: "1",
+      minWidth: "0px",
       paddingLeft: theme("spacing.10"),
       backgroundColor: theme("colors.white"),
       border: "1px solid ".concat(theme("colors.grey.200")),
@@ -111,22 +113,22 @@ export default (function (_ref) {
       whiteSpace: "nowrap"
     },
     ".ais-Menu-item--selected .ais-Menu-label, .ais-HierarchicalMenu-item--selected > .ais-HierarchicalMenu-link > .ais-HierarchicalMenu-label": {
-      fontWeight: 600
+      fontWeight: "600"
     },
     ".ais-RefinementList-checkbox": {
-      opacity: 0,
+      opacity: "0",
       position: "absolute"
     },
     ".ais-RefinementList-labelText, .ais-HierarchicalMenu-label": {
       position: "relative",
-      left: -1,
-      marginRight: -1,
+      left: "-1px",
+      marginRight: "-1px",
       paddingLeft: theme("spacing.6"),
       "&:before": {
         content: "''",
         overflow: "hidden",
         position: "absolute",
-        left: 1,
+        left: "1px",
         top: "50%",
         marginTop: "-".concat(theme("spacing.2")),
         width: theme("spacing.4"),
@@ -148,7 +150,7 @@ export default (function (_ref) {
       borderColor: "currentColor"
     },
     ".ais-RefinementList-item--selected .ais-RefinementList-labelText:before": {
-      opacity: 1,
+      opacity: "1",
       borderColor: "currentColor",
       boxShadow: "inset 0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
       backgroundImage: toBG("Check", {
@@ -323,14 +325,14 @@ export default (function (_ref) {
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
       },
       "&:focus": {
-        zIndex: 2,
+        zIndex: "2",
         outline: "none",
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
         borderColor: theme("colors.accent.600"),
         boxShadow: "\n              0 0 0 1px ".concat(theme("colors.accent.600"), ",\n              0 2px 0 1px ").concat(theme("colors.shadow.5"), "\n            ")
       },
       "&:active, &.ais-Pagination-link--selected": {
-        zIndex: 1,
+        zIndex: "1",
         backgroundImage: theme("color.grey.100"),
         borderColor: theme("colors.grey.200"),
         boxShadow: "\n              inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n              inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n              0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n            ")
@@ -348,7 +350,7 @@ export default (function (_ref) {
     },
     ".ais-Pagination-item + .ais-Pagination-item > .ais-Pagination-link": {
       marginLeft: "-1px",
-      borderRadius: 0
+      borderRadius: "0px"
     },
     ".ais-Pagination-item:last-child > .ais-Pagination-link": {
       borderRadius: "0 ".concat(theme("borderRadius.DEFAULT"), " ").concat(theme("borderRadius.DEFAULT"), " 0")

package/esm/KeyboardKey/KeyboardKey.d.ts

@@ -1,5 +1,6 @@
 import type { FC } from "react";
 export interface KeyboardKeyProps {
+    /** @ignore */
     className?: string;
     value: string;
 }

package/esm/KeyboardKey/KeyboardKey.js

@@ -18,13 +18,14 @@ var KEY_MAPPINGS = {
 export var KeyboardKey = function KeyboardKey(_ref) {
   var className = _ref.className,
       value = _ref.value;
-  var mappedValue = !KEY_MAPPINGS[value] ? value : typeof KEY_MAPPINGS[value] === "string" ? KEY_MAPPINGS[value] : /*#__PURE__*/createElement(KEY_MAPPINGS[value], {
+  var mappedValue = KEY_MAPPINGS[value];
+  var displayed = !mappedValue ? value : typeof mappedValue === "string" ? mappedValue : /*#__PURE__*/createElement(mappedValue, {
     "aria-label": value,
     width: "1em",
     height: "1em"
   });
   return /*#__PURE__*/_jsx("kbd", {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["keyboard-key "]))), className),
-    children: mappedValue
+    children: displayed
   });
 };

package/esm/KeyboardKey/KeyboardKey.tailwind.d.ts

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

package/esm/KeyboardKey/KeyboardKey.tailwind.js

@@ -1,16 +1,14 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var keyboardKeyPlugin = function keyboardKeyPlugin(_ref) {
+var plugin = _plugin;
+var keyboardKeyPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
     ".keyboard-key": {
       borderRadius: theme("borderRadius.DEFAULT"),
-      height: 20,
-      minWidth: 20,
+      height: "20px",
+      minWidth: "20px",
       padding: "0 4px",
       display: "inline-flex",
       textAlign: "center",
@@ -26,6 +24,5 @@ var keyboardKeyPlugin = function keyboardKeyPlugin(_ref) {
       boxShadow: "\n        2px 1px 4px -2px rgba(35, 38, 59, 0.24),\n        inset -0.6px -0.6px 1px #dcdde7, inset 0.6px 0.6px 1px #ffffff\n      "
     }
   });
-};
-
+});
 export default keyboardKeyPlugin;

package/esm/Link/ButtonLink.js

@@ -22,16 +22,7 @@ export var ButtonLink = function ButtonLink(_ref) {
 
   return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
     endIcon: EndIcon,
-    as: "a",
-    onClick: function onClick(evt) {
-      if (props.disabled) {
-        evt.preventDefault();
-      } else {
-        var _linkProps$onClick;
-
-        (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, evt);
-      }
-    }
+    as: "a"
   }));
 };
 export default ButtonLink;

package/esm/Medallion/Medallion.tailwind.d.ts

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

package/esm/Medallion/Medallion.tailwind.js

@@ -1,23 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _rgba from "../styles/rgba";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
+var plugin = _plugin;
 var rgba = _rgba;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var medallionPlugin = function medallionPlugin(_ref) {
+var medallionPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   var colors = ["grey", "pink", "accent", "blue", "green", "orange", "red", "white"];
   addComponents({
     ".medallion": {
-      height: 40,
-      width: 40
+      height: "40px",
+      width: "40px"
     },
     ".medallion-large": {
-      height: 72,
-      width: 72
+      height: "72px",
+      width: "72px"
     }
   }); // Variants
 
@@ -27,6 +25,5 @@ var medallionPlugin = function medallionPlugin(_ref) {
       boxShadow: color === "white" ? "0px 4px 8px -2px rgba(33, 36, 61, 0.25), inset 0px -2px 2px rgba(35, 38, 59, 0.03)" : "0px 4px 8px -2px rgba(33, 36, 61, 0.25), inset 0px -2px 2px ".concat(rgba(theme("colors.".concat(color, ".300")), 0.03))
     }));
   });
-};
-
+});
 export default medallionPlugin;

package/esm/Modal/Modal.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from "react";
 export declare type ModalSizeVariant = "medium" | "large";
+export declare type ModalLocale = {
+    dismissText?: string;
+};
 export interface ModalProps {
     open?: boolean;
     title?: string | JSX.Element;
@@ -11,10 +14,10 @@ export interface ModalProps {
     centerY?: boolean;
     onDismiss?: () => void;
     children: ReactNode;
-    closeIconText?: string;
+    locale?: ModalLocale;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, closeIconText, }: ModalProps): import("react").ReactPortal;
+    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
 };
 export default Modal;

package/esm/Modal/Modal.js

@@ -10,19 +10,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import cx from "classnames";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { X } from "react-feather";
 import { CSSTransition } from "react-transition-group";
 import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
 import useLockBodyScroll from "react-use/lib/useLockBodyScroll";
 import { IconButton } from "../Button";
 import Card from "../Card";
+import { useCreatePortal, useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import uniqueId from "../utils/uniqueId";
 import ModalFooter from "./components/ModalFooter";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_MODAL_LOCALE = {
+  dismissText: "Dismiss"
+};
 
 var ModalAnimation = function ModalAnimation(props) {
   return (
@@ -66,8 +69,11 @@ export var Modal = function Modal(_ref) {
       size = _ref$size === void 0 ? "medium" : _ref$size,
       _ref$centerY = _ref.centerY,
       centerY = _ref$centerY === void 0 ? false : _ref$centerY,
-      _ref$closeIconText = _ref.closeIconText,
-      closeIconText = _ref$closeIconText === void 0 ? "Dismiss" : _ref$closeIconText;
+      propsLocale = _ref.locale;
+  var createPortal = useCreatePortal();
+  var contextLocale = useLocale("modal");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -120,11 +126,11 @@ export var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ModalContainer, {
+  return createPortal( /*#__PURE__*/_jsx(ModalContainer, {
     "in": open,
     children: /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx("div", {
-        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900 bg-opacity-30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
+        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
       }), /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
         className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center"])))),
         ref: setModalWrapperRef
@@ -142,10 +148,10 @@ export var Modal = function Modal(_ref) {
               children: title
             }), !hideCloseIcon && /*#__PURE__*/_jsx(IconButton, {
               icon: X,
-              title: closeIconText,
+              title: locale.dismissText,
               variant: "subtle",
               onClick: onDismiss,
-              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex-shrink-0 -mr-2"])))
+              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["shrink-0 -mr-2"])))
             })]
           }), /*#__PURE__*/_jsx("div", {
             className: fullBleed ? undefined : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-10"]))),
@@ -154,7 +160,7 @@ export var Modal = function Modal(_ref) {
         })
       }))]
     })
-  }), document.body);
+  }));
 };
 Modal.Footer = ModalFooter;
 export default Modal;