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

package/cjs/Dropdown/useDropdownItemProps.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDropdownItemProps = exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 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"));
 
@@ -17,16 +19,24 @@ var _DropdownContext = require("./DropdownContext");
 
 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) { (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 useDropdownItemProps = function useDropdownItemProps(props) {
   var _useDropdownContext = (0, _DropdownContext.useDropdownContext)(),
       showMenu = _useDropdownContext.showMenu;
 
-  var className = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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 className = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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);
+  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);
       }
@@ -34,9 +44,8 @@ var useDropdownItemProps = function useDropdownItemProps(props) {
       if (!evt.defaultPrevented && props.toggle) {
         showMenu(false);
       }
-    },
-    disabled: props.disabled
-  };
+    }
+  }, disabledProps);
 };
 
 exports.useDropdownItemProps = useDropdownItemProps;

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

@@ -7,17 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Dropzone = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -29,6 +29,8 @@ var _Button = require("../Button");
 
 var _Field = require("../Field");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _formatters = require("../utils/formatters");
@@ -37,7 +39,7 @@ var _uniqueId = require("../utils/uniqueId");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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;
 
@@ -58,6 +60,9 @@ var STATUS_CLASSNAMES = {
   invalid: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
   validated: ""
 };
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input"
+};
 
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
@@ -81,7 +86,11 @@ var Dropzone = function Dropzone(_ref2) {
       clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
       onChange = _ref2.onChange,
       className = _ref2.className,
+      propsLocale = _ref2.locale,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("dropzone");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -126,7 +135,7 @@ var Dropzone = function Dropzone(_ref2) {
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
     "aria-controls": dropzoneId,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-nebula-500" : null), STATUS_CLASSNAMES[status], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500" : null), STATUS_CLASSNAMES[status], className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -161,14 +170,14 @@ var Dropzone = function Dropzone(_ref2) {
           className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), 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__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-        title: "Clear input",
+        title: locale.clearInput,
         icon: _reactFeather.X,
         variant: "subtle",
         size: "small",

package/cjs/EmptyState/EmptyState.js

@@ -9,7 +9,7 @@ exports["default"] = exports.EmptyState = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
 
@@ -70,10 +70,10 @@ var renderEmptyState = function renderEmptyState(_ref) {
       width = _ref$width === void 0 ? "medium" : _ref$width,
       _ref$centered = _ref.centered,
       centered = _ref$centered === void 0 ? false : _ref$centered;
-  var containerClassNames = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
-  var titleClassNames = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
-  var descriptionClassNames = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
-  var actionsClassNames = (0, _classnames["default"])(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
+  var containerClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
+  var actionsClassNames = (0, _clsx["default"])(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: containerClassNames,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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

@@ -1,19 +1,16 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var emptyStatePlugin = function emptyStatePlugin(_ref) {
+var emptyStatePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
   // Empty State illustration
   addComponents({
     ".empty-state-illustration": {
-      minWidth: 500,
-      minHeight: 500
+      minWidth: "500px",
+      minHeight: "500px"
     }
   });
-};
-
+});
 module.exports = emptyStatePlugin;

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

@@ -11,7 +11,7 @@ exports["default"] = exports.Field = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactFeather = require("react-feather");
 
@@ -82,7 +82,7 @@ var Field = function Field(_ref) {
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
+          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
           children: children
         })]
       }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
@@ -97,7 +97,7 @@ var Field = function Field(_ref) {
           }, error);
         })
       }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
         children: description
       }) : null]
     })

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

@@ -9,9 +9,11 @@ exports["default"] = exports.Flag = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -23,12 +25,21 @@ var _Card = require("../Card");
 
 var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 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) { (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_FLAG_LOCALE = {
+  dismissText: "Dismiss"
+};
 var VARIANT_CLASSNAMES = {
   grey: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-500"]))),
   accent: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-500"]))),
@@ -56,7 +67,11 @@ 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 = (0, _Satellite.useLocale)("flag");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -90,9 +105,9 @@ var Flag = function Flag(_ref) {
       },
       children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
         size: 16,
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
         size: 16
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4"]))),
@@ -104,7 +119,7 @@ var Flag = function Flag(_ref) {
             children: children
           }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
             icon: _reactFeather.X,
-            title: "Dismiss",
+            title: locale.dismissText,
             variant: "subtle",
             size: "small",
             onClick: onDismiss

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

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

package/cjs/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/cjs/Flag/Flags.js

@@ -13,10 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _reactDom = require("react-dom");
-
 var _reactTransitionGroup = require("react-transition-group");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Flag = _interopRequireDefault(require("./Flag"));
@@ -73,7 +73,8 @@ var TRANSITION_TIMEOUT = 500;
 var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
     component: "ul",
     children: notifications.map(function (_ref2) {
@@ -97,7 +98,7 @@ var Flags = function Flags(_ref) {
         })
       }, id);
     })
-  }), document.body);
+  }));
 };
 
 exports.Flags = Flags;

package/cjs/Flag/types.d.ts

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

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

@@ -9,7 +9,7 @@ exports["default"] = exports.FlexGrid = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -64,9 +64,9 @@ var FlexGrid = function FlexGrid(_ref) {
       wrap = _ref$wrap === void 0 ? false : _ref$wrap,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className),
+    className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
       children: _react.Children.map(children, function (child) {
         return /*#__PURE__*/(0, _react.isValidElement)(child) ? child : (0, _isRenderedChild["default"])(child) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: child

package/cjs/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;
+};

package/cjs/FlexGrid/FlexGrid.tailwind.js

@@ -9,14 +9,12 @@ 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; }
 
 // @ts-check
-
-/**
- * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
- **/
-
+var plugin = require("tailwindcss/plugin");
 /**
  * @param {string} value
  */
+
+
 var negate = function negate(value) {
   return "-".concat(value);
 };
@@ -38,11 +36,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({
@@ -52,7 +50,7 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-inner": {
       "> *": {
         flex: "0 0 auto",
-        minWidth: 0,
+        minWidth: "0px",
         maxWidth: "100%"
       }
     },
@@ -76,6 +74,5 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-lg": _objectSpread({}, generateSpacing(theme("spacing.6"))),
     ".flex-grid-xl": _objectSpread({}, generateSpacing(theme("spacing.8")))
   });
-};
-
+});
 module.exports = flexGridPlugin;

package/cjs/HelpUnderline/HelpUnderline.js

@@ -9,7 +9,7 @@ exports["default"] = exports.HelpUnderline = 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"));
 
@@ -27,8 +27,8 @@ var HelpUnderline = function HelpUnderline(_ref) {
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
-    wrapperClassName: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
-    tooltipClassName: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
+    wrapperClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
+    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
     content: tooltipContent,
     placement: placement,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

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

@@ -1,11 +1,9 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
+var helpUnderlinePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -20,6 +18,5 @@ var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
       }
     }
   });
-};
-
+});
 module.exports = helpUnderlinePlugin;

package/cjs/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