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

package/esm/Dropdown/components/DropdownTitle.js

@@ -0,0 +1,18 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["className"];
+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 stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DropdownTitle = function DropdownTitle(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("h4", _objectSpread(_objectSpread({}, props), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center h-10 px-4\n          border-grey-100 border-b border-t first:border-t-0\n          display-subheading"]))), className)
+  }));
+};
+export default DropdownTitle;

package/esm/Dropdown/components/DropdownToggleItem.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode, VFC } from "react";
+import type { ToggleProps } from "../../Toggle";
+import type { IconComponentType } from "../../types";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
+export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemProps<HTMLInputElement> {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+    children?: ReactNode;
+}
+export declare const DropdownToggleItem: VFC<DropdownToggleItemProps>;
+export default DropdownToggleItem;

package/esm/Dropdown/components/DropdownToggleItem.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["className", "toggle", "startIcon", "children"];
+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 stl from "../../styles/helpers/satellitePrefixer";
+import { Toggle } from "../../Toggle";
+import useDropdownItemProps from "../useDropdownItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DropdownToggleItem = function DropdownToggleItem(props) {
+  var dropdownItemProps = useDropdownItemProps(props);
+  // `toggle` is destructured here because we don't want it passed to the `Toggle`
+  var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+    className = _props$dropdownItemPr.className,
+    toggle = _props$dropdownItemPr.toggle,
+    StartIcon = _props$dropdownItemPr.startIcon,
+    children = _props$dropdownItemPr.children,
+    toggleProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
+  return /*#__PURE__*/_jsxs("label", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className),
+    children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
+      children: children
+    }), /*#__PURE__*/_jsx(Toggle, _objectSpread({
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0"])))
+    }, toggleProps))]
+  });
+};
+DropdownToggleItem.defaultProps = {
+  toggle: false
+};
+export default DropdownToggleItem;

package/esm/Dropdown/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./Dropdown";
+export * from "./DropdownButton";
+export * from "./components/DropdownRadioItem";
+export * from "./components/DropdownToggleItem";
+export * from "./components/DropdownLinkItem";
+export * from "./components/DropdownButtonItem";
+export * from "./components/DropdownFooterItem";
+export * from "./components/DropdownCollapsibleItem";
+export * from "./components/DropdownDivider";
+export * from "./components/DropdownTitle";
+export * from "./useDropdownItemProps";
+export * from "./DropdownContext";
+export { default } from "./Dropdown";

package/esm/Dropdown/index.js

@@ -0,0 +1,13 @@
+export * from "./Dropdown";
+export * from "./DropdownButton";
+export * from "./components/DropdownRadioItem";
+export * from "./components/DropdownToggleItem";
+export * from "./components/DropdownLinkItem";
+export * from "./components/DropdownButtonItem";
+export * from "./components/DropdownFooterItem";
+export * from "./components/DropdownCollapsibleItem";
+export * from "./components/DropdownDivider";
+export * from "./components/DropdownTitle";
+export * from "./useDropdownItemProps";
+export * from "./DropdownContext";
+export { default } from "./Dropdown";

package/esm/Dropdown/useDropdownItemProps.d.ts

@@ -0,0 +1,21 @@
+import type { EventHandler, MouseEvent } from "react";
+export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
+    className?: string;
+    toggle?: boolean;
+    disabled?: boolean;
+    onClick?: EventHandler<MouseEvent<T>>;
+}
+export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
+    disabled: boolean;
+    "aria-disabled": boolean;
+    tabIndex: number;
+    onClick: undefined;
+    className: string;
+} | {
+    disabled?: undefined;
+    "aria-disabled"?: undefined;
+    tabIndex?: undefined;
+    onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
+    className: string;
+};
+export default useDropdownItemProps;

package/esm/Dropdown/useDropdownItemProps.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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) { _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 stl from "../styles/helpers/satellitePrefixer";
+import { useDropdownContext } from "./DropdownContext";
+export var useDropdownItemProps = function useDropdownItemProps(props) {
+  var _useDropdownContext = useDropdownContext(),
+    showMenu = _useDropdownContext.showMenu;
+  var className = cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);
+};
+export default useDropdownItemProps;

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

@@ -0,0 +1,152 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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) { _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 { Fragment, useCallback, useMemo, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Check, UploadCloud, X } from "react-feather";
+import { IconButton } from "../Button";
+import { useField } from "../Field";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { formatHumanSize } from "../utils/formatters";
+import { uniqueId } from "../utils/uniqueId";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DropzoneFileItem = function DropzoneFileItem(_ref) {
+  var file = _ref.file;
+  return /*#__PURE__*/_jsxs("span", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"]))),
+    children: [file.name, " - ", 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__*/_jsx(X, {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/_jsx(Check, {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
+export var 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 = _objectWithoutProperties(_ref2, _excluded);
+  var contextLocale = useLocale("dropzone");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
+  var onDrop = useCallback(function (acceptedFiles, fileRejections) {
+    var updatedFiles = multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(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 = useDropzone(_objectSpread(_objectSpread({
+      disabled: disabled,
+      multiple: multiple
+    }, props), {}, {
+      onDrop: onDrop
+    })),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    isDragReject = _useDropzone.isDragReject;
+  var dropzoneId = useMemo(function () {
+    return id !== null && id !== void 0 ? id : uniqueId("dropzone");
+  }, [id]);
+  var isValueEmpty = files.length === 0;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
+    "aria-controls": dropzoneId,
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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__*/_jsx("input", _objectSpread({}, getInputProps({
+      id: dropzoneId,
+      "aria-labelledby": labelId,
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setFocused(false);
+      }
+    }))), /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
+        children: files.map(function (file) {
+          return /*#__PURE__*/_jsx("li", {
+            children: /*#__PURE__*/_jsx(DropzoneFileItem, {
+              file: file
+            })
+          }, file.name);
+        })
+      }) : /*#__PURE__*/_jsx(DropzoneFileItem, {
+        file: files[0]
+      }) : /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
+        children: [/*#__PURE__*/_jsx(UploadCloud, {
+          size: "1rem",
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+        }), /*#__PURE__*/_jsx("p", {
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || locale.placeholder(multiple)
+        })]
+      })
+    }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""]))),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
+        title: locale.clearInput,
+        icon: X,
+        variant: "subtle",
+        size: "small",
+        tabIndex: -1,
+        "aria-hidden": true,
+        onClick: handleClear
+      })
+    }), /*#__PURE__*/_jsx(StatusIcon, {})]
+  }));
+};
+export default Dropzone;

package/esm/Dropzone/index.d.ts

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

package/esm/Dropzone/index.js

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

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

@@ -0,0 +1,117 @@
+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, _templateObject23, _templateObject24, _templateObject25;
+import cx from "clsx";
+import FlexGrid from "../FlexGrid";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var CONTAINER_CONTEXT_CLASSNAMES = {
+  result: {
+    medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["max-w-xs"]))),
+    large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["max-w-md"]))),
+    xlarge: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["max-w-xl"])))
+  },
+  feature: {
+    medium: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["max-w-sm"]))),
+    large: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["max-w-lg"]))),
+    xlarge: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["max-w-2xl"])))
+  },
+  page: {
+    medium: "",
+    large: "",
+    xlarge: ""
+  }
+};
+var LEAD_ILLUS_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["mb-4"]))),
+  feature: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mb-6"]))),
+  page: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mb-6"])))
+};
+var TITLE_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["display-body"]))),
+  feature: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["display-medium"]))),
+  page: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["display-xlarge"])))
+};
+var DESCRIPTION_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["display-caption mt-2"]))),
+  feature: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["display-body mt-2"]))),
+  page: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["display-small mt-6"])))
+};
+var ACTIONS_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["mt-1"]))),
+  feature: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["mt-3"]))),
+  page: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["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 = cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["justify-center text-center lg:flex-col"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = cx(stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
+  var actionsClassNames = cx(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassNames,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["min-w-2/5"]))),
+      children: [centered && !!leadIllustration && /*#__PURE__*/_jsx("div", {
+        className: LEAD_ILLUS_CONTEXT_CLASSNAMES[usageContext],
+        children: leadIllustration
+      }), /*#__PURE__*/_jsx("h2", {
+        className: titleClassNames,
+        children: title
+      }), !!description && /*#__PURE__*/_jsx("div", {
+        className: descriptionClassNames,
+        children: description
+      }), !!actions && /*#__PURE__*/_jsx(FlexGrid, {
+        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__*/_jsx("div", {
+      className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["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
+ */
+export var EmptyState = function EmptyState(props) {
+  return renderEmptyState(props);
+};
+export default EmptyState;

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

@@ -0,0 +1,14 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var emptyStatePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents;
+  // Empty State illustration
+  addComponents({
+    ".empty-state-illustration": {
+      minWidth: "500px",
+      minHeight: "500px"
+    }
+  });
+});
+export default emptyStatePlugin;

package/esm/EmptyState/index.d.ts

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

package/esm/EmptyState/index.js

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

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

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

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