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

package/cjs/Input/Input.js

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -25,6 +25,8 @@ var _Button = require("../Button");
 
 var _useFieldState2 = _interopRequireDefault(require("../Field/useFieldState"));
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _isNil = _interopRequireDefault(require("../utils/isNil"));
@@ -35,7 +37,7 @@ var _useTriggerInputChange = _interopRequireDefault(require("../utils/useTrigger
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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;
 
@@ -43,6 +45,11 @@ 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) { (0, _defineProperty2["default"])(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; }
 
+var DEFAULT_INPUT_LOCALE = {
+  clearInput: "Clear input",
+  increment: "Increment",
+  decrement: "Decrement"
+};
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
@@ -93,7 +100,11 @@ var Input = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("input");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_INPUT_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -129,7 +140,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
     style: style,
     onClick: function onClick() {
       var _inputRef$current;
@@ -169,7 +180,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
       }
     })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-      title: "Clear input",
+      title: locale.clearInput,
       icon: _reactFeather.X,
       variant: "subtle",
       size: "small",
@@ -189,7 +200,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "increment",
+        "aria-label": locale.increment,
         onClick: function onClick() {
           var _inputRef$current$val, _inputRef$current2;
 
@@ -215,7 +226,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "decrement",
+        "aria-label": locale.decrement,
         onClick: function onClick() {
           var _inputRef$current$val2, _inputRef$current3;
 

package/cjs/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/cjs/Input/Input.tailwind.js

@@ -1,15 +1,13 @@
 "use strict";
 
 // @ts-check
-var rgba = require("../styles/rgba");
+var plugin = require("tailwindcss/plugin");
 
 var disabledColor = require("../styles/disabledColor");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
 
+var rgba = require("../styles/rgba");
 
-var inputPlugin = function inputPlugin(_ref) {
+var inputPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -27,8 +25,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",
@@ -37,7 +35,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"
@@ -80,15 +78,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",
@@ -96,10 +94,9 @@ var inputPlugin = function inputPlugin(_ref) {
         outline: "none"
       },
       "&:not(:last-child)": {
-        borderBottomWidth: 1
+        borderBottomWidth: "1px"
       }
     }
   });
-};
-
+});
 module.exports = inputPlugin;

package/cjs/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/cjs/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/cjs/InstantSearch/InstantSearch.tailwind.js

@@ -4,24 +4,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var rgba = require("../styles/rgba");
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var disabledColor = require("../styles/disabledColor");
 
 var _require = require("../styles/helpers/icons"),
     toBG = _require.toBG,
     selectIconBG = _require.selectIconBG;
 
-var disabledColor = require("../styles/disabledColor");
-
-module.exports = function (_ref) {
-  var _aisSearchBoxForm;
+var rgba = require("../styles/rgba");
 
+module.exports = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       prefix = _ref.prefix,
       theme = _ref.theme;
   addComponents((0, _defineProperty2["default"])({}, prefix(".instantsearch"), {
     // SearchBox widget
     // ----------------------------------------
-    ".ais-SearchBox-form": (_aisSearchBoxForm = {
+    ".ais-SearchBox-form": {
       position: "relative",
       overflow: "hidden",
       display: "flex",
@@ -31,24 +32,25 @@ module.exports = function (_ref) {
       cursor: "text",
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
-      backgroundColor: theme("colors.white")
-    }, (0, _defineProperty2["default"])(_aisSearchBoxForm, "overflow", "hidden"), (0, _defineProperty2["default"])(_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")),
@@ -116,22 +118,22 @@ module.exports = 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"),
@@ -153,7 +155,7 @@ module.exports = 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", {
@@ -328,14 +330,14 @@ module.exports = 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            ")
@@ -353,7 +355,7 @@ module.exports = 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")
@@ -377,4 +379,4 @@ module.exports = function (_ref) {
   }), {
     respectPrefix: false
   });
-};
+});

package/cjs/KeyboardKey/KeyboardKey.js

@@ -9,7 +9,7 @@ exports.KeyboardKey = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -33,14 +33,15 @@ var KEY_MAPPINGS = {
 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__*/(0, _react.createElement)(KEY_MAPPINGS[value], {
+  var mappedValue = KEY_MAPPINGS[value];
+  var displayed = !mappedValue ? value : typeof mappedValue === "string" ? mappedValue : /*#__PURE__*/(0, _react.createElement)(mappedValue, {
     "aria-label": value,
     width: "1em",
     height: "1em"
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("kbd", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className),
-    children: mappedValue
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className),
+    children: displayed
   });
 };
 

package/cjs/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/cjs/KeyboardKey/KeyboardKey.tailwind.js

@@ -1,18 +1,16 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var keyboardKeyPlugin = function keyboardKeyPlugin(_ref) {
+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",
@@ -28,6 +26,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      "
     }
   });
-};
-
+});
 module.exports = keyboardKeyPlugin;

package/cjs/Link/ButtonLink.js

@@ -36,16 +36,7 @@ var ButtonLink = function ButtonLink(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _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"
   }));
 };
 

package/cjs/Link/Link.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -48,7 +48,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), linkProps), {}, {
     ref: ref,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-1"]))),
       size: "1em"

package/cjs/Medallion/Medallion.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Medallion = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -25,6 +25,7 @@ var VARIANT_CLASSNAMES = {
   green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["medallion-green text-green-700"]))),
   orange: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["medallion-orange text-orange-600"]))),
   red: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["medallion-red text-red-600"]))),
+  // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself
   white: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["medallion-white text-nebula-500"])))
 };
 
@@ -37,7 +38,7 @@ var Medallion = function Medallion(_ref) {
       className = _ref.className;
   var medallionClassName = VARIANT_CLASSNAMES[variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
       className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["p-1 ", ""])), size === "large" && "w-10 h-10")
     })

package/cjs/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/cjs/Medallion/Medallion.tailwind.js

@@ -5,24 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 // @ts-check
-var rgba = require("../styles/rgba");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
+var plugin = require("tailwindcss/plugin");
 
+var rgba = require("../styles/rgba");
 
-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
 
@@ -32,6 +30,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))
     }));
   });
-};
-
+});
 module.exports = medallionPlugin;

package/cjs/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,12 +14,10 @@ export interface ModalProps {
     centerY?: boolean;
     onDismiss?: () => void;
     children: ReactNode;
-    locale?: {
-        dismissText?: string;
-    };
+    locale?: ModalLocale;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale, }: 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/cjs/Modal/Modal.js

@@ -13,12 +13,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactFeather = require("react-feather");
 
 var _reactTransitionGroup = require("react-transition-group");
@@ -31,6 +29,8 @@ var _Button = require("../Button");
 
 var _Card = _interopRequireDefault(require("../Card"));
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
@@ -45,6 +45,10 @@ 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) { (0, _defineProperty2["default"])(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; }
 
+var DEFAULT_MODAL_LOCALE = {
+  dismissText: "Dismiss"
+};
+
 var ModalAnimation = function ModalAnimation(props) {
   return (
     /*#__PURE__*/
@@ -88,7 +92,11 @@ 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,
-      locale = _ref.locale;
+      propsLocale = _ref.locale;
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  var contextLocale = (0, _Satellite.useLocale)("modal");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -141,19 +149,19 @@ var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
     "in": open,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900 bg-opacity-30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
         ref: setModalWrapperRef
       }, modalAccessibilityProps), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
           ref: dialogRef,
           elevation: "500",
-          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
           fullBleed: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
             className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
@@ -163,10 +171,10 @@ var Modal = function Modal(_ref) {
               children: title
             }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
               icon: _reactFeather.X,
-              title: (locale === null || locale === void 0 ? void 0 : locale.dismissText) || "Dismiss",
+              title: locale.dismissText,
               variant: "subtle",
               onClick: onDismiss,
-              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 -mr-2"])))
+              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 -mr-2"])))
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: fullBleed ? undefined : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["p-10"]))),
@@ -175,7 +183,7 @@ var Modal = function Modal(_ref) {
         })
       }))]
     })
-  }), document.body);
+  }));
 };
 
 exports.Modal = Modal;