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

package/cjs/EmptyState/EmptyState.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.EmptyState = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+
+var CONTAINER_CONTEXT_CLASSNAMES = {
+  result: {
+    medium: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["max-w-xs"]))),
+    large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-md"]))),
+    xlarge: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["max-w-xl"])))
+  },
+  feature: {
+    medium: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["max-w-sm"]))),
+    large: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["max-w-lg"]))),
+    xlarge: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["max-w-2xl"])))
+  },
+  page: {
+    medium: "",
+    large: "",
+    xlarge: ""
+  }
+};
+var MEDALLION_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["mb-4"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mb-6"]))),
+  page: ""
+};
+var TITLE_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["display-body"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["display-medium"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge"])))
+};
+var DESCRIPTION_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["display-caption mt-2"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["display-body mt-2"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["display-small mt-6"])))
+};
+var ACTIONS_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["mt-3"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["mt-6 md:flex-row"])))
+};
+
+var renderEmptyState = function renderEmptyState(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      actions = _ref.actions,
+      actionsDirection = _ref.actionsDirection,
+      medallion = _ref.medallion,
+      illustration = _ref.illustration,
+      _ref$usageContext = _ref.usageContext,
+      usageContext = _ref$usageContext === void 0 ? "feature" : _ref$usageContext,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "medium" : _ref$width,
+      _ref$centered = _ref.centered,
+      centered = _ref$centered === void 0 ? false : _ref$centered;
+  var containerClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
+  var actionsClassNames = (0, _clsx["default"])(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: containerClassNames,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["min-w-2/5"]))),
+      children: [centered && medallion && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: MEDALLION_CONTEXT_CLASSNAMES[usageContext],
+        children: medallion
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: titleClassNames,
+        children: title
+      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: descriptionClassNames,
+        children: description
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid["default"], {
+        className: actionsClassNames,
+        alignment: centered ? "center" : "leading",
+        distribution: centered ? "center" : "leading",
+        direction: actionsDirection !== null && actionsDirection !== void 0 ? actionsDirection : centered ? "column" : "row",
+        spacing: "sm",
+        children: actions
+      })]
+    }), illustration && !centered && usageContext === "page" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
+      children: illustration
+    })]
+  });
+};
+/**
+ * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
+ *
+ * #### Features empty state
+ * - Use when the CTA will unlock a key feature in the dashboard. The copy and the illustration need to sell the feature and be clear on the value for the user
+ *
+ * #### Cards empty state
+ * - Use when the CTA will unlock a new set of features inside an already activated feature. Use the context of the interface to help users understand the value of these features and the copy to give further informations
+ *
+ * #### Results/Data empty states
+ * - Use when the query lead to no result or when there is no data to show based on the user filters. Always make sure to give the user suggestions to fix it in the copy
+ *
+ * ## Best practices
+ *
+ * Empty states should:
+ *
+ * - Orient users by clearly explaining the benefit and utility of a product or feature
+ * - Simplify a complicated experience by focusing on a few key features and benefits
+ * - Use simple and clear language that empowers users to move their business forward
+ * - Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature
+ * - Explain the steps users need to take to activate a product or feature
+ * - Use illustrations thoughtfully
+ * - Use only one primary call-to-action button
+ */
+
+
+var EmptyState = function EmptyState(props) {
+  return renderEmptyState(props);
+};
+
+exports.EmptyState = EmptyState;
+var _default = EmptyState;
+exports["default"] = _default;

package/cjs/EmptyState/EmptyState.tailwind.d.ts

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

package/cjs/EmptyState/EmptyState.tailwind.js

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

package/cjs/EmptyState/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./EmptyState";
+export * from "./types";
+export { default } from "./EmptyState";

package/cjs/EmptyState/index.js

@@ -0,0 +1,46 @@
+"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 _EmptyState["default"];
+  }
+});
+
+var _EmptyState = _interopRequireWildcard(require("./EmptyState"));
+
+Object.keys(_EmptyState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _EmptyState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _EmptyState[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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

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

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

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+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 _reactFeather = require("react-feather");
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _FieldStateContext = _interopRequireWildcard(require("./FieldStateContext"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 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 = 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 ? _FieldStateContext.DEFAULT_STATE : _ref$state,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldStateContext["default"].Provider, {
+    value: state,
+    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: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          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]
+    })
+  });
+};
+
+exports.Field = Field;
+var _default = Field;
+exports["default"] = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FieldStateContext = exports.DEFAULT_STATE = void 0;
+
+var _react = require("react");
+
+var DEFAULT_STATE = {
+  status: "default"
+};
+exports.DEFAULT_STATE = DEFAULT_STATE;
+var FieldStateContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_STATE);
+exports.FieldStateContext = FieldStateContext;
+var _default = FieldStateContext;
+exports["default"] = _default;

package/cjs/Field/index.d.ts

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

package/cjs/Field/index.js

@@ -0,0 +1,60 @@
+"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 _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 _FieldStateContext = require("./FieldStateContext");
+
+Object.keys(_FieldStateContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FieldStateContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FieldStateContext[key];
+    }
+  });
+});
+
+var _useFieldState = require("./useFieldState");
+
+Object.keys(_useFieldState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useFieldState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useFieldState[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Field/useFieldState.d.ts

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

package/cjs/Field/useFieldState.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldState = exports["default"] = void 0;
+
+var _react = require("react");
+
+var _FieldStateContext = _interopRequireWildcard(require("./FieldStateContext"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useFieldState = function useFieldState() {
+  return (0, _react.useContext)(_FieldStateContext["default"]) || _FieldStateContext.DEFAULT_STATE;
+};
+
+exports.useFieldState = useFieldState;
+var _default = useFieldState;
+exports["default"] = _default;

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