@uniformdev/design-system 19.79.0 → 19.79.1-alpha.7

package/dist/esm/index.js

@@ -91,7 +91,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           /* off brand */
           --input-border: rgba(31, 43, 52, 0.5);
-          --ring: 0 0 0 0 var(--white), 0 0 0 3px var(--brand-primary-3);
+          --ring: 0 0 0 0 var(--white), 0 0 0 2px var(--brand-primary-3);
           --ring-inset: inset 0 0 0 0 var(--white), inset 0 0 0 3px var(--brand-primary-3);
 
           /* site settings */
@@ -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);
 `;
 
@@ -13999,7 +13999,7 @@ var WarningIcon = css50`
 // src/components/Input/WarningMessage.tsx
 import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
+  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
     /* @__PURE__ */ jsx55("span", { children: /* @__PURE__ */ jsx55(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -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 })
                 }
               ),
@@ -16286,6 +16286,12 @@ var Modal = React19.forwardRef(
     });
     useEffect10(() => {
       var _a;
+      if (!document.contains(dialogRef.current)) {
+        console.warn(
+          "The Modal component could not be rendered because it's not attached to the current Document."
+        );
+        return;
+      }
       (_a = dialogRef.current) == null ? void 0 : _a.showModal();
       return () => {
         var _a2;
@@ -16310,6 +16316,9 @@ var Modal = React19.forwardRef(
         style: { width, height: height === "auto" ? "min-content" : height },
         "data-testid": "side-dialog",
         onClick: onRequestClose,
+        onCancel: (e) => {
+          e.preventDefault();
+        },
         ...modalProps,
         children: /* @__PURE__ */ jsxs59("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
           /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
@@ -16657,6 +16666,11 @@ var inputMenu = css76`
   position: absolute;
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
+`;
+var inputActionItems = css76`
+  display: flex;
+`;
+var inputMenuHover = css76`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -16952,7 +16966,7 @@ var ParameterMenuButton = forwardRef12(
           "button",
           {
             className: "parameter-menu",
-            css: inputMenu,
+            css: [inputMenu, inputMenuHover],
             type: "button",
             "aria-label": `${label} options`,
             ref,
@@ -17074,9 +17088,7 @@ var ParameterShell = ({
         {
           css: [
             inputMenu,
-            css81`
-                opacity: var(--opacity-100);
-              `,
+            inputActionItems,
             menuItems ? css81`
                     right: var(--spacing-md);
                   ` : void 0
@@ -17281,7 +17293,7 @@ var ParameterNameAndPublicIdInput = ({
         "data-af": "true",
         onBlur,
         onChange: onNameChange,
-        caption: nameCaption,
+        caption: !nameIdError ? nameCaption : void 0,
         placeholder: namePlaceholderText,
         readOnly,
         errorMessage: nameIdError,
@@ -17300,7 +17312,7 @@ var ParameterNameAndPublicIdInput = ({
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
-        caption: publicIdCaption,
+        caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
         menuItems: /* @__PURE__ */ jsx102(
@@ -18895,7 +18907,7 @@ var RichText = ({
     return () => {
       removeUpdateListener();
     };
-  }, []);
+  }, [editor, onChange]);
   return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
@@ -19351,7 +19363,7 @@ var SegmentedControl = ({
     return map[size];
   }, [size]);
   const isIconOnly = useMemo5(() => {
-    return options.every((option) => option.icon && !option.label);
+    return options.every((option) => option && option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ jsx112(
     "div",
@@ -19359,6 +19371,9 @@ var SegmentedControl = ({
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
+        if (!option) {
+          return null;
+        }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
         return /* @__PURE__ */ jsx112(
@@ -19616,13 +19631,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";
@@ -19651,48 +19667,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';
 
@@ -74,7 +74,7 @@ declare const supports: (cssProp: string) => string;
  * @function
  * @param {string} size - The responsive breakpoint value
  * @returns {string} - compiled container query e.g. @container (min-width: 640px)
- * @example `${cq('300px`)} { background: red; }`
+ * @example `${cq('300px')} { background: red; }`
  */
 declare const cq: (size: string) => string;
 
@@ -22243,29 +22243,12 @@ type ModalProps = {
     withoutContentPadding?: boolean;
     /** Places buttons at the bottom of the modal */
     buttonGroup?: ReactNode;
-} & React__default.HTMLAttributes<HTMLDialogElement>;
+} & React__default.HTMLProps<HTMLDialogElement>;
 /**
  * A modal component to open a dialog with a backdrop that covers the whole page.
  * @example <Modal>Hello World</Modal>
  */
-declare const Modal: React__default.ForwardRefExoticComponent<{
-    header?: React__default.ReactNode;
-    children?: React__default.ReactNode;
-    /** Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked  */
-    onRequestClose: () => void;
-    /** A valid CSS width */
-    width?: string | undefined;
-    /** A valid CSS height */
-    height?: string | undefined;
-    /** The classname to set on the wrapper of the modal.
-     * @deprecated the dialog is not rendered inside a wrapper anymore.
-     */
-    wrapperClassName?: string | undefined;
-    /** Removes the default padding on the content wrapper */
-    withoutContentPadding?: boolean | undefined;
-    /** Places buttons at the bottom of the modal */
-    buttonGroup?: ReactNode;
-} & React__default.HTMLAttributes<HTMLDialogElement> & React__default.RefAttributes<HTMLDialogElement>>;
+declare const Modal: React__default.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React__default.RefAttributes<HTMLDialogElement>>;
 
 declare function Pagination({ limit, offset, total, onPageChange, }: {
     limit: number;
@@ -22793,7 +22776,7 @@ type SegmentedControlProps<TValue extends string = string> = Omit<React__default
     /** A unique name for the component, used to group the options */
     name: string;
     /** The options to show */
-    options: SegmentedControlOption<TValue>[];
+    options: Array<SegmentedControlOption<TValue> | undefined>;
     /** The value of the option to be selected */
     value?: TValue;
     /** Called when the user selects a different option */
@@ -22925,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
@@ -23248,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';
 
@@ -74,7 +74,7 @@ declare const supports: (cssProp: string) => string;
  * @function
  * @param {string} size - The responsive breakpoint value
  * @returns {string} - compiled container query e.g. @container (min-width: 640px)
- * @example `${cq('300px`)} { background: red; }`
+ * @example `${cq('300px')} { background: red; }`
  */
 declare const cq: (size: string) => string;
 
@@ -22243,29 +22243,12 @@ type ModalProps = {
     withoutContentPadding?: boolean;
     /** Places buttons at the bottom of the modal */
     buttonGroup?: ReactNode;
-} & React__default.HTMLAttributes<HTMLDialogElement>;
+} & React__default.HTMLProps<HTMLDialogElement>;
 /**
  * A modal component to open a dialog with a backdrop that covers the whole page.
  * @example <Modal>Hello World</Modal>
  */
-declare const Modal: React__default.ForwardRefExoticComponent<{
-    header?: React__default.ReactNode;
-    children?: React__default.ReactNode;
-    /** Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked  */
-    onRequestClose: () => void;
-    /** A valid CSS width */
-    width?: string | undefined;
-    /** A valid CSS height */
-    height?: string | undefined;
-    /** The classname to set on the wrapper of the modal.
-     * @deprecated the dialog is not rendered inside a wrapper anymore.
-     */
-    wrapperClassName?: string | undefined;
-    /** Removes the default padding on the content wrapper */
-    withoutContentPadding?: boolean | undefined;
-    /** Places buttons at the bottom of the modal */
-    buttonGroup?: ReactNode;
-} & React__default.HTMLAttributes<HTMLDialogElement> & React__default.RefAttributes<HTMLDialogElement>>;
+declare const Modal: React__default.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React__default.RefAttributes<HTMLDialogElement>>;
 
 declare function Pagination({ limit, offset, total, onPageChange, }: {
     limit: number;
@@ -22793,7 +22776,7 @@ type SegmentedControlProps<TValue extends string = string> = Omit<React__default
     /** A unique name for the component, used to group the options */
     name: string;
     /** The options to show */
-    options: SegmentedControlOption<TValue>[];
+    options: Array<SegmentedControlOption<TValue> | undefined>;
     /** The value of the option to be selected */
     value?: TValue;
     /** Called when the user selects a different option */
@@ -22925,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
@@ -23248,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

@@ -1661,7 +1661,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           /* off brand */
           --input-border: rgba(31, 43, 52, 0.5);
-          --ring: 0 0 0 0 var(--white), 0 0 0 3px var(--brand-primary-3);
+          --ring: 0 0 0 0 var(--white), 0 0 0 2px var(--brand-primary-3);
           --ring-inset: inset 0 0 0 0 var(--white), inset 0 0 0 3px var(--brand-primary-3);
 
           /* site settings */
@@ -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);
 `;
 
@@ -15723,7 +15723,7 @@ var WarningIcon = import_react68.css`
 // src/components/Input/WarningMessage.tsx
 var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { css: WarningIcon, icon: import_MdWarning2.MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -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 })
                 }
               ),
@@ -18080,6 +18080,12 @@ var Modal = import_react99.default.forwardRef(
     });
     (0, import_react99.useEffect)(() => {
       var _a;
+      if (!document.contains(dialogRef.current)) {
+        console.warn(
+          "The Modal component could not be rendered because it's not attached to the current Document."
+        );
+        return;
+      }
       (_a = dialogRef.current) == null ? void 0 : _a.showModal();
       return () => {
         var _a2;
@@ -18104,6 +18110,9 @@ var Modal = import_react99.default.forwardRef(
         style: { width, height: height === "auto" ? "min-content" : height },
         "data-testid": "side-dialog",
         onClick: onRequestClose,
+        onCancel: (e) => {
+          e.preventDefault();
+        },
         ...modalProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
           /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalHeaderStyles, children: [
@@ -18462,6 +18471,11 @@ var inputMenu = import_react102.css`
   position: absolute;
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
+`;
+var inputActionItems = import_react102.css`
+  display: flex;
+`;
+var inputMenuHover = import_react102.css`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -18769,7 +18783,7 @@ var ParameterMenuButton = (0, import_react108.forwardRef)(
           "button",
           {
             className: "parameter-menu",
-            css: inputMenu,
+            css: [inputMenu, inputMenuHover],
             type: "button",
             "aria-label": `${label} options`,
             ref,
@@ -18892,9 +18906,7 @@ var ParameterShell = ({
         {
           css: [
             inputMenu,
-            import_react110.css`
-                opacity: var(--opacity-100);
-              `,
+            inputActionItems,
             menuItems ? import_react110.css`
                     right: var(--spacing-md);
                   ` : void 0
@@ -19102,7 +19114,7 @@ var ParameterNameAndPublicIdInput = ({
         "data-af": "true",
         onBlur,
         onChange: onNameChange,
-        caption: nameCaption,
+        caption: !nameIdError ? nameCaption : void 0,
         placeholder: namePlaceholderText,
         readOnly,
         errorMessage: nameIdError,
@@ -19121,7 +19133,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)(
@@ -20688,7 +20700,7 @@ var RichText = ({
     return () => {
       removeUpdateListener();
     };
-  }, []);
+  }, [editor, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
     readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
@@ -21155,7 +21167,7 @@ var SegmentedControl = ({
     return map[size];
   }, [size]);
   const isIconOnly = (0, import_react132.useMemo)(() => {
-    return options.every((option) => option.icon && !option.label);
+    return options.every((option) => option && option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "div",
@@ -21163,6 +21175,9 @@ var SegmentedControl = ({
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
+        if (!option) {
+          return null;
+        }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
         return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
@@ -21429,8 +21444,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();
@@ -21460,48 +21475,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
@@ -21509,8 +21536,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);
@@ -21527,33 +21554,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 */
@@ -21566,17 +21593,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.79.0",
+  "version": "19.79.1-alpha.7+bd4b0c6f4",
   "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.79.0",
-    "@uniformdev/richtext": "^19.79.0",
+    "@types/react": "18.2.40",
+    "@types/react-dom": "18.2.17",
+    "@uniformdev/canvas": "^19.79.1-alpha.7+bd4b0c6f4",
+    "@uniformdev/richtext": "^19.79.1-alpha.7+bd4b0c6f4",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
-    "postcss": "8.4.31",
+    "postcss": "8.4.32",
     "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": "78f5ededbaa1a67d58d808eac23ab64769e14e10"
+  "gitHead": "bd4b0c6f4a67549f8eb7e127a85927c798e7eed0"
 }