@algolia/satellite 2.3.0-rc.9 → 2.4.0

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.SegmentedControlOption = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("./utils");
+var _styles = require("./../Button/styles");
 var _RadioGroupContext = require("./../../Fields/RadioGroup/RadioGroupContext");
 var _Overlay = require("./../../Overlay");
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-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) { (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 SegmentedControlOption = exports.SegmentedControlOption = function SegmentedControlOption(_ref) {
@@ -22,11 +24,12 @@ var SegmentedControlOption = exports.SegmentedControlOption = function Segmented
   var context = (0, _RadioGroupContext.useRadioGroupContext)();
   var checked = context.value === value;
   var inputDisabled = context.disabled || disabled;
+  var size = context.size || "medium";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-flex grow shrink justify-center items-center min-w-16 max-w-48 z-10 text-grey-600"]))), _styles.BUTTON_PADDING_CLASSNAMES[size], inputDisabled ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed opacity-60 rounded bg-grey-100"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer hover:text-grey-900"]))), !checked && !inputDisabled && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["rounded active:bg-accent-200/20"]))))
   }, (0, _utils.buildAnimationProps)(context.name, value)), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-0 h-0 opacity-0"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-0 h-0 opacity-0"]))),
       type: "radio",
       value: value,
       name: context.name,

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

@@ -15,7 +15,7 @@ var _Overlay = require("./../../Overlay");
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
 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) { (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_ONLY_CLASSNAMES = {
@@ -44,11 +44,11 @@ var ToggleButtonBase = exports.ToggleButtonBase = /*#__PURE__*/(0, _react.forwar
         ref: ref,
         type: "button",
         "aria-label": label,
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["group/toggle-button rounded focusable-visible focus-visible:border-transparent disabled:cursor-not-allowed"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : _styles.BUTTON_SIZE_CLASSNAMES[size], className)
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["group/toggle-button rounded focusable-visible focus-visible:border-transparent disabled:cursor-not-allowed"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && _styles.BUTTON_PADDING_CLASSNAMES[size], isIconOnly ? ICON_ONLY_CLASSNAMES[size] : _styles.BUTTON_SIZE_CLASSNAMES[size], className)
       }, rest), {}, {
         children: [!!Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           "aria-hidden": "true",
-          className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 h-4 w-4 text-grey-600 group-data-[state=on]/toggle-button:text-inherit group-disabled/toggle-button:text-inherit"])))
+          className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)("div", {
           children: children
         })]

package/dist/cjs/Chat/ChatContextAccordion/ChatContextAccordion.styles.d.ts

@@ -7,8 +7,8 @@ export declare const chatContextAccordionStyles: import("tailwind-variants").TVR
             content?: import("tailwind-merge").ClassNameValue;
             item?: import("tailwind-merge").ClassNameValue;
             trigger?: import("tailwind-merge").ClassNameValue;
-            iconBg?: import("tailwind-merge").ClassNameValue;
             titleWrapper?: import("tailwind-merge").ClassNameValue;
+            iconBg?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
@@ -20,8 +20,8 @@ export declare const chatContextAccordionStyles: import("tailwind-variants").TVR
             content?: import("tailwind-merge").ClassNameValue;
             item?: import("tailwind-merge").ClassNameValue;
             trigger?: import("tailwind-merge").ClassNameValue;
-            iconBg?: import("tailwind-merge").ClassNameValue;
             titleWrapper?: import("tailwind-merge").ClassNameValue;
+            iconBg?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -48,8 +48,8 @@ export declare const chatContextAccordionStyles: import("tailwind-variants").TVR
             content?: import("tailwind-merge").ClassNameValue;
             item?: import("tailwind-merge").ClassNameValue;
             trigger?: import("tailwind-merge").ClassNameValue;
-            iconBg?: import("tailwind-merge").ClassNameValue;
             titleWrapper?: import("tailwind-merge").ClassNameValue;
+            iconBg?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -79,8 +79,8 @@ export declare const chatContextAccordionStyles: import("tailwind-variants").TVR
             content?: import("tailwind-merge").ClassNameValue;
             item?: import("tailwind-merge").ClassNameValue;
             trigger?: import("tailwind-merge").ClassNameValue;
-            iconBg?: import("tailwind-merge").ClassNameValue;
             titleWrapper?: import("tailwind-merge").ClassNameValue;
+            iconBg?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/cjs/Chat/ChatMessage/ChatMessage.d.ts

@@ -62,7 +62,7 @@ export declare type ChatMessageProps<ActionsExtraData extends Record<string, any
  *
  * See the [ChatMessage documentation page](https://satellite.algolia.com/8261d6576/p/06f740-chat-message) for more information.
  */
-export declare const ChatMessage: <ActionsExtraData extends Record<string, any> = Record<string, any>>(props: Omit<HTMLAttributes<HTMLElement>, "children" | "content"> & {
+export declare const ChatMessage: <ActionsExtraData extends Record<string, any> = Record<string, any>>(props: Omit<HTMLAttributes<HTMLElement>, "content" | "children"> & {
     /**
      * The content of the message.
      */

package/dist/cjs/Chat/ChatMessage/ChatMessage.styles.d.ts

@@ -34,8 +34,8 @@ export declare const chatMessageStyles: import("tailwind-variants").TVReturnType
     footer: string;
 }, undefined, {
     responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
-        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         leading?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         side?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         actions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         autoHideActions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;

package/dist/cjs/Chat/ChatMessageError/ChatMessageError.styles.d.ts

@@ -40,8 +40,8 @@ export declare const chatMessageErrorStyles: import("tailwind-variants").TVRetur
     content: string;
 }, undefined, {
     responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
-        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         leading?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         side?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         actions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         autoHideActions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
@@ -120,8 +120,8 @@ export declare const chatMessageErrorStyles: import("tailwind-variants").TVRetur
     footer: string;
 }, undefined, {
     responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
-        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         leading?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         side?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         actions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         autoHideActions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;

package/dist/cjs/Chat/ChatMessageLoader/ChatMessageLoader.styles.d.ts

@@ -67,8 +67,8 @@ export declare const chatMessageLoaderStyles: import("tailwind-variants").TVRetu
     skeleton: string;
 }, undefined, {
     responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
-        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         leading?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         side?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         actions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         autoHideActions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
@@ -147,8 +147,8 @@ export declare const chatMessageLoaderStyles: import("tailwind-variants").TVRetu
     footer: string;
 }, undefined, {
     responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
-        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         leading?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
+        variant?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         side?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         actions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
         autoHideActions?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;

package/dist/cjs/Fields/Field/Field.js

@@ -16,7 +16,7 @@ var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/
 var _utils = require("./../../utils");
 var _getTextFromReactNode = require("./../../utils/getTextFromReactNode");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 /**
  * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
@@ -111,7 +111,7 @@ var Field = exports.Field = function Field(_ref) {
             children: "*"
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
+          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-auto flex items-center"])))),
           children: children
         })]
       }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
@@ -130,7 +130,7 @@ var Field = exports.Field = function Field(_ref) {
         })
       }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         id: descriptionId,
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
+        className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600 mt-1"]))),
         children: description
       }) : null]
     })

package/dist/cjs/Fields/Input/Input.js

@@ -21,7 +21,7 @@ var _useForwardedRef3 = require("./../../utils/useForwardedRef");
 var _useTriggerInputChange = require("./../../utils/useTriggerInputChange");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "style", "startIcon", "endItem", "disabled", "readOnly", "clearable", "type", "variant", "locale", "required"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 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 DEFAULT_INPUT_LOCALE = {
@@ -109,7 +109,6 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     }
   }, [inputProps.value, isControlled]);
   var Icon = startIcon ? startIcon : type === "search" ? SearchIcon : undefined;
-  var iconSize = variant === "small" ? "1rem" : "1.5rem";
   var isInvalid = status === "invalid";
   var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
@@ -123,11 +122,9 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       }
     },
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-300" : focused ? "text-accent-600" : "text-grey-500"),
-      width: iconSize,
-      height: iconSize
+      className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["ml-4 shrink-0 size-4 ", ""])), disabled ? "text-grey-300" : focused ? "text-accent-600" : "text-grey-500")
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mx-4 no-search-input-decoration"]))),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["no-search-input-decoration"]))), Icon ? (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mx-2"]))) : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mx-4"])))),
       ref: inputRefCallback,
       type: type,
       "aria-labelledby": labelId,
@@ -156,7 +153,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
         (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, evt);
       }
     })), clearable && !disabled && !readOnly && !isValueEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
-      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
       title: locale.clearInput,
       icon: _Icons.XIcon,
       variant: "subtle",
@@ -168,15 +165,15 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
         triggerInputChange("");
       }
     }) : null, !!endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-4"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["mr-4"]))),
       children: endItem
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {}), type === "number" && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["input-spinner"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["input-spinner"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         tabIndex: -1,
         type: "button",
         disabled: readOnly,
-        className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
+        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
         "aria-label": locale.increment,
         onClick: function onClick() {
           var _inputRef$current$val, _inputRef$current2;
@@ -194,13 +191,13 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronUpIcon, {
           size: 12,
-          className: (0, _clsx["default"])(isInvalid && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-red-700"]))))
+          className: (0, _clsx["default"])(isInvalid && (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["text-red-700"]))))
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         tabIndex: -1,
         type: "button",
         disabled: readOnly,
-        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
+        className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
         "aria-label": locale.decrement,
         onClick: function onClick() {
           var _inputRef$current$val2, _inputRef$current3;
@@ -218,7 +215,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronDownIcon, {
           size: 12,
-          className: (0, _clsx["default"])(isInvalid && (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["text-red-700"]))))
+          className: (0, _clsx["default"])(isInvalid && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["text-red-700"]))))
         })
       })]
     })]

package/dist/cjs/Fields/RadioGroup/RadioGroupContext.d.ts

@@ -1,4 +1,5 @@
 import type { ForwardedRef } from "react";
+import type { ButtonSize } from "../../Actions/Button/types";
 import type { FieldState } from "../../Fields/Field";
 export interface RadioGroupContextType {
     id?: string;
@@ -13,6 +14,7 @@ export interface RadioGroupContextType {
     descriptionId?: string;
     state?: FieldState;
     ref?: ForwardedRef<HTMLInputElement>;
+    size?: ButtonSize;
 }
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextType | null>;
 export declare const useRadioGroupContext: () => RadioGroupContextType;

package/dist/cjs/Fields/Switch/Switch.tailwind.js

@@ -11,8 +11,8 @@ var switchPlugin = plugin(function (_ref) {
     ".switch-container": {
       position: "relative",
       display: "block",
-      height: "18px",
-      width: "32px",
+      height: "24px",
+      width: "43px",
       ".switch-handle": {
         position: "absolute",
         top: "0px",
@@ -29,13 +29,13 @@ var switchPlugin = plugin(function (_ref) {
         transform: "translateX(2px)"
       },
       "&:hover .switch-handle.switch-checked ~ .switch:after": {
-        transform: "translateX(12px)"
+        transform: "translateX(17px)"
       },
       "&:hover .switch-handle.switch-disabled ~ .switch:after": {
         transform: "translateX(0px)"
       },
       "&:hover .switch-handle.switch-checked.switch-disabled ~ .switch:after": {
-        transform: "translateX(14px)"
+        transform: "translateX(19px)"
       }
     },
     ".switch": {
@@ -51,10 +51,10 @@ var switchPlugin = plugin(function (_ref) {
       transition: transition,
       "&::after": {
         position: "absolute",
-        top: "1px",
-        left: "1px",
-        width: "16px",
-        height: "16px",
+        top: "2px",
+        left: "2px",
+        width: "20px",
+        height: "20px",
         content: '" "',
         borderRadius: "9999px",
         background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
@@ -65,7 +65,7 @@ var switchPlugin = plugin(function (_ref) {
         background: theme("colors.accent.600"),
         boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.900"), 0.1)),
         "&:after": {
-          transform: "translateX(14px)"
+          transform: "translateX(19px)"
         }
       },
       ".switch-handle.switch-disabled ~ &": {

package/dist/cjs/Fields/TextArea/TextArea.tailwind.js

@@ -16,9 +16,6 @@ var textAreaPlugin = plugin(function (_ref) {
       transition: "all 100ms ease-in-out",
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
-      "&::placeholder": {
-        color: theme("colors.grey.600")
-      },
       "&:hover": {
         borderColor: theme("colors.grey.600")
       },
@@ -50,6 +47,9 @@ var textAreaPlugin = plugin(function (_ref) {
       color: theme("colors.grey.900"),
       background: "transparent",
       padding: theme("spacing.4"),
+      "&::placeholder": {
+        color: theme("colors.grey.600")
+      },
       "&:focus": {
         outline: "none"
       },

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

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+import type { Components } from "react-markdown";
+export interface MarkdownContentProps {
+    /**
+     * Additional classes to apply to the `MarkdownContent`.
+     */
+    className?: string;
+    /**
+     * The content of the `MarkdownContent`.
+     */
+    content?: string;
+    /**
+     * Custom components to override the default rendering of markdown elements.
+     */
+    components?: Partial<Components>;
+}
+/**
+ * The `MarkdownContent` component is used to style user generated content that comes as Markdown.
+ *
+ * See the [Markdown Content documentation page](https://satellite.algolia.com/8261d6576/p/784293-markdown-content) for more information.
+ */
+export declare const MarkdownContent: FC<MarkdownContentProps>;

package/dist/cjs/Helpers/MarkdownContent/MarkdownContent.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MarkdownContent = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
+var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
+var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+/**
+ * The `MarkdownContent` component is used to style user generated content that comes as Markdown.
+ *
+ * See the [Markdown Content documentation page](https://satellite.algolia.com/8261d6576/p/784293-markdown-content) for more information.
+ */
+var MarkdownContent = exports.MarkdownContent = function MarkdownContent(_ref) {
+  var className = _ref.className,
+    content = _ref.content,
+    components = _ref.components;
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["markdown-content"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown["default"], {
+      components: components,
+      remarkPlugins: [_remarkGfm["default"]],
+      children: content
+    })
+  });
+};

package/dist/cjs/Helpers/MarkdownContent/MarkdownContent.tailwind.d.ts

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

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

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var _require = require("../../styles/helpers/icons"),
+  toBG = _require.toBG;
+var rgba = require("../../styles/rgba");
+module.exports = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  /** @type {any} */
+  var desktop = theme("stlTypography.desktop", {});
+  /** @type {any} */
+  var mobile = theme("stlTypography.mobile", {});
+  addComponents({
+    ".markdown-content": {
+      "h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, table": {
+        "&:not(:first-child)": {
+          marginTop: theme("spacing.3")
+        },
+        "&:not(:last-child)": {
+          marginBottom: theme("spacing.2")
+        }
+      },
+      h1: desktop["display-medium"],
+      h2: desktop["display-small"],
+      h3: _objectSpread(_objectSpread({}, desktop["display-body"]), {}, {
+        fontWeight: theme("fontWeight.semibold")
+      }),
+      "h4, h5, h6": _objectSpread(_objectSpread({}, desktop["display-body"]), {}, {
+        fontWeight: theme("fontWeight.medium")
+      }),
+      "p, ul, ol, blockquote, table": _objectSpread(_objectSpread({}, mobile["display-body"]), {}, {
+        fontSize: theme("fontSize.base")
+      }),
+      code: {
+        display: "inline-block",
+        padding: "0 ".concat(theme("spacing.1")),
+        backgroundColor: theme("colors.grey.100"),
+        color: theme("colors.grey.700"),
+        fontFamily: theme("fontFamily.mono"),
+        fontSize: theme("fontSize.base")
+      },
+      ul: {
+        paddingLeft: theme("spacing.5"),
+        listStyleType: "disc"
+      },
+      ol: {
+        listStyleType: "decimal",
+        listStylePosition: "inside"
+      },
+      a: {
+        color: theme("colors.accent.600"),
+        "&:hover": {
+          textDecoration: "underline"
+        },
+        '&[target="_blank"], &[href^="http"]': {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          "&:after": {
+            content: "''",
+            background: toBG("ExternalLink", {
+              stroke: theme("colors.accent.600"),
+              viewBox: "0 0 24 24",
+              width: "100%",
+              height: "100%"
+            }),
+            backgroundRepeat: "no-repeat",
+            width: "1em",
+            height: "1em",
+            marginLeft: theme("spacing.1")
+          }
+        }
+      },
+      blockquote: {
+        paddingLeft: theme("spacing.4"),
+        borderLeft: "2px solid ".concat(theme("colors.grey.200")),
+        color: theme("colors.grey.600")
+      },
+      pre: _objectSpread(_objectSpread({}, mobile["display-code"]), {}, {
+        overflow: "auto",
+        maxWidth: "100%",
+        maxHeight: theme("spacing.64"),
+        margin: "".concat(theme("spacing.2"), " 0"),
+        padding: "".concat(theme("spacing.2"), " ").concat(theme("spacing.4")),
+        borderRadius: theme("borderRadius.DEFAULT"),
+        backgroundColor: theme("colors.grey.100"),
+        color: theme("colors.grey.700"),
+        code: {
+          display: "inline",
+          backgroundColor: "transparent",
+          color: "inherit"
+        }
+      }),
+      img: {
+        display: "block",
+        maxWidth: "100%",
+        height: "auto",
+        margin: "auto"
+      },
+      hr: {
+        borderWidth: "0 0 1px 0",
+        borderStyle: "solid",
+        borderColor: theme("colors.grey.200"),
+        marginTop: theme("spacing.6"),
+        marginBottom: theme("spacing.6")
+      },
+      "b, strong, th": {
+        fontWeight: "600"
+      },
+      table: {
+        width: "100%",
+        borderCollapse: "collapse",
+        textAlign: "left",
+        "th, td": {
+          padding: "8px 12px",
+          fontSize: theme("fontSize.base")
+        },
+        th: {
+          borderBottom: "1px solid ".concat(theme("colors.grey.200")),
+          fontWeight: "normal"
+        },
+        "tr:not(:last-child) td": {
+          borderBottom: "1px solid ".concat(theme("colors.grey.100"))
+        },
+        "tr:hover td": {
+          backgroundColor: rgba(theme("colors.grey.100"), 0.6)
+        }
+      }
+    }
+  });
+});

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

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

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

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

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

@@ -27,9 +27,7 @@ module.exports = plugin(function (_ref) {
         }
       },
       h1: mobile["display-xlarge"],
-      h2: _objectSpread(_objectSpread({}, mobile["display-large"]), {}, {
-        color: theme("colors.grey.600")
-      }),
+      h2: mobile["display-large"],
       h3: mobile["display-medium"],
       h4: mobile["display-small"],
       h5: mobile["display-heading"],

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

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

package/dist/cjs/Helpers/index.js

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