@algolia/satellite 1.4.1 → 1.6.0

package/dist/cjs/Fields/Form/stories/ValidationStrategies.js

@@ -137,7 +137,7 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-4/6"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-5/6"]))),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
       onSubmit: handleSubmit(function (data) {
         return setFormData(data);
@@ -145,7 +145,7 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
         name: "cardOwner",
         control: control,
@@ -268,7 +268,7 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -327,7 +327,7 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
   };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-4/6"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-5/6"]))),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
       onSubmit: function onSubmit(e) {
         setRevalidationEnabled(true);
@@ -337,7 +337,7 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
         label: "Card Owner",
         labelFor: "cardOwner",
@@ -448,7 +448,7 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

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

@@ -1,8 +1,7 @@
-import type { VFC } from "react";
-export interface TextWrapProps extends Omit<JSX.IntrinsicElements["span"], "children"> {
+import type { HTMLAttributes, VFC } from "react";
+export interface TextWrapProps extends HTMLAttributes<HTMLSpanElement> {
     /** The max number of lines before the text is cut with an ellipsis */
     maxLines?: number;
-    children: string;
 }
 /**
  * The `TextWrap` component is used to wrap text and truncate it with an ellipsis if it overflows.

package/dist/cjs/Helpers/TextWrap/TextWrap.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextWrap = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _isCssPropertySupported = require("../../utils/isCssPropertySupported");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,6 +27,18 @@ var SEPARATOR_ELEMENT = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
   "aria-hidden": "true",
   children: "\u200B"
 });
+var SPLIT_REGEX = /([\W_]+)/g;
+var recursivelyApplyWhiteSpace = function recursivelyApplyWhiteSpace(children) {
+  return _react.Children.map(children, function (child) {
+    return /*#__PURE__*/(0, _react.isValidElement)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      children: recursivelyApplyWhiteSpace(child.props.children)
+    })) : typeof child === "string" ? child.split(SPLIT_REGEX).map(function (text, index, arr) {
+      return text ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [text, index < arr.length - 1 ? SEPARATOR_ELEMENT : null]
+      }, index) : null;
+    }) : child;
+  });
+};
 
 /**
  * The `TextWrap` component is used to wrap text and truncate it with an ellipsis if it overflows.
@@ -33,7 +46,7 @@ var SEPARATOR_ELEMENT = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
  * See the [Text Wrap documentation page](https://satellite.algolia.com/components/misc/text-wrap) for more information.
  */
 var TextWrap = exports.TextWrap = function TextWrap(_ref) {
-  var text = _ref.children,
+  var children = _ref.children,
     maxLines = _ref.maxLines,
     style = _ref.style,
     spanProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -46,13 +59,6 @@ var TextWrap = exports.TextWrap = function TextWrap(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
     style: _objectSpread(_objectSpread({}, clampStyle), style)
   }, spanProps), {}, {
-    children: text.split(/([\W_]+)/).flatMap(function (part, idx) {
-      if (!part) {
-        return null;
-      }
-      return idx % 2 === 0 ? part : /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        children: [part, SEPARATOR_ELEMENT]
-      }, "".concat(idx, "-").concat(part));
-    }).filter(Boolean)
+    children: recursivelyApplyWhiteSpace(children)
   }));
 };

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

@@ -17,4 +17,4 @@ export { QueryBreakdownIcon } from "./QueryBreakdownIcon";
 export { BulbIcon } from "./BulbIcon";
 export { TestingIcon } from "./TestingIcon";
 export { RocketIcon } from "./RocketIcon";
-export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
+export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, Landmark, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";

package/dist/cjs/Icons/index.js

@@ -855,6 +855,12 @@ Object.defineProperty(exports, "ImageIcon", {
     return _lucideReact.ImageIcon;
   }
 });
+Object.defineProperty(exports, "ImageOffIcon", {
+  enumerable: true,
+  get: function get() {
+    return _lucideReact.ImageOffIcon;
+  }
+});
 Object.defineProperty(exports, "InboxIcon", {
   enumerable: true,
   get: function get() {
@@ -885,6 +891,12 @@ Object.defineProperty(exports, "KeyIcon", {
     return _lucideReact.KeyIcon;
   }
 });
+Object.defineProperty(exports, "Landmark", {
+  enumerable: true,
+  get: function get() {
+    return _lucideReact.Landmark;
+  }
+});
 Object.defineProperty(exports, "LayersIcon", {
   enumerable: true,
   get: function get() {
@@ -1341,12 +1353,30 @@ Object.defineProperty(exports, "SearchIcon", {
     return _lucideReact.SearchIcon;
   }
 });
+Object.defineProperty(exports, "SearchXIcon", {
+  enumerable: true,
+  get: function get() {
+    return _lucideReact.SearchXIcon;
+  }
+});
 Object.defineProperty(exports, "SendIcon", {
   enumerable: true,
   get: function get() {
     return _lucideReact.SendIcon;
   }
 });
+Object.defineProperty(exports, "ServerCogIcon", {
+  enumerable: true,
+  get: function get() {
+    return _lucideReact.ServerCogIcon;
+  }
+});
+Object.defineProperty(exports, "ServerCrashIcon", {
+  enumerable: true,
+  get: function get() {
+    return _lucideReact.ServerCrashIcon;
+  }
+});
 Object.defineProperty(exports, "ServerIcon", {
   enumerable: true,
   get: function get() {

package/dist/cjs/Indicators/Skeleton/Skeleton.js

@@ -31,7 +31,7 @@ var Skeleton = exports.Skeleton = function Skeleton(_ref) {
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
     "aria-hidden": true,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200/80 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), className),
     children: image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ImageIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
     }) : null

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

@@ -8,3 +8,4 @@ export * from "./ProgressSpinner";
 export * from "./ScrollIndicator";
 export * from "./Tag";
 export * from "./Toast";
+export * from "./Skeleton";

package/dist/cjs/Indicators/index.js

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

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

@@ -48,10 +48,6 @@ var buttonPlugin = plugin(function (_ref) {
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
         borderColor: theme("colors.grey.200")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-        boxShadow: "0 2px 0 1px ".concat(theme("colors.shadow.5"))
-      },
       "&:active, &.btn-active": {
         borderColor: theme("colors.grey.200"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
@@ -74,10 +70,6 @@ var buttonPlugin = plugin(function (_ref) {
         backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.600"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
-        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
-      },
       "&:active, &.btn-active": {
         backgroundColor: theme("colors.accent.700"),
         borderColor: theme("colors.accent.800"),
@@ -101,10 +93,6 @@ var buttonPlugin = plugin(function (_ref) {
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.red.600"), " 0%, ").concat(theme("colors.red.700"), " 100%)"),
-        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
-      },
       "&:active, &.btn-active": {
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")

package/dist/esm/Fields/AutoComplete/AutoComplete.js

@@ -275,11 +275,9 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     // We need to make sure to define event handlers here so that they can be composed properly
     onFocus: function onFocus(evt) {
-      var _menuPopper$update2;
       _onFocus === null || _onFocus === void 0 || _onFocus(evt);
       if (evt.defaultPrevented) return;
       setInputFocused(true);
-      (_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 || _menuPopper$update2.call(menuPopper);
     },
     onBlur: function onBlur(evt) {
       _onBlur === null || _onBlur === void 0 || _onBlur(evt);
@@ -321,6 +319,12 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       inputValue: inputValue
     });
   }, [inputRef, internalsRef, inputValue]);
+  var oldHideMenu = useRef(hideMenu);
+  if (oldHideMenu.current !== hideMenu) {
+    var _menuPopper$update2;
+    oldHideMenu.current = hideMenu;
+    (_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 || _menuPopper$update2.call(menuPopper);
+  }
   return /*#__PURE__*/_jsx(AutoCompleteProvider, {
     locale: locale,
     children: /*#__PURE__*/_jsxs("div", {

package/dist/esm/Fields/Field/Field.d.ts

@@ -3,18 +3,22 @@ import type { FieldState } from "./FieldContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;
-    /** Label to display above the nested input */
+    /** Define a label to display above the nested input. */
     label?: ReactChild;
+    /** Define the `id` of the label. */
     labelId?: string;
+    /** Define the `id` of the input used by the label. */
     labelFor?: string;
-    /** Helpful description to show below the `Field` */
+    /** Define an helpful description to show below the `Field`. */
     description?: ReactNode;
-    /**
-     * An object to handle state
-     */
+    /** Define the state of the `Field`. */
     state?: FieldState;
+    /** Define if the `Field` should be displayed inline. */
     inline?: boolean;
+    /** Define if the `Field` is required. */
     required?: boolean;
+    /** Define the visibility of the required indicator. */
+    hideRequiredIndicator?: boolean;
     children: ReactNode;
 }
 /**

package/dist/esm/Fields/Field/Field.js

@@ -26,6 +26,8 @@ export var Field = function Field(_ref) {
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     requiredProp = _ref.required,
+    _ref$hideRequiredIndi = _ref.hideRequiredIndicator,
+    hideRequiredIndicator = _ref$hideRequiredIndi === void 0 ? false : _ref$hideRequiredIndi,
     children = _ref.children;
   var hasLabel = !!label;
   var labelId = useMemo(
@@ -86,8 +88,8 @@ export var Field = function Field(_ref) {
         children: [hasLabel && /*#__PURE__*/_jsxs("div", {
           id: labelId,
           className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
-          children: [label, (requiredProp || requiredContext) && /*#__PURE__*/_jsx("span", {
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-red-700 ml-0.5"]))),
+          children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-red-700 ml-0.5 align-top"]))),
             "aria-hidden": true,
             children: "*"
           })]

package/dist/esm/Fields/Form/stories/AsynchronousValidation.js

@@ -179,7 +179,7 @@ export var RHFAsyncValidationComponent = function RHFAsyncValidationComponent()
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
         name: "username",
         control: control,
@@ -235,7 +235,7 @@ export var RHFAsyncValidationComponent = function RHFAsyncValidationComponent()
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -337,7 +337,7 @@ export var FormikAsyncValidationComponent = function FormikAsyncValidationCompon
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
         label: "Username",
         labelFor: "username",
@@ -379,7 +379,7 @@ export var FormikAsyncValidationComponent = function FormikAsyncValidationCompon
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/esm/Fields/Form/stories/Complex.js

@@ -199,7 +199,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
         name: "firstName",
         control: control,
@@ -554,7 +554,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -637,7 +637,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
         label: "First Name",
         labelFor: "firstName",
@@ -908,7 +908,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js

@@ -75,7 +75,7 @@ export var RHFDependentFieldsValidationComponent = function RHFDependentFieldsVa
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
         name: "password",
         control: control,
@@ -131,7 +131,7 @@ export var RHFDependentFieldsValidationComponent = function RHFDependentFieldsVa
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -190,7 +190,7 @@ export var FormikDependentFieldsValidationComponent = function FormikDependentFi
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
         label: "Password",
         labelFor: "password",
@@ -232,7 +232,7 @@ export var FormikDependentFieldsValidationComponent = function FormikDependentFi
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/esm/Fields/Form/stories/DirtyFields.js

@@ -85,7 +85,7 @@ export var RHFDirtyFieldsComponent = function RHFDirtyFieldsComponent() {
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
         name: "name",
         control: control,
@@ -182,7 +182,7 @@ export var RHFDirtyFieldsComponent = function RHFDirtyFieldsComponent() {
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -253,7 +253,7 @@ export var FormikDirtyFieldsComponent = function FormikDirtyFieldsComponent() {
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
         label: "Name",
         labelFor: "name",
@@ -322,7 +322,7 @@ export var FormikDirtyFieldsComponent = function FormikDirtyFieldsComponent() {
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js

@@ -105,7 +105,7 @@ export var RHFDynamicFieldsValidationComponent = function RHFDynamicFieldsValida
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
         name: "name",
         control: control,
@@ -237,7 +237,7 @@ export var RHFDynamicFieldsValidationComponent = function RHFDynamicFieldsValida
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -318,7 +318,7 @@ export var FormikDynamicFieldsValidationComponent = function FormikDynamicFields
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
         label: "Name",
         labelFor: "name",
@@ -408,7 +408,7 @@ export var FormikDynamicFieldsValidationComponent = function FormikDynamicFields
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/esm/Fields/Form/stories/FieldArrays.js

@@ -112,7 +112,7 @@ export var RHFFieldsArraysComponent = function RHFFieldsArraysComponent() {
         onReset: function onReset() {
           return setFormData(initialFormData);
         },
-        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
         children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), fields.map(function (field, index) {
           return /*#__PURE__*/_jsxs("div", {
             className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full flex flex-col gap-2"]))),
@@ -164,7 +164,7 @@ export var RHFFieldsArraysComponent = function RHFFieldsArraysComponent() {
       }), /*#__PURE__*/_jsx("hr", {
         className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-grey-500"])))
       }), /*#__PURE__*/_jsx("code", {
-        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre"]))),
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     }))
@@ -205,7 +205,7 @@ var RHFFilter = function RHFFilter(_ref) {
     }
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-4 bg-grey-100 border border-grey-200 rounded p-4"]))),
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
     children: [fields.map(function (field, index) {
       return /*#__PURE__*/_jsxs("div", {
         className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["w-full flex items-stretch gap-2"]))),
@@ -360,7 +360,7 @@ export var FormikFieldArraysComponent = function FormikFieldArraysComponent() {
             setRevalidationEnabled(false);
             handleReset(e);
           },
-          className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-4 min-w-72"]))),
+          className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
           children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(FieldArray, {
             name: "filterGroups",
             render: function render(_ref6) {
@@ -420,7 +420,7 @@ export var FormikFieldArraysComponent = function FormikFieldArraysComponent() {
     }), /*#__PURE__*/_jsx("hr", {
       className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-grey-500"])))
     }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["whitespace-pre"]))),
+      className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -453,7 +453,7 @@ var FormikFilter = function FormikFilter(_ref7) {
         remove = _ref8.remove,
         form = _ref8.form;
       return /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-4 bg-grey-100 border border-grey-200 rounded p-4"]))),
+        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
         children: [formik.values.filterGroups[parentIndex].map(function (_, index) {
           var _form$values$filterGr;
           return /*#__PURE__*/_jsxs("div", {