@algolia/satellite 2.2.3 → 2.3.0-rc.10

package/dist/cjs/Helpers/ShimmerText/ShimmerText.tailwind.js

@@ -0,0 +1,37 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var shimmerTextPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    addUtilities = _ref.addUtilities,
+    theme = _ref.theme;
+  addComponents({
+    ".shimmer-text": {
+      "text-fill-color": "transparent",
+      "-webkit-text-fill-color": "transparent",
+      "animation-delay": "0.5s",
+      "animation-duration": "3s",
+      "animation-iteration-count": "infinite",
+      "animation-name": "shimmer-text",
+      background: "".concat(theme("colors.grey.600"), " linear-gradient(to right, ").concat(theme("colors.grey.600"), " 0%, #ffffffbf 40%, #ffffffbf 60%, ").concat(theme("colors.grey.600"), " 100%)"),
+      "-webkit-background-clip": "text",
+      "background-clip": "text",
+      "background-repeat": "no-repeat",
+      "background-size": "50% 200%",
+      display: "inline-block",
+      "background-position": "-100% 0"
+    }
+  });
+  addUtilities({
+    "@keyframes shimmer-text": {
+      from: {
+        "background-position": "-100% 0%"
+      },
+      to: {
+        "background-position": "250% 0%"
+      }
+    }
+  });
+});
+module.exports = shimmerTextPlugin;

package/dist/cjs/Helpers/ShimmerText/index.d.ts

@@ -0,0 +1,2 @@
+export type { ShimmerTextProps as ExperimentalShimmerTextProps } from "./ShimmerText";
+export { ShimmerText as ExperimentalShimmerText } from "./ShimmerText";

package/dist/cjs/Helpers/ShimmerText/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExperimentalShimmerText", {
+  enumerable: true,
+  get: function get() {
+    return _ShimmerText.ShimmerText;
+  }
+});
+var _ShimmerText = require("./ShimmerText");

package/dist/cjs/Helpers/index.d.ts

@@ -3,3 +3,4 @@ export * from "./CodeEditor";
 export * from "./HelpUnderline";
 export * from "./TextWrap";
 export * from "./UserContent";
+export * from "./ShimmerText";

package/dist/cjs/Helpers/index.js

@@ -57,4 +57,15 @@ Object.keys(_UserContent).forEach(function (key) {
       return _UserContent[key];
     }
   });
+});
+var _ShimmerText = require("./ShimmerText");
+Object.keys(_ShimmerText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ShimmerText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ShimmerText[key];
+    }
+  });
 });

package/dist/cjs/Helpers/utilities/focusable.tailwind.js

@@ -7,7 +7,7 @@ var plugin = require("tailwindcss/plugin");
 module.exports = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
-  addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n    .focusable-within:focus-within,\n    .focusable-visible:focus-visible,\n    .focusable-visible-within:has(:focus-visible),\n    input:focus ~ .focusable-sibling,\n    .focusable-visible-group:focus-visible .focusable-visible-group-item,\n    .focusable-show", {
+  addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n    .focusable-within:focus-within,\n    .focusable-visible:focus-visible,\n    .focusable-visible-within:has(:focus-visible),\n    input:focus ~ .focusable-sibling,\n    input:focus-visible ~ .focusable-visible-sibling,\n    .focusable-visible-group:focus-visible .focusable-visible-group-item,\n    .focusable-show", {
     outline: "2px solid ".concat(theme("colors.accent.600")),
     outlineOffset: "1px"
   }));

package/dist/cjs/Helpers/utilities/utilities.tailwind.js

@@ -5,7 +5,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 // @ts-check
 var plugin = require("tailwindcss/plugin");
 module.exports = plugin(function (_ref) {
-  var addUtilities = _ref.addUtilities;
+  var addUtilities = _ref.addUtilities,
+    theme = _ref.theme;
   addUtilities({
     ".no-scrollbar": {
       // for Firefox
@@ -18,6 +19,10 @@ module.exports = plugin(function (_ref) {
         width: "0px"
       }
     },
+    ".thin-scrollbar": {
+      "scrollbar-width": "8px",
+      "scrollbar-color": "".concat(theme("colors.grey.200"), " ").concat(theme("colors.transparent"))
+    },
     ".no-search-input-decoration": {
       "&[type='search']": (0, _defineProperty2["default"])({}, "&::-webkit-search-decoration,\n        &::-webkit-search-cancel-button,\n        &::-webkit-search-results-button,\n        &::-webkit-search-results-decoration", {
         display: "none"

package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
-import type { FC, PropsWithChildren } from "react";
-export interface SkeletonProps {
+import type { FC, HTMLAttributes, PropsWithChildren } from "react";
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The className to apply to the skeleton element.
      */

package/dist/cjs/Navigation/Link/Link.d.ts

@@ -13,6 +13,11 @@ export declare type LinkProps = {
      * The icon to display at the end of the link.
      */
     endIcon?: IconComponentType;
+    /**
+     * To determine if the `ExternalLink` icon should be displayed.
+     * @default true
+     */
+    withExternalLinkIcon?: boolean;
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
 /**
  * The `Link` component is used to display a link.
@@ -32,4 +37,9 @@ export declare const Link: import("react").ForwardRefExoticComponent<{
      * The icon to display at the end of the link.
      */
     endIcon?: IconComponentType | undefined;
+    /**
+     * To determine if the `ExternalLink` icon should be displayed.
+     * @default true
+     */
+    withExternalLinkIcon?: boolean | undefined;
 } & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/cjs/Navigation/Link/Link.js

@@ -15,7 +15,7 @@ var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/
 var _useLinkProps = require("./../../utils/useLinkProps");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["className", "children", "startIcon", "endIcon", "href", "onClick"];
+var _excluded = ["className", "children", "startIcon", "endIcon", "withExternalLinkIcon", "href", "onClick"];
 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; }
 /**
@@ -28,6 +28,8 @@ var Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     children = _ref.children,
     StartIcon = _ref.startIcon,
     EndIcon = _ref.endIcon,
+    _ref$withExternalLink = _ref.withExternalLinkIcon,
+    withExternalLinkIcon = _ref$withExternalLink === void 0 ? true : _ref$withExternalLink,
     href = _ref.href,
     onClick = _ref.onClick,
     anchorProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -36,7 +38,7 @@ var Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     onClick: onClick
   }));
   var isExternalLink = linkProps.target === "_blank" && EndIcon === undefined;
-  if (isExternalLink) {
+  if (isExternalLink && withExternalLinkIcon) {
     EndIcon = _Icons.ExternalLinkIcon;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), linkProps), {}, {

package/dist/cjs/Satellite/locale.d.ts

@@ -1,4 +1,7 @@
 import type { IconButtonWithFeedbackLocale } from "../Actions";
+import type { ChatMessageErrorLocale } from "../Chat/ChatMessageError";
+import type { ChatMessageLocale } from "../Chat/ChatMessages";
+import type { ChatPromptLocale } from "../Chat/ChatPrompt";
 import type { AutoCompleteLocale, DateInputLocale, DatePickerLocale, DropzoneLocale, ExperimentalDateRangeInputLocale, ExperimentalFormLocale, FilePickerLocale, InputPropsLocale } from "../Fields";
 import type { AnnouncementBadgeLocale, TagLocale, ToastLocale, ToastsLocale } from "../Indicators";
 import type { UserAvatarLocale } from "../Indicators/Avatars";
@@ -8,6 +11,9 @@ import type { ModalLocale, PopoverLocale } from "../Overlay";
 export declare type ComponentsLocales = {
     announcementBadge?: AnnouncementBadgeLocale;
     autoComplete?: AutoCompleteLocale;
+    chatMessage?: ChatMessageLocale;
+    chatMessageError?: ChatMessageErrorLocale;
+    chatPrompt?: ChatPromptLocale;
     compactPagination?: CompactPaginationLocale;
     dataTable?: DataTableLocale;
     dateInput?: DateInputLocale;
@@ -17,8 +23,8 @@ export declare type ComponentsLocales = {
     dropzone?: DropzoneLocale;
     filePicker?: FilePickerLocale;
     form?: ExperimentalFormLocale;
-    input?: InputPropsLocale;
     iconButtonWithFeedback?: IconButtonWithFeedbackLocale;
+    input?: InputPropsLocale;
     modal?: ModalLocale;
     pagination?: PaginationLocale;
     popover?: PopoverLocale;

package/dist/cjs/index.d.ts

@@ -7,6 +7,7 @@ export * from "./utils/NumberUnion";
 export * from "./utils/parseUrl";
 export * from "./utils/useLinkProps";
 export * from "./Actions";
+export * from "./Chat";
 export * from "./Fields";
 export * from "./Helpers";
 export * from "./Icons";

package/dist/cjs/index.js

@@ -98,6 +98,18 @@ Object.keys(_Actions).forEach(function (key) {
     }
   });
 });
+var _Chat = require("./Chat");
+Object.keys(_Chat).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Chat[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Chat[key];
+    }
+  });
+});
 var _Fields = require("./Fields");
 Object.keys(_Fields).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/styles/helpers/tv.d.ts

@@ -0,0 +1,5 @@
+export declare const tv: import("tailwind-variants").CreateTV<{
+    twMergeConfig: {
+        prefix: string;
+    };
+}>;

package/dist/cjs/styles/helpers/tv.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tv = void 0;
+var _tailwindVariants = require("tailwind-variants");
+var tv = exports.tv = (0, _tailwindVariants.createTV)({
+  twMergeConfig: {
+    // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+    prefix: "stl-"
+  }
+});

package/dist/cjs/styles/tailwind.config.js

@@ -144,5 +144,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Actions/Accordion/Accordion.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Indicators/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Indicators/Separator/Separator.tailwind"), require("../Actions/SegmentedControl/SegmentedControl.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/CollapsibleCard/CollapsibleCard.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Switch/Switch.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
+  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Actions/Accordion/Accordion.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Indicators/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Indicators/Separator/Separator.tailwind"), require("../Actions/SegmentedControl/SegmentedControl.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/CollapsibleCard/CollapsibleCard.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Helpers/ShimmerText/ShimmerText.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Switch/Switch.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
 };

package/dist/cjs/utils/getTextFromReactNode.d.ts

@@ -1,4 +1,5 @@
+import type { ReactNode } from "react";
 /**
  * Returns the text content of a React node.
  */
-export declare const getTextFromReactNode: (node: React.ReactNode) => string;
+export declare const getTextFromReactNode: (node: ReactNode) => string;

package/dist/cjs/utils/getTextFromReactNode.js

@@ -9,12 +9,17 @@ var _react = require("react");
  * Returns the text content of a React node.
  */
 var getTextFromReactNode = exports.getTextFromReactNode = function getTextFromReactNode(node) {
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return node.toString();
-  if ( /*#__PURE__*/(0, _react.isValidElement)(node)) {
-    return _react.Children.toArray(node.props.children).map(function (child) {
-      return getTextFromReactNode(child);
-    }).join(" ");
+  var string = "";
+  if (typeof node === "string") {
+    string = node;
+  } else if (typeof node === "number") {
+    string = node.toString();
+  } else if (node instanceof Array) {
+    node.forEach(function (child) {
+      string += getTextFromReactNode(child);
+    });
+  } else if ( /*#__PURE__*/(0, _react.isValidElement)(node)) {
+    string += getTextFromReactNode(node.props.children);
   }
-  return "";
+  return string;
 };

package/dist/esm/Actions/Accordion/Accordion.d.ts

@@ -94,6 +94,14 @@ export declare type AccordionHeaderProps = {
      * Defines a class name for the `AccordionHeader`.
      */
     className?: string;
+    /**
+     * Defines a class name for the title wrapper.
+     */
+    titleWrapperClassName?: string;
+    /**
+     * Defines a class name for the title.
+     */
+    titleClassName?: string;
     /**
      * Defines an icon to display next to the title and description.
      */

package/dist/esm/Actions/Accordion/Accordion.js

@@ -76,7 +76,9 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     meta = _ref3.meta,
     triggerIcon = _ref3.triggerIcon,
     triggerClassName = _ref3.triggerClassName,
-    className = _ref3.className;
+    className = _ref3.className,
+    titleWrapperClassName = _ref3.titleWrapperClassName,
+    titleClassName = _ref3.titleClassName;
   var TriggerIcon = triggerIcon || ChevronDownIcon;
   return /*#__PURE__*/_jsx(RadixAccordion.Header, {
     className: className,
@@ -84,7 +86,7 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
       ref: ref,
       className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["group/accordion-trigger flex gap-x-3 items-center w-full justify-between px-3.5 py-2.5 group-first/accordion-item:rounded-t group-last/accordion-item:rounded-b bg-white border-2 border-transparent focus-visible:outline-none focus-visible:border-accent-600 enabled:hover:bg-grey-50 motion-safe:transition-colors"]))), triggerClassName),
       children: [/*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center gap-x-3 grow"]))),
+        className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center gap-x-3 grow"]))), titleWrapperClassName),
         children: [Icon && /*#__PURE__*/_jsx("span", {
           className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
           "aria-hidden": true,
@@ -96,7 +98,7 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
         }), /*#__PURE__*/_jsxs("div", {
           className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col gap-y-1 text-left grow"]))),
           children: [/*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
+            className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))), titleClassName),
             children: children
           }), typeof description !== "undefined" && /*#__PURE__*/_jsx("div", {
             className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),

package/dist/esm/Actions/Button/PolymorphicButton.js

@@ -7,12 +7,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 React, { forwardRef } from "react";
-import { BUTTON_LOADER_ICON_SIZES, BUTTON_SIZE_CLASSNAMES, BUTTON_VARIANT_CLASSNAMES, getIconColorClassName } from "./styles";
+import { BUTTON_LOADER_ICON_SIZES, BUTTON_PADDING_CLASSNAMES, BUTTON_SIZE_CLASSNAMES, BUTTON_VARIANT_CLASSNAMES, getIconColorClassName } from "./styles";
 import { isButtonType } from "./types";
 import { ProgressSpinner } from "./../../Indicators";
 import stl from "./../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex justify-center items-center px-3 typo-display-body focusable-visible"])));
+var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex justify-center items-center typo-display-body focusable-visible"])));
 var ICON_SIZE = 16;
 /**
  * `PolymorphicButton` is intended for internal use.
@@ -36,7 +36,7 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
     // @ts-expect-error disabled is not present in PolymorphicButtonProps
     cleanedProps.disabled = true;
   }
-  var buttonClassName = cx(BASE_CLASSNAMES, BUTTON_SIZE_CLASSNAMES[size], BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["btn-disabled"]))), className);
+  var buttonClassName = cx(BASE_CLASSNAMES, BUTTON_SIZE_CLASSNAMES[size], BUTTON_PADDING_CLASSNAMES[size], BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["btn-disabled"]))), className);
   var loaderClassNames = stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
   var iconClassNames = cx(getIconColorClassName(props), loading && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["invisible"]))));
   var textClassNames = cx(loading && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["invisible"]))));
@@ -54,14 +54,14 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
     }), StartIcon && /*#__PURE__*/_jsx(StartIcon, {
       width: ICON_SIZE,
       height: ICON_SIZE,
-      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0"]))), iconClassNames)
+      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0 mr-1"]))), iconClassNames)
     }), /*#__PURE__*/_jsx("span", {
-      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-nowrap px-1"]))), textClassNames),
+      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-nowrap"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/_jsx(EndIcon, {
       width: ICON_SIZE,
       height: ICON_SIZE,
-      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["shrink-0"]))), iconClassNames)
+      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["shrink-0 ml-1"]))), iconClassNames)
     })]
   }));
 });

package/dist/esm/Actions/Button/PolymorphicIconButton.js

@@ -15,9 +15,9 @@ import stl from "./../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex items-center justify-center focusable-visible"])));
 var SIZE_CLASSNAMES = {
-  small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["max-h-6 max-w-6 min-h-6 min-w-6 text-mobile md:text-sm"]))),
+  small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["max-h-6 max-w-6 min-h-6 min-w-6 text-md"]))),
   medium: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["max-h-8 max-w-8 min-h-8 min-w-8 text-md"]))),
-  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["max-h-10 max-w-10 min-h-10 min-w-10 text-lg"])))
+  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["max-h-10 max-w-10 min-h-10 min-w-10 text-md"])))
 };
 var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, BUTTON_VARIANT_CLASSNAMES), {}, {
   neutral: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["btn-neutral text-grey-600"]))),

package/dist/esm/Actions/Button/styles.d.ts

@@ -1,5 +1,6 @@
 import type { ButtonBaseProps, ButtonSize, ButtonVariant } from "./types";
 export declare const BUTTON_SIZE_CLASSNAMES: Record<ButtonSize, string>;
+export declare const BUTTON_PADDING_CLASSNAMES: Record<ButtonSize, string>;
 export declare const BUTTON_LOADER_ICON_SIZES: Record<ButtonSize, number>;
 export declare const BUTTON_VARIANT_CLASSNAMES: Record<ButtonVariant, string>;
 export declare const getIconColorClassName: ({ disabled, variant }: Pick<ButtonBaseProps, "disabled" | "variant">) => string | null;

package/dist/esm/Actions/Button/styles.js

@@ -1,30 +1,35 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 import stl from "./../../styles/helpers/satellitePrefixer";
 export var BUTTON_SIZE_CLASSNAMES = {
   small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-6"]))),
   medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-8"]))),
   large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["h-10"])))
 };
+export var BUTTON_PADDING_CLASSNAMES = {
+  small: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["px-2"]))),
+  medium: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["px-4"]))),
+  large: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["px-4"])))
+};
 export var BUTTON_LOADER_ICON_SIZES = {
-  small: 12,
+  small: 16,
   medium: 16,
-  large: 20
+  large: 16
 };
 export var BUTTON_VARIANT_CLASSNAMES = {
-  subtle: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["btn-subtle"]))),
-  neutral: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["btn-neutral"]))),
-  primary: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["btn-primary"]))),
-  destructive: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["btn-destructive"])))
+  subtle: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["btn-subtle"]))),
+  neutral: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["btn-neutral"]))),
+  primary: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["btn-primary"]))),
+  destructive: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["btn-destructive"])))
 };
 export var getIconColorClassName = function getIconColorClassName(_ref) {
   var disabled = _ref.disabled,
     variant = _ref.variant;
   if (variant === "destructive" || variant === "primary") {
-    return stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["text-white"])));
+    return stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["text-white"])));
   }
   if (variant === "subtle" && !disabled) {
     return null;
   }
-  return disabled ? stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["text-grey-300"]))) : stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["text-grey-600"])));
+  return disabled ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["text-grey-300"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-600"])));
 };

package/dist/esm/Actions/ButtonLink/ButtonLink.d.ts

@@ -2,6 +2,7 @@
 import type { PolymorphicButtonProps } from "../../Actions/Button/PolymorphicButton";
 export declare type ButtonLinkProps = Omit<PolymorphicButtonProps<"a">, "as" | "ref"> & {
     href: string;
+    withExternalLinkIcon?: boolean;
 };
 /**
  * The `ButtonLink` component is used to display a link as a button.
@@ -10,4 +11,5 @@ export declare type ButtonLinkProps = Omit<PolymorphicButtonProps<"a">, "as" | "
  */
 export declare const ButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicButtonProps<"a">, "ref" | "as"> & {
     href: string;
+    withExternalLinkIcon?: boolean | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/esm/Actions/ButtonLink/ButtonLink.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["endIcon", "href", "onClick"];
+var _excluded = ["endIcon", "href", "onClick", "withExternalLinkIcon"];
 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 { forwardRef } from "react";
@@ -17,12 +17,14 @@ export var ButtonLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var EndIcon = _ref.endIcon,
     href = _ref.href,
     onClick = _ref.onClick,
+    _ref$withExternalLink = _ref.withExternalLinkIcon,
+    withExternalLinkIcon = _ref$withExternalLink === void 0 ? true : _ref$withExternalLink,
     props = _objectWithoutProperties(_ref, _excluded);
   var linkProps = useLinkProps(_objectSpread(_objectSpread({}, props), {}, {
     href: href,
     onClick: onClick
   }));
-  if (linkProps.target === "_blank" && EndIcon === undefined) {
+  if (linkProps.target === "_blank" && EndIcon === undefined && withExternalLinkIcon) {
     EndIcon = ExternalLinkIcon;
   }
   return /*#__PURE__*/_jsx(PolymorphicButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {

package/dist/esm/Actions/SegmentedControl/SegmentedControl.js

@@ -69,11 +69,12 @@ export var SegmentedControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
       value: value,
       name: radioName,
       onChange: onChange,
-      disabled: disabled
+      disabled: disabled,
+      size: size
     },
     children: /*#__PURE__*/_jsxs("div", {
       ref: mergeRefs([ref, containerRef]),
-      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["segmented-control focusable-visible-within\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "segmented-control-large space-x-1" : "space-x-2px"), BUTTON_SIZE_CLASSNAMES[size], className),
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["segmented-control focusable-visible-within\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "segmented-control-large space-x-1" : "space-x-0.5"), BUTTON_SIZE_CLASSNAMES[size], className),
       children: [/*#__PURE__*/_jsx("div", {
         ref: valueIndicatorRef,
         style: valueIndicatorStyle,

package/dist/esm/Actions/SegmentedControl/SegmentedControlOption.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 { buildAnimationProps } from "./utils";
+import { BUTTON_PADDING_CLASSNAMES } from "./../Button/styles";
 import { useRadioGroupContext } from "./../../Fields/RadioGroup/RadioGroupContext";
 import { OverflowTooltipWrapper } from "./../../Overlay";
 import stl from "./../../styles/helpers/satellitePrefixer";
@@ -15,11 +17,12 @@ export var SegmentedControlOption = function SegmentedControlOption(_ref) {
   var context = useRadioGroupContext();
   var checked = context.value === value;
   var inputDisabled = context.disabled || disabled;
+  var size = context.size || "medium";
   return /*#__PURE__*/_jsxs("label", _objectSpread(_objectSpread({
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10 text-grey-600\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer hover:text-grey-900", !checked && !inputDisabled && "rounded active:bg-accent-200/20")
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex grow shrink justify-center items-center min-w-16 max-w-48 z-10 text-grey-600"]))), BUTTON_PADDING_CLASSNAMES[size], inputDisabled ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cursor-not-allowed opacity-60 rounded bg-grey-100"]))) : stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["cursor-pointer hover:text-grey-900"]))), !checked && !inputDisabled && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["rounded active:bg-accent-200/20"]))))
   }, buildAnimationProps(context.name, value)), {}, {
     children: [/*#__PURE__*/_jsx("input", {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-0 h-0 opacity-0"]))),
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-0 h-0 opacity-0"]))),
       type: "radio",
       value: value,
       name: context.name,

package/dist/esm/Actions/ToggleButton/ToggleButtonBase.js

@@ -2,12 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["className", "size", "icon", "children", "label"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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 { forwardRef } from "react";
-import { BUTTON_SIZE_CLASSNAMES } from "./../Button/styles";
+import { BUTTON_PADDING_CLASSNAMES, BUTTON_SIZE_CLASSNAMES } from "./../Button/styles";
 import { TooltipWrapper } from "./../../Overlay";
 import stl from "./../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,11 +37,11 @@ export var ToggleButtonBase = /*#__PURE__*/forwardRef(function (props, ref) {
         ref: ref,
         type: "button",
         "aria-label": label,
-        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["group/toggle-button rounded focusable-visible focus-visible:border-transparent disabled:cursor-not-allowed"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : BUTTON_SIZE_CLASSNAMES[size], className)
+        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["group/toggle-button rounded focusable-visible focus-visible:border-transparent disabled:cursor-not-allowed"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && BUTTON_PADDING_CLASSNAMES[size], isIconOnly ? ICON_ONLY_CLASSNAMES[size] : BUTTON_SIZE_CLASSNAMES[size], className)
       }, rest), {}, {
         children: [!!Icon && /*#__PURE__*/_jsx(Icon, {
           "aria-hidden": "true",
-          className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["shrink-0 h-4 w-4 text-grey-600 group-data-[state=on]/toggle-button:text-inherit group-disabled/toggle-button:text-inherit"])))
+          className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["shrink-0 h-4 w-4 text-grey-600 group-data-[state=on]/toggle-button:text-inherit group-disabled/toggle-button:text-inherit"])))
         }), !!children && /*#__PURE__*/_jsx("div", {
           children: children
         })]