@uniformdev/design-system 19.80.0 → 19.80.1-alpha.149

package/dist/esm/index.js

@@ -13746,7 +13746,7 @@ var CaptionText = (dynamicSize) => css45`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
-  margin: var(--spacing-xs) 0;
+  margin-block: var(--spacing-2xs) 1px;
   max-width: var(--prose);
 `;
 
@@ -16144,7 +16144,7 @@ var MediaCard = ({
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
-  return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, "data-testId": "card-item", children: [
+  return /* @__PURE__ */ jsxs58(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
     /* @__PURE__ */ jsx88("button", { tabIndex: -1, css: coverWrapper, children: cover }),
     /* @__PURE__ */ jsx88("div", { css: contentWrapper, children: /* @__PURE__ */ jsxs58(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
@@ -16182,7 +16182,7 @@ var MediaCard = ({
                   type: "button",
                   "aria-label": "More options",
                   css: menuButton,
-                  "data-testId": "button-more",
+                  "data-testid": "button-more",
                   children: /* @__PURE__ */ jsx88(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
                 }
               ),
@@ -17287,7 +17287,7 @@ var ParameterNameAndPublicIdInput = ({
         "data-af": "true",
         onBlur,
         onChange: onNameChange,
-        caption: nameCaption,
+        caption: !nameIdError ? nameCaption : void 0,
         placeholder: namePlaceholderText,
         readOnly,
         errorMessage: nameIdError,
@@ -17306,7 +17306,7 @@ var ParameterNameAndPublicIdInput = ({
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
-        caption: publicIdCaption,
+        caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
         menuItems: /* @__PURE__ */ jsx102(
@@ -19622,13 +19622,14 @@ var TableCellData = React24.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext5, useContext as useContext6, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 import {
-  Tab as ReakitTab,
-  TabList as ReakitTabList,
-  TabPanel as ReakitTabPanel,
-  useTabState
-} from "reakit/Tab";
+  Tab as AriakitTab,
+  TabList as AriakitTabList,
+  TabPanel as AriakitTabPanel,
+  TabProvider as AriakitTabProvider,
+  useTabStore as useAriakitTabStore
+} from "@ariakit/react";
+import { useCallback as useCallback8, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
 import { css as css94 } from "@emotion/react";
@@ -19657,48 +19658,60 @@ var tabButtonGroupStyles = css94`
 
 // src/components/Tabs/Tabs.tsx
 import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
-var CurrentTabContext = createContext5(null);
 var useCurrentTab = () => {
-  const context = useContext6(CurrentTabContext);
+  const context = useAriakitTabStore();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+var Tabs = ({
+  children,
+  onSelectedIdChange,
+  useHashForState,
+  selectedId,
+  manual,
+  ...props
+}) => {
   const selected = useMemo6(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = useTabState({ ...props, selectedId: selected });
-  useEffect16(() => {
-    var _a;
-    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
-    if (useHashForState && typeof window !== "undefined" && window.history) {
-      const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
-      window.history.pushState(null, "", hashValue);
-    }
-  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
+  const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = useCallback8(
+    (value) => {
+      const selectedValueWithoutNull = value != null ? value : void 0;
+      onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+      if (useHashForState && typeof window !== "undefined" && window.history) {
+        const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
+        window.history.replaceState(null, "", hashValue);
+      }
+    },
+    [onSelectedIdChange, useHashForState]
+  );
   useEffect16(() => {
-    if (selected && selected !== tab.selectedId) {
+    if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
-  }, [selected]);
-  return /* @__PURE__ */ jsx116(CurrentTabContext.Provider, { value: tab, children });
+  }, [selected, tab]);
+  return /* @__PURE__ */ jsx116(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx116(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx116(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
-var TabButton = ({ children, id, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx116(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+var TabButton = ({
+  children,
+  id,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx116(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
-var TabContent = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx116(ReakitTabPanel, { ...props, ...currentTab, children });
+var TabContent = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx116(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts

package/dist/index.d.mts

@@ -14,14 +14,14 @@ import * as _react_icons_all_files from '@react-icons/all-files';
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
-import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1 } from '@ariakit/react';
+import * as _ariakit_react from '@ariakit/react';
+import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
 import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
 import { PopoverProps as PopoverProps$1, PopoverInitialState } from 'reakit/Popover';
 import * as react_hotkeys_hook_dist_types from 'react-hotkeys-hook/dist/types';
-import { TabState, TabListProps, TabProps, TabPanelProps } from 'reakit/Tab';
 import { TooltipOptions, TooltipInitialState } from 'reakit/Tooltip';
 export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
 
@@ -22908,27 +22908,30 @@ declare const TableRow: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedH
 declare const TableCellHead: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCellData: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 
-declare const useCurrentTab: () => TabState;
-interface TabsProps {
+declare const useCurrentTab: () => _ariakit_react.TabStore;
+type TabsProps<TTabName extends string = string> = {
     children: React__default.ReactNode;
-    selectedId?: string;
+    selectedId?: TTabName;
     manual?: boolean;
-    orientation?: TabState['orientation'];
-    onSelectedIdChange?: (tabName: string | undefined) => void;
+    orientation?: TabStoreState['orientation'];
+    onSelectedIdChange?: (tabName: TTabName | undefined) => void;
+    /**
+     * @deprecated you can control the route state on the application level.
+     */
     useHashForState?: boolean;
-}
-declare const Tabs: ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, manual, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabButtonProps extends Partial<TabProps> {
-    id: string;
+type TabButtonProps<TTabName extends string = string> = Partial<TabProps> & {
+    id: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabButton: ({ children, id, ...props }: TabButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabContentProps extends Partial<TabPanelProps> {
-    id: string;
+};
+declare const TabButton: <TTabName extends string = string>({ children, id, ...props }: TabButtonProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+type TabContentProps<TTabName extends string = string> = Partial<TabPanelProps> & {
+    tabId?: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabContent: ({ children, ...props }: TabContentProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const TabContent: <TTabName extends string = string>({ children, ...props }: TabContentProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type CreateTeamIntegrationTileProps = React.HTMLAttributes<HTMLDivElement> & {
     /** (optional) sets the title value
@@ -23231,4 +23234,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps$1 as ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, Image, ImageBroken, ImageProps, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuGroup, MenuGroupProps, MenuItem, MenuItemInner, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Pagination, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressBar, ProgressBarProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RhythmProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TakeoverDrawerRenderer, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };
+export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, type ArrowPositionProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeSizeProps, type BadgeThemeProps, type BadgeThemeStyleProps, Banner, type BannerProps, type BannerType, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, ConnectToDataElementButton, type ConnectToDataElementButtonProps, Container, type ContainerProps, Counter, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, Fieldset, type FieldsetProps, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, InlineAlert, type InlineAlertProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationHeaderSection, type IntegrationHeaderSectionProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, JsonEditor, type JsonEditorProps, Label, LabelLeadingIcon, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, MediaCard, type MediaCardProps, Menu, MenuGroup, type MenuGroupProps, MenuItem, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, Modal, type ModalProps, MultilineChip, type MultilineChipProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, type ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, type SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, type SkeletonProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };

package/dist/index.d.ts

@@ -14,14 +14,14 @@ import * as _react_icons_all_files from '@react-icons/all-files';
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
-import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1 } from '@ariakit/react';
+import * as _ariakit_react from '@ariakit/react';
+import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
 import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
 import { PopoverProps as PopoverProps$1, PopoverInitialState } from 'reakit/Popover';
 import * as react_hotkeys_hook_dist_types from 'react-hotkeys-hook/dist/types';
-import { TabState, TabListProps, TabProps, TabPanelProps } from 'reakit/Tab';
 import { TooltipOptions, TooltipInitialState } from 'reakit/Tooltip';
 export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
 
@@ -22908,27 +22908,30 @@ declare const TableRow: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedH
 declare const TableCellHead: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCellData: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 
-declare const useCurrentTab: () => TabState;
-interface TabsProps {
+declare const useCurrentTab: () => _ariakit_react.TabStore;
+type TabsProps<TTabName extends string = string> = {
     children: React__default.ReactNode;
-    selectedId?: string;
+    selectedId?: TTabName;
     manual?: boolean;
-    orientation?: TabState['orientation'];
-    onSelectedIdChange?: (tabName: string | undefined) => void;
+    orientation?: TabStoreState['orientation'];
+    onSelectedIdChange?: (tabName: TTabName | undefined) => void;
+    /**
+     * @deprecated you can control the route state on the application level.
+     */
     useHashForState?: boolean;
-}
-declare const Tabs: ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, manual, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabButtonProps extends Partial<TabProps> {
-    id: string;
+type TabButtonProps<TTabName extends string = string> = Partial<TabProps> & {
+    id: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabButton: ({ children, id, ...props }: TabButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabContentProps extends Partial<TabPanelProps> {
-    id: string;
+};
+declare const TabButton: <TTabName extends string = string>({ children, id, ...props }: TabButtonProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+type TabContentProps<TTabName extends string = string> = Partial<TabPanelProps> & {
+    tabId?: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabContent: ({ children, ...props }: TabContentProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const TabContent: <TTabName extends string = string>({ children, ...props }: TabContentProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type CreateTeamIntegrationTileProps = React.HTMLAttributes<HTMLDivElement> & {
     /** (optional) sets the title value
@@ -23231,4 +23234,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps$1 as ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ChipTheme, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, DashedBoxProps, DescriptionList, DescriptionListProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContent, DrawerContentProps, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, DrawersRegistryRecord, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, IconButtonProps, IconColor, IconName, IconProps, IconType, IconsProvider, Image, ImageBroken, ImageProps, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelLeadingIcon, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, MediaCard, MediaCardProps, Menu, MenuGroup, MenuGroupProps, MenuItem, MenuItemInner, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, Modal, ModalProps, MultilineChip, MultilineChipProps, PageHeaderSection, PageHeaderSectionProps, Pagination, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressBar, ProgressBarProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RhythmProps, RichTextParamValue, RichTextToolbarIcon, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TakeoverDrawerRenderer, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };
+export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AnimationFile, type AnimationFileProps, type ArrowPositionProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeSizeProps, type BadgeThemeProps, type BadgeThemeStyleProps, Banner, type BannerProps, type BannerType, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps$1 as ButtonSizeProps, type ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, ConnectToDataElementButton, type ConnectToDataElementButtonProps, Container, type ContainerProps, Counter, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, Fieldset, type FieldsetProps, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, InlineAlert, type InlineAlertProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationHeaderSection, type IntegrationHeaderSectionProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, JsonEditor, type JsonEditorProps, Label, LabelLeadingIcon, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, MediaCard, type MediaCardProps, Menu, MenuGroup, type MenuGroupProps, MenuItem, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, Modal, type ModalProps, MultilineChip, type MultilineChipProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, type ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, type SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, type SkeletonProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getDrawerAttributes, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, isSecureURL, isValidUrl, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDrawer, useIconContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };

package/dist/index.js

@@ -15458,7 +15458,7 @@ var CaptionText = (dynamicSize) => import_react62.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
-  margin: var(--spacing-xs) 0;
+  margin-block: var(--spacing-2xs) 1px;
   max-width: var(--prose);
 `;
 
@@ -17936,7 +17936,7 @@ var MediaCard = ({
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card, { css: cardBase, ...cardProps, onClick, "data-testId": "card-item", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { tabIndex: -1, css: coverWrapper, children: cover }),
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: contentWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
@@ -17974,7 +17974,7 @@ var MediaCard = ({
                   type: "button",
                   "aria-label": "More options",
                   css: menuButton,
-                  "data-testId": "button-more",
+                  "data-testid": "button-more",
                   children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
                 }
               ),
@@ -19108,7 +19108,7 @@ var ParameterNameAndPublicIdInput = ({
         "data-af": "true",
         onBlur,
         onChange: onNameChange,
-        caption: nameCaption,
+        caption: !nameIdError ? nameCaption : void 0,
         placeholder: namePlaceholderText,
         readOnly,
         errorMessage: nameIdError,
@@ -19127,7 +19127,7 @@ var ParameterNameAndPublicIdInput = ({
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
-        caption: publicIdCaption,
+        caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
         menuItems: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
@@ -21435,8 +21435,8 @@ var TableCellData = React24.forwardRef(
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react137 = require("react");
-var import_Tab = require("reakit/Tab");
+var import_react137 = require("@ariakit/react");
+var import_react138 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
@@ -21466,48 +21466,60 @@ var tabButtonGroupStyles = import_react136.css`
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react137.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react137.useContext)(CurrentTabContext);
+  const context = (0, import_react137.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react137.useMemo)(() => {
+var Tabs = ({
+  children,
+  onSelectedIdChange,
+  useHashForState,
+  selectedId,
+  manual,
+  ...props
+}) => {
+  const selected = (0, import_react138.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react137.useEffect)(() => {
-    var _a;
-    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
-    if (useHashForState && typeof window !== "undefined" && window.history) {
-      const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
-      window.history.pushState(null, "", hashValue);
-    }
-  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react137.useEffect)(() => {
-    if (selected && selected !== tab.selectedId) {
+  const tab = (0, import_react137.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react138.useCallback)(
+    (value) => {
+      const selectedValueWithoutNull = value != null ? value : void 0;
+      onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+      if (useHashForState && typeof window !== "undefined" && window.history) {
+        const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
+        window.history.replaceState(null, "", hashValue);
+      }
+    },
+    [onSelectedIdChange, useHashForState]
+  );
+  (0, import_react138.useEffect)(() => {
+    if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
-  }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  }, [selected, tab]);
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
-var TabButton = ({ children, id, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+var TabButton = ({
+  children,
+  id,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
-var TabContent = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+var TabContent = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -21515,8 +21527,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react138 = require("@emotion/react");
-var StatusBulletContainer = import_react138.css`
+var import_react139 = require("@emotion/react");
+var StatusBulletContainer = import_react139.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -21533,33 +21545,33 @@ var StatusBulletContainer = import_react138.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react138.css`
+var StatusBulletBase = import_react139.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react138.css`
+var StatusBulletSmall = import_react139.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react138.css`
+var StatusDraft = import_react139.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react138.css`
+var StatusModified = import_react139.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react138.css`
+var StatusError = import_react139.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -21572,17 +21584,17 @@ var StatusError = import_react138.css`
     );
   }
 `;
-var StatusPublished = import_react138.css`
+var StatusPublished = import_react139.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react138.css`
+var StatusOrphan = import_react139.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react138.css`
+var StatusUnknown = import_react139.css`
   &:before {
     background: var(--brand-secondary-1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.80.0",
+  "version": "19.80.1-alpha.149+7f4e45fecc",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -21,16 +21,16 @@
     "@emotion/jest": "11.11.0",
     "@storybook/client-api": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
-    "@uniformdev/canvas": "^19.80.0",
-    "@uniformdev/richtext": "^19.80.0",
+    "@types/react": "18.2.40",
+    "@types/react-dom": "18.2.17",
+    "@uniformdev/canvas": "^19.80.1-alpha.149+7f4e45fecc",
+    "@uniformdev/richtext": "^19.80.1-alpha.149+7f4e45fecc",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "7.2.0"
+    "tsup": "8.0.1"
   },
   "dependencies": {
     "@ariakit/react": "^0.3.5",
@@ -53,7 +53,7 @@
     "react-hotkeys-hook": "4.4.1",
     "react-paginate": "8.2.0",
     "react-select": "5.7.7",
-    "react-use": "17.4.0",
+    "react-use": "17.4.2",
     "reakit": "1.3.11",
     "zod-to-json-schema": "3.21.4"
   },
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c61dce79f176cb5aa3cb163657326407f17dee6"
+  "gitHead": "7f4e45fecc013dc224fbd0a2975f6d208382b05e"
 }