@staffbase/design 20.2.0 → 20.2.1

package/dist/main.d.ts

@@ -76,7 +76,7 @@ import { UseInteractionsReturn } from '@floating-ui/react';
 
 export declare type ActionItemVariant = 'default' | 'critical';
 
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 export declare function ActionMenu({ children, ...options }: {
     children: ReactNode;
 } & Omit<ActionMenuOptions, 'listRef'>): default_2.JSX.Element;
@@ -85,10 +85,10 @@ export declare namespace ActionMenu {
     var displayName: string;
 }
 
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 export declare const ActionMenuContent: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & default_2.RefAttributes<HTMLDivElement>>;
 
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 export declare const ActionMenuItem: default_2.ForwardRefExoticComponent<ActionMenuItemProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface ActionMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -97,7 +97,7 @@ export declare interface ActionMenuItemProps extends ButtonHTMLAttributes<HTMLBu
     variant?: ActionItemVariant;
 }
 
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 export declare const ActionMenuLinkItem: default_2.ForwardRefExoticComponent<ActionMenuLinkItemProps & default_2.RefAttributes<HTMLAnchorElement>>;
 
 export declare interface ActionMenuLinkItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -124,7 +124,7 @@ export declare interface ActionMenuOptions {
     placement?: Placement;
 }
 
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 export declare const ActionMenuTrigger: default_2.ForwardRefExoticComponent<{
     children: ReactNode;
 } & default_2.RefAttributes<HTMLElement>>;
@@ -183,17 +183,17 @@ export declare const Avatar: {
     Image: ForwardRefExoticComponent<Omit<ImageProps, "ref"> & RefAttributes<HTMLImageElement>>;
 };
 
-/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+/** @deprecated Use Avatar component instead */
 declare type AvatarColor = 'cyan' | 'pink' | 'purple' | 'teal';
 
-/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+/** @deprecated Use Avatar component instead */
 export declare function AvatarDeprecated(props: AvatarDeprecatedProps): ReactElement;
 
 export declare namespace AvatarDeprecated {
     var displayName: string;
 }
 
-/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+/** @deprecated Use Avatar component instead */
 export declare interface AvatarDeprecatedProps {
     /**
      * The `alt` attribute for the rendered `img` element
@@ -231,7 +231,7 @@ declare interface AvatarProps_2 extends Omit<ComponentProps<'div'>, 'children'>
     size?: 48 | 40 | 32 | 24 | 16;
 }
 
-/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+/** @deprecated Use Avatar component instead */
 declare type AvatarSize = '48' | '40' | '32' | '24' | '16';
 
 declare interface BackProps extends ComponentProps<'button'> {
@@ -412,10 +412,10 @@ export declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref">
 
 declare type ButtonBaseProps = Omit<ComponentProps<'button'>, 'color'>;
 
-/** @deprecated Use Button instead */
+/** @deprecated Use Button component instead */
 export declare const ButtonDeprecated: ForwardRefExoticComponent<ButtonDeprecatedProps & RefAttributes<HTMLButtonElement>>;
 
-/** @deprecated Use Button instead */
+/** @deprecated Use Button component instead */
 export declare interface ButtonDeprecatedProps extends BaseButtonProps {
     /**
      * Refers to the child element of the button
@@ -437,7 +437,7 @@ export declare interface ButtonProps extends ButtonBaseProps, ButtonStyleProps {
     children: ReactNode;
 }
 
-/** @deprecated use Select or SearchableSingleSelect components instead */
+/** @deprecated Use Select or SearchableSingleSelect components instead */
 export declare interface ButtonSingleSelectProps<TOption extends BaseOption> extends SingleSelectBaseProps<TOption> {
     /**
      * Optional ref to attach to the select trigger.
@@ -588,14 +588,14 @@ export declare const Dialog: {
     Body: ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
 };
 
-/** @deprecated use Separator component instead */
+/** @deprecated Use Separator component instead */
 export declare function Divider(props: DividerProps): JSX.Element;
 
 export declare namespace Divider {
     var displayName: string;
 }
 
-/** @deprecated use Separator component instead */
+/** @deprecated Use Separator component instead */
 export declare interface DividerProps extends HTMLAttributes<HTMLHRElement> {
     dividerPosition?: 'horizontal' | 'vertical';
     fullWidth?: boolean;
@@ -646,14 +646,14 @@ declare interface EmptyMediaProps extends ComponentProps<'div'> {
     size?: 'xs' | 'md' | 'lg';
 }
 
-/** @deprecated Use Empty instead */
+/** @deprecated Use Empty component instead */
 export declare function EmptyState(props: EmptyStateProps): ReactElement;
 
 export declare namespace EmptyState {
     var displayName: string;
 }
 
-/** @deprecated Use Empty instead */
+/** @deprecated Use Empty component instead */
 export declare interface EmptyStateProps {
     /**
      * Defines the title of the component
@@ -928,10 +928,10 @@ export declare const HouseIcon: default_2.NamedExoticComponent<default_2.SVGAttr
 
 export declare const Icon: ({ name, ...props }: IconProps) => ReactElement | null;
 
-/** @deprecated Use Button with iconOnly instead */
+/** @deprecated Use Button component with iconOnly instead */
 export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
 
-/** @deprecated Use Button with iconOnly instead */
+/** @deprecated Use Button component with iconOnly instead */
 export declare interface IconButtonProps extends Omit<BaseButtonProps, 'children'> {
     icon: ReactElement<SVGAttributes<SVGElement>>;
 }
@@ -1317,14 +1317,14 @@ export declare const MinusCircleIcon: default_2.NamedExoticComponent<default_2.S
 
 export declare const MobileIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-/** @deprecated use Dialog component instead */
+/** @deprecated Use Dialog component instead */
 export declare function Modal(props: ModalProps): ReactElement;
 
 export declare namespace Modal {
     var displayName: string;
 }
 
-/** @deprecated use Alert Dialog component instead */
+/** @deprecated Use AlertDialog component instead */
 export declare function ModalDialog(props: ModalDialogProps): ReactElement;
 
 export declare namespace ModalDialog {
@@ -1379,7 +1379,7 @@ export declare interface ModalDialogProps {
     overlayClassName?: string;
 }
 
-/** @deprecated use Dialog component instead */
+/** @deprecated Use Dialog component instead */
 export declare interface ModalProps {
     /**
      * The title of the modal component.
@@ -1788,7 +1788,7 @@ export declare const SearchableSingleSelect: {
     Empty: ForwardRefExoticComponent<Omit< AutocompleteEmptyProps, "ref"> & RefAttributes<HTMLDivElement>>;
 };
 
-/** @deprecated use Select or SearchableSingleSelect components instead */
+/** @deprecated Use Select or SearchableSingleSelect components instead */
 export declare interface SearchableSingleSelectProps<TOption extends BaseOption> extends SingleSelectBaseProps<TOption> {
     /**
      * Value of the input field.
@@ -1892,7 +1892,7 @@ export declare const SidebarRightIcon: default_2.NamedExoticComponent<default_2.
 
 export declare const SingleChoiceQuestionIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-/** @deprecated use Select or SearchableSingleSelect components instead */
+/** @deprecated Use Select or SearchableSingleSelect components instead */
 export declare function SingleSelect<TOption extends BaseOption>(props: SingleSelectProps<TOption>): JSX.Element;
 
 export declare namespace SingleSelect {
@@ -1985,7 +1985,7 @@ declare interface SingleSelectBaseProps<TOption extends BaseOption> {
     onTriggerMouseDown?: (e: MouseEvent_2) => void;
 }
 
-/** @deprecated use Select or SearchableSingleSelect components instead */
+/** @deprecated Use Select or SearchableSingleSelect components instead */
 export declare type SingleSelectProps<Toption extends BaseOption> = ButtonSingleSelectProps<Toption> | SearchableSingleSelectProps<Toption>;
 
 export declare const Skeleton: {
@@ -2035,14 +2035,14 @@ export declare const TagIcon: default_2.NamedExoticComponent<default_2.SVGAttrib
 
 export declare const TextArea: ForwardRefExoticComponent<Omit< InputProps_2 & ClassAttributes<HTMLTextAreaElement> & TextareaHTMLAttributes<HTMLTextAreaElement>, "ref"> & RefAttributes<HTMLElement>>;
 
-/** @deprecated use new TextArea component instead */
+/** @deprecated Use TextArea component instead */
 export declare function TextAreaDeprecated(props: TextAreaDeprecatedProps): ReactElement;
 
 export declare namespace TextAreaDeprecated {
     var displayName: string;
 }
 
-/** @deprecated use new TextArea component instead */
+/** @deprecated Use TextArea component instead */
 export declare interface TextAreaDeprecatedProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'maxLength'> {
     label: string;
     inputId?: string;
@@ -2073,7 +2073,7 @@ export declare const TextFormattingTextStyleIcon: default_2.NamedExoticComponent
 
 export declare const TextIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-/** @deprecated use TextField component instead */
+/** @deprecated Use TextField component instead */
 export declare const TextInput: ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>>;
 
 export declare interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -2141,7 +2141,7 @@ export declare const ThumbUpAltIcon: default_2.NamedExoticComponent<default_2.SV
 
 export declare const ThumbUpIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-/** @deprecated use Switch component instead */
+/** @deprecated Use Switch component instead */
 export declare function Toggle(props: ToggleProps): ReactElement;
 
 export declare namespace Toggle {
@@ -2199,7 +2199,7 @@ declare interface TooltipContentProps extends Tooltip_2.Positioner.Props {
     container?: Tooltip_2.Portal.Props['container'];
 }
 
-/** @deprecated use Tooltip component instead */
+/** @deprecated Use Tooltip component instead */
 export declare function TooltipDeprecated(props: TooltipDeprecatedProps): ReactElement;
 
 export declare namespace TooltipDeprecated {

package/dist/main.js

@@ -89,7 +89,7 @@ var useActionMenuContext = () => {
 };
 //#endregion
 //#region src/components/actionMenu/ActionMenu.tsx
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 function ActionMenu({ children, ...options }) {
 	const listRef = useRef([]);
 	const actionMenu = useActionMenu({
@@ -104,7 +104,7 @@ function ActionMenu({ children, ...options }) {
 		})
 	});
 }
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuTrigger = React.forwardRef(function ActionMenuTrigger({ children }, propRef) {
 	const context = useActionMenuContext();
 	const childrenRef = children.ref;
@@ -122,7 +122,7 @@ var ActionMenuTrigger = React.forwardRef(function ActionMenuTrigger({ children }
 	}));
 	return null;
 });
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuContent = React.forwardRef(function ActionMenuContent(props, propRef) {
 	const { children, style, className = "", ...rest } = props;
 	const { context: floatingContext, ...context } = useActionMenuContext();
@@ -161,7 +161,7 @@ var ActionMenuContent = React.forwardRef(function ActionMenuContent(props, propR
 * Optional helper component, returns a styled button optimized for the ActionMenu.
 * Pass it as a direct child to the ActionMenuContent to make use of the ActionMenu's list navigation
 */
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuItem = React.forwardRef(function ActionMenuItem(props, ref) {
 	const { icon, variant = "default", description, className = "", children, ...rest } = props;
 	const { index: _dataindex, ref: listItemRef } = useListItem();
@@ -195,7 +195,7 @@ var ActionMenuItem = React.forwardRef(function ActionMenuItem(props, ref) {
 * Optional helper component, returns a styled link optimized for the ActionMenu.
 * Pass it as a direct child to the ActionMenuContent to use the ActionMenu's list navigation
 */
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuLinkItem = React.forwardRef(function ActionMenuLinkItem(props, ref) {
 	const { icon, variant = "default", description, className = "", children, ...rest } = props;
 	const { index: _dataindex, ref: listItemRef } = useListItem();
@@ -225,12 +225,12 @@ var ActionMenuLinkItem = React.forwardRef(function ActionMenuLinkItem(props, ref
 		})]
 	});
 });
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuItemIcon = (props) => /* @__PURE__ */ jsx("span", {
 	className: clsx$1("ds-action-menu__icon", `ds-action-menu__icon--${props.variant}`),
 	children: props.icon
 });
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuItemLabel = (props) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 	className: "ds-action-menu__item-label",
 	children: props.children
@@ -8854,7 +8854,7 @@ var Icon = ({ name, ...props }) => {
 };
 //#endregion
 //#region src/components/avatarDeprecated/AvatarDeprecated.tsx
-/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+/** @deprecated Use Avatar component instead */
 function AvatarDeprecated(props) {
 	const { alt, children, className = "", color = "purple", size = "32", src } = props;
 	const [hasImage, setHasImage] = useState(src !== void 0 && src !== "");
@@ -9034,7 +9034,7 @@ var BottomSheet = {
 };
 //#endregion
 //#region src/components/buttonDeprecated/ButtonDeprecated.tsx
-/** @deprecated Use Button instead */
+/** @deprecated Use Button component instead */
 var ButtonDeprecated = forwardRef(function Button(props, ref) {
 	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
 	return /* @__PURE__ */ jsxs("button", {
@@ -9052,7 +9052,7 @@ var ButtonDeprecated = forwardRef(function Button(props, ref) {
 		]
 	});
 });
-/** @deprecated Use Button with iconOnly instead */
+/** @deprecated Use Button component with iconOnly instead */
 var IconButton = forwardRef(function IconButton(props, ref) {
 	const { icon, className = "", variant = "primary", ...rest } = props;
 	return /* @__PURE__ */ jsx("button", {
@@ -9289,7 +9289,7 @@ function getDividerStyles(props) {
 		padding: fullWidth ? `${padding}px 0` : `${padding}px`
 	};
 }
-/** @deprecated use Separator component instead */
+/** @deprecated Use Separator component instead */
 function Divider(props) {
 	const { dividerPosition = "horizontal", className = "", fullWidth = false, ...otherProps } = props;
 	return /* @__PURE__ */ jsx("hr", {
@@ -9357,7 +9357,7 @@ var Empty = {
 //#endregion
 //#region src/components/emptyState/EmptyState.tsx
 var getValidIconSize = (iconSize) => iconSize === "40px" || iconSize === "96px" ? iconSize : "40px";
-/** @deprecated Use Empty instead */
+/** @deprecated Use Empty component instead */
 function EmptyState(props) {
 	const { title, icon, iconSize, body, className = "" } = props;
 	const validIconSize = getValidIconSize(iconSize);
@@ -10343,7 +10343,7 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
 	});
 });
 /**
-* @deprecated use Dialog component instead
+* @deprecated Use Dialog component instead
 * Returns an array of two boolean values.
 * The first represents the visbility of a shadow for the upper element surrounding the scroll area.
 * The second represents the shadow visibility for the lower adjacent element.
@@ -10432,7 +10432,7 @@ var ModalFooter = forwardRef(function ModalFooter(props, ref) {
 		})]
 	}) : null;
 });
-/** @deprecated use Dialog component instead */
+/** @deprecated Use Dialog component instead */
 function Modal(props) {
 	const { onCancel, isOpen = false, className = "", overlayClassName = "", title, keepOnBackdropClick = false } = props;
 	return /* @__PURE__ */ jsx(ModalWrapper, {
@@ -10483,11 +10483,11 @@ function ModalWindow(props) {
 		})
 	] });
 }
-/** @deprecated use Dialog component instead */
+/** @deprecated Use Dialog component instead */
 Modal.displayName = "Modal";
 //#endregion
 //#region src/components/modalDialog/ModalDialog.tsx
-/** @deprecated use Alert Dialog component instead */
+/** @deprecated Use AlertDialog component instead */
 function ModalDialog(props) {
 	const { isOpen, title, text, icon, confirmButtonVariant = "primary", confirmButtonText, onConfirm, cancelButtonText, onCancel, className = "", overlayClassName = "" } = props;
 	const { refs, context } = useFloating({
@@ -11180,7 +11180,7 @@ var Separator = forwardRef((props, ref) => {
 Separator.displayName = "Separator";
 //#endregion
 //#region src/components/singleSelect/SingleSelect.tsx
-/** @deprecated use Select or SearchableSingleSelect components instead */
+/** @deprecated Use Select or SearchableSingleSelect components instead */
 function SingleSelect(props) {
 	const { options, value, onChange, optionLabel, optionDescription, placeholder, label, description, error, disabled, icon, loading, emptyResultText, optionRef, triggerRef, dropdownRef, requiredLabel, triggerTabIndex, onTriggerFocus: handleTriggerFocus, onTriggerBlur: handleTriggerBlur, onTriggerMouseDown: handleTriggerMouseDown, ariaLabelledBy, ...variantProps } = props;
 	const [open, setOpen] = useState(false);
@@ -11560,7 +11560,7 @@ var TextArea = forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/components/textAreaDeprecated/TextAreaDeprecated.tsx
-/** @deprecated use new TextArea component instead */
+/** @deprecated Use TextArea component instead */
 function TextAreaDeprecated(props) {
 	const { value, handleValueChange, limit, label, inputId, description, disabled, errorAriaLive, errorMessage, requiredLabel, resizable, className = "", ...rest } = props;
 	const [count, setCount] = useState(typeof value === "string" ? value.length : 0);
@@ -11651,7 +11651,7 @@ var TextField = forwardRef((props, ref) => {
 });
 //#endregion
 //#region src/components/textInput/TextInput.tsx
-/** @deprecated use TextField component instead */
+/** @deprecated Use TextField component instead */
 var TextInput = forwardRef(function TextInput(props, ref) {
 	const { label = "Label", errorMessage, description, width, icon, iconPosition = "leading", id, requiredLabel, type = "text", variant = "default", className = "", ...restProps } = props;
 	const randomId = useId();
@@ -11718,7 +11718,7 @@ var TextInput = forwardRef(function TextInput(props, ref) {
 TextInput.displayName = "TextInput";
 //#endregion
 //#region src/components/toggle/Toggle.tsx
-/** @deprecated use Switch component instead */
+/** @deprecated Use Switch component instead */
 function Toggle(props) {
 	const { checked, disabled, name, label, description, onChange, spaceBetween, className = "", ref } = props;
 	const id = useId();
@@ -11861,7 +11861,7 @@ var useFloatingElement = (placement, strategy) => {
 };
 //#endregion
 //#region src/components/tooltipDeprecated/TooltipDeprecated.tsx
-/** @deprecated use Tooltip component instead */
+/** @deprecated Use Tooltip component instead */
 function TooltipDeprecated(props) {
 	const { content, children, placement = "top", className = "" } = props;
 	const { context, floatingUIStyles, isMounted, refs, styles } = useFloatingElement(placement);