@staffbase/design 20.2.0 → 20.3.0

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
@@ -4240,7 +4240,7 @@ var MinusCircleIcon_default = React.memo(MinusCircleIcon);
 var MobileIcon = React.forwardRef((props, ref) => {
 	const { className, ...rest } = props;
 	const finalClassName = ["ds-icon ds-icon-mobile", className].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs("svg", {
+	return /* @__PURE__ */ jsx("svg", {
 		"aria-hidden": "true",
 		viewBox: "0 0 24 24",
 		width: "1em",
@@ -4250,7 +4250,7 @@ var MobileIcon = React.forwardRef((props, ref) => {
 		className: finalClassName,
 		ref,
 		"data-c13y-component": "icon",
-		children: [/* @__PURE__ */ jsx("path", { d: "M13.933,11.8l1.5,1.2a.251.251,0,0,0,.407-.194V2.5A2.5,2.5,0,0,0,13.34,0h-9a2.5,2.5,0,0,0-2.5,2.5v19A2.5,2.5,0,0,0,4.34,24h9a2.489,2.489,0,0,0,.771-.122.249.249,0,0,0,.149-.343,4.033,4.033,0,0,1-.42-1.645V20a.251.251,0,0,0-.063-.165l-.661-.747A.251.251,0,0,0,12.928,19H4.34a.5.5,0,0,1-.5-.5V4.5a.5.5,0,0,1,.5-.5h9a.5.5,0,0,1,.5.5v7.1A.249.249,0,0,0,13.933,11.8ZM8.84,20.5a1,1,0,1,1-1,1A1,1,0,0,1,8.84,20.5Z" }), /* @__PURE__ */ jsx("path", { d: "M18.363,15.347a.751.751,0,0,1-.469,1.336.741.741,0,0,1-.468-.165l-4.1-3.289a1.376,1.376,0,0,0-1.579.261,1.354,1.354,0,0,0-.214.279,1.375,1.375,0,0,0,.214,1.666l3.666,4.142a.249.249,0,0,1,.063.166v2.544a2.63,2.63,0,0,0,.306,1.071A.251.251,0,0,0,16,23.5H21.91a.25.25,0,0,0,.207-.391L20.679,21a.253.253,0,0,1-.044-.141V15.03c0-1.478-1.453-2.921-2.888-4.077a.252.252,0,0,0-.265-.031.25.25,0,0,0-.142.225v3.259a.251.251,0,0,0,.093.2Z" })]
+		children: /* @__PURE__ */ jsx("path", { d: "M17 0H7a3 3 0 0 0 -3 3v18a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3V3a3 3 0 0 0 -3 -3Zm-5 22.47a1 1 0 1 1 1 -1 1 1 0 0 1 -1 1ZM18 18a1 1 0 0 1 -1 1H7a1 1 0 0 1 -1 -1V3.53a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1Z" })
 	});
 });
 MobileIcon.displayName = "MobileIcon";
@@ -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);