@box/blueprint-web 5.31.3

package/lib-esm/primitives/dropdown-menu/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const DropdownMenu: {
+    Root: {
+        (props: import("@radix-ui/react-dropdown-menu").DropdownMenuProps): JSX.Element;
+        displayName: string;
+    };
+    RadioGroup: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    RadioSelectItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("./dropdown-menu-content").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+    SubMenuRoot: {
+        (props: import("@radix-ui/react-dropdown-menu").DropdownMenuSubProps): JSX.Element;
+        displayName: string;
+    };
+    SubMenuTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>> & {
+        SideContent: ({ children, className, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemSideContentProps) => JSX.Element;
+        MainContent: ({ className, label, description, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemMainContentProps) => JSX.Element;
+    };
+    SubMenuContent: import("react").ForwardRefExoticComponent<import("./dropdown-menu-sub-menu-content").DropdownMenuSubMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { type DropdownMenuContentProps } from './dropdown-menu-content';
+export { type DropdownMenuItemProps } from './dropdown-menu-item';
+export { type DropdownMenuRadioGroupProps } from './dropdown-menu-radio-group';
+export { type DropdownMenuRadioSelectItemProps } from './dropdown-menu-radio-select-item';
+export { type DropdownMenuRootProps } from './dropdown-menu-root';
+export { type DropdownMenuTriggerProps } from './dropdown-menu-trigger';

package/lib-esm/primitives/dropdown-menu/index.js

@@ -0,0 +1,27 @@
+import { DropdownMenuCheckboxItem } from './dropdown-menu-checkbox-item.js';
+import { DropdownMenuContent } from './dropdown-menu-content.js';
+import { DropdownMenuItem } from './dropdown-menu-item.js';
+import { DropdownMenuRadioGroup } from './dropdown-menu-radio-group.js';
+import { DropdownMenuRadioSelectItem } from './dropdown-menu-radio-select-item.js';
+import { DropdownMenuRoot } from './dropdown-menu-root.js';
+import { DropdownMenuSeparator } from './dropdown-menu-separator.js';
+import { DropdownMenuSubMenuContent } from './dropdown-menu-sub-menu-content.js';
+import { DropdownMenuSubMenuRoot } from './dropdown-menu-sub-menu-root.js';
+import { DropdownMenuSubMenuTrigger } from './dropdown-menu-sub-menu-trigger.js';
+import { DropdownMenuTrigger } from './dropdown-menu-trigger.js';
+
+const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  RadioGroup: DropdownMenuRadioGroup,
+  Trigger: DropdownMenuTrigger,
+  RadioSelectItem: DropdownMenuRadioSelectItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  Content: DropdownMenuContent,
+  Item: DropdownMenuItem,
+  Separator: DropdownMenuSeparator,
+  SubMenuRoot: DropdownMenuSubMenuRoot,
+  SubMenuTrigger: DropdownMenuSubMenuTrigger,
+  SubMenuContent: DropdownMenuSubMenuContent
+};
+
+export { DropdownMenu };

package/lib-esm/primitives/icon-button/icon-button.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type IconButtonProps } from './types';
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export default IconButton;

package/lib-esm/primitives/icon-button/icon-button.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef, useRef, createElement } from 'react';
+import { useForkRef } from '../../utils/useForkRef.js';
+import styles from './icon-button.module.js';
+import { iconSizeMap } from './utils.js';
+
+const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    size = 'small',
+    icon,
+    ...rest
+  } = props;
+  const ref = useRef(null);
+  return jsx(Button, {
+    ...rest,
+    ref: useForkRef(ref, forwardedRef),
+    className: clsx([styles.iconButton, styles[size]], props.className),
+    children: /*#__PURE__*/createElement(icon, {
+      className: styles.iconColor,
+      height: iconSizeMap[size],
+      width: iconSizeMap[size],
+      role: 'presentation'
+    })
+  });
+});
+IconButton.displayName = 'IconButton';
+
+export { IconButton, IconButton as default };

package/lib-esm/primitives/icon-button/icon-button.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"iconButton":"icon-button-module_iconButton__Z3YLB","iconColor":"icon-button-module_iconColor__iU-IU","large":"icon-button-module_large__tyDSK","small":"icon-button-module_small__vweHg","x-small":"icon-button-module_x-small__rlSOp"};
+
+export { styles as default };

package/lib-esm/primitives/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button';
+export { type IconButtonProps } from './types';

package/lib-esm/primitives/icon-button/types.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+export interface IconButtonProps extends AriakitButtonProps {
+    /** The size of the button. */
+    size?: 'x-small' | 'small' | 'large';
+    /** Icon that will be rendered */
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    'aria-label': NonNullable<AriakitButtonProps['aria-label']>;
+}

package/lib-esm/primitives/icon-button/utils.d.ts

@@ -0,0 +1,3 @@
+import { type IconButtonProps } from './types';
+declare const iconSizeMap: Record<NonNullable<IconButtonProps['size']>, string>;
+export { iconSizeMap };

package/lib-esm/primitives/icon-button/utils.js

@@ -0,0 +1,9 @@
+import { Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
+
+const iconSizeMap = {
+  'x-small': Size4,
+  small: Size5,
+  large: Size6
+};
+
+export { iconSizeMap };

package/lib-esm/primitives/inline-error/inline-error.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type InlineErrorProps } from './types';
+/** Renders an inline error message and icon, used to show error state in form elements. */
+export declare const InlineError: import("react").ForwardRefExoticComponent<Omit<InlineErrorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib-esm/primitives/inline-error/inline-error.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { IconIconErrorOnLight, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './inline-error.module.js';
+
+/** Renders an inline error message and icon, used to show error state in form elements. */
+const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx("span", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx([className, styles.inlineError, {
+      [styles.empty]: !children
+    }]),
+    children: children && jsxs(Fragment, {
+      children: [jsx(AlertBadge, {
+        className: styles.errorIcon,
+        color: IconIconErrorOnLight,
+        height: Size4,
+        role: "presentation",
+        width: Size4
+      }), children]
+    })
+  });
+});
+
+export { InlineError };

package/lib-esm/primitives/inline-error/inline-error.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"inlineError":"inline-error-module_inlineError__ot1V-","empty":"inline-error-module_empty__sM0HF","errorIcon":"inline-error-module_errorIcon__I3nlv"};
+
+export { styles as default };

package/lib-esm/primitives/inline-error/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface InlineErrorProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+    /** Error message */
+    children: React.ReactNode;
+}

package/lib-esm/primitives/link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './link';
+export { type LinkProps } from './types';

package/lib-esm/primitives/link/link.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<import("./types").LinkOwnProps<import("react").ElementType<any>> & Omit<any, keyof import("./types").LinkOwnProps<E>>, "ref"> & import("react").RefAttributes<unknown>>;
+export default Link;

package/lib-esm/primitives/link/link.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './link.module.js';
+
+const LinkDefaultAsElement = 'a';
+const Link = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    as: Component = LinkDefaultAsElement,
+    children,
+    className,
+    inheritFont,
+    ...rest
+  } = props;
+  return jsx(Component, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx([className, styles.link, {
+      [styles.inheritFont]: inheritFont
+    }]),
+    children: children
+  });
+});
+
+export { Link, Link as default };

package/lib-esm/primitives/link/link.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"link":"link-module_link__Iq789","inheritFont":"link-module_inheritFont__FhWUH"};
+
+export { styles as default };

package/lib-esm/primitives/link/types.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+export type LinkOwnProps<E extends React.ElementType> = {
+    /** The content to display in the Link. */
+    children?: React.ReactNode;
+    /**
+     * Controls whether text inside the link inherits font properties from parent or uses default style.
+     *
+     * Useful when Link is within the block of the text, to apply the same style for whole content.
+     *
+     * When property is falsy, link uses default style.
+     *
+     * @default false
+     * */
+    inheritFont?: boolean;
+    /** The component used for the root node. Either a string to use a HTML element or a component.
+     * @default 'a'
+     */
+    as?: E;
+};
+export type PolymorphicLinkRef<E extends React.ElementType> = React.ComponentPropsWithRef<E>['ref'];
+export type LinkProps<E extends React.ElementType> = LinkOwnProps<E> & Omit<React.ComponentProps<E>, keyof LinkOwnProps<E>>;

package/lib-esm/primitives/notification/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export { type NotificationButtonProps } from './notification-button';
+export { useNotification, type NotificationProviderProps } from './notification-provider';
+export { type NotificationViewportProps } from './notification.viewport';
+export declare const Notification: {
+    Provider: import("react").FC<import("@radix-ui/react-toast").ToastProviderProps>;
+    Button: {
+        (props: import("./notification-button").NotificationButtonProps): JSX.Element;
+        displayName: string;
+    };
+    Viewport: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toast").ToastViewportProps & import("react").RefAttributes<HTMLOListElement>>;
+};

package/lib-esm/primitives/notification/index.js

@@ -0,0 +1,12 @@
+import { NotificationButton } from './notification-button.js';
+import { NotificationProvider } from './notification-provider.js';
+export { useNotification } from './notification-provider.js';
+import { NotificationViewport } from './notification.viewport.js';
+
+const Notification = {
+  Provider: NotificationProvider,
+  Button: NotificationButton,
+  Viewport: NotificationViewport
+};
+
+export { Notification };

package/lib-esm/primitives/notification/notification-button.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type ButtonProps } from '../../basics/button';
+export type NotificationButtonProps = ButtonProps & {
+    ariaLabel: string;
+};
+export declare const NotificationButton: {
+    (props: NotificationButtonProps): JSX.Element;
+    displayName: string;
+};

package/lib-esm/primitives/notification/notification-button.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import * as Toast from '@radix-ui/react-toast';
+import { Button } from '../../basics/button/button.js';
+
+const NotificationButton = props => {
+  const {
+    ariaLabel,
+    children,
+    ...rest
+  } = props;
+  return jsx(Toast.Action, {
+    altText: ariaLabel,
+    asChild: true,
+    children: jsx(Button, {
+      ...rest,
+      variant: "outline",
+      children: children
+    })
+  });
+};
+NotificationButton.displayName = 'Notification.Button';
+
+export { NotificationButton };

package/lib-esm/primitives/notification/notification-provider.d.ts

@@ -0,0 +1,37 @@
+import * as Toast from '@radix-ui/react-toast';
+import * as React from 'react';
+import { type PrivateNotificationElementProps } from './private-notification-element';
+export type NotificationProviderProps = Toast.ToastProviderProps;
+export declare const useNotification: () => {
+    /**
+     * Creates notification based on passed arguments.
+     * @returns string, which is notification `id`.
+     */
+    addNotification: (args: PrivateNotificationElementProps) => string;
+    /**
+     * map of active notifications, where key is notification `id`.
+     */
+    notifications: Map<string, PrivateNotificationElementProps>;
+    /**
+     * Removes notification with given `id`.
+     * @param id string
+     */
+    removeNotification: (id: string) => void;
+    /**
+     * Removes all notifications.
+     */
+    removeAllNotifications: () => void;
+    /**
+     * updates notification with given `id`.
+     * @param id string
+     * @param newProps - new properties of notification
+     */
+    updateNotification: (id: string, newProps: PrivateNotificationElementProps) => void;
+};
+/**
+ * A wrapper for notifications. It must be provided by the application.
+ *
+ * It provides a NotificationContext, which should be used with useNotification hook.
+ * useNotification hook provides access to store, and methods to interact with it.
+ */
+export declare const NotificationProvider: React.FC<NotificationProviderProps>;

package/lib-esm/primitives/notification/notification-provider.js

@@ -0,0 +1,94 @@
+import { jsx } from 'react/jsx-runtime';
+import * as Toast from '@radix-ui/react-toast';
+import merge from 'lodash/merge';
+import * as React from 'react';
+import { useContext, useState } from 'react';
+import { getUniqueId } from '../../utils/useUniqueId.js';
+
+const DEFAULT_NOTIFICATION_DELAY = 5000;
+const NotificationContext = /*#__PURE__*/React.createContext(null);
+const useNotification = () => {
+  const value = useContext(NotificationContext);
+  if (!value) {
+    throw new Error('useNotification should be wrapped inside NotificationProvider');
+  }
+  return value;
+};
+/**
+ * A wrapper for notifications. It must be provided by the application.
+ *
+ * It provides a NotificationContext, which should be used with useNotification hook.
+ * useNotification hook provides access to store, and methods to interact with it.
+ */
+const NotificationProvider = props => {
+  const {
+    children,
+    ...rest
+  } = props;
+  const [notifications, setNotifications] = useState(new Map());
+  const addNotification = React.useCallback(args => {
+    const {
+      variant,
+      styledText,
+      sensitivity,
+      closeButtonAriaLabel,
+      typeIconAriaLabel
+    } = args;
+    const notificationId = getUniqueId();
+    const onClose = id => () => {
+      setNotifications(oldValue => {
+        const newValue = new Map(oldValue);
+        newValue.delete(id);
+        return newValue;
+      });
+    };
+    const newNotificationProps = {
+      ...args,
+      key: notificationId,
+      closeButtonAriaLabel,
+      onClose: onClose(notificationId),
+      sensitivity,
+      styledText,
+      typeIconAriaLabel,
+      variant
+    };
+    setNotifications(oldNotifications => new Map(oldNotifications).set(notificationId, newNotificationProps));
+    return notificationId;
+  }, []);
+  const removeNotification = React.useCallback(id => {
+    setNotifications(oldValue => {
+      const newValue = new Map(oldValue);
+      newValue.delete(id);
+      return newValue;
+    });
+  }, []);
+  const removeAllNotifications = React.useCallback(() => {
+    setNotifications(new Map());
+  }, []);
+  const updateNotification = React.useCallback((id, newProps) => {
+    setNotifications(oldValue => {
+      const newNotifications = new Map(oldValue);
+      const oldNotificationProps = newNotifications.get(id);
+      newNotifications.set(id, merge(oldNotificationProps, newProps));
+      return newNotifications;
+    });
+  }, []);
+  const store = React.useMemo(() => ({
+    addNotification,
+    notifications,
+    removeNotification,
+    updateNotification,
+    removeAllNotifications
+  }), [addNotification, removeNotification, notifications, updateNotification, removeAllNotifications]);
+  return jsx(Toast.Provider, {
+    ...rest,
+    duration: DEFAULT_NOTIFICATION_DELAY,
+    children: jsx(NotificationContext.Provider, {
+      value: store,
+      children: children
+    })
+  });
+};
+NotificationProvider.displayName = 'Notification.Provider';
+
+export { NotificationProvider, useNotification };

package/lib-esm/primitives/notification/notification.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"viewport":"notification-module_viewport__twEwW","root":"notification-module_root__XeIdS","container":"notification-module_container__tV69F","info":"notification-module_info__bR2xG","success":"notification-module_success__LNSQS","warning":"notification-module_warning__Xg0PW","error":"notification-module_error__nMz0z","typeIcon":"notification-module_typeIcon__ktThn","text":"notification-module_text__oPq6z","buttonSection":"notification-module_buttonSection__PESK8","contentButtons":"notification-module_contentButtons__tLXvb","closeButton":"notification-module_closeButton__vni4i"};
+
+export { styles as default };

package/lib-esm/primitives/notification/notification.viewport.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type ToastViewportProps } from '@radix-ui/react-toast';
+export type NotificationViewportProps = ToastViewportProps;
+/**
+ * Renders container with Notifications.
+ *
+ * Based on Radix-UI [Viewport](https://www.radix-ui.com/docs/primitives/components/toast#viewport).
+ */
+export declare const NotificationViewport: import("react").ForwardRefExoticComponent<ToastViewportProps & import("react").RefAttributes<HTMLOListElement>>;

package/lib-esm/primitives/notification/notification.viewport.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { Viewport } from '@radix-ui/react-toast';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useNotification } from './notification-provider.js';
+import styles from './notification.module.js';
+import { PrivateNotificationElement } from './private-notification-element.js';
+
+/**
+ * Renders container with Notifications.
+ *
+ * Based on Radix-UI [Viewport](https://www.radix-ui.com/docs/primitives/components/toast#viewport).
+ */
+const NotificationViewport = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    ...rest
+  } = props;
+  const {
+    notifications
+  } = useNotification();
+  return jsx(Viewport, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.viewport, className),
+    children: Array.from(notifications.values()).map(({
+      key,
+      ...notificationProps
+    }) => jsx(PrivateNotificationElement, {
+      ...notificationProps
+    }, key))
+  });
+});
+
+export { NotificationViewport };

package/lib-esm/primitives/notification/private-notification-element.d.ts

@@ -0,0 +1,33 @@
+import * as Toast from '@radix-ui/react-toast';
+import { type ToastProps } from '@radix-ui/react-toast';
+import { type ReactNode } from 'react';
+import { type StyledText } from '../../utils/commonTypes';
+export interface PrivateNotificationElementProps extends ToastProps {
+    /** Governs the icon type and background color for the notification */
+    variant: 'info' | 'success' | 'warning' | 'error';
+    /** [radix-ui doc](https://www.radix-ui.com/docs/primitives/components/toast#sensitivity).
+     * For toasts that are the result of a user action, choose foreground.
+     * Toasts generated from background tasks should use background */
+    sensitivity: Toast.ToastProps['type'];
+    /** Aria label for the type icon */
+    typeIconAriaLabel: string;
+    /** Aria label for the close button */
+    closeButtonAriaLabel: string;
+    /** The main text of the notification. */
+    styledText: StyledText;
+    /** What to do on close. This is provided by addNotification by default */
+    onClose?: () => void;
+    /** The state of the notification. This is provided by addNotification by default */
+    open?: boolean;
+    /** This props should be Notification.Buttons only */
+    children?: ReactNode;
+}
+/**
+ * A base component mounted on a page when addNotification is invoked.
+ *
+ * It's based on Radix-UI toast
+ * * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/toast)
+ *
+ * **IMPORTANT**: Must be placed inside a single <b><NotificationProvider></b> singleton component provided by the app
+ */
+export declare function PrivateNotificationElement(props: PrivateNotificationElementProps): JSX.Element;

package/lib-esm/primitives/notification/private-notification-element.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { AlertTriangle, InfoBadge, CheckmarkBadge, AlertBadge } from '@box/blueprint-web-assets/icons/Line';
+import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import * as Toast from '@radix-ui/react-toast';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import { IconButton } from '../icon-button/icon-button.js';
+import styles from './notification.module.js';
+
+const getIcon = (iconLabel, variant) => {
+  const props = {
+    className: styles.typeIcon,
+    'aria-label': iconLabel,
+    width: Size5,
+    height: Size5
+  };
+  switch (variant) {
+    case 'error':
+      return jsx(AlertBadge, {
+        ...props
+      });
+    case 'success':
+      return jsx(CheckmarkBadge, {
+        ...props
+      });
+    case 'info':
+      return jsx(InfoBadge, {
+        ...props
+      });
+    case 'warning':
+      return jsx(AlertTriangle, {
+        ...props
+      });
+  }
+  return null;
+};
+/**
+ * A base component mounted on a page when addNotification is invoked.
+ *
+ * It's based on Radix-UI toast
+ * * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/toast)
+ *
+ * **IMPORTANT**: Must be placed inside a single <b><NotificationProvider></b> singleton component provided by the app
+ */
+function PrivateNotificationElement(props) {
+  const {
+    variant,
+    styledText,
+    sensitivity,
+    open,
+    onClose,
+    closeButtonAriaLabel,
+    typeIconAriaLabel,
+    children,
+    ...rest
+  } = props;
+  const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant]);
+  return jsx(Toast.Root, {
+    ...rest,
+    className: clsx(styles.root, styles[variant]),
+    onOpenChange: onClose,
+    open: open,
+    type: sensitivity,
+    children: jsxs("div", {
+      className: styles.container,
+      children: [jsxs("div", {
+        className: styles.text,
+        children: [iconComponent, jsx(Toast.Description, {
+          children: styledText
+        })]
+      }), jsxs("div", {
+        className: styles.buttonSection,
+        children: [jsx("div", {
+          className: styles.contentButtons,
+          children: children
+        }), jsx(Toast.Close, {
+          asChild: true,
+          children: jsx(IconButton, {
+            "aria-label": closeButtonAriaLabel,
+            className: styles.closeButton,
+            icon: XMark,
+            onClick: onClose
+          })
+        })]
+      })]
+    })
+  });
+}
+
+export { PrivateNotificationElement };

package/lib-esm/primitives/page-header/index.d.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from './page-header';
+export { type PageHeaderProps } from './types';

package/lib-esm/primitives/page-header/page-header.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { type PageHeaderProps } from './types';
+export declare const PageHeaderRoot: import("react").ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const PageHeaderCorner: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageHeadeStartElements: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageHeaderEndElements: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PageHeader: {
+    Root: import("react").ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    StartElements: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    EndElements: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Corner: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};