@algolia/satellite 2.3.0-rc.9 → 2.4.0

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

@@ -1,21 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-var _excluded = ["children", "className"],
-  _excluded2 = ["onChange", "multiple"],
-  _excluded3 = ["onChange", "multiple", "collapsible"];
+var _excluded = ["children", "variant"],
+  _excluded2 = ["children", "className"],
+  _excluded3 = ["onChange", "multiple"],
+  _excluded4 = ["onChange", "multiple", "collapsible"];
 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 * as RadixAccordion from "@radix-ui/react-accordion";
 import cx from "clsx";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext } from "react";
+import { accordionStyles } from "./Accordion.styles";
 import { ChevronDownIcon } from "./../../Icons";
-import stl from "./../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var ICON_SIZE = 16;
-var TRIGGER_ICON_SIZE = 20;
-
+var AccordionVariantContext = /*#__PURE__*/createContext({
+  variant: "normal"
+});
+var useAccordionVariant = function useAccordionVariant() {
+  return useContext(AccordionVariantContext);
+};
 /**
  * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
  *
@@ -23,15 +25,36 @@ var TRIGGER_ICON_SIZE = 20;
  */
 export var Accordion = function Accordion(_ref) {
   var children = _ref.children,
-    className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "normal" : _ref$variant,
     props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(AccordionVariantContext.Provider, {
+    value: {
+      variant: variant
+    },
+    children: /*#__PURE__*/_jsx(AccordionRootInternal, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }))
+  });
+};
+var AccordionRootInternal = function AccordionRootInternal(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useAccordionVariant = useAccordionVariant(),
+    variant = _useAccordionVariant.variant;
+  var styles = accordionStyles({
+    variant: variant
+  });
   var sharedProps = {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"]))), className)
+    className: styles.base({
+      className: className
+    })
   };
   if (props.multiple) {
     var _onChange = props.onChange,
       _multiple = props.multiple,
-      _rest = _objectWithoutProperties(props, _excluded2);
+      _rest = _objectWithoutProperties(props, _excluded3);
     return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, _rest), sharedProps), {}, {
       type: "multiple",
       onValueChange: _onChange,
@@ -42,7 +65,7 @@ export var Accordion = function Accordion(_ref) {
     multiple = props.multiple,
     _props$collapsible = props.collapsible,
     collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
-    rest = _objectWithoutProperties(props, _excluded3);
+    rest = _objectWithoutProperties(props, _excluded4);
   return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
     type: "single",
     onValueChange: onChange,
@@ -51,71 +74,88 @@ export var Accordion = function Accordion(_ref) {
   }));
 };
 Accordion.displayName = "Accordion";
-var AccordionItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var value = _ref2.value,
-    disabled = _ref2.disabled,
-    children = _ref2.children,
-    className = _ref2.className;
+var AccordionItem = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var value = _ref3.value,
+    disabled = _ref3.disabled,
+    children = _ref3.children,
+    className = _ref3.className;
+  var _useAccordionVariant2 = useAccordionVariant(),
+    variant = _useAccordionVariant2.variant;
+  var styles = accordionStyles({
+    variant: variant
+  });
   return /*#__PURE__*/_jsx(RadixAccordion.Item, {
     value: value,
     disabled: disabled,
     ref: ref,
-    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group/accordion-item flex flex-col"]))), className),
+    className: styles.item({
+      className: className
+    }),
     children: children
   });
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-    description = _ref3.description,
-    Icon = _ref3.icon,
-    _ref3$iconClassName = _ref3.iconClassName,
-    iconClassName = _ref3$iconClassName === void 0 ? stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["typo-subdued"]))) : _ref3$iconClassName,
-    _ref3$iconBgClassName = _ref3.iconBgClassName,
-    iconBgClassName = _ref3$iconBgClassName === void 0 ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-100"]))) : _ref3$iconBgClassName,
-    meta = _ref3.meta,
-    triggerIcon = _ref3.triggerIcon,
-    triggerClassName = _ref3.triggerClassName,
-    className = _ref3.className,
-    titleWrapperClassName = _ref3.titleWrapperClassName,
-    titleClassName = _ref3.titleClassName;
+var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+    description = _ref4.description,
+    Icon = _ref4.icon,
+    iconClassName = _ref4.iconClassName,
+    iconBgClassName = _ref4.iconBgClassName,
+    meta = _ref4.meta,
+    triggerIcon = _ref4.triggerIcon,
+    triggerClassName = _ref4.triggerClassName,
+    className = _ref4.className,
+    titleWrapperClassName = _ref4.titleWrapperClassName,
+    titleClassName = _ref4.titleClassName;
+  var _useAccordionVariant3 = useAccordionVariant(),
+    variant = _useAccordionVariant3.variant;
+  var styles = accordionStyles({
+    variant: variant
+  });
+  var isCompact = variant === "compact";
   var TriggerIcon = triggerIcon || ChevronDownIcon;
   return /*#__PURE__*/_jsx(RadixAccordion.Header, {
-    className: className,
+    className: styles.header({
+      className: className
+    }),
     children: /*#__PURE__*/_jsxs(RadixAccordion.Trigger, {
       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),
+      className: styles.trigger({
+        className: triggerClassName
+      }),
       children: [/*#__PURE__*/_jsxs("div", {
-        className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center gap-x-3 grow"]))), titleWrapperClassName),
+        className: styles.titleWrapper({
+          className: 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),
+          className: styles.iconBg({
+            className: iconBgClassName
+          }),
           "aria-hidden": true,
           children: /*#__PURE__*/_jsx(Icon, {
-            className: cx(iconClassName, stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["group-disabled/accordion-trigger:text-grey-300"])))),
-            width: ICON_SIZE,
-            height: ICON_SIZE
+            className: styles.icon({
+              className: iconClassName
+            })
           })
         }), /*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col gap-y-1 text-left grow"]))),
+          className: styles.titleCol(),
           children: [/*#__PURE__*/_jsx("div", {
-            className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))), titleClassName),
+            className: styles.title({
+              className: 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"]))),
+          }), !isCompact && typeof description !== "undefined" && /*#__PURE__*/_jsx("div", {
+            className: styles.description(),
             children: description
           })]
         })]
       }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center gap-x-2"]))),
-        children: [typeof meta !== "undefined" && /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
+        className: styles.metaWrapper(),
+        children: [typeof meta !== "undefined" && !isCompact && /*#__PURE__*/_jsx("div", {
+          className: styles.meta(),
           children: meta
         }), /*#__PURE__*/_jsx(TriggerIcon, {
-          className: cx(stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
-          // Don't rotate the trigger icon if it's a custom one.
-          !triggerIcon && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([" group-data-[state=open]/accordion-trigger:rotate-180 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out"])))),
-          width: TRIGGER_ICON_SIZE,
-          height: TRIGGER_ICON_SIZE,
+          className: cx(styles.triggerIcon(), !triggerIcon && styles.triggerIconChevron()),
           "aria-hidden": true
         })]
       })]
@@ -123,14 +163,21 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   });
 });
 AccordionHeader.displayName = "AccordionHeader";
-var AccordionContent = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var children = _ref4.children,
-    className = _ref4.className;
+var AccordionContent = /*#__PURE__*/forwardRef(function (_ref5, ref) {
+  var children = _ref5.children,
+    className = _ref5.className;
+  var _useAccordionVariant4 = useAccordionVariant(),
+    variant = _useAccordionVariant4.variant;
+  var styles = accordionStyles({
+    variant: variant
+  });
   return /*#__PURE__*/_jsx(RadixAccordion.Content, {
     ref: ref,
-    className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
+    className: styles.content({
+      className: className
+    }),
     children: /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["px-4 pt-2 pb-4"]))),
+      className: styles.contentInner(),
       children: children
     })
   });

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

@@ -0,0 +1,170 @@
+export declare const accordionStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        normal: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            triggerIcon: string;
+            contentInner: string;
+        };
+        compact: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            title: string;
+            description: string;
+            metaWrapper: string;
+            meta: string;
+            triggerIcon: string;
+            content: string;
+            contentInner: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    header: string;
+    trigger: string;
+    titleWrapper: string;
+    iconBg: string;
+    icon: string;
+    titleCol: string;
+    title: string;
+    description: string;
+    metaWrapper: string;
+    meta: string;
+    triggerIcon: string;
+    triggerIconChevron: string;
+    content: string;
+    contentInner: string;
+}, undefined, {
+    responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
+        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config").TWMConfig & {
+    twMergeConfig: {
+        prefix: string;
+    };
+}, {
+    variant: {
+        normal: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            triggerIcon: string;
+            contentInner: string;
+        };
+        compact: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            title: string;
+            description: string;
+            metaWrapper: string;
+            meta: string;
+            triggerIcon: string;
+            content: string;
+            contentInner: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    header: string;
+    trigger: string;
+    titleWrapper: string;
+    iconBg: string;
+    icon: string;
+    titleCol: string;
+    title: string;
+    description: string;
+    metaWrapper: string;
+    meta: string;
+    triggerIcon: string;
+    triggerIconChevron: string;
+    content: string;
+    contentInner: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        normal: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            triggerIcon: string;
+            contentInner: string;
+        };
+        compact: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            title: string;
+            description: string;
+            metaWrapper: string;
+            meta: string;
+            triggerIcon: string;
+            content: string;
+            contentInner: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    header: string;
+    trigger: string;
+    titleWrapper: string;
+    iconBg: string;
+    icon: string;
+    titleCol: string;
+    title: string;
+    description: string;
+    metaWrapper: string;
+    meta: string;
+    triggerIcon: string;
+    triggerIconChevron: string;
+    content: string;
+    contentInner: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        normal: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            triggerIcon: string;
+            contentInner: string;
+        };
+        compact: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            title: string;
+            description: string;
+            metaWrapper: string;
+            meta: string;
+            triggerIcon: string;
+            content: string;
+            contentInner: string;
+        };
+    };
+}, {
+    variant: {
+        normal: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            triggerIcon: string;
+            contentInner: string;
+        };
+        compact: {
+            trigger: string;
+            titleWrapper: string;
+            iconBg: string;
+            title: string;
+            description: string;
+            metaWrapper: string;
+            meta: string;
+            triggerIcon: string;
+            content: string;
+            contentInner: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,50 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
+import stl from "./../../styles/helpers/satellitePrefixer";
+import { tv } from "./../../styles/helpers/tv";
+export var accordionStyles = tv({
+  slots: {
+    base: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"]))),
+    item: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group/accordion-item flex flex-col"]))),
+    header: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""]))),
+    trigger: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["group/accordion-trigger flex items-center justify-between"]))),
+    titleWrapper: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex items-center grow"]))),
+    iconBg: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center justify-center shrink-0"]))),
+    icon: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["size-4 text-grey-600 group-disabled/accordion-trigger:text-grey-300"]))),
+    titleCol: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex flex-col gap-y-1 text-left grow"]))),
+    title: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
+    description: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-body text-grey-600 line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
+    metaWrapper: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex items-center gap-x-2"]))),
+    meta: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
+    triggerIcon: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["shrink-0 text-grey-600 group-disabled/accordion-trigger:text-grey-300"]))),
+    triggerIconChevron: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["group-data-[state=open]/accordion-trigger:rotate-180 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out"]))),
+    content: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["typo-display-body text-grey-600 overflow-hidden accordion-content"]))),
+    contentInner: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([""])))
+  },
+  variants: {
+    variant: {
+      normal: {
+        trigger: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full gap-x-3 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"]))),
+        titleWrapper: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["gap-x-3"]))),
+        iconBg: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["rounded-full w-8 h-8 bg-grey-100"]))),
+        triggerIcon: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["size-5"]))),
+        contentInner: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["px-4 pt-2 pb-4"])))
+      },
+      compact: {
+        trigger: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["min-h-0 gap-x-2 bg-transparent border-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-600"]))),
+        titleWrapper: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["gap-x-1"]))),
+        iconBg: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["h-6 bg-transparent"]))),
+        title: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["typo-display-body"]))),
+        description: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["hidden"]))),
+        metaWrapper: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral([""]))),
+        meta: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["hidden"]))),
+        triggerIcon: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["size-4"]))),
+        content: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["py-0"]))),
+        contentInner: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["py-1"])))
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "normal"
+  }
+});

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/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,