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

package/cjs/Banners/Promote/Promote.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Promote = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactFeather = require("react-feather");
+var _Button = require("../../Button");
+var _Card = _interopRequireDefault(require("../../Card"));
+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;
+var TITLE_VARIANT_CLASSNAMES = {
+  compact: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-medium mb-4"])))
+};
+var BODY_VARIANT_CLASSNAMES = {
+  compact: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption typo-subdued"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["display-body typo-subdued"])))
+};
+var ACTIONS_VARIANT_CLASSNAMES = {
+  compact: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["mt-3"])))
+};
+
+/**
+* A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279945)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This component is a bigger banner. It include an optional image, an optional product context, a title, a short text (2 lines maximum without an image and 3 lines maximum with an image), optional CTAs (one primary and one secondary). It comes in two different variants: `large` and `compact`.
+
+* ## Guidelines
+* ### How to use it?
+* You should use this component to display to the users that a new features/product is now available for them in the current context they are in. This feature can be automatically available or locked behind higher plan tier, please make sure you adapt the content to not give false impression of availability to the user.
+
+* This component is permanently dismissible by default.
+
+* ### How to NOT use it?
+* - Do not use this banner as a regular [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants).
+* - You can only use one `large` promotion banner per context and two/four compact per context.
+
+* ### Variants
+* - `large`
+* - `compact`
+ */
+var Promote = exports.Promote = function Promote(_ref) {
+  var context = _ref.context,
+    title = _ref.title,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "large" : _ref$variant,
+    illustration = _ref.illustration,
+    actions = _ref.actions,
+    children = _ref.children,
+    onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
+    className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["relative flex"]))),
+    fullBleed: true,
+    as: "section",
+    children: [!!illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"]))),
+      children: illustration
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), variant === "large" ? "p-6" : "p-4"),
+      children: [!!context && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["block mb-1"]))),
+        children: context
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+        className: TITLE_VARIANT_CLASSNAMES[variant],
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: BODY_VARIANT_CLASSNAMES[variant],
+        children: children
+      }), !!actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
+        children: actions
+      })]
+    }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["absolute top-2 right-2"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        icon: _reactFeather.X,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};
+var _default = exports["default"] = Promote;

package/cjs/Banners/Promote/index.d.ts

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

package/cjs/Banners/Promote/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 _Promote["default"];
+  }
+});
+var _Promote = _interopRequireWildcard(require("./Promote"));
+Object.keys(_Promote).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Promote[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Promote[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/Banners/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Alert";
+export * from "./BigBertha";
+export * from "./Promote";

package/cjs/Banners/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Alert = require("./Alert");
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Alert[key];
+    }
+  });
+});
+var _BigBertha = require("./BigBertha");
+Object.keys(_BigBertha).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BigBertha[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _BigBertha[key];
+    }
+  });
+});
+var _Promote = require("./Promote");
+Object.keys(_Promote).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Promote[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Promote[key];
+    }
+  });
+});

package/cjs/Button/Button.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type PolymorphicButtonProps } from "./PolymorphicButton";
+export declare type ButtonProps = Omit<PolymorphicButtonProps<"button">, "as" | "ref">;
+/**
+ * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
+ *
+ * ## Variations
+ * - **Primary**: to highlight the strongest action on a page. Should only appear once per screen. Not every screen requires a primary button
+ * - **Neutral (default)**: the standard button for most use cases
+ * - **Destructive**: appears as a final confirmation for a destructive action (e.g. deleting an index). Should be used with care, primarily in confirmation modals
+ * - **Subtle-neutral**: user with a primary button or for actionals that are less crucial (e.g. Cancel)
+ *
+ * ## Styles
+ * - Use icons before the label in any button type to draw more attention to it, or help convey more meaning
+ * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
+ * - Buttons can take the full width to fill the parent container
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/cjs/Button/Button.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Button = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _PolymorphicButton = require("./PolymorphicButton");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+/**
+ * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
+ *
+ * ## Variations
+ * - **Primary**: to highlight the strongest action on a page. Should only appear once per screen. Not every screen requires a primary button
+ * - **Neutral (default)**: the standard button for most use cases
+ * - **Destructive**: appears as a final confirmation for a destructive action (e.g. deleting an index). Should be used with care, primarily in confirmation modals
+ * - **Subtle-neutral**: user with a primary button or for actionals that are less crucial (e.g. Cancel)
+ *
+ * ## Styles
+ * - Use icons before the label in any button type to draw more attention to it, or help convey more meaning
+ * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
+ * - Buttons can take the full width to fill the parent container
+ */
+var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicButton.PolymorphicButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
+  }));
+});
+Button.displayName = "Button";
+var _default = exports["default"] = Button;

package/cjs/Button/Button.tailwind.d.ts

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

package/cjs/Button/Button.tailwind.js

@@ -0,0 +1,153 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var disabledColor = require("../styles/disabledColor");
+var rgba = require("../styles/rgba");
+var buttonPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  // Button
+  addComponents({
+    ".btn": {
+      position: "relative",
+      borderRadius: theme("borderRadius.DEFAULT"),
+      cursor: "pointer",
+      "&, &:hover": {
+        textDecoration: "none"
+      },
+      "&:focus": {
+        outline: "none"
+      }
+    },
+    ".btn-disabled": {
+      cursor: "not-allowed"
+    },
+    ".btn-subtle": {
+      color: theme("colors.accent.600"),
+      "&:hover": {
+        backgroundColor: rgba(theme("colors.grey.300"), 0.15)
+      },
+      "&:focus": {
+        boxShadow: "0 0 0 1px ".concat(theme("colors.accent.600"))
+      },
+      "&:active, &.btn-active": {
+        color: theme("colors.accent.600"),
+        backgroundColor: theme("colors.accent.100"),
+        boxShadow: "none"
+      },
+      "&:disabled, &.btn-disabled": {
+        background: "none",
+        boxShadow: "none",
+        color: theme("colors.grey.300")
+      }
+    },
+    ".btn-neutral": {
+      color: theme("colors.grey.900"),
+      backgroundColor: theme("colors.white"),
+      backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+      "&:hover": {
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: theme("colors.grey.200")
+      },
+      "&:focus": {
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.accent.600"), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.5"), "\n        ")
+      },
+      "&:active, &.btn-active": {
+        borderColor: theme("colors.grey.200"),
+        boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      },
+      "&:disabled, &.btn-disabled": {
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        color: theme("colors.grey.300"),
+        boxShadow: "none"
+      }
+    },
+    ".btn-primary": {
+      color: theme("colors.white"),
+      backgroundColor: theme("colors.accent.600"),
+      backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.accent.600"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
+      border: "1px solid ".concat(theme("colors.accent.700")),
+      boxShadow: "\n        inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n        0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n      "),
+      "&:hover": {
+        borderColor: theme("colors.accent.800"),
+        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
+        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
+      },
+      "&:focus": {
+        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.600"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
+        borderColor: theme("colors.accent.800"),
+        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 0 0 1px ").concat(theme("colors.accent.800"), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
+      },
+      "&:active, &.btn-active": {
+        backgroundColor: theme("colors.accent.700"),
+        borderColor: theme("colors.accent.800"),
+        boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.accent.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.accent.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      },
+      "&:disabled, &.btn-disabled": {
+        backgroundColor: disabledColor(theme("colors.accent.600")),
+        backgroundImage: "\n          linear-gradient(0deg, ".concat(disabledColor(theme("colors.accent.600")), " 0%,\n          ").concat(disabledColor(theme("colors.accent.700")), " 100%)\n        "),
+        borderColor: disabledColor(theme("colors.accent.700")),
+        boxShadow: "none"
+      }
+    },
+    ".btn-destructive": {
+      color: theme("colors.white"),
+      backgroundColor: theme("colors.red.600"),
+      backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.red.600"), " 0%, ").concat(theme("colors.red.700"), " 100%)"),
+      border: "1px solid ".concat(theme("colors.red.700")),
+      boxShadow: "\n        inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n        0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n      "),
+      "&:hover": {
+        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.red.700"), " 0%, ").concat(theme("colors.red.800"), " 100%)"),
+        borderColor: theme("colors.red.800"),
+        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
+      },
+      "&:focus": {
+        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.red.600"), " 0%, ").concat(theme("colors.red.700"), " 100%)"),
+        borderColor: theme("colors.red.800"),
+        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 0 0 1px ").concat(theme("colors.red.800"), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
+      },
+      "&:active, &.btn-active": {
+        borderColor: theme("colors.red.800"),
+        boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      },
+      "&:disabled, &.btn-disabled": {
+        backgroundColor: disabledColor(theme("colors.red.600")),
+        backgroundImage: "\n          linear-gradient(0deg, ".concat(disabledColor(theme("colors.red.600")), " 0%,\n          ").concat(disabledColor(theme("colors.red.700")), " 100%)\n        "),
+        borderColor: disabledColor(theme("colors.red.700")),
+        boxShadow: "none"
+      }
+    }
+  });
+
+  // Button groups
+  addComponents({
+    ".btn-group": {
+      display: "flex",
+      flexWrap: "nowrap",
+      "& > .btn:not(:first-child):not(:last-child), & > :not(:first-child):not(:last-child) .btn": {
+        borderRadius: "0px"
+      },
+      "& > .btn:first-child, & > :first-child .btn": {
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
+      },
+      "& > .btn:not(:first-child), & > :not(:first-child) .btn": {
+        marginLeft: "-1px"
+      },
+      "& > .btn:last-child, & > :last-child .btn": {
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px"
+      },
+      "& .btn:active, & .btn-active, & .btn:focus": {
+        zIndex: "1"
+      }
+    }
+  });
+});
+module.exports = buttonPlugin;

package/cjs/Button/ButtonGroup.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, VFC } from "react";
+export interface ButtonGroupProps {
+    /**
+     * Specify HTML element `ButtonGroup` should be presented as.
+     * @default div
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /** @ignore */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * - Use grouped buttons when there is a close relationship between a number of buttons.
+ * - Group buttons logically into sets based on usage and importance.
+ * - Common placement of grouped buttons is the view switch (e.g. list vs grid view)
+ */
+export declare const ButtonGroup: VFC<ButtonGroupProps>;
+export default ButtonGroup;

package/cjs/Button/ButtonGroup.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ButtonGroup = 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;
+/**
+ * - Use grouped buttons when there is a close relationship between a number of buttons.
+ * - Group buttons logically into sets based on usage and importance.
+ * - Common placement of grouped buttons is the view switch (e.g. list vs grid view)
+ */
+var ButtonGroup = exports.ButtonGroup = function ButtonGroup(_ref) {
+  var className = _ref.className,
+    _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? "div" : _ref$as,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn-group"]))), className),
+    children: children
+  });
+};
+var _default = exports["default"] = ButtonGroup;

package/cjs/Button/IconButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type PolymorphicIconButtonProps } from "./PolymorphicIconButton";
+export declare type IconButtonProps = Omit<PolymorphicIconButtonProps<"button">, "as" | "ref">;
+/**
+ * IconButtons are useful in situations where you are limited on space or the action is self-explanatory with just an icon.
+ *
+ * Please refer to the `Button` guidelines.
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/cjs/Button/IconButton.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.IconButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _PolymorphicIconButton = require("./PolymorphicIconButton");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+/**
+ * IconButtons are useful in situations where you are limited on space or the action is self-explanatory with just an icon.
+ *
+ * Please refer to the `Button` guidelines.
+ */
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicIconButton.PolymorphicIconButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
+  }));
+});
+IconButton.displayName = "IconButton";
+var _default = exports["default"] = IconButton;

package/cjs/Button/PolymorphicButton.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ButtonBaseProps, PolymorphicComponentPropWithRef } from "./types";
+export declare type PolymorphicButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, ButtonBaseProps>;
+declare type PolymorphicButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicButtonProps<C>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+/**
+ * `PolymorphicButton` is intended for internal use
+ * @ignore
+ */
+export declare const PolymorphicButton: PolymorphicButtonComponent;
+export {};

package/cjs/Button/PolymorphicButton.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PolymorphicButton = void 0;
+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 = _interopRequireWildcard(require("react"));
+var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _styles = require("./styles");
+var _types = require("./types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "className", "variant", "size", "startIcon", "endIcon", "loading", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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; }
+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 BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex justify-center items-center px-3 typo-display-body"])));
+var ICON_SIZE = 16;
+/**
+ * `PolymorphicButton` is intended for internal use
+ * @ignore
+ */
+var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? "button" : _props$as,
+    className = props.className,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "neutral" : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "medium" : _props$size,
+    StartIcon = props.startIcon,
+    EndIcon = props.endIcon,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    children = props.children,
+    cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  if (loading) {
+    // @ts-expect-error
+    cleanedProps.disabled = true;
+  }
+  var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
+  var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
+    // @ts-expect-error
+    cleanedProps.type = "button";
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+    className: buttonClassName,
+    ref: ref,
+    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
+      className: loaderClassNames,
+      size: _styles.BUTTON_LOADER_ICON_SIZES[size],
+      thickness: 1
+    }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center px-1"]))), textClassNames),
+      children: children
+    }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
+    })]
+  }));
+});
+PolymorphicButton.displayName = "PolymorphicButton";

package/cjs/Button/PolymorphicIconButton.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { TooltipWrapperBaseProps } from "../Tooltip/types";
+import type { IconComponentType } from "../types";
+import type { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
+export interface IconButtonBaseProps {
+    /** @default neutral */
+    variant?: ButtonVariant;
+    /** @default medium */
+    size?: ButtonSize;
+    /** @default false */
+    disabled?: boolean;
+    icon: IconComponentType;
+    title: string;
+    showTooltip?: boolean;
+    /** @default top */
+    tooltipSide?: TooltipWrapperBaseProps["side"];
+    /** @default false */
+    loading?: boolean;
+}
+export declare type PolymorphicIconButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, IconButtonBaseProps>;
+declare type PolymorphicIconButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicIconButtonProps<C>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+/**
+ * `PolymorphicIconButton` is intended for internal use
+ * @ignore
+ */
+export declare const PolymorphicIconButton: PolymorphicIconButtonComponent;
+export {};