@wireapp/react-ui-kit 9.69.0 → 9.69.5

package/lib/Inputs/CodeInput/CodeInput.d.ts

@@ -5,6 +5,8 @@ export interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {
     digits?: number;
     markInvalid?: boolean;
     onCodeComplete?: (completeCode?: string) => void;
+    codeInputLabel?: string;
+    codePlaceholder?: string;
 }
-export declare const CodeInput: ({ style, digits, autoFocus, markInvalid, onCodeComplete, disabled, }: CodeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CodeInput: ({ style, digits, markInvalid, onCodeComplete, disabled, codeInputLabel, codePlaceholder, }: CodeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CodeInput.d.ts.map

package/lib/Inputs/CodeInput/CodeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../src/Inputs/CodeInput/CodeInput.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAC,UAAU,EAAa,MAAM,UAAU,CAAC;AAYhD,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AAuBlE,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,SAAS,yEAOnB,cAAc,qDAqGhB,CAAC"}
+{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../src/Inputs/CodeInput/CodeInput.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAC,UAAU,EAAa,MAAM,UAAU,CAAC;AAwBhD,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AAuBlE,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS,+FAQnB,cAAc,qDAwHhB,CAAC"}

package/lib/Inputs/CodeInput/CodeInput.js

@@ -51,7 +51,18 @@ const Input_1 = require("../Input");
 const CodeInputWrapper = (props) => ((0, jsx_runtime_1.jsx)("div", { css: {
         display: 'flex',
         justifyContent: 'center',
+        flexDirection: 'column',
     }, ...props }));
+const codeInputLabelStyle = theme => ({
+    color: Identity_1.COLOR_V2.GRAY_70,
+    textAlign: 'center',
+    marginBottom: '0.5rem',
+    fontSize: theme.fontSizes.base,
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: '1.5rem',
+    letterSpacing: '0.003rem',
+});
 const digitInputStyle = (theme, props) => ({
     ...(0, Input_1.inputStyle)(theme, props),
     '& + &': {
@@ -68,9 +79,9 @@ const digitInputStyle = (theme, props) => ({
     width: 'min(48px, 13vw)',
     height: '56px',
 });
-const DigitInput = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("input", { ref: ref, css: (theme) => digitInputStyle(theme, props), ...props, type: "tel" })));
+const DigitInput = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("input", { ref: ref, css: (theme) => digitInputStyle(theme, props), ...props })));
 DigitInput.displayName = 'DigitInput';
-const CodeInput = ({ style, digits = 6, autoFocus = false, markInvalid, onCodeComplete = util_1.noop, disabled, }) => {
+const CodeInput = ({ style, digits = 6, markInvalid, onCodeComplete = util_1.noop, disabled, codeInputLabel, codePlaceholder, }) => {
     const [values, setValues] = (0, react_1.useState)(Array(digits).fill(''));
     const inputs = Array(digits);
     const forceSelection = (event) => {
@@ -132,10 +143,14 @@ const CodeInput = ({ style, digits = 6, autoFocus = false, markInvalid, onCodeCo
             onCodeComplete(completeCode);
         }
     }, [values]);
-    return ((0, jsx_runtime_1.jsx)(CodeInputWrapper, { style: style, children: Array.from({ length: digits }, (_, index) => ((0, jsx_runtime_1.jsx)(DigitInput
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        , { 
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, onPaste: event => handlePaste(index, event), onFocus: forceSelection, onMouseDown: forceSelectionPreventDefault, onTouchStart: forceSelectionPreventDefault, onKeyDown: event => handleKeyDown(index, event), onKeyUp: forceSelection, markInvalid: markInvalid, ref: node => (inputs[index] = node), value: values[index], onChange: () => { }, disabled: disabled }, index))) }));
+    const labelId = React.useId();
+    const getDigitAriaLabel = (value) => (value ? `${codePlaceholder}, ${value}` : `${codePlaceholder}`);
+    return ((0, jsx_runtime_1.jsxs)(CodeInputWrapper, { role: "group", "aria-labelledby": labelId, style: style, children: [(0, jsx_runtime_1.jsx)("span", { id: labelId, css: codeInputLabelStyle, children: codeInputLabel }), (0, jsx_runtime_1.jsx)("div", { css: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexWrap: 'nowrap',
+                    width: '100%',
+                }, children: Array.from({ length: digits }, (_, index) => ((0, jsx_runtime_1.jsx)(DigitInput, { onPaste: event => handlePaste(index, event), onFocus: forceSelection, onMouseDown: forceSelectionPreventDefault, onTouchStart: forceSelectionPreventDefault, onKeyDown: event => handleKeyDown(index, event), onKeyUp: forceSelection, markInvalid: markInvalid, ref: node => (inputs[index] = node), value: values[index], disabled: disabled, id: `code-input-digit-${index}`, inputMode: "numeric", pattern: "[0-9]*", autoComplete: "one-time-code", "aria-label": getDigitAriaLabel(values[index]), "aria-describedby": labelId }, index))) })] }));
 };
 exports.CodeInput = CodeInput;

package/lib/Inputs/CodeInput/CodeInput.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ style, digits, autoFocus, markInvalid, onCodeComplete, disabled, }: import("./CodeInput").CodeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    component: ({ style, digits, markInvalid, onCodeComplete, disabled, codeInputLabel, codePlaceholder, }: import("./CodeInput").CodeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

package/lib/Inputs/Input/Input.d.ts

@@ -14,6 +14,8 @@ export interface InputProps<T = HTMLInputElement> extends TextProps<T> {
     inputCSS?: CSSObject;
     startContent?: React.ReactNode;
     endContent?: React.ReactNode;
+    showTogglePasswordLabel?: string;
+    hideTogglePasswordLabel?: string;
 }
 export declare const inputStyle: <T>(theme: Theme, props: InputProps<T>, hasError?: boolean) => CSSObject;
 export declare const INPUT_CLASSNAME = "wireinput";

package/lib/Inputs/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Input/Input.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAW,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAGtC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAI3C,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,SAmEvF,CAAC;AAEF,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAWzC,eAAO,MAAM,KAAK,oHA+FjB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Input/Input.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAW,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAGtC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAI3C,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,SAmEvF,CAAC;AAEF,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAWzC,eAAO,MAAM,KAAK,oHAkGjB,CAAC"}

package/lib/Inputs/Input/Input.js

@@ -122,11 +122,12 @@ const centerInputAction = {
     transform: 'translateY(-50%)',
 };
 exports.Input = React.forwardRef(({ type, label, error, helperText, startContent = null, endContent = null, inputCSS = {}, wrapperCSS = {}, className = '', ...props }, ref) => {
-    const [togglePassword, setTogglePassword] = (0, react_1.useState)(false);
+    const [isPasswordVisible, setTogglePassword] = (0, react_1.useState)(false);
     const hasError = !!error;
     const isPasswordInput = type === 'password';
-    const toggledPasswordType = togglePassword ? 'text' : 'password';
+    const toggledPasswordType = isPasswordVisible ? 'text' : 'password';
     const toggleSetPassword = () => setTogglePassword(prevState => !prevState);
+    const togglepasswordLabel = isPasswordVisible ? props.hideTogglePasswordLabel : props.showTogglePasswordLabel;
     return ((0, jsx_runtime_1.jsxs)("div", { className: exports.INPUT_GROUP, css: (theme) => ({
             marginBottom: hasError ? '2px' : '20px',
             width: '100%',
@@ -137,7 +138,7 @@ exports.Input = React.forwardRef(({ type, label, error, helperText, startContent
         }), children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid, children: label })), (0, jsx_runtime_1.jsxs)("div", { css: { marginBottom: hasError && '8px', position: 'relative' }, children: [startContent, (0, jsx_runtime_1.jsx)("input", { className: exports.INPUT_CLASSNAME, css: (theme) => ({
                             ...(0, exports.inputStyle)(theme, props, hasError),
                             ...inputCSS,
-                        }), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required, ...filterInputProps(props) }), endContent, hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: { ...centerInputAction, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }, onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword, children: togglePassword ? (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) }))] }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
+                        }), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required, ...filterInputProps(props) }), endContent, hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-uie-name": !isPasswordVisible ? 'do-show-password' : 'do-hide-password', css: { ...centerInputAction, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }, onClick: toggleSetPassword, title: togglepasswordLabel, "aria-label": togglepasswordLabel, "aria-controls": props.id, "aria-expanded": isPasswordVisible, children: isPasswordVisible ? (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) }))] }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
                     fontSize: theme.fontSizes.small,
                     fontWeight: 400,
                     color: theme.Input.placeholderColor,

package/lib/Layout/HeaderMenu/HeaderMenu.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 export interface HeaderMenuProps<T = HTMLDivElement> extends React.HTMLProps<T> {
     centerElement?: React.ReactNode;
     logoElement?: React.ReactNode;
+    openMenuLabel?: string;
+    closeMenuLabel?: string;
 }
 export declare const HeaderMenu: ({ children, logoElement, centerElement, ...props }: HeaderMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=HeaderMenu.d.ts.map

package/lib/Layout/HeaderMenu/HeaderMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderMenu.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/HeaderMenu.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7E,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,uDAAoE,eAAe,qDA+BzG,CAAC"}
+{"version":3,"file":"HeaderMenu.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/HeaderMenu.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7E,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,uDAAoE,eAAe,qDAyCzG,CAAC"}

package/lib/Layout/HeaderMenu/HeaderMenu.js

@@ -34,6 +34,12 @@ const HeaderMenu = ({ children, logoElement = null, centerElement = null, ...pro
         }
     };
     const closeMenu = () => setIsOpen(false);
-    return ((0, jsx_runtime_1.jsx)("div", { css: { height: '64px' }, ...props, "data-uie-name": "element-header-menu", children: (0, jsx_runtime_1.jsxs)(MenuContent_1.MenuContent, { open: isOpen, children: [(0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex', zIndex: 2 }, onClick: closeMenu, children: logoElement }), (0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex' }, children: centerElement }), (0, jsx_runtime_1.jsx)(MenuOpenButton_1.MenuOpenButton, { onClick: toggleMenu, open: isOpen, style: { justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px' }, "data-uie-name": "do-toggle-header-menu" }), (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { onClick: closeMenu, open: isOpen, children: (0, jsx_runtime_1.jsx)(MenuScrollableItems_1.MenuScrollableItems, { children: children }) })] }) }));
+    const onKeyDown = e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleMenu();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { css: { height: '64px' }, ...props, "data-uie-name": "element-header-menu", children: (0, jsx_runtime_1.jsxs)(MenuContent_1.MenuContent, { open: isOpen, children: [(0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex', zIndex: 2 }, onClick: closeMenu, children: logoElement }), (0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex' }, children: centerElement }), (0, jsx_runtime_1.jsx)(MenuOpenButton_1.MenuOpenButton, { onClick: toggleMenu, onKeyDown: onKeyDown, open: isOpen, openMenuLabel: props.openMenuLabel, closeMenuLabel: props.closeMenuLabel, style: { justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px' }, "data-uie-name": "do-toggle-header-menu" }), (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { onClick: closeMenu, open: isOpen, children: (0, jsx_runtime_1.jsx)(MenuScrollableItems_1.MenuScrollableItems, { children: children }) })] }) }));
 };
 exports.HeaderMenu = HeaderMenu;

package/lib/Layout/HeaderMenu/MenuItems.js

@@ -6,7 +6,7 @@ const utils_1 = require("../../utils");
 const menuItemsStyle = (theme, props) => ({
     alignSelf: 'center',
     display: 'flex',
-    justifySelf: 'end',
+    justifySelf: 'stretch',
     [utils_1.media[utils_1.QueryKeys.TABLET_DOWN]]: {
         backgroundColor: theme.general.backgroundColor,
         bottom: 0,

package/lib/Layout/HeaderMenu/MenuOpenButton.d.ts

@@ -3,7 +3,9 @@ import { CSSObject } from '@emotion/react';
 import { Theme } from '../../Identity';
 export interface MenuOpenButtonProps<T = HTMLDivElement> extends React.HTMLProps<T> {
     open?: boolean;
+    openMenuLabel?: string;
+    closeMenuLabel?: string;
 }
 export declare const menuOpenButtonStyle: <T>(theme: Theme, props: MenuOpenButtonProps<T>) => CSSObject;
-export declare const MenuOpenButton: (props: MenuOpenButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MenuOpenButton: ({ open, onClick, onKeyDown, openMenuLabel, closeMenuLabel, ...menuBtnProps }: MenuOpenButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MenuOpenButton.d.ts.map

package/lib/Layout/HeaderMenu/MenuOpenButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuOpenButton.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuOpenButton.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAGrC,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAuBpF,CAAC;AAIH,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAMxD,CAAC"}
+{"version":3,"file":"MenuOpenButton.d.ts","sourceRoot":"","sources":["../../../src/Layout/HeaderMenu/MenuOpenButton.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAIrC,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAmCpF,CAAC;AAIH,eAAO,MAAM,cAAc,iFAOxB,mBAAmB,qDAkBrB,CAAC"}

package/lib/Layout/HeaderMenu/MenuOpenButton.js

@@ -2,9 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuOpenButton = exports.menuOpenButtonStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const colors_v2_1 = require("../../Identity/colors-v2/colors-v2");
 const utils_1 = require("../../utils");
 const menuOpenButtonStyle = (theme, { open }) => ({
     display: 'block',
+    cursor: 'pointer',
+    width: 40,
+    height: 32,
+    padding: '5px 8px',
+    '&:focus-visible': {
+        background: theme.Button?.secondaryActiveBg ?? colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+        border: `1px solid ${theme.Button?.secondaryActiveBorder ?? colors_v2_1.COLOR_V2.BLUE_LIGHT_300}`,
+        borderRadius: 12,
+        boxShadow: `0 0 0 2px ${theme.general?.focusColor ?? colors_v2_1.COLOR_V2.BLUE_LIGHT_300}`,
+        outline: 'none',
+    },
     div: {
         backgroundColor: theme.general.color,
         height: '2px',
@@ -29,5 +41,7 @@ const menuOpenButtonStyle = (theme, { open }) => ({
 });
 exports.menuOpenButtonStyle = menuOpenButtonStyle;
 const filterMenuOpenButtonProps = (props) => (0, utils_1.filterProps)(props, ['open']);
-const MenuOpenButton = (props) => ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, exports.menuOpenButtonStyle)(theme, props), ...filterMenuOpenButtonProps(props), children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
+const MenuOpenButton = ({ open, onClick, onKeyDown, openMenuLabel, closeMenuLabel, ...menuBtnProps }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": open, "aria-label": open ? closeMenuLabel : openMenuLabel, css: (theme) => (0, exports.menuOpenButtonStyle)(theme, menuBtnProps), onKeyDown: onKeyDown, onClick: onClick, ...filterMenuOpenButtonProps(menuBtnProps), children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
+};
 exports.MenuOpenButton = MenuOpenButton;

package/lib/Typography/ActionLink/ActionLink.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { LinkProps } from '../Link';
+type VisualProps = Pick<LinkProps, 'bold' | 'color' | 'fontSize' | 'textTransform'> & {
+    disabled?: boolean;
+    children: React.ReactNode;
+};
+type AnchorVariant = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'disabled'> & {
+    href: string;
+};
+type ButtonVariant = {
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+export type ActionLinkButtonProps = VisualProps & (AnchorVariant | ButtonVariant);
+export type LinkStyleProps<T = HTMLAnchorElement> = LinkProps<T>;
+export declare const ActionLinkButton: React.ForwardRefExoticComponent<ActionLinkButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=ActionLink.d.ts.map

package/lib/Typography/ActionLink/ActionLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionLink.d.ts","sourceRoot":"","sources":["../../../src/Typography/ActionLink/ActionLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAC,SAAS,EAA6B,MAAM,SAAS,CAAC;AAE9D,KAAK,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,eAAe,CAAC,GAAG;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAClG,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC,CAAC;AAElF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,iBAAiB,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,qHAoE5B,CAAC"}

package/lib/Typography/ActionLink/ActionLink.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionLinkButton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const ActionLinkButton_style_1 = require("./ActionLinkButton.style");
+const colors_v2_1 = require("../../Identity/colors-v2/colors-v2");
+const Link_1 = require("../Link");
+exports.ActionLinkButton = (0, react_1.forwardRef)((props, ref) => {
+    const { bold = false, color = colors_v2_1.COLOR_V2.BLACK, fontSize, textTransform = 'none', disabled, children, ...restProps } = props;
+    const baseCss = (theme) => ({
+        ...(0, Link_1.linkStyle)(theme, {
+            bold,
+            color,
+            fontSize: fontSize ?? theme.fontSizes.base,
+            textTransform,
+        }),
+        ...ActionLinkButton_style_1.styles.link.base,
+        ...(disabled ? ActionLinkButton_style_1.styles.link.disabled : ActionLinkButton_style_1.styles.link.enabled),
+    });
+    if ('href' in restProps && restProps.href) {
+        const { href, target, onClick, ...anchorProps } = restProps;
+        const linkProps = (0, Link_1.filterLinkProps)(anchorProps);
+        const handleAnchorClick = e => {
+            if (disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            onClick?.(e);
+        };
+        return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: href, css: (theme) => baseCss(theme), target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : undefined, onClick: handleAnchorClick, ...linkProps, children: children }));
+    }
+    const { onClick, ...btnProps } = props;
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", disabled: disabled || btnProps.disabled, onClick: onClick, css: (theme) => [ActionLinkButton_style_1.styles.buttonReset, baseCss(theme)], ...btnProps, children: children }));
+});
+exports.ActionLinkButton.displayName = 'ActionLinkButton';

package/lib/Typography/ActionLink/ActionLinkButton.style.d.ts

@@ -0,0 +1,12 @@
+import { CSSObject } from '@emotion/react';
+type LinkStateStyles = {
+    base: CSSObject;
+    enabled: CSSObject;
+    disabled: CSSObject;
+};
+export declare const styles: {
+    buttonReset: CSSObject;
+    link: LinkStateStyles;
+};
+export {};
+//# sourceMappingURL=ActionLinkButton.style.d.ts.map

package/lib/Typography/ActionLink/ActionLinkButton.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionLinkButton.style.d.ts","sourceRoot":"","sources":["../../../src/Typography/ActionLink/ActionLinkButton.style.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE;IACnB,WAAW,EAAE,SAAS,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC;CAgCvB,CAAC"}

package/lib/Typography/ActionLink/ActionLinkButton.style.js

@@ -0,0 +1,54 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const colors_v2_1 = require("../../Identity/colors-v2/colors-v2");
+exports.styles = {
+    buttonReset: {
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        margin: 0,
+    },
+    link: {
+        base: {
+            textDecoration: 'underline',
+        },
+        enabled: {
+            color: colors_v2_1.COLOR_V2.BLACK,
+            cursor: 'pointer',
+            '&:hover': {
+                color: colors_v2_1.COLOR_V2.BLUE,
+                textDecorationThickness: '2px',
+            },
+            '&:focus-visible': {
+                color: colors_v2_1.COLOR_V2.BLUE,
+                background: 'rgba(255, 255, 255, 0.01)',
+                borderRadius: 4,
+                outline: '2px solid transparent',
+                boxShadow: `0 0 0 2px ${colors_v2_1.COLOR_V2.BLUE_LIGHT_300}`,
+            },
+        },
+        disabled: {
+            color: colors_v2_1.COLOR_V2.GRAY_80,
+            cursor: 'default',
+        },
+    },
+};

package/lib/Typography/ActionLink/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ActionLink';
+//# sourceMappingURL=index.d.ts.map

package/lib/Typography/ActionLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Typography/ActionLink/index.ts"],"names":[],"mappings":"AAmBA,cAAc,cAAc,CAAC"}

package/lib/Typography/ActionLink/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ActionLink"), exports);

package/lib/Typography/index.d.ts

@@ -5,5 +5,6 @@ export * from './Link';
 export * from './Paragraph';
 export * from './Text';
 export * from './TextLink';
+export * from './ActionLink';
 export * from './Title';
 //# sourceMappingURL=index.d.ts.map

package/lib/Typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Typography/index.ts"],"names":[],"mappings":"AAmBA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Typography/index.ts"],"names":[],"mappings":"AAmBA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/lib/Typography/index.js

@@ -39,4 +39,5 @@ __exportStar(require("./Link"), exports);
 __exportStar(require("./Paragraph"), exports);
 __exportStar(require("./Text"), exports);
 __exportStar(require("./TextLink"), exports);
+__exportStar(require("./ActionLink"), exports);
 __exportStar(require("./Title"), exports);

package/package.json

@@ -79,6 +79,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.69.0",
-  "gitHead": "51989a39c719a80ee01cac9f7da03ee26a71adf0"
+  "version": "9.69.5",
+  "gitHead": "39f37b0ac19efbea138173ee0f68ffa18a3cde42"
 }