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

package/esm/Field/Field.js

@@ -0,0 +1,98 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+import cx from "clsx";
+import { useMemo } from "react";
+import { AlertCircle } from "react-feather";
+import stl from "../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../utils";
+import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
+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,
+    labelIdProp = _ref.labelId,
+    description = _ref.description,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 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 = useMemo(
+  // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : uniqueId("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  return /*#__PURE__*/_jsx(FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: className,
+      children: [/*#__PURE__*/_jsxs("label", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
+        htmlFor: labelFor,
+        children: [hasLabel && /*#__PURE__*/_jsx("div", {
+          id: labelId,
+          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/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/esm/Field/FieldContext.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+export var DEFAULT_FIELD_STATE = {
+  status: "default"
+};
+export var DEFAULT_CONTEXT_VALUE = {
+  state: DEFAULT_FIELD_STATE
+};
+export var FieldContext = /*#__PURE__*/createContext(DEFAULT_CONTEXT_VALUE);

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

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

package/esm/Field/useField.d.ts

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

package/esm/Field/useField.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { FieldContext } from "./FieldContext";
+export var useField = function useField() {
+  return useContext(FieldContext);
+};

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

@@ -0,0 +1,110 @@
+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, _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) { _defineProperty(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; }
+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 isRenderedChild from "../utils/isRenderedChild";
+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-600"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-600"]))),
+  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-600"]))),
+  green: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-green-600"]))),
+  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 || _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 min-w-0 break-words"]))),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"]))),
+          children: [hasTitle ? /*#__PURE__*/_jsx("h3", {
+            className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["overflow-hidden"]))),
+            children: title
+          }) : /*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["min-w-0"]))),
+            children: children
+          }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
+            icon: X,
+            title: locale.dismissText,
+            variant: "subtle",
+            size: "small",
+            onClick: onDismiss
+          })]
+        }), hasTitle && isRenderedChild(children) && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject21 || (_templateObject21 = _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?: Partial<import("tailwindcss/types/config").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 @@
+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/esm/Flag/Flags.js

@@ -0,0 +1,83 @@
+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(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) { _defineProperty(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; }
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useCreatePortal } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { prefersReducedMotion } from "../utils/prefersReducedMotion";
+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: !prefersReducedMotion ? {
+          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: !prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
+        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,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/esm/Flag/types.js

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

package/esm/FlexGrid/FlexGrid.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode, VFC } 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 {
+    /** @ignore */
+    className?: string;
+    /** Define which direction the content should flow */
+    direction?: FlexGridDirection;
+    /**
+     * Define whether or not the contents be allowed to wrap
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Define whether or not the content be wrapped in an inline-flex container
+     * @default false
+     */
+    inline?: boolean;
+    alignment?: FlexGridAlignment;
+    distribution?: FlexGridDistribution;
+    /**
+     * The spacing directly corelates to our Tailwind spacing scale
+     *
+     * none: `spacing.0 → 0px`
+     *
+     * sm: `spacing.2 → 8px`
+     *
+     * md: `spacing.4 → 16px`
+     *
+     * lg: `spacing.6 → 24px`
+     *
+     * xl: `spacing.8 → 32px`
+     */
+    spacing?: FlexGridSpacing;
+    children: ReactNode;
+}
+export declare const FlexGrid: VFC<FlexGridProps>;
+export default FlexGrid;

package/esm/FlexGrid/FlexGrid.js

@@ -0,0 +1,62 @@
+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, _templateObject20, _templateObject21, _templateObject22;
+// Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
+import cx from "clsx";
+import { Children, isValidElement } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import isRenderedChild from "../utils/isRenderedChild";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SPACING_CLASSNAMES = {
+  none: "",
+  sm: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-grid-sm"]))),
+  md: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-grid-md"]))),
+  lg: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-grid-lg"]))),
+  xl: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex-grid-xl"])))
+};
+var DIRECTION_CLASSNAMES = {
+  row: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-row"]))),
+  column: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-col"])))
+};
+var ALIGNMENT_CLASSNAMES = {
+  leading: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["items-start"]))),
+  center: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["items-center"]))),
+  trailing: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["items-end"]))),
+  fill: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["items-stretch"]))),
+  baseline: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["items-baseline"])))
+};
+var DISTRIBUTION_CLASSNAMES = {
+  leading: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["justify-start"]))),
+  trailing: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["justify-end"]))),
+  center: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["justify-center"]))),
+  equalSpacing: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["justify-between"]))),
+  fill: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-grid-d-fill"]))),
+  fillEvenly: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-grid-d-fill-even"])))
+};
+export var FlexGrid = function FlexGrid(_ref) {
+  var className = _ref.className,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "row" : _ref$direction,
+    _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? "leading" : _ref$alignment,
+    _ref$distribution = _ref.distribution,
+    distribution = _ref$distribution === void 0 ? "leading" : _ref$distribution,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "none" : _ref$spacing,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      children: Children.map(children, function (child) {
+        return /*#__PURE__*/isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/_jsx("span", {
+          children: child
+        }) : child;
+      })
+    })
+  });
+};
+export default FlexGrid;

package/esm/FlexGrid/FlexGrid.tailwind.d.ts

@@ -0,0 +1,8 @@
+export = flexGridPlugin;
+/**
+ * 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?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};