@algolia/satellite 1.0.0-beta.18 → 1.0.0-beta.181

package/cjs/EmptyState/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import type { VFC } from "react";
+import type { EmptyStateProps } from "./types";
+/**
+ * The `EmptyState` component informs users when there's no content or data, providing clear actions and guidance to help them proceed or populate the area.
+ *
+ * See the [Empty State documentation page](https://satellite.algolia.com/layouts/empty-state) for more information.
+ */
+export declare const EmptyState: VFC<EmptyStateProps>;

package/cjs/EmptyState/EmptyState.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+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, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+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)("div", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))), centered ? (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["items-center justify-center"]))) : (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["items-start justify-start"]))), actionsDirection === "column" || centered ? (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["flex-row"]))), actionsClassNames),
+        children: actions
+      })]
+    }), !centered && usageContext === "page" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
+      children: pageIllustration
+    })]
+  });
+};
+
+/**
+ * The `EmptyState` component informs users when there's no content or data, providing clear actions and guidance to help them proceed or populate the area.
+ *
+ * See the [Empty State documentation page](https://satellite.algolia.com/layouts/empty-state) for more information.
+ */
+var EmptyState = exports.EmptyState = function EmptyState(props) {
+  return renderEmptyState(props);
+};

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,2 @@
+export * from "./EmptyState";
+export * from "./types";

package/cjs/EmptyState/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _EmptyState = require("./EmptyState");
+Object.keys(_EmptyState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") 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 (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});

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,24 @@
+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;
+}
+/**
+ * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
+ *
+ * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
+ */
+export declare const Field: VFC<FieldProps>;

package/cjs/Field/Field.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Field = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _utils = require("../utils");
+var _FieldContext = require("./FieldContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+/**
+ * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
+ *
+ * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
+ */
+var Field = exports.Field = function Field(_ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    labelFor = _ref.labelFor,
+    labelIdProp = _ref.labelId,
+    description = _ref.description,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _FieldContext.DEFAULT_FIELD_STATE : _ref$state,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    children = _ref.children;
+  var hasLabel = !!label;
+  var labelId = (0, _react.useMemo)(
+  // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : (0, _utils.uniqueId)("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldContext.FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId
+    },
+    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 ? "items-center" : "flex-col"),
+        htmlFor: labelFor,
+        children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          id: labelId,
+          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)(_Icons.AlertCircleIcon, {
+              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]
+    })
+  });
+};

package/cjs/Field/FieldContext.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type FieldState = {
+    status: "default";
+} | {
+    status: "validated";
+} | {
+    status: "invalid";
+    errors: string[];
+};
+export declare type FieldContextValue = {
+    state: FieldState;
+    labelId?: string;
+};
+export declare const DEFAULT_FIELD_STATE: FieldState;
+export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;
+export declare const FieldContext: import("react").Context<FieldContextValue>;

package/cjs/Field/FieldContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldContext = exports.DEFAULT_FIELD_STATE = exports.DEFAULT_CONTEXT_VALUE = void 0;
+var _react = require("react");
+var DEFAULT_FIELD_STATE = exports.DEFAULT_FIELD_STATE = {
+  status: "default"
+};
+var DEFAULT_CONTEXT_VALUE = exports.DEFAULT_CONTEXT_VALUE = {
+  state: DEFAULT_FIELD_STATE
+};
+var FieldContext = exports.FieldContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_CONTEXT_VALUE);

package/cjs/Field/index.d.ts

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

package/{components/Tooltip → cjs/Field}/index.js

@@ -1,40 +1,39 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
+var _exportNames = {
+  FieldContext: true
+};
+Object.defineProperty(exports, "FieldContext", {
   enumerable: true,
   get: function get() {
-    return _Tooltip["default"];
+    return _FieldContext.FieldContext;
   }
 });
-
-var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
-
-Object.keys(_Tooltip).forEach(function (key) {
+var _Field = 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 _Tooltip[key];
+      return _Field[key];
     }
   });
 });
-
-var _TooltipWrapper = require("./TooltipWrapper");
-
-Object.keys(_TooltipWrapper).forEach(function (key) {
+var _FieldContext = require("./FieldContext");
+var _useField = require("./useField");
+Object.keys(_useField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useField[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _TooltipWrapper[key];
+      return _useField[key];
     }
   });
 });

package/cjs/Field/useField.d.ts

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

package/cjs/Field/useField.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useField = void 0;
+var _react = require("react");
+var _FieldContext = require("./FieldContext");
+var useField = exports.useField = function useField() {
+  return (0, _react.useContext)(_FieldContext.FieldContext);
+};

package/cjs/FlexGrid/FlexGrid.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode, VFC } from "react";
+export declare type FlexGridDirection = "row" | "column";
+export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
+export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
+export declare type FlexGridSpacing = "none" | "sm" | "md" | "lg" | "xl";
+export interface FlexGridProps {
+    /** @ignore */
+    className?: string;
+    /** Define which direction the content should flow */
+    direction?: FlexGridDirection;
+    /**
+     * Define whether or not the contents be allowed to wrap
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Define whether or not the content be wrapped in an inline-flex container
+     * @default false
+     */
+    inline?: boolean;
+    alignment?: FlexGridAlignment;
+    distribution?: FlexGridDistribution;
+    /**
+     * The spacing directly corelates to our Tailwind spacing scale
+     *
+     * none: `spacing.0 → 0px`
+     *
+     * sm: `spacing.2 → 8px`
+     *
+     * md: `spacing.4 → 16px`
+     *
+     * lg: `spacing.6 → 24px`
+     *
+     * xl: `spacing.8 → 32px`
+     */
+    spacing?: FlexGridSpacing;
+    children: ReactNode;
+}
+/**
+ * The `FlexGrid` component is a wrapper component that allows you to easily create a flexbox layout.
+ *
+ * See the [Flex Grid documentation page](https://satellite.algolia.com/layouts/flex-grid) for more information.
+ */
+export declare const FlexGrid: VFC<FlexGridProps>;

package/cjs/FlexGrid/FlexGrid.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexGrid = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = require("../utils/isRenderedChild");
+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; // Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
+var SPACING_CLASSNAMES = {
+  none: "",
+  sm: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex-grid-sm"]))),
+  md: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-md"]))),
+  lg: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-lg"]))),
+  xl: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-xl"])))
+};
+var DIRECTION_CLASSNAMES = {
+  row: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex-row"]))),
+  column: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex-col"])))
+};
+var ALIGNMENT_CLASSNAMES = {
+  leading: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["items-start"]))),
+  center: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["items-center"]))),
+  trailing: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["items-end"]))),
+  fill: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["items-stretch"]))),
+  baseline: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["items-baseline"])))
+};
+var DISTRIBUTION_CLASSNAMES = {
+  leading: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["justify-start"]))),
+  trailing: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["justify-end"]))),
+  center: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["justify-center"]))),
+  equalSpacing: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["justify-between"]))),
+  fill: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-d-fill"]))),
+  fillEvenly: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-d-fill-even"])))
+};
+
+/**
+ * The `FlexGrid` component is a wrapper component that allows you to easily create a flexbox layout.
+ *
+ * See the [Flex Grid documentation page](https://satellite.algolia.com/layouts/flex-grid) for more information.
+ */
+var FlexGrid = exports.FlexGrid = function FlexGrid(_ref) {
+  var className = _ref.className,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "row" : _ref$direction,
+    _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? "leading" : _ref$alignment,
+    _ref$distribution = _ref.distribution,
+    distribution = _ref$distribution === void 0 ? "leading" : _ref$distribution,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "none" : _ref$spacing,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      children: _react.Children.map(children, function (child) {
+        return /*#__PURE__*/(0, _react.isValidElement)(child) ? child : (0, _isRenderedChild.isRenderedChild)(child) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: child
+        }) : child;
+      })
+    })
+  });
+};

package/cjs/FlexGrid/FlexGrid.tailwind.d.ts

@@ -0,0 +1,8 @@
+export = flexGridPlugin;
+/**
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+declare const flexGridPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/cjs/FlexGrid/FlexGrid.tailwind.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+/**
+ * @param {string} value
+ */
+var negate = function negate(value) {
+  return "-".concat(value);
+};
+
+/**
+ * Generate the base styles for this iteration of grid spacing
+ * @param {string} spacing
+ * @returns {object}
+ */
+var generateSpacing = function generateSpacing(spacing) {
+  return {
+    marginLeft: negate(spacing),
+    marginTop: negate(spacing),
+    "> *": {
+      marginLeft: spacing,
+      marginTop: spacing
+    }
+  };
+};
+
+/**
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+var flexGridPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".flex-grid-inline": {
+      display: "inline-block"
+    },
+    ".flex-grid-inner": {
+      "> *": {
+        flex: "0 0 auto",
+        minWidth: "0px",
+        maxWidth: "100%"
+      }
+    },
+    // Distribution
+    ".flex-grid-d-fill": {
+      "> *": {
+        flex: "1 1 auto"
+      }
+    },
+    ".flex-grid-d-fill-even": {
+      "> *": {
+        flex: "1 1 0%"
+      },
+      "@supports (min-width: fit-content)": {
+        minWidth: "fit-content"
+      }
+    },
+    // Spacing classes
+    ".flex-grid-sm": _objectSpread({}, generateSpacing(theme("spacing.2"))),
+    ".flex-grid-md": _objectSpread({}, generateSpacing(theme("spacing.4"))),
+    ".flex-grid-lg": _objectSpread({}, generateSpacing(theme("spacing.6"))),
+    ".flex-grid-xl": _objectSpread({}, generateSpacing(theme("spacing.8")))
+  });
+});
+module.exports = flexGridPlugin;

package/cjs/FlexGrid/index.d.ts

@@ -0,0 +1 @@
+export * from "./FlexGrid";