@algolia/satellite 1.0.0-beta.14 → 1.0.0-beta.140

package/esm/EmptyState/types.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import type { FlexGridDirection } from "../FlexGrid";
+export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
+export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
+export interface EmptyStatePropsAll {
+    /** Descriptive title for the state */
+    title: ReactNode;
+    /** Optional description to explain why the screen is empty or define next steps */
+    description?: ReactNode;
+    /** Buttons */
+    actions?: ReactNode;
+    /** Direction overwrite for the buttons */
+    actionsDirection?: FlexGridDirection;
+    /** Add a <Medallion /> element in there */
+    medallion?: ReactNode;
+    /** Plop in an `img` element or `svg` here */
+    illustration?: ReactNode;
+    /**
+     * UsageContext of the component
+     * @default "feature"
+     */
+    usageContext?: EmptyStateUsageContexts;
+    /**
+     * Define wether or not content should be centered
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Defines how wide the EmptyState can expand
+     * @default "medium"
+     */
+    width?: EmptyStateWidths;
+}
+interface EmptyStatePropsUsageContextResult extends Omit<EmptyStatePropsAll, "usageContext" | "illustration"> {
+    usageContext: "result";
+    illustration?: never;
+}
+interface EmptyStatePropsUsageContextResultCentered extends Omit<EmptyStatePropsUsageContextResult, "centered"> {
+    centered: true;
+}
+interface EmptyStatePropsUsageContextResultUncentered extends Omit<EmptyStatePropsUsageContextResult, "centered"> {
+    centered?: false;
+    medallion?: never;
+}
+interface EmptyStatePropsUsageContextFeature extends Omit<EmptyStatePropsAll, "usageContext" | "illustration"> {
+    usageContext: "feature";
+    illustration?: never;
+}
+interface EmptyStatePropsUsageContextFeatureCentered extends Omit<EmptyStatePropsUsageContextFeature, "centered"> {
+    centered: true;
+}
+interface EmptyStatePropsUsageContextFeatureUncentered extends Omit<EmptyStatePropsUsageContextFeature, "centered"> {
+    centered?: false;
+    medallion?: never;
+}
+interface EmptyStatePropsUsageContextPage extends Omit<EmptyStatePropsAll, "usageContext" | "centered"> {
+    usageContext: "page";
+    centered?: never;
+    medallion?: never;
+}
+interface EmptyStatePropsUsageContextDefault extends Omit<EmptyStatePropsUsageContextFeature, "usageContext"> {
+    usageContext?: undefined;
+}
+export declare type EmptyStateProps = EmptyStatePropsUsageContextDefault | EmptyStatePropsUsageContextResultUncentered | EmptyStatePropsUsageContextResultCentered | EmptyStatePropsUsageContextFeatureUncentered | EmptyStatePropsUsageContextFeatureCentered | EmptyStatePropsUsageContextPage;
+export {};

package/esm/EmptyState/types.js

@@ -0,0 +1 @@
+export {};

package/esm/Field/Field.d.ts

@@ -0,0 +1,54 @@
+import type { FunctionComponent, ReactChild, ReactNode } from "react";
+import { FieldState } from "./FieldStateContext";
+export interface FieldProps {
+    /** @ignore */
+    className?: string;
+    /** Label to display above the nested input */
+    label?: ReactChild;
+    labelFor?: string;
+    /** Helpful description to show below the `Field` */
+    description?: ReactNode;
+    /**
+     * An object to handle state
+     * @default DEFAULT_STATE
+     */
+    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
+ *
+ * ## 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
+ */
+export declare const Field: FunctionComponent<FieldProps>;
+export default Field;

package/esm/Field/Field.js

@@ -0,0 +1,88 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import cx from "clsx";
+import { AlertCircle } from "react-feather";
+import stl from "../styles/helpers/satellitePrefixer";
+import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+/**
+ * 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
+ */
+export var Field = function Field(_ref) {
+  var className = _ref.className,
+      label = _ref.label,
+      labelFor = _ref.labelFor,
+      description = _ref.description,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? DEFAULT_STATE : _ref$state,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      children = _ref.children;
+  return /*#__PURE__*/_jsx(FieldStateContext.Provider, {
+    value: state,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: className,
+      children: [/*#__PURE__*/_jsxs("label", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
+        htmlFor: labelFor,
+        children: [label && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
+          children: label
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(inline && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto mt-1"])))),
+          children: children
+        })]
+      }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/_jsx("ul", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mb-1 mt-2 display-caption"]))),
+        children: state.errors.map(function (error) {
+          return /*#__PURE__*/_jsxs("li", {
+            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex items-center"]))),
+            children: [/*#__PURE__*/_jsx(AlertCircle, {
+              className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-red-700 mr-1"]))),
+              size: "1rem"
+            }), error]
+          }, error);
+        })
+      }) : description ? /*#__PURE__*/_jsx("p", {
+        className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["display-caption text-grey-600"]))), inline ? stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mt-1"]))) : stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-2"])))),
+        children: description
+      }) : null]
+    })
+  });
+};
+export default Field;

package/esm/Field/FieldStateContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type FieldState = {
+    status: "default";
+} | {
+    status: "validated";
+} | {
+    status: "invalid";
+    errors: string[];
+};
+export declare const DEFAULT_STATE: FieldState;
+export declare const FieldStateContext: import("react").Context<FieldState>;
+export default FieldStateContext;

package/esm/Field/FieldStateContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+export var DEFAULT_STATE = {
+  status: "default"
+};
+export var FieldStateContext = /*#__PURE__*/createContext(DEFAULT_STATE);
+export default FieldStateContext;

package/esm/Field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Field";
+export * from "./FieldStateContext";
+export * from "./useFieldState";
+export { default } from "./Field";

package/esm/Field/index.js

@@ -0,0 +1,4 @@
+export * from "./Field";
+export * from "./FieldStateContext";
+export * from "./useFieldState";
+export { default } from "./Field";

package/esm/Field/useFieldState.d.ts

@@ -0,0 +1,2 @@
+export declare const useFieldState: () => import("./FieldStateContext").FieldState;
+export default useFieldState;

package/esm/Field/useFieldState.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
+export var useFieldState = function useFieldState() {
+  return useContext(FieldStateContext) || DEFAULT_STATE;
+};
+export default useFieldState;

package/esm/Flag/Flag.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from "react";
+import type { Notification } from "./types";
+export declare type FlagLocale = Notification["locale"];
+export declare type FlagProps = Omit<Notification, "id" | "content">;
+export declare const Flag: FunctionComponent<FlagProps>;
+export default Flag;

package/esm/Flag/Flag.js

@@ -0,0 +1,115 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import cx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { Check, X } from "react-feather";
+import { IconButton } from "../Button";
+import { Card } from "../Card";
+import ProgressSpinner from "../ProgressSpinner";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_FLAG_LOCALE = {
+  dismissText: "Dismiss"
+};
+var VARIANT_CLASSNAMES = {
+  grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-500"]))),
+  accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-accent-500"]))),
+  blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-500"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-500"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-500"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-500"])))
+};
+var VARIANT_SPINNER_CLASSNAMES = {
+  grey: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["border-grey-500"]))),
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-500"]))),
+  blue: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-blue-500"]))),
+  green: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-green-500"]))),
+  orange: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-orange-500"]))),
+  red: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-red-500"])))
+};
+export var Flag = function Flag(_ref) {
+  var onDismiss = _ref.onDismiss,
+      title = _ref.title,
+      _ref$icon = _ref.icon,
+      Icon = _ref$icon === void 0 ? 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 = useLocale("flag");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hovered = _useState2[0],
+      setHovered = _useState2[1];
+
+  var onDismissRef = useRef();
+  onDismissRef.current = onDismiss;
+  var hasTitle = title !== undefined;
+  useEffect(function () {
+    if (!autoDismissAfter || hovered) return;
+    var timer = setTimeout(function () {
+      var _onDismissRef$current;
+
+      (_onDismissRef$current = onDismissRef.current) === null || _onDismissRef$current === void 0 ? void 0 : _onDismissRef$current.call(onDismissRef);
+    }, autoDismissAfter);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [autoDismissAfter, hovered]);
+  return /*#__PURE__*/_jsx(Card, {
+    fullBleed: true,
+    className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
+      onMouseEnter: function onMouseEnter() {
+        return setHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovered(false);
+      },
+      children: [loading ? /*#__PURE__*/_jsx(ProgressSpinner, {
+        size: 16,
+        className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
+      }) : /*#__PURE__*/_jsx(Icon, {
+        className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        size: 16
+      }), /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"]))),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"]))),
+          children: [hasTitle ? /*#__PURE__*/_jsx("h3", {
+            children: title
+          }) : /*#__PURE__*/_jsx("div", {
+            children: children
+          }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
+            icon: X,
+            title: locale.dismissText,
+            variant: "subtle",
+            size: "small",
+            onClick: onDismiss
+          })]
+        }), hasTitle && children && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
+          children: children
+        })]
+      })]
+    })
+  });
+};
+export default Flag;

package/esm/Flag/Flag.tailwind.d.ts

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

package/esm/Flag/Flag.tailwind.js

@@ -0,0 +1,33 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _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")
+    }
+  });
+});
+export default flagPlugin;

package/esm/Flag/Flags.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="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: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default Flags;

package/esm/Flag/Flags.js

@@ -0,0 +1,87 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["content", "id"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useCreatePortal } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import Flag from "./Flag";
+import { jsx as _jsx } from "react/jsx-runtime";
+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.
+ */
+
+export var Flags = function Flags(_ref) {
+  var _ref$notifications = _ref.notifications,
+      notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
+  var createPortal = useCreatePortal();
+  return createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
+    component: "ul",
+    children: notifications.map(function (_ref2) {
+      var content = _ref2.content,
+          id = _ref2.id,
+          rest = _objectWithoutProperties(_ref2, _excluded);
+
+      return /*#__PURE__*/_jsx(CSSTransition, {
+        classNames: {
+          enter: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flags_item-enter"]))),
+          enterActive: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flags_item-enter-active"]))),
+          exit: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flags_item-exit"]))),
+          exitActive: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flags_item-exit-active"])))
+        },
+        timeout: TRANSITION_TIMEOUT,
+        appear: true,
+        children: /*#__PURE__*/_jsx("li", {
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-4"]))),
+          children: /*#__PURE__*/_jsx(Flag, _objectSpread(_objectSpread({}, rest), {}, {
+            children: content
+          }))
+        })
+      }, id);
+    })
+  }));
+};
+export default Flags;

package/esm/Flag/index.d.ts

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

package/esm/Flag/index.js

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

package/esm/Flag/types.d.ts

@@ -0,0 +1,22 @@
+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;
+    onDismiss?: () => void;
+    autoDismissAfter?: number;
+    locale?: {
+        dismissText?: string;
+    };
+    children?: ReactNode;
+}

package/esm/Flag/types.js

@@ -0,0 +1 @@
+export {};

package/esm/FlexGrid/FlexGrid.d.ts

@@ -0,0 +1,17 @@
+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";
+export declare type FlexGridSpacing = "none" | "sm" | "md" | "lg" | "xl";
+export interface FlexGridProps {
+    className?: string;
+    direction?: FlexGridDirection;
+    wrap?: boolean;
+    inline?: boolean;
+    alignment?: FlexGridAlignment;
+    distribution?: FlexGridDistribution;
+    spacing?: FlexGridSpacing;
+    children: ReactNode;
+}
+export declare const FlexGrid: FunctionComponent<FlexGridProps>;
+export default FlexGrid;