@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/cjs/Field/Field.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Field = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _reactFeather = require("react-feather");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _utils = require("../utils");
+var _FieldContext = require("./FieldContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+/**
+ * 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
+ *
+ * ## Structure
+ * - **Label**: Use the label to provide instructions critical to using the text field. Labels should indicate what sort of information the field requires, be concise and actionable. Consider starting with action verbs (e.g. enter; fill; select). Put labels directly above their input and align them to the left
+ * - **Placeholder text**: Use to provide additional, non-critical instructions around how they should use the field. Try using examples over instructions whenever possible
+ * - **Helper text**: Use to give additional context or extra guidance. Only use this where clarification is required, and try not to overuse it
+ *   - When you provide help text via the helpText prop or an inline error message via the error prop, the help or error content is conveyed to screen reader users with the aria-describedby attribute. This attribute causes the content to be read along with the label, either immediately or after a short delay
+ *
+ * ## Validation behavior
+ * - **Validation icon**: helps indicate what state the field has. This can manifest as validation (error, success) or utility (show/hide password, clear)
+ * - **Error text**: is activated after the input is deselected and communicates more information signified by the input icon. This typically displays an error message related to the field. Keep this text as short as possible and make sure it helps the user to recover from an error
+ *
+ * ## Content guidelines
+ * #### Field label
+ * - Place above the form field
+ * - Keep it short and succinct (1–3 words)
+ * - Write in sentence case (the first word capitalized, the rest lowercase)
+ *
+ * #### Field placeholder
+ * - Mandatory to use, however is supplementary in terms of information importance (because the text has low contrast and is not visible when text is entered)
+ * - Use examples instead of instructions whenever possible
+ * - Include “E.g.:” before an example
+ *
+ * #### Help / error text
+ * - Clearly explain what  is expected (help) or what went wrong and how to fix it (error)
+ * - Be short and concise, no more than a single sentence
+ * - Use passive voice so users don't feel like they're being blamed for the error
+ *
+ * #### Designating optional fields
+ * - Try to only ask for information that's required
+ * - If you need to ask users to provide optional information, mark the field optional by placing the text “(optional)” at the end of the field's label
+ * - Don't mark required fields with asterisks
+ */
+var Field = exports.Field = function Field(_ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    labelFor = _ref.labelFor,
+    labelIdProp = _ref.labelId,
+    description = _ref.description,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _FieldContext.DEFAULT_FIELD_STATE : _ref$state,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    children = _ref.children;
+  var hasLabel = !!label;
+  var labelId = (0, _react.useMemo)(
+  // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : (0, _utils.uniqueId)("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldContext.FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer flex ", ""])), !inline && "flex-col"),
+        htmlFor: labelFor,
+        children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          id: labelId,
+          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          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", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mb-1 mt-2 display-caption"]))),
+        children: state.errors.map(function (error) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.AlertCircle, {
+              className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 mr-1"]))),
+              size: "1rem"
+            }), error]
+          }, error);
+        })
+      }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        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]
+    })
+  });
+};
+var _default = exports["default"] = Field;

package/cjs/Field/FieldContext.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type FieldState = {
+    status: "default";
+} | {
+    status: "validated";
+} | {
+    status: "invalid";
+    errors: string[];
+};
+export declare type FieldContextValue = {
+    state: FieldState;
+    labelId?: string;
+};
+export declare const DEFAULT_FIELD_STATE: FieldState;
+export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;
+export declare const FieldContext: import("react").Context<FieldContextValue>;

package/cjs/Field/FieldContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldContext = exports.DEFAULT_FIELD_STATE = exports.DEFAULT_CONTEXT_VALUE = void 0;
+var _react = require("react");
+var DEFAULT_FIELD_STATE = exports.DEFAULT_FIELD_STATE = {
+  status: "default"
+};
+var DEFAULT_CONTEXT_VALUE = exports.DEFAULT_CONTEXT_VALUE = {
+  state: DEFAULT_FIELD_STATE
+};
+var FieldContext = exports.FieldContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_CONTEXT_VALUE);

package/cjs/Field/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Field";
+export type { FieldState, FieldContextValue } from "./FieldContext";
+export { FieldContext } from "./FieldContext";
+export * from "./useField";
+export { default } from "./Field";

package/cjs/Field/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  FieldContext: true
+};
+Object.defineProperty(exports, "FieldContext", {
+  enumerable: true,
+  get: function get() {
+    return _FieldContext.FieldContext;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Field["default"];
+  }
+});
+var _Field = _interopRequireWildcard(require("./Field"));
+Object.keys(_Field).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Field[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Field[key];
+    }
+  });
+});
+var _FieldContext = require("./FieldContext");
+var _useField = require("./useField");
+Object.keys(_useField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useField[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Field/useField.d.ts

@@ -0,0 +1,2 @@
+import type { FieldContextValue } from "./FieldContext";
+export declare const useField: () => FieldContextValue;

package/cjs/Field/useField.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useField = void 0;
+var _react = require("react");
+var _FieldContext = require("./FieldContext");
+var useField = exports.useField = function useField() {
+  return (0, _react.useContext)(_FieldContext.FieldContext);
+};

package/cjs/Flag/Flag.d.ts

@@ -0,0 +1,6 @@
+import type { VFC } 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: VFC<FlagProps>;
+export default Flag;

package/cjs/Flag/Flag.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _reactFeather = require("react-feather");
+var _Button = require("../Button");
+var _Card = require("../Card");
+var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
+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, _templateObject20, _templateObject21;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-600"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-500"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-500"])))
+};
+var VARIANT_SPINNER_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["border-grey-500"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-accent-500"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-blue-600"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-orange-500"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["border-red-500"])))
+};
+var Flag = exports.Flag = function Flag(_ref) {
+  var onDismiss = _ref.onDismiss,
+    title = _ref.title,
+    _ref$icon = _ref.icon,
+    Icon = _ref$icon === void 0 ? _reactFeather.Check : _ref$icon,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _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),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var onDismissRef = (0, _react.useRef)();
+  onDismissRef.current = onDismiss;
+  var hasTitle = title !== undefined;
+  (0, _react.useEffect)(function () {
+    if (!autoDismissAfter || hovered) return;
+    var timer = setTimeout(function () {
+      var _onDismissRef$current;
+      (_onDismissRef$current = onDismissRef.current) === null || _onDismissRef$current === void 0 || _onDismissRef$current.call(onDismissRef);
+    }, autoDismissAfter);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [autoDismissAfter, hovered]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
+    fullBleed: true,
+    className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flag shadow-z500"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-4 flex"]))),
+      onMouseEnter: function onMouseEnter() {
+        return setHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovered(false);
+      },
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
+        size: 16,
+        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, _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 min-w-0 break-words"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))),
+          children: [hasTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
+            children: title
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["min-w-0"]))),
+            children: children
+          }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            icon: _reactFeather.X,
+            title: locale.dismissText,
+            variant: "subtle",
+            size: "small",
+            onClick: onDismiss
+          })]
+        }), hasTitle && (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
+          children: children
+        })]
+      })]
+    })
+  });
+};
+var _default = exports["default"] = Flag;

package/cjs/Flag/Flag.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = flagPlugin;
+declare const flagPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/cjs/Flag/Flag.tailwind.js

@@ -0,0 +1,34 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var flagPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents;
+  var TRANSITION_TIMEOUT = 500;
+  addComponents({
+    ".flag": {
+      width: "320px"
+    }
+  });
+  addComponents({
+    ".flags_item-enter": {
+      opacity: "0.01",
+      transform: "translate(0, 80px)"
+    },
+    ".flags_item-enter-active": {
+      opacity: "1",
+      transform: "translate(0, 0)",
+      transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
+    },
+    ".flags_item-exit": {
+      opacity: "1",
+      transform: "translate(0, 0)"
+    },
+    ".flags_item-exit-active": {
+      opacity: "0.01",
+      transform: "translate(0, 80px)",
+      transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
+    }
+  });
+});
+module.exports = flagPlugin;

package/cjs/Flag/Flags.d.ts

@@ -0,0 +1,48 @@
+import type { VFC } from "react";
+import type { Notification } from "./types";
+export interface FlagsProps {
+    /**
+     * Array of notifications
+     * @example [{ id: "test", title: "Test", content: "Example" }]
+     */
+    notifications: Notification[];
+}
+/**
+ * Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom of the screen and overlay any content.
+ * For critical messaging about loss of data or functionality, please use banners.
+ *
+ * ## Structure
+ *
+ * - **Icon (or avatar) and title**: flag messages should always contain a concise title and an appropriate icon
+ * - **Message (optional)**: If the text overflows, truncate using an ellipsis
+ * - **Actions (optional)**: two links max that enable users to act on the flag's content
+ * - **Dismiss**: use to close the flag
+ *
+ * ## Variations
+ *
+ * ### Warning
+ *
+ * Warning messages appear before we request the user to take action. This is usually in anticipation of a significant change. Have empathy for the user. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if the they proceed, and provide an alternative where possible.
+ *
+ * ### Error
+ *
+ * Error messages let the user know that something has gone wrong after they've tried to do something. Explain the problem and provide the user with a next step or an alternative. Keep the message simple and direct, avoid blame and accept if something is our fault.
+ *
+ * ### Success
+ *
+ * Success messages let the user know that they have completed an action. For these messages, it's best to reaffirm the outcome and get out of the user's way. If they have just created something, give them an option to view it.
+ *
+ * ### Info / Loading
+ *
+ * Info messages alert the user to additional information without requiring an action. Inform the user about something that might help or impact them.
+ *
+ * ## Interaction
+ *
+ * Flags can be dismissed by selecting the 'x' or will fade away after X seconds. The user can pause the auto-dismiss by hovering over the flag.
+ *
+ * ## Multiple flags
+ *
+ * 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: VFC<FlagsProps>;
+export default Flags;

package/cjs/Flag/Flags.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Flags = void 0;
+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 _reactTransitionGroup = require("react-transition-group");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _prefersReducedMotion = require("../utils/prefersReducedMotion");
+var _Flag = _interopRequireDefault(require("./Flag"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["content", "id"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TRANSITION_TIMEOUT = 500;
+
+/**
+ * Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom of the screen and overlay any content.
+ * For critical messaging about loss of data or functionality, please use banners.
+ *
+ * ## Structure
+ *
+ * - **Icon (or avatar) and title**: flag messages should always contain a concise title and an appropriate icon
+ * - **Message (optional)**: If the text overflows, truncate using an ellipsis
+ * - **Actions (optional)**: two links max that enable users to act on the flag's content
+ * - **Dismiss**: use to close the flag
+ *
+ * ## Variations
+ *
+ * ### Warning
+ *
+ * Warning messages appear before we request the user to take action. This is usually in anticipation of a significant change. Have empathy for the user. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if the they proceed, and provide an alternative where possible.
+ *
+ * ### Error
+ *
+ * Error messages let the user know that something has gone wrong after they've tried to do something. Explain the problem and provide the user with a next step or an alternative. Keep the message simple and direct, avoid blame and accept if something is our fault.
+ *
+ * ### Success
+ *
+ * Success messages let the user know that they have completed an action. For these messages, it's best to reaffirm the outcome and get out of the user's way. If they have just created something, give them an option to view it.
+ *
+ * ### Info / Loading
+ *
+ * Info messages alert the user to additional information without requiring an action. Inform the user about something that might help or impact them.
+ *
+ * ## Interaction
+ *
+ * Flags can be dismissed by selecting the 'x' or will fade away after X seconds. The user can pause the auto-dismiss by hovering over the flag.
+ *
+ * ## Multiple flags
+ *
+ * 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.
+ */
+var Flags = exports.Flags = function Flags(_ref) {
+  var _ref$notifications = _ref.notifications,
+    notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
+  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) {
+      var content = _ref2.content,
+        id = _ref2.id,
+        rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        classNames: !_prefersReducedMotion.prefersReducedMotion ? {
+          enter: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flags_item-enter"]))),
+          enterActive: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flags_item-enter-active"]))),
+          exit: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flags_item-exit"]))),
+          exitActive: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flags_item-exit-active"])))
+        } : {},
+        timeout: !_prefersReducedMotion.prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
+        appear: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["mt-4"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flag["default"], _objectSpread(_objectSpread({}, rest), {}, {
+            children: content
+          }))
+        })
+      }, id);
+    })
+  }));
+};
+var _default = exports["default"] = Flags;

package/cjs/Flag/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Flag";
+export * from "./Flags";
+export * from "./types";
+export { default } from "./Flag";

package/cjs/Flag/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Flag["default"];
+  }
+});
+var _Flag = _interopRequireWildcard(require("./Flag"));
+Object.keys(_Flag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Flag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Flag[key];
+    }
+  });
+});
+var _Flags = require("./Flags");
+Object.keys(_Flags).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Flags[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Flags[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Flag/types.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../types";
+import type { ColorVariant } from "../types";
+export interface Notification {
+    /** Unique notification ID */
+    id: string;
+    title?: string;
+    /** Content goes here */
+    content: ReactNode;
+    /** Icon to accompany the notification */
+    icon?: IconComponentType;
+    /**  @default false */
+    loading?: boolean;
+    /**  @default "blue" */
+    variant?: ColorVariant;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     * */
+    onDismiss?: () => void;
+    /** Defines if and how long before the notification should be dismissed (in ms) */
+    autoDismissAfter?: number;
+    locale?: {
+        dismissText?: string;
+    };
+    children?: ReactNode;
+}

package/cjs/Flag/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});