@staffbase/design 20.2.0 → 20.3.0

package/dist/main.cjs

@@ -95,7 +95,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 = (0, react.useRef)([]);
 	const actionMenu = useActionMenu({
@@ -110,7 +110,7 @@ function ActionMenu({ children, ...options }) {
 		})
 	});
 }
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuTrigger = react.default.forwardRef(function ActionMenuTrigger({ children }, propRef) {
 	const context = useActionMenuContext();
 	const childrenRef = children.ref;
@@ -128,7 +128,7 @@ var ActionMenuTrigger = react.default.forwardRef(function ActionMenuTrigger({ ch
 	}));
 	return null;
 });
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuContent = react.default.forwardRef(function ActionMenuContent(props, propRef) {
 	const { children, style, className = "", ...rest } = props;
 	const { context: floatingContext, ...context } = useActionMenuContext();
@@ -167,7 +167,7 @@ var ActionMenuContent = react.default.forwardRef(function ActionMenuContent(prop
 * 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.default.forwardRef(function ActionMenuItem(props, ref) {
 	const { icon, variant = "default", description, className = "", children, ...rest } = props;
 	const { index: _dataindex, ref: listItemRef } = (0, _floating_ui_react.useListItem)();
@@ -201,7 +201,7 @@ var ActionMenuItem = react.default.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.default.forwardRef(function ActionMenuLinkItem(props, ref) {
 	const { icon, variant = "default", description, className = "", children, ...rest } = props;
 	const { index: _dataindex, ref: listItemRef } = (0, _floating_ui_react.useListItem)();
@@ -231,12 +231,12 @@ var ActionMenuLinkItem = react.default.forwardRef(function ActionMenuLinkItem(pr
 		})]
 	});
 });
-/** @deprecated use Menu component instead */
+/** @deprecated Use Menu component instead */
 var ActionMenuItemIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	className: "ds-action-menu__item-label",
 	children: props.children
@@ -4246,7 +4246,7 @@ var MinusCircleIcon_default = react.default.memo(MinusCircleIcon);
 var MobileIcon = react.default.forwardRef((props, ref) => {
 	const { className, ...rest } = props;
 	const finalClassName = ["ds-icon ds-icon-mobile", className].filter(Boolean).join(" ");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		"aria-hidden": "true",
 		viewBox: "0 0 24 24",
 		width: "1em",
@@ -4256,7 +4256,7 @@ var MobileIcon = react.default.forwardRef((props, ref) => {
 		className: finalClassName,
 		ref,
 		"data-c13y-component": "icon",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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";
@@ -8860,7 +8860,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] = (0, react.useState)(src !== void 0 && src !== "");
@@ -9040,7 +9040,7 @@ var BottomSheet = {
 };
 //#endregion
 //#region src/components/buttonDeprecated/ButtonDeprecated.tsx
-/** @deprecated Use Button instead */
+/** @deprecated Use Button component instead */
 var ButtonDeprecated = (0, react.forwardRef)(function Button(props, ref) {
 	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -9058,7 +9058,7 @@ var ButtonDeprecated = (0, react.forwardRef)(function Button(props, ref) {
 		]
 	});
 });
-/** @deprecated Use Button with iconOnly instead */
+/** @deprecated Use Button component with iconOnly instead */
 var IconButton = (0, react.forwardRef)(function IconButton(props, ref) {
 	const { icon, className = "", variant = "primary", ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -9295,7 +9295,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__ */ (0, react_jsx_runtime.jsx)("hr", {
@@ -9363,7 +9363,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);
@@ -10349,7 +10349,7 @@ var ModalHeader = (0, react.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.
@@ -10438,7 +10438,7 @@ var ModalFooter = (0, react.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__ */ (0, react_jsx_runtime.jsx)(ModalWrapper, {
@@ -10489,11 +10489,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 } = (0, _floating_ui_react.useFloating)({
@@ -11186,7 +11186,7 @@ var Separator = (0, react.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] = (0, react.useState)(false);
@@ -11566,7 +11566,7 @@ var TextArea = (0, react.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] = (0, react.useState)(typeof value === "string" ? value.length : 0);
@@ -11657,7 +11657,7 @@ var TextField = (0, react.forwardRef)((props, ref) => {
 });
 //#endregion
 //#region src/components/textInput/TextInput.tsx
-/** @deprecated use TextField component instead */
+/** @deprecated Use TextField component instead */
 var TextInput = (0, react.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 = (0, react.useId)();
@@ -11724,7 +11724,7 @@ var TextInput = (0, react.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 = (0, react.useId)();
@@ -11867,7 +11867,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);