@wallarm-org/design-system 0.59.0 → 0.61.0-rc-feature-WDS-73-empty.1

package/dist/components/AnimatedBackground/AnimatedBackground.js

@@ -99,7 +99,7 @@ const AnimatedBackground = (props)=>{
         "data-slot": "animated-background",
         ...rest,
         ref: ref,
-        className: cn('relative', className),
+        className: cn('relative h-full w-full', className),
         children: [
             /*#__PURE__*/ jsx("canvas", {
                 ref: canvasRef,

package/dist/components/Banner/Banner.d.ts

@@ -7,12 +7,6 @@ export interface BannerProps extends Omit<VariantProps<typeof bannerVariants>, '
     ref?: Ref<HTMLDivElement>;
     /** Visual variant of the banner */
     variant?: BannerVariant;
-    /**
-     * Leading icon. The destructive, info, and warning variants render a default
-     * icon when this is omitted; primary and secondary render none. Passing an
-     * icon always overrides the default.
-     */
-    icon?: ReactNode;
     /** Banner content — compose with Banner sub-components */
     children?: ReactNode;
 }
@@ -25,7 +19,7 @@ export interface BannerProps extends Omit<VariantProps<typeof bannerVariants>, '
  * them is resolved.
  *
  * Supports 5 variants: primary (dark/neutral), secondary, destructive, info,
- * and warning. Compose with: BannerContent, BannerTitle, BannerDescription,
- * BannerLink, BannerControls, BannerClose.
+ * and warning. Compose with: BannerIcon, BannerContent, BannerTitle,
+ * BannerDescription, BannerLink, BannerControls, BannerClose.
  */
 export declare const Banner: FC<BannerProps>;

package/dist/components/Banner/Banner.figma.js

@@ -6,6 +6,7 @@ import { BannerClose } from "./BannerClose.js";
 import { BannerContent } from "./BannerContent.js";
 import { BannerControls } from "./BannerControls.js";
 import { BannerDescription } from "./BannerDescription.js";
+import { BannerIcon } from "./BannerIcon.js";
 import { BannerLink } from "./BannerLink.js";
 import { BannerTitle } from "./BannerTitle.js";
 const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7688-3741';
@@ -29,6 +30,7 @@ code_connect.connect(Banner, figmaNodeUrl, {
     example: ({ variant, description, inlineAction, rightActions, closable, title, text })=>/*#__PURE__*/ jsxs(Banner, {
             variant: variant,
             children: [
+                /*#__PURE__*/ jsx(BannerIcon, {}),
                 /*#__PURE__*/ jsxs(BannerContent, {
                     children: [
                         /*#__PURE__*/ jsx(BannerTitle, {

package/dist/components/Banner/Banner.js

@@ -1,14 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { BannerVariantProvider } from "./BannerContext.js";
-import { BannerIcon } from "./BannerIcon.js";
 import { bannerVariants } from "./classes.js";
-const Banner = ({ ref, variant = 'primary', icon, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(BannerVariantProvider, {
+const Banner = ({ ref, variant = 'primary', className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(BannerVariantProvider, {
         value: variant,
         children: /*#__PURE__*/ jsx(TestIdProvider, {
             value: testId,
-            children: /*#__PURE__*/ jsxs("div", {
+            children: /*#__PURE__*/ jsx("div", {
                 ...props,
                 ref: ref,
                 role: "status",
@@ -18,12 +17,7 @@ const Banner = ({ ref, variant = 'primary', icon, className, children, 'data-tes
                 className: cn(bannerVariants({
                     variant
                 }), className),
-                children: [
-                    /*#__PURE__*/ jsx(BannerIcon, {
-                        icon: icon
-                    }),
-                    children
-                ]
+                children: children
             })
         })
     });

package/dist/components/Banner/BannerIcon.d.ts

@@ -1,14 +1,18 @@
-import type { FC, ReactNode } from 'react';
-export interface BannerIconProps {
-    /** Custom icon — always overrides the variant default. */
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface BannerIconProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    /** Override the default icon for the variant. */
     icon?: ReactNode;
 }
 /**
- * Leading icon for Banner — rendered internally by Banner, not part of the
- * public API.
+ * Leading icon for Banner — compose it as a child of Banner.
  *
- * The destructive, info, and warning variants show a default icon; primary and
- * secondary show none. A custom `icon` (passed via Banner's `icon` prop) always
- * overrides the default. Renders nothing when there is no icon to show.
+ * Automatically displays the appropriate icon based on the parent Banner's
+ * variant: destructive, info, and warning each render a default icon; primary
+ * and secondary render none. Pass a custom `icon` to override the default (or
+ * to add an icon to primary/secondary).
+ *
+ * Renders nothing when there is no icon to show — i.e. on a variant without a
+ * default icon and no custom `icon` provided.
  */
 export declare const BannerIcon: FC<BannerIconProps>;

package/dist/components/Banner/BannerIcon.js

@@ -8,7 +8,7 @@ const defaultIconMap = {
     info: Info,
     warning: TriangleAlert
 };
-const BannerIcon = ({ icon })=>{
+const BannerIcon = ({ ref, icon, ...props })=>{
     const testId = useTestId('icon');
     const variant = useBannerVariant();
     const DefaultIcon = defaultIconMap[variant];
@@ -20,6 +20,8 @@ const BannerIcon = ({ icon })=>{
     }) : null);
     if (null == content) return null;
     return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
         "data-slot": "banner-icon",
         "data-testid": testId,
         className: "flex items-center py-2 shrink-0",

package/dist/components/Banner/index.d.ts

@@ -3,5 +3,6 @@ export { BannerClose, type BannerCloseProps } from './BannerClose';
 export { BannerContent, type BannerContentProps } from './BannerContent';
 export { BannerControls, type BannerControlsProps } from './BannerControls';
 export { BannerDescription, type BannerDescriptionProps } from './BannerDescription';
+export { BannerIcon, type BannerIconProps } from './BannerIcon';
 export { BannerLink, type BannerLinkProps } from './BannerLink';
 export { BannerTitle, type BannerTitleProps } from './BannerTitle';

package/dist/components/Banner/index.js

@@ -3,6 +3,7 @@ import { BannerClose } from "./BannerClose.js";
 import { BannerContent } from "./BannerContent.js";
 import { BannerControls } from "./BannerControls.js";
 import { BannerDescription } from "./BannerDescription.js";
+import { BannerIcon } from "./BannerIcon.js";
 import { BannerLink } from "./BannerLink.js";
 import { BannerTitle } from "./BannerTitle.js";
-export { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle };
+export { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle };

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
+import { emptyStateVariants } from './classes';
+export interface EmptyStateProps extends Omit<VariantProps<typeof emptyStateVariants>, 'type'>, Omit<HTMLAttributes<HTMLDivElement>, 'type'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    type?: 'collection-empty' | 'no-results';
+    children?: ReactNode;
+}
+export declare const EmptyState: FC<EmptyStateProps>;

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { emptyStateVariants } from "./classes.js";
+const EmptyState = ({ ref, type = 'collection-empty', className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            role: "status",
+            "data-slot": "empty-state",
+            "data-testid": testId,
+            className: cn(emptyStateVariants({
+                type
+            }), className),
+            children: children
+        })
+    });
+EmptyState.displayName = 'EmptyState';
+export { EmptyState };

package/dist/components/EmptyState/EmptyStateActions.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface EmptyStateActionsProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const EmptyStateActions: FC<EmptyStateActionsProps>;

package/dist/components/EmptyState/EmptyStateActions.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const EmptyStateActions = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('actions');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "empty-state-actions",
+        "data-testid": testId,
+        className: cn('flex items-center justify-center gap-12', className),
+        children: children
+    });
+};
+EmptyStateActions.displayName = 'EmptyStateActions';
+export { EmptyStateActions };

package/dist/components/EmptyState/EmptyStateDescription.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface EmptyStateDescriptionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const EmptyStateDescription: FC<EmptyStateDescriptionProps>;

package/dist/components/EmptyState/EmptyStateDescription.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const EmptyStateDescription = ({ ref, children, ...props })=>{
+    const testId = useTestId("description");
+    return /*#__PURE__*/ jsx(Text, {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "empty-state-description",
+        size: "xs",
+        color: "secondary",
+        align: "center",
+        children: children
+    });
+};
+EmptyStateDescription.displayName = "EmptyStateDescription";
+export { EmptyStateDescription };

package/dist/components/EmptyState/EmptyStateIllustration.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface EmptyStateIllustrationProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const EmptyStateIllustration: FC<EmptyStateIllustrationProps>;

package/dist/components/EmptyState/EmptyStateIllustration.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const EmptyStateIllustration = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('illustration');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "empty-state-illustration",
+        "data-testid": testId,
+        className: cn('text-text-secondary p-8 border border-border-primary bg-bg-light-primary rounded-full w-36 h-36 flex items-center justify-center', className),
+        children: children
+    });
+};
+EmptyStateIllustration.displayName = 'EmptyStateIllustration';
+export { EmptyStateIllustration };

package/dist/components/EmptyState/EmptyStateLink.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type LinkProps } from '../Link';
+export type EmptyStateLinkProps = LinkProps;
+export declare const EmptyStateLink: FC<EmptyStateLinkProps>;

package/dist/components/EmptyState/EmptyStateLink.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Link } from "../Link/index.js";
+const EmptyStateLink = ({ size = 'md', ...props })=>{
+    const testId = useTestId('link');
+    return /*#__PURE__*/ jsx(Link, {
+        ...props,
+        size: size,
+        "data-slot": "empty-state-link",
+        "data-testid": testId
+    });
+};
+EmptyStateLink.displayName = 'EmptyStateLink';
+export { EmptyStateLink };

package/dist/components/EmptyState/EmptyStateMessage.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface EmptyStateMessageProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const EmptyStateMessage: FC<EmptyStateMessageProps>;

package/dist/components/EmptyState/EmptyStateMessage.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const EmptyStateMessage = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('message');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "empty-state-message",
+        "data-testid": testId,
+        className: cn('flex flex-col items-center gap-8', className),
+        children: children
+    });
+};
+EmptyStateMessage.displayName = 'EmptyStateMessage';
+export { EmptyStateMessage };

package/dist/components/EmptyState/EmptyStateTitle.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface EmptyStateTitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    ref?: Ref<HTMLParagraphElement>;
+    children?: ReactNode;
+}
+export declare const EmptyStateTitle: FC<EmptyStateTitleProps>;

package/dist/components/EmptyState/EmptyStateTitle.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const EmptyStateTitle = ({ ref, className, children, ...props })=>{
+    const testId = useTestId('title');
+    return /*#__PURE__*/ jsx("p", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "empty-state-title",
+        className: cn('font-pixel text-base leading-base text-text-primary text-center break-words', className),
+        children: children
+    });
+};
+EmptyStateTitle.displayName = 'EmptyStateTitle';
+export { EmptyStateTitle };

package/dist/components/EmptyState/classes.d.ts

@@ -0,0 +1,4 @@
+export type EmptyStateType = 'collection-empty' | 'no-results';
+export declare const emptyStateVariants: (props?: ({
+    type?: "collection-empty" | "no-results" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/EmptyState/classes.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+const emptyStateVariants = cva('flex flex-col items-center text-center gap-16', {
+    variants: {
+        type: {
+            'collection-empty': 'max-w-[560px] min-w-[256px]',
+            'no-results': 'w-[240px] py-8'
+        }
+    },
+    defaultVariants: {
+        type: 'collection-empty'
+    }
+});
+export { emptyStateVariants };

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1,8 @@
+export type { EmptyStateType } from './classes';
+export { EmptyState, type EmptyStateProps } from './EmptyState';
+export { EmptyStateActions, type EmptyStateActionsProps } from './EmptyStateActions';
+export { EmptyStateDescription, type EmptyStateDescriptionProps } from './EmptyStateDescription';
+export { EmptyStateIllustration, type EmptyStateIllustrationProps } from './EmptyStateIllustration';
+export { EmptyStateLink, type EmptyStateLinkProps } from './EmptyStateLink';
+export { EmptyStateMessage, type EmptyStateMessageProps } from './EmptyStateMessage';
+export { EmptyStateTitle, type EmptyStateTitleProps } from './EmptyStateTitle';

package/dist/components/EmptyState/index.js

@@ -0,0 +1,8 @@
+import { EmptyState } from "./EmptyState.js";
+import { EmptyStateActions } from "./EmptyStateActions.js";
+import { EmptyStateDescription } from "./EmptyStateDescription.js";
+import { EmptyStateIllustration } from "./EmptyStateIllustration.js";
+import { EmptyStateLink } from "./EmptyStateLink.js";
+import { EmptyStateMessage } from "./EmptyStateMessage.js";
+import { EmptyStateTitle } from "./EmptyStateTitle.js";
+export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle };

package/dist/components/Select/SelectEmptyState.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
-import { Text } from "../Text/index.js";
-const SelectEmptyState = ()=>/*#__PURE__*/ jsx("div", {
-        className: cn('p-6 text-center'),
-        children: /*#__PURE__*/ jsx(Text, {
-            size: "sm",
-            color: "secondary",
-            children: "No results"
+import { EmptyState, EmptyStateDescription, EmptyStateMessage } from "../EmptyState/index.js";
+const SelectEmptyState = ()=>/*#__PURE__*/ jsx(EmptyState, {
+        type: "no-results",
+        children: /*#__PURE__*/ jsx(EmptyStateMessage, {
+            children: /*#__PURE__*/ jsx(EmptyStateDescription, {
+                children: "No results"
+            })
         })
     });
 SelectEmptyState.displayName = 'SelectEmptyState';

package/dist/components/Select/SelectPositioner.js

@@ -8,7 +8,7 @@ const SelectPositioner = ({ className, children, ...props })=>/*#__PURE__*/ jsx(
             ...props,
             className: "outline-none",
             children: /*#__PURE__*/ jsx(Select.Content, {
-                className: cn(dropdownMenuClassNames, 'flex flex-col', 'h-full', 'min-w-280', 'max-w-320', 'max-h-(--available-height)', 'p-0', 'origin-[--transform-origin]', className),
+                className: cn(dropdownMenuClassNames, 'flex flex-col', 'h-full', 'min-w-240', 'max-w-320', 'max-h-(--available-height)', 'p-0', 'origin-[--transform-origin]', className),
                 children: children
             })
         })

package/dist/components/UtilityPage/UtilityPage.js

@@ -8,25 +8,25 @@ const UtilityPage = ({ ref, title, subtitle, description, className, children, .
         "data-slot": "utility-page",
         className: cn('min-h-screen w-full bg-component-app-shell-bg', className),
         children: /*#__PURE__*/ jsxs("div", {
-            className: "flex w-[482px] flex-col items-center gap-32 rounded-12 border-1 border-border-primary-light bg-bg-surface-1 px-48 pt-32 pb-80 shadow-xs",
+            className: "flex w-[482px] flex-col items-center gap-32 rounded-12 border-1 border-border-primary-light bg-bg-surface-1 px-48 pt-32 pb-80",
             children: [
                 /*#__PURE__*/ jsx(Logo, {
                     type: "full",
-                    size: "lg",
+                    size: "md",
                     className: "self-start mb-32"
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: "w-full flex flex-col items-start gap-12",
+                    className: "w-full flex flex-col items-start",
                     children: [
                         /*#__PURE__*/ jsx("h1", {
-                            className: "font-mono text-6xl font-medium text-text-primary",
+                            className: "font-mono text-6xl leading-7xl font-medium text-text-primary",
                             children: title
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: "flex flex-col items-start gap-4",
+                            className: "flex flex-col items-start",
                             children: [
                                 /*#__PURE__*/ jsx("p", {
-                                    className: "text-lg font-medium text-text-primary",
+                                    className: "text-lg leading-xl font-medium text-text-primary",
                                     children: subtitle
                                 }),
                                 /*#__PURE__*/ jsx("p", {

package/dist/index.d.ts

@@ -16,7 +16,7 @@ export { AnimatedBackground, type AnimatedBackgroundProps, } from './components/
 export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell';
 export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute';
 export { Badge, type BadgeProps } from './components/Badge';
-export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner';
+export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerIcon, type BannerIconProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner';
 export { Breadcrumbs, BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, type ScopeSwitcherItem, } from './components/Breadcrumbs';
 export { Button, type ButtonProps } from './components/Button';
 export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarBody, type CalendarBodyProps, CalendarContent, type CalendarContentProps, type CalendarContextValue, CalendarDayName, CalendarFooter, CalendarFooterControls, type CalendarFooterControlsProps, type CalendarFooterProps, CalendarGrid, CalendarGrids, type CalendarGridsProps, CalendarHeader, CalendarInputHeader, type CalendarInputHeaderProps, CalendarKeyboardHints, type CalendarKeyboardHintsProps, CalendarPresetItem, CalendarPresets, type CalendarPresetsProps, type CalendarProps, CalendarProvider, CalendarResetButton, type CalendarResetButtonProps, CalendarTrigger, type CalendarTriggerProps, type CalendarType, DAY_NAMES, type DateRangePreset, type DateValue, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, type PresetConfig, type PresetValue, useCalendarContext, } from './components/Calendar';
@@ -29,6 +29,7 @@ export { DateInput, type DateInputProps } from './components/DateInput';
 export { DateRangeEndValue, DateRangeInput, type DateRangeInputProps, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, useDateRangeContext, } from './components/DateRangeInput';
 export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, DrawerFooterControls, type DrawerFooterControlsProps, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerPositioner, type DrawerPositionerProps, type DrawerProps, DrawerResizeHandle, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants, drawerPositionerVariants, useDrawerContext, } from './components/Drawer';
 export { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, } from './components/DropdownMenu';
+export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle, } from './components/EmptyState';
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from './components/Field';
 export { type Condition, type ExprNode, type FieldMetadata, type FieldType, FilterInput, FilterInputChip, type FilterInputChipData, type FilterInputChipProps, type FilterInputChipVariant, FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, type FilterInputProps, type FilterOperator, type Group, } from './components/FilterInput';
 export { Flex, type FlexProps } from './components/Flex';

package/dist/index.js

@@ -5,7 +5,7 @@ import { AnimatedBackground } from "./components/AnimatedBackground/index.js";
 import { AppShell, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
 import { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
 import { Badge } from "./components/Badge/index.js";
-import { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle } from "./components/Banner/index.js";
+import { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle } from "./components/Banner/index.js";
 import { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator } from "./components/Breadcrumbs/index.js";
 import { Button } from "./components/Button/index.js";
 import { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, useCalendarContext } from "./components/Calendar/index.js";
@@ -18,6 +18,7 @@ import { DateInput } from "./components/DateInput/index.js";
 import { DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, useDateRangeContext } from "./components/DateRangeInput/index.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, drawerContentVariants, drawerPositionerVariants, useDrawerContext } from "./components/Drawer/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "./components/DropdownMenu/index.js";
+import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle } from "./components/EmptyState/index.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/Field/index.js";
 import { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu } from "./components/FilterInput/index.js";
 import { Flex } from "./components/Flex/index.js";
@@ -68,4 +69,4 @@ import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHead
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { UtilityPage } from "./components/UtilityPage/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, UtilityPage, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useLocationPathname, usePageHost, useRemoteShellContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, UtilityPage, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useLocationPathname, usePageHost, useRemoteShellContext, useTestId, useTheme, useTour, waitForStepEvent };