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

package/cjs/Dropdown/useDropdownItemProps.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDropdownItemProps = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _DropdownContext = require("./DropdownContext");
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useDropdownItemProps = exports.useDropdownItemProps = function useDropdownItemProps(props) {
+  var _useDropdownContext = (0, _DropdownContext.useDropdownContext)(),
+    showMenu = _useDropdownContext.showMenu;
+  var className = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  var disabledProps = props.disabled ? {
+    disabled: true,
+    "aria-disabled": true,
+    tabIndex: -1,
+    onClick: undefined
+  } : {};
+  return _objectSpread({
+    className: className,
+    onClick: function onClick(evt) {
+      if (props.onClick) {
+        props.onClick(evt);
+      }
+      if (!evt.defaultPrevented && props.toggle) {
+        showMenu(false);
+      }
+    }
+  }, disabledProps);
+};
+var _default = exports["default"] = useDropdownItemProps;

package/cjs/Dropzone/Dropzone.d.ts

@@ -0,0 +1,21 @@
+import type { VFC } from "react";
+import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
+export declare type DropzoneLocale = {
+    clearInput?: string;
+    placeholder?: (multiple: boolean) => string;
+};
+export interface DropzoneBaseProps {
+    id?: string;
+    onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
+    placeholder?: string;
+    /** @default false */
+    clearable?: boolean;
+    /** @ignore */
+    className?: string;
+    /** @default false */
+    multiple?: boolean;
+    locale?: DropzoneLocale;
+}
+export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+export declare const Dropzone: VFC<DropzoneProps>;
+export default Dropzone;

package/cjs/Dropzone/Dropzone.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dropzone = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _reactDropzone = require("react-dropzone");
+var _reactFeather = require("react-feather");
+var _Button = require("../Button");
+var _Field = require("../Field");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _formatters = require("../utils/formatters");
+var _uniqueId = require("../utils/uniqueId");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DropzoneFileItem = function DropzoneFileItem(_ref) {
+  var file = _ref.file;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate text-grey-900"]))),
+    children: [file.name, " - ", (0, _formatters.formatHumanSize)(file.size)]
+  });
+};
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input",
+  placeholder: function placeholder(multiple) {
+    return "Drop ".concat(multiple ? "files" : "file", " here or click to select.");
+  }
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
+var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
+  var id = _ref2.id,
+    placeholder = _ref2.placeholder,
+    disabled = _ref2.disabled,
+    _ref2$multiple = _ref2.multiple,
+    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+    _ref2$clearable = _ref2.clearable,
+    clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
+    onChange = _ref2.onChange,
+    className = _ref2.className,
+    propsLocale = _ref2.locale,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("dropzone");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
+  var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections) {
+    var updatedFiles = multiple ? [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(acceptedFiles)) : acceptedFiles;
+    setFiles(updatedFiles);
+    onChange === null || onChange === void 0 || onChange(updatedFiles, fileRejections);
+  }, [multiple, files, onChange]);
+  var handleClear = function handleClear(evt) {
+    evt.stopPropagation();
+    setFiles([]);
+    onChange === null || onChange === void 0 || onChange([], []);
+  };
+  var _useDropzone = (0, _reactDropzone.useDropzone)(_objectSpread(_objectSpread({
+      disabled: disabled,
+      multiple: multiple
+    }, props), {}, {
+      onDrop: onDrop
+    })),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    isDragReject = _useDropzone.isDragReject;
+  var dropzoneId = (0, _react.useMemo)(function () {
+    return id !== null && id !== void 0 ? id : (0, _uniqueId.uniqueId)("dropzone");
+  }, [id]);
+  var isValueEmpty = files.length === 0;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
+    "aria-controls": dropzoneId,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone\n            border border-grey-500 rounded\n            shadow-field\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:border-accent-600 focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-50"), className),
+    onClick: function onClick(evt) {
+      // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
+      if (evt.target.closest("label")) {
+        evt.stopPropagation();
+      }
+    }
+  })), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({}, getInputProps({
+      id: dropzoneId,
+      "aria-labelledby": labelId,
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setFocused(false);
+      }
+    }))), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: files.map(function (file) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
+              file: file
+            })
+          }, file.name);
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
+        file: files[0]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.UploadCloud, {
+          size: "1rem",
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || locale.placeholder(multiple)
+        })]
+      })
+    }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
+        title: locale.clearInput,
+        icon: _reactFeather.X,
+        variant: "subtle",
+        size: "small",
+        tabIndex: -1,
+        "aria-hidden": true,
+        onClick: handleClear
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
+  }));
+};
+var _default = exports["default"] = Dropzone;

package/cjs/Dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Dropzone";
+export { default } from "./Dropzone";

package/cjs/Dropzone/index.js

@@ -0,0 +1,27 @@
+"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 _Dropzone["default"];
+  }
+});
+var _Dropzone = _interopRequireWildcard(require("./Dropzone"));
+Object.keys(_Dropzone).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dropzone[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dropzone[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/EmptyState/EmptyState.d.ts

@@ -0,0 +1,28 @@
+import type { VFC } from "react";
+import type { EmptyStateProps } from "./types";
+/**
+ * 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
+ */
+export declare const EmptyState: VFC<EmptyStateProps>;
+export default EmptyState;

package/cjs/EmptyState/EmptyState.js

@@ -0,0 +1,123 @@
+"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, _templateObject25;
+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 LEAD_ILLUS_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: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mb-6"])))
+};
+var TITLE_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["display-body"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["display-medium"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge"])))
+};
+var DESCRIPTION_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["display-caption mt-2"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["display-body mt-2"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["display-small mt-6"])))
+};
+var ACTIONS_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["mt-3"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (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,
+    leadIllustration = _ref.leadIllustration,
+    pageIllustration = _ref.pageIllustration,
+    _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"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (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"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["min-w-2/5"]))),
+      children: [centered && !!leadIllustration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: LEAD_ILLUS_CONTEXT_CLASSNAMES[usageContext],
+        children: leadIllustration
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: titleClassNames,
+        children: title
+      }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        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
+      })]
+    }), !centered && usageContext === "page" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
+      children: pageIllustration
+    })]
+  });
+};
+
+/**
+ * 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 = exports.EmptyState = function EmptyState(props) {
+  return renderEmptyState(props);
+};
+var _default = exports["default"] = EmptyState;

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

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

package/cjs/EmptyState/EmptyState.tailwind.js

@@ -0,0 +1,15 @@
+"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,39 @@
+"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/EmptyState/types.d.ts

@@ -0,0 +1,50 @@
+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 />`, an `img` element or `svg` in there */
+    leadIllustration?: ReactNode;
+    /** Plop in an `img` element or `svg` here */
+    pageIllustration?: ReactNode;
+    /**
+     * UsageContext of the component
+     * @default feature
+     */
+    usageContext?: EmptyStateUsageContexts;
+    /**
+     * Define whether 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";
+    pageIllustration?: never;
+}
+interface EmptyStatePropsUsageContextFeature extends Omit<EmptyStatePropsAll, "usageContext" | "illustration"> {
+    usageContext: "feature";
+    illustration?: never;
+}
+interface EmptyStatePropsUsageContextPage extends Omit<EmptyStatePropsAll, "usageContext" | "centered"> {
+    usageContext: "page";
+    centered?: boolean;
+}
+interface EmptyStatePropsUsageContextDefault extends Omit<EmptyStatePropsUsageContextFeature, "usageContext"> {
+    usageContext?: undefined;
+}
+export declare type EmptyStateProps = EmptyStatePropsUsageContextDefault | EmptyStatePropsUsageContextResult | EmptyStatePropsUsageContextFeature | 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 ReactChild, type ReactNode, type VFC } from "react";
+import type { FieldState } from "./FieldContext";
+export interface FieldProps {
+    /** @ignore */
+    className?: string;
+    /** Label to display above the nested input */
+    label?: ReactChild;
+    labelId?: string;
+    labelFor?: string;
+    /** Helpful description to show below the `Field` */
+    description?: ReactNode;
+    /**
+     * An object to handle 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: VFC<FieldProps>;
+export default Field;