@algolia/satellite 2.2.3 → 2.3.0-rc.2

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

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

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

@@ -86,7 +86,9 @@ var AccordionHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref)
     meta = _ref3.meta,
     triggerIcon = _ref3.triggerIcon,
     triggerClassName = _ref3.triggerClassName,
-    className = _ref3.className;
+    className = _ref3.className,
+    titleWrapperClassName = _ref3.titleWrapperClassName,
+    titleClassName = _ref3.titleClassName;
   var TriggerIcon = triggerIcon || _Icons.ChevronDownIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Header, {
     className: className,
@@ -94,7 +96,7 @@ var AccordionHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref)
       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),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-3 grow"]))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-3 grow"]))), 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),
           "aria-hidden": true,
@@ -106,7 +108,7 @@ var AccordionHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref)
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-y-1 text-left grow"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
+            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),
             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"]))),

package/dist/cjs/Fields/TextArea/TextArea.d.ts

@@ -7,7 +7,11 @@ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     /**
      * The value of the `TextArea`.
      */
-    value?: string;
+    value?: string | number | readonly string[];
+    /**
+     * The default value of the `TextArea`.
+     */
+    defaultValue?: string | number | readonly string[];
     /**
      * The placeholder of the `TextArea`.
      */

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

@@ -14,7 +14,7 @@ var _Field = require("./../Field");
 var _Icons = require("./../../Icons");
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "placeholder", "required"];
+var _excluded = ["className", "placeholder", "required", "children"];
 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; }
@@ -44,6 +44,7 @@ var TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (
   var className = _ref.className,
     placeholder = _ref.placeholder,
     required = _ref.required,
+    children = _ref.children,
     textareaProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _useField = (0, _Field.useField)({
       required: required
@@ -65,7 +66,7 @@ var TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (
       "aria-invalid": isInvalid,
       ref: ref,
       placeholder: placeholder
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {}), children]
   });
 });
 TextArea.displayName = "TextArea";

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

@@ -8,6 +8,7 @@ var textAreaPlugin = plugin(function (_ref) {
   addComponents({
     ".text-area": {
       display: "flex",
+      flexDirection: "column",
       width: "100%",
       backgroundColor: theme("colors.white"),
       border: "1px solid ".concat(theme("colors.grey.500")),
@@ -44,7 +45,6 @@ var textAreaPlugin = plugin(function (_ref) {
       paddingRight: theme("spacing.6")
     },
     textarea: {
-      flex: "1",
       minWidth: "0px",
       caretColor: theme("colors.grey.600"),
       color: theme("colors.grey.900"),

package/dist/cjs/Fields/TextAreaAutoSize/TextAreaAutoSize.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { TextAreaProps } from "../../Fields/TextArea";
+export declare type TextAreaAutoSizeProps = TextAreaProps & {
+    /**
+     * The maximum number of rows the `TextArea` can expand to when `autoResize` is enabled.
+     * If set to 0, the `TextArea` will expand indefinitely.
+     * @default 0
+     */
+    maxRows?: number;
+};
+export declare const TextAreaAutoSize: import("react").ForwardRefExoticComponent<TextAreaProps & {
+    /**
+     * The maximum number of rows the `TextArea` can expand to when `autoResize` is enabled.
+     * If set to 0, the `TextArea` will expand indefinitely.
+     * @default 0
+     */
+    maxRows?: number | undefined;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/Fields/TextAreaAutoSize/TextAreaAutoSize.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextAreaAutoSize = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _TextAreaAutoSize = require("./TextAreaAutoSize.styles");
+var _TextArea = require("./../TextArea");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["maxRows", "className"];
+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 TextAreaAutoSize = exports.TextAreaAutoSize = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
+  var _ref$maxRows = _ref.maxRows,
+    maxRows = _ref$maxRows === void 0 ? 0 : _ref$maxRows,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var styles = (0, _TextAreaAutoSize.textAreaAutoSizeStyles)();
+  var internalRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(forwardedRef, function () {
+    return internalRef.current;
+  });
+  var lineHeightRef = (0, _react.useRef)(0);
+  var paddingRef = (0, _react.useRef)(0);
+  (0, _react.useLayoutEffect)(function () {
+    if (!internalRef.current) return;
+    var textArea = internalRef.current;
+    var styles = getComputedStyle(textArea);
+    lineHeightRef.current = parseFloat(styles.lineHeight);
+    var pt = parseFloat(styles.paddingTop);
+    var pb = parseFloat(styles.paddingBottom);
+    paddingRef.current = pt + pb;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    adjustHeight();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value, props.placeholder, props.rows, maxRows]);
+  var adjustHeight = function adjustHeight() {
+    if (!internalRef.current) return;
+    var textArea = internalRef.current;
+    textArea.style.height = "auto";
+    var fullHeight = textArea.scrollHeight;
+    if (maxRows > 0) {
+      var maxHeight = maxRows * lineHeightRef.current + paddingRef.current;
+      textArea.style.overflowY = fullHeight > maxHeight ? "auto" : "hidden";
+      textArea.style.height = "".concat(Math.min(fullHeight, maxHeight), "px");
+    } else {
+      textArea.style.overflowY = "hidden";
+      textArea.style.height = "".concat(fullHeight, "px");
+    }
+  };
+  (0, _react.useLayoutEffect)(function () {
+    if (!internalRef.current) return;
+    var ro = new ResizeObserver(function () {
+      return adjustHeight();
+    });
+    var textArea = internalRef.current;
+    ro.observe(textArea);
+    return function () {
+      return ro.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onInput = function onInput(e) {
+    var _props$onInput;
+    adjustHeight();
+    (_props$onInput = props.onInput) === null || _props$onInput === void 0 || _props$onInput.call(props, e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread(_objectSpread({}, props), {}, {
+    className: styles.base({
+      className: className
+    }),
+    ref: internalRef,
+    onInput: onInput
+  }));
+});
+TextAreaAutoSize.displayName = "TextAreaAutoSize";

package/dist/cjs/Fields/TextAreaAutoSize/TextAreaAutoSize.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const textAreaAutoSizeStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/cjs/Fields/TextAreaAutoSize/TextAreaAutoSize.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textAreaAutoSizeStyles = 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;
+var textAreaAutoSizeStyles = exports.textAreaAutoSizeStyles = (0, _tv.tv)({
+  slots: {
+    base: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["[&>textarea]:resize-none [&>textarea]:overflow-y-hidden"])))
+  }
+});

package/dist/cjs/Fields/TextAreaAutoSize/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextAreaAutoSizeProps as ExperimentalTextAreaAutoSizeProps } from "./TextAreaAutoSize";
+export { TextAreaAutoSize as ExperimentalTextAreaAutoSize } from "./TextAreaAutoSize";

package/dist/cjs/Fields/TextAreaAutoSize/index.js

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

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

@@ -11,5 +11,6 @@ export * from "./Input";
 export * from "./RadioGroup";
 export * from "./RangeSlider";
 export * from "./Select";
-export * from "./TextArea";
 export * from "./Switch";
+export * from "./TextArea";
+export * from "./TextAreaAutoSize";

package/dist/cjs/Fields/index.js

@@ -146,6 +146,17 @@ Object.keys(_Select).forEach(function (key) {
     }
   });
 });
+var _Switch = require("./Switch");
+Object.keys(_Switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Switch[key];
+    }
+  });
+});
 var _TextArea = require("./TextArea");
 Object.keys(_TextArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -157,14 +168,14 @@ Object.keys(_TextArea).forEach(function (key) {
     }
   });
 });
-var _Switch = require("./Switch");
-Object.keys(_Switch).forEach(function (key) {
+var _TextAreaAutoSize = require("./TextAreaAutoSize");
+Object.keys(_TextAreaAutoSize).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Switch[key]) return;
+  if (key in exports && exports[key] === _TextAreaAutoSize[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Switch[key];
+      return _TextAreaAutoSize[key];
     }
   });
 });

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

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from "react";
+export declare type ShimmerTextProps = HTMLAttributes<HTMLDivElement>;
+export declare const ShimmerText: import("react").ForwardRefExoticComponent<ShimmerTextProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShimmerText = 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 _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var _excluded = ["className"];
+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 ShimmerText = exports.ShimmerText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["shimmer-text"]))), className)
+  }));
+});
+ShimmerText.displayName = "ShimmerText";

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/Helpers/index.js

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AccordionProps } from "../../../Actions";
+import type { IconComponentType } from "../../../Icons";
+export declare type ChatContextAccordionProps = HTMLAttributes<HTMLDivElement> & AccordionProps & {
+    header: ReactNode;
+    icon?: IconComponentType;
+};
+export declare const ChatContextAccordion: ({ header, icon, children, className, ...props }: ChatContextAccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Layout/Chat/ChatContextAccordion/ChatContextAccordion.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatContextAccordion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _ChatContextAccordion = require("./ChatContextAccordion.styles");
+var _Actions = require("./../../../Actions");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["header", "icon", "children", "className"];
+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 ChatContextAccordion = exports.ChatContextAccordion = function ChatContextAccordion(_ref) {
+  var header = _ref.header,
+    icon = _ref.icon,
+    children = _ref.children,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var styles = (0, _ChatContextAccordion.chatContextAccordionStyles)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Accordion, _objectSpread(_objectSpread({}, props), {}, {
+    className: styles.base({
+      className: className
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Actions.Accordion.Item, {
+      value: "default",
+      className: styles.item(),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Accordion.Header, {
+        className: styles.header(),
+        triggerClassName: styles.trigger(),
+        titleWrapperClassName: styles.titleWrapper(),
+        titleClassName: styles.title(),
+        icon: icon,
+        iconBgClassName: styles.iconBg(),
+        children: header
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Accordion.Content, {
+        className: styles.content(),
+        children: children
+      })]
+    })
+  }));
+};

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

@@ -0,0 +1,67 @@
+export declare const chatContextAccordionStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            iconBg?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            titleWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            iconBg?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            titleWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    item: string;
+    header: string;
+    iconBg: string;
+    trigger: string;
+    titleWrapper: string;
+    title: string;
+    content: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            iconBg?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            titleWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    item: string;
+    header: string;
+    iconBg: string;
+    trigger: string;
+    titleWrapper: string;
+    title: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    item: string;
+    header: string;
+    iconBg: string;
+    trigger: string;
+    titleWrapper: string;
+    title: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/cjs/Layout/Chat/ChatContextAccordion/ChatContextAccordion.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chatContextAccordionStyles = 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;
+var chatContextAccordionStyles = exports.chatContextAccordionStyles = (0, _tv.tv)({
+  slots: {
+    base: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+    item: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["border border-grey-200 rounded-[4px] overflow-hidden"]))),
+    header: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["border-b border-grey-200 transition-colors duration-500 data-[state=closed]:border-b-transparent [&>div]:px-2"]))),
+    iconBg: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-none !size-auto"]))),
+    trigger: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["!px-2 !py-0.5"]))),
+    titleWrapper: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["gap-x-1"]))),
+    title: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["typo-subdued typo-display-caption"]))),
+    content: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 [&>div]:px-3 [&>div]:py-2 overflow-y-auto max-h-36"])))
+  }
+});

package/dist/cjs/Layout/Chat/ChatContextAccordion/index.d.ts

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

package/dist/cjs/Layout/Chat/ChatContextAccordion/index.js

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