@algolia/satellite 2.3.0-rc.9 → 2.4.0

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

@@ -1,6 +1,9 @@
 import * as RadixAccordion from "@radix-ui/react-accordion";
 import type { FC, ReactNode } from "react";
+import type { VariantProps } from "tailwind-variants";
+import { accordionStyles } from "./Accordion.styles";
 import type { IconComponentType } from "../../Icons";
+declare type AccordionVariants = VariantProps<typeof accordionStyles>;
 declare type AccordionSharedProps = {
     /**
      * The content of the `Accordion`.
@@ -14,6 +17,11 @@ declare type AccordionSharedProps = {
      * Whether the `Accordion` is disabled, preventing the user from interacting with the accordion and all its items.
      */
     disabled?: boolean;
+    /**
+     * Display the Accordion in normal or a more compact style (no meta or description, smaller paddings).
+     * @default normal
+     */
+    variant?: AccordionVariants["variant"];
 };
 declare type AccordionSingleProps = {
     /**

package/dist/cjs/Actions/Accordion/Accordion.js

@@ -7,25 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Accordion = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var RadixAccordion = _interopRequireWildcard(require("@radix-ui/react-accordion"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
+var _Accordion = require("./Accordion.styles");
 var _Icons = require("./../../Icons");
-var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-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 _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 && {}.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 ICON_SIZE = 16;
-var TRIGGER_ICON_SIZE = 20;
-
+var AccordionVariantContext = /*#__PURE__*/(0, _react.createContext)({
+  variant: "normal"
+});
+var useAccordionVariant = function useAccordionVariant() {
+  return (0, _react.useContext)(AccordionVariantContext);
+};
 /**
  * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
  *
@@ -33,15 +35,36 @@ var TRIGGER_ICON_SIZE = 20;
  */
 var Accordion = exports.Accordion = function Accordion(_ref) {
   var children = _ref.children,
-    className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "normal" : _ref$variant,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionVariantContext.Provider, {
+    value: {
+      variant: variant
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionRootInternal, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }))
+  });
+};
+var AccordionRootInternal = function AccordionRootInternal(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var _useAccordionVariant = useAccordionVariant(),
+    variant = _useAccordionVariant.variant;
+  var styles = (0, _Accordion.accordionStyles)({
+    variant: variant
+  });
   var sharedProps = {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))), className)
+    className: styles.base({
+      className: className
+    })
   };
   if (props.multiple) {
     var _onChange = props.onChange,
       _multiple = props.multiple,
-      _rest = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+      _rest = (0, _objectWithoutProperties2["default"])(props, _excluded3);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, _rest), sharedProps), {}, {
       type: "multiple",
       onValueChange: _onChange,
@@ -52,7 +75,7 @@ var Accordion = exports.Accordion = function Accordion(_ref) {
     multiple = props.multiple,
     _props$collapsible = props.collapsible,
     collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
-    rest = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
     type: "single",
     onValueChange: onChange,
@@ -61,71 +84,88 @@ var Accordion = exports.Accordion = function Accordion(_ref) {
   }));
 };
 Accordion.displayName = "Accordion";
-var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var value = _ref2.value,
-    disabled = _ref2.disabled,
-    children = _ref2.children,
-    className = _ref2.className;
+var AccordionItem = /*#__PURE__*/(0, _react.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 = (0, _Accordion.accordionStyles)({
+    variant: variant
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Item, {
     value: value,
     disabled: disabled,
     ref: ref,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group/accordion-item flex flex-col"]))), className),
+    className: styles.item({
+      className: className
+    }),
     children: children
   });
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
-  var children = _ref3.children,
-    description = _ref3.description,
-    Icon = _ref3.icon,
-    _ref3$iconClassName = _ref3.iconClassName,
-    iconClassName = _ref3$iconClassName === void 0 ? (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["typo-subdued"]))) : _ref3$iconClassName,
-    _ref3$iconBgClassName = _ref3.iconBgClassName,
-    iconBgClassName = _ref3$iconBgClassName === void 0 ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _react.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 = (0, _Accordion.accordionStyles)({
+    variant: variant
+  });
+  var isCompact = variant === "compact";
   var TriggerIcon = triggerIcon || _Icons.ChevronDownIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Header, {
-    className: className,
+    className: styles.header({
+      className: className
+    }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RadixAccordion.Trigger, {
       ref: ref,
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-3 grow"]))), titleWrapperClassName),
+        className: styles.titleWrapper({
+          className: titleWrapperClassName
+        }),
         children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
+          className: styles.iconBg({
+            className: iconBgClassName
+          }),
           "aria-hidden": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-            className: (0, _clsx["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["group-disabled/accordion-trigger:text-grey-300"])))),
-            width: ICON_SIZE,
-            height: ICON_SIZE
+            className: styles.icon({
+              className: iconClassName
+            })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-y-1 text-left grow"]))),
+          className: styles.titleCol(),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
+          }), !isCompact && typeof description !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: styles.description(),
             children: description
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-2"]))),
-        children: [typeof meta !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
+        className: styles.metaWrapper(),
+        children: [typeof meta !== "undefined" && !isCompact && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: styles.meta(),
           children: meta
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TriggerIcon, {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
-          // Don't rotate the trigger icon if it's a custom one.
-          !triggerIcon && (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])([" 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: (0, _clsx["default"])(styles.triggerIcon(), !triggerIcon && styles.triggerIconChevron()),
           "aria-hidden": true
         })]
       })]
@@ -133,14 +173,21 @@ var AccordionHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref)
   });
 });
 AccordionHeader.displayName = "AccordionHeader";
-var AccordionContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
-  var children = _ref4.children,
-    className = _ref4.className;
+var AccordionContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
+  var children = _ref5.children,
+    className = _ref5.className;
+  var _useAccordionVariant4 = useAccordionVariant(),
+    variant = _useAccordionVariant4.variant;
+  var styles = (0, _Accordion.accordionStyles)({
+    variant: variant
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Content, {
     ref: ref,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
+    className: styles.content({
+      className: className
+    }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["px-4 pt-2 pb-4"]))),
+      className: styles.contentInner(),
       children: children
     })
   });

package/dist/cjs/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/cjs/Actions/Accordion/Accordion.styles.js

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

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

@@ -22,7 +22,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && {}.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 focusable-visible"])));
+var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex justify-center items-center typo-display-body focusable-visible"])));
 var ICON_SIZE = 16;
 /**
  * `PolymorphicButton` is intended for internal use.
@@ -46,7 +46,7 @@ var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forw
     // @ts-expect-error disabled is not present in PolymorphicButtonProps
     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 buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_PADDING_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"]))));
@@ -64,14 +64,14 @@ var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forw
     }), 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)
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-1"]))), iconClassNames)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-nowrap px-1"]))), textClassNames),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-nowrap"]))), 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)
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 ml-1"]))), iconClassNames)
     })]
   }));
 });

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

@@ -22,9 +22,9 @@ 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) { (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 items-center justify-center focusable-visible"])));
 var SIZE_CLASSNAMES = {
-  small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-h-6 max-w-6 min-h-6 min-w-6 text-mobile md:text-sm"]))),
+  small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-h-6 max-w-6 min-h-6 min-w-6 text-md"]))),
   medium: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["max-h-8 max-w-8 min-h-8 min-w-8 text-md"]))),
-  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["max-h-10 max-w-10 min-h-10 min-w-10 text-lg"])))
+  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["max-h-10 max-w-10 min-h-10 min-w-10 text-md"])))
 };
 var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, _styles.BUTTON_VARIANT_CLASSNAMES), {}, {
   neutral: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["btn-neutral text-grey-600"]))),

package/dist/cjs/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/cjs/Actions/Button/styles.js

@@ -4,34 +4,39 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIconColorClassName = exports.BUTTON_VARIANT_CLASSNAMES = exports.BUTTON_SIZE_CLASSNAMES = exports.BUTTON_LOADER_ICON_SIZES = void 0;
+exports.getIconColorClassName = exports.BUTTON_VARIANT_CLASSNAMES = exports.BUTTON_SIZE_CLASSNAMES = exports.BUTTON_PADDING_CLASSNAMES = exports.BUTTON_LOADER_ICON_SIZES = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
-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;
 var BUTTON_SIZE_CLASSNAMES = exports.BUTTON_SIZE_CLASSNAMES = {
   small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-6"]))),
   medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-8"]))),
   large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["h-10"])))
 };
+var BUTTON_PADDING_CLASSNAMES = exports.BUTTON_PADDING_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["px-2"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["px-4"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["px-4"])))
+};
 var BUTTON_LOADER_ICON_SIZES = exports.BUTTON_LOADER_ICON_SIZES = {
-  small: 12,
+  small: 16,
   medium: 16,
-  large: 20
+  large: 16
 };
 var BUTTON_VARIANT_CLASSNAMES = exports.BUTTON_VARIANT_CLASSNAMES = {
-  subtle: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["btn-subtle"]))),
-  neutral: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["btn-neutral"]))),
-  primary: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-primary"]))),
-  destructive: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["btn-destructive"])))
+  subtle: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["btn-subtle"]))),
+  neutral: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["btn-neutral"]))),
+  primary: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["btn-primary"]))),
+  destructive: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["btn-destructive"])))
 };
 var getIconColorClassName = exports.getIconColorClassName = function getIconColorClassName(_ref) {
   var disabled = _ref.disabled,
     variant = _ref.variant;
   if (variant === "destructive" || variant === "primary") {
-    return (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["text-white"])));
+    return (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["text-white"])));
   }
   if (variant === "subtle" && !disabled) {
     return null;
   }
-  return disabled ? (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"]))) : (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"])));
+  return disabled ? (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"]))) : (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"])));
 };

package/dist/cjs/Actions/SegmentedControl/SegmentedControl.js

@@ -76,11 +76,12 @@ var SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forwar
       value: value,
       name: radioName,
       onChange: onChange,
-      disabled: disabled
+      disabled: disabled,
+      size: size
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: (0, _mergeRefs.mergeRefs)([ref, containerRef]),
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: valueIndicatorRef,
         style: valueIndicatorStyle,