@wireapp/react-ui-kit 9.59.1 → 9.59.3

package/lib/Inputs/Button/Button.d.ts

@@ -0,0 +1,21 @@
+import { TextProps } from '../../Typography';
+export declare enum ButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    QUATERNARY = "quaternary",
+    SEND = "send",
+    CANCEL = "cancel"
+}
+export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
+    variant?: ButtonVariant;
+    group?: boolean;
+    backgroundColor?: string;
+    loadingColor?: string;
+    noCapital?: boolean;
+    showLoading?: boolean;
+    isActive?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const filterButtonProps: (props: ButtonProps) => Object;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Button/Button.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAC,SAAS,EAAkB,MAAM,kBAAkB,CAAC;AAG5D,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,2IAMlB,CAAC;AAIF,eAAO,MAAM,iBAAiB,UAAW,WAAW,WAEnD,CAAC"}

package/lib/Inputs/Button/Button.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterButtonProps = exports.Button = exports.ButtonVariant = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2018 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/.
+ *
+ */
+const react_1 = require("react");
+const Button_styles_1 = require("./Button.styles");
+const DataDisplay_1 = require("../../DataDisplay");
+const Identity_1 = require("../../Identity");
+const Typography_1 = require("../../Typography");
+const utils_1 = require("../../utils");
+var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant["PRIMARY"] = "primary";
+    ButtonVariant["SECONDARY"] = "secondary";
+    ButtonVariant["TERTIARY"] = "tertiary";
+    ButtonVariant["QUATERNARY"] = "quaternary";
+    ButtonVariant["SEND"] = "send";
+    ButtonVariant["CANCEL"] = "cancel";
+})(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
+exports.Button = (0, react_1.forwardRef)(({ showLoading, children, loadingColor = Identity_1.COLOR.WHITE, ...props }, ref) => ((0, jsx_runtime_1.jsx)("button", { ref: ref, css: (theme) => (0, Button_styles_1.buttonStyle)(theme, props), ...(0, exports.filterButtonProps)(props), children: showLoading ? (0, jsx_runtime_1.jsx)(DataDisplay_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children })));
+exports.Button.displayName = 'Button';
+const filterButtonProps = (props) => {
+    return (0, utils_1.filterProps)((0, Typography_1.filterTextProps)(props), ['backgroundColor', 'noCapital']);
+};
+exports.filterButtonProps = filterButtonProps;

package/lib/Inputs/Button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Button/Button.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAS,aAAa,EAAC,MAAM,UAAU,CAAC;AAK/C,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAaqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/lib/Inputs/Button/Button.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Block = exports.Loading = exports.Disabled = exports.Send = exports.Tertiary = exports.Secondary = exports.Primary = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Button_1 = require("./Button");
+const Icon_1 = require("../../DataDisplay/Icon");
+const Identity_1 = require("../../Identity");
+const meta = {
+    title: 'Inputs/Button',
+    component: Button_1.Button,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: Object.values(Button_1.ButtonVariant),
+        },
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        children: 'Primary Button',
+    },
+};
+exports.Secondary = {
+    args: {
+        children: 'Secondary Button',
+        variant: Button_1.ButtonVariant.SECONDARY,
+    },
+};
+exports.Tertiary = {
+    args: {
+        children: 'Tertiary Button',
+        variant: Button_1.ButtonVariant.TERTIARY,
+    },
+};
+exports.Send = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.PlaneIcon, { color: Identity_1.COLOR_V2.WHITE }),
+        variant: Button_1.ButtonVariant.SEND,
+    },
+};
+exports.Disabled = {
+    args: {
+        children: 'Disabled Button',
+        disabled: true,
+    },
+};
+exports.Loading = {
+    args: {
+        children: 'Loading Button',
+        showLoading: true,
+    },
+};
+exports.Block = {
+    args: {
+        children: 'Full Width Button',
+        block: true,
+    },
+};

package/lib/Inputs/Button/Button.styles.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject } from '@emotion/react';
+import { ButtonProps } from './Button';
+import { Theme } from '../../Identity';
+export declare const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject;
+//# sourceMappingURL=Button.styles.d.ts.map

package/lib/Inputs/Button/Button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Button/Button.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,WAAW,EAAgB,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAkB,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAqLtD,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAyErE,CAAC"}

package/lib/Inputs/Button/Button.styles.js

@@ -0,0 +1,233 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2024 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.buttonStyle = void 0;
+const Button_1 = require("./Button");
+const Identity_1 = require("../../Identity");
+const motions_1 = require("../../Identity/motions");
+const Typography_1 = require("../../Typography");
+const buttonPrimaryStyles = (theme, { backgroundColor, disabled, isActive }) => {
+    const activeStyles = {
+        backgroundColor: theme.Button.primaryActiveBg,
+        border: `1px solid ${theme.Button.primaryActiveBorder}`,
+        color: Identity_1.COLOR.WHITE,
+    };
+    return {
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,
+                backgroundColor: backgroundColor || disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: theme.Button.primaryHoverBg,
+            },
+            '&:focus': {
+                border: `1px solid ${theme.Button.primaryFocusBorder}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
+};
+const buttonSecondaryStyles = (theme, { backgroundColor, disabled, isActive }) => {
+    const activeStyles = {
+        backgroundColor: theme.Button.secondaryActiveBg,
+        border: `1px solid ${theme.Button.secondaryActiveBorder}`,
+        color: theme.general.primaryColor,
+    };
+    return {
+        border: `1px solid ${theme.IconButton.primaryBorderColor}`,
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? theme.Input.placeholderColor : theme.general.color,
+                backgroundColor: backgroundColor || disabled ? theme.IconButton.primaryDisabledBgColor : theme.IconButton.primaryBgColor,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                border: `1px solid ${theme.Button.secondaryHoverBorder}`,
+            },
+            '&:focus': {
+                color: theme.IconButton.primaryActiveFillColor,
+            },
+            '&:active': activeStyles,
+        }),
+    };
+};
+const buttonTertiaryStyles = (theme, { backgroundColor, disabled, isActive }) => {
+    const activeStyles = {
+        backgroundColor: theme.Button.tertiaryActiveBg,
+        color: theme.IconButton.primaryActiveFillColor,
+        '& > svg > path': {
+            fill: theme.IconButton.primaryActiveFillColor,
+        },
+    };
+    return {
+        border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,
+        borderRadius: '12px',
+        fontSize: theme.fontSizes.medium,
+        fontWeight: 700,
+        lineHeight: '1.5rem',
+        padding: '4px 8px',
+        '& > svg > path': {
+            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
+        },
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? theme.Input.placeholderColor : theme.general.color,
+                backgroundColor: backgroundColor || disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: theme.Button.tertiaryHoverBg,
+                border: `1px solid ${theme.Button.tertiaryHoverBorder}`,
+            },
+            '&:focus': {
+                border: `1px solid ${theme.general.focusColor}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
+};
+const buttonQuaternaryStyles = ({ backgroundColor, disabled, isActive }) => {
+    const activeStyles = {
+        backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_700,
+    };
+    return {
+        lineHeight: '1.5rem',
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE,
+                backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_600,
+            },
+            '&:focus': {
+                border: `1px solid ${Identity_1.COLOR_V2.GREEN_LIGHT_700}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
+};
+const buttonCancelStyles = ({ backgroundColor, disabled, isActive }) => {
+    const activeStyles = {
+        backgroundColor: Identity_1.COLOR_V2.RED_LIGHT_700,
+    };
+    return {
+        lineHeight: '1.5rem',
+        ...(isActive
+            ? activeStyles
+            : {
+                color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE,
+                backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.RED,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: Identity_1.COLOR_V2.RED_LIGHT_600,
+            },
+            '&:focus': {
+                border: `1px solid ${Identity_1.COLOR_V2.RED_LIGHT_700}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
+};
+const buttonSendStyles = ({ backgroundColor, disabled, isActive }) => {
+    const activeStyles = {
+        backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_700,
+    };
+    return {
+        width: '40px',
+        ...(isActive
+            ? activeStyles
+            : {
+                backgroundColor: backgroundColor || disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLUE,
+            }),
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_600,
+            },
+            '&:focus': {
+                border: `1px solid ${Identity_1.COLOR_V2.BLUE_LIGHT_800}`,
+            },
+            '&:active': activeStyles,
+        }),
+    };
+};
+const buttonStyle = (theme, { variant = Button_1.ButtonVariant.PRIMARY, block = false, noCapital = false, bold = true, center = true, color = Identity_1.COLOR.WHITE, fontSize = theme.fontSizes.base, noWrap = true, textTransform = 'none', truncate = true, group = false, ...props }) => {
+    return {
+        ...(0, Typography_1.textStyle)(theme, {
+            block,
+            bold,
+            center,
+            fontSize,
+            noWrap,
+            textTransform,
+            truncate,
+            ...props,
+        }),
+        border: 0,
+        cursor: props.disabled ? 'not-allowed' : 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: '16px',
+        padding: 0,
+        outline: 'none',
+        textDecoration: 'none',
+        touchAction: 'manipulation',
+        transition: motions_1.defaultTransition,
+        width: block ? '100%' : 'auto',
+        '&:hover, &:focus': {
+            textDecoration: 'none',
+        },
+        ...(variant !== Button_1.ButtonVariant.TERTIARY && {
+            borderRadius: variant === Button_1.ButtonVariant.SEND ? '100%' : '16px',
+            height: variant === Button_1.ButtonVariant.SEND ? '40px' : '48px',
+            lineHeight: variant === Button_1.ButtonVariant.SEND ? '40px' : '48px',
+            ...(variant !== Button_1.ButtonVariant.SEND && {
+                maxWidth: '100%',
+                minWidth: '125px',
+                padding: '0 16px',
+            }),
+        }),
+        ...(variant === Button_1.ButtonVariant.PRIMARY && buttonPrimaryStyles(theme, props)),
+        ...(variant === Button_1.ButtonVariant.SECONDARY && buttonSecondaryStyles(theme, props)),
+        ...(variant === Button_1.ButtonVariant.TERTIARY && buttonTertiaryStyles(theme, props)),
+        ...(variant === Button_1.ButtonVariant.QUATERNARY && buttonQuaternaryStyles(props)),
+        ...(variant === Button_1.ButtonVariant.CANCEL && buttonCancelStyles(props)),
+        ...(variant === Button_1.ButtonVariant.SEND && buttonSendStyles(props)),
+        ...(group && {
+            borderRadius: '0',
+            '&:first-of-type': {
+                borderRadius: '12px 0 0 12px',
+            },
+            '&:last-of-type': {
+                borderRadius: '0 12px 12px 0',
+            },
+        }),
+    };
+};
+exports.buttonStyle = buttonStyle;

package/lib/Inputs/Button/index.d.ts

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

package/lib/Inputs/Button/index.d.ts.map

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

package/lib/Inputs/Button/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("./Button"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAa,SAAS,EAAC,MAAM,OAAO,CAAC;AAyD5C,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,QAAA,MAAM,WAAW;mBAAgB,gBAAgB;;CAIhD,CAAC;AA2BF,OAAO,EAAC,WAAW,EAAC,CAAC"}

package/lib/Inputs/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 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/.
+ *
+ */
+const react_1 = require("react");
+const Identity_1 = require("../../Identity");
+const buttonGroupStyle = () => ({
+    display: 'flex',
+    alignItems: 'center',
+});
+const buttonStyle = (_, { disabled = false }) => ({
+    height: '32px',
+    borderRadius: '12px',
+    padding: '0 12px',
+    background: Identity_1.COLOR_V2.WHITE,
+    border: `1px solid ${Identity_1.COLOR_V2.GRAY_40}`,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: disabled ? Identity_1.COLOR_V2.GRAY_20 : Identity_1.COLOR_V2.WHITE,
+    svg: {
+        fill: disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLACK,
+    },
+    '&:not(:last-child)': {
+        borderTopRightRadius: '0',
+        borderBottomRightRadius: '0',
+    },
+    '&:not(:first-child)': {
+        borderTopLeftRadius: '0',
+        borderBottomLeftRadius: '0',
+    },
+    '&:first-child:last-child': {
+        borderRadius: '0',
+    },
+    ...(!disabled && {
+        '&:hover, &:focus': {
+            backgroundColor: Identity_1.COLOR_V2.GRAY_20,
+        },
+        '&:hover': {
+            borderColor: Identity_1.COLOR_V2.GRAY_50,
+        },
+        '&:focus': {
+            borderColor: Identity_1.COLOR_V2.GRAY_60,
+        },
+        '&:active': {
+            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_50,
+            borderColor: Identity_1.COLOR_V2.BLUE_LIGHT_300,
+            svg: {
+                fill: Identity_1.COLOR_V2.BLUE,
+            },
+        },
+    }),
+});
+const ButtonGroup = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => buttonGroupStyle(theme), role: "group", "aria-label": "Button Group", children: children }));
+exports.ButtonGroup = ButtonGroup;
+const Button = (0, react_1.forwardRef)(({ children, icon, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, css: (theme) => buttonStyle(theme, props), ...props, children: [icon, children && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => ({
+                    marginLeft: !!icon && '6px',
+                    fontSize: theme.fontSizes.small,
+                    fontWeight: 'bold',
+                    lineHeight: '0.875rem',
+                    letterSpacing: '0.25px',
+                }), children: children }))] }));
+});
+Button.displayName = 'Button';
+ButtonGroup.Button = Button;

package/lib/Inputs/ButtonGroup/ButtonGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ButtonGroup/ButtonGroup.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,wDAarB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAaxB,CAAC"}

package/lib/Inputs/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedContent = exports.WithIcons = exports.SingleButton = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const ButtonGroup_1 = require("./ButtonGroup");
+const Icon_1 = require("../../DataDisplay/Icon");
+const meta = {
+    component: ButtonGroup_1.ButtonGroup,
+    title: 'Inputs/ButtonGroup',
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px', maxWidth: '600px', margin: '0 auto' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Button" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Text only" })] })),
+    },
+};
+exports.SingleButton = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Text only" }),
+    },
+};
+const WithIcons = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) })] }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Add" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "Create" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "New" })] })] }));
+exports.WithIcons = WithIcons;
+const MixedContent = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [(0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Middle" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }), children: "End" })] }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "Start" }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { icon: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, { height: 12, width: 12 }) }), (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup.Button, { children: "End" })] })] }));
+exports.MixedContent = MixedContent;

package/lib/Inputs/ButtonGroup/index.d.ts

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

package/lib/Inputs/ButtonGroup/index.d.ts.map

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

package/lib/Inputs/ButtonGroup/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("./ButtonGroup"), exports);

package/lib/Inputs/ButtonLink/ButtonLink.d.ts

@@ -0,0 +1,6 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../../Identity/Theme';
+import { ButtonProps } from '../Button';
+export declare const buttonLinkStyle: (theme: Theme, props: ButtonProps<HTMLAnchorElement>) => CSSObject;
+export declare const ButtonLink: ({ children, showLoading, loadingColor, ...props }: ButtonProps<HTMLAnchorElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ButtonLink/ButtonLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAG3C,OAAO,EAAC,WAAW,EAAC,MAAM,WAAW,CAAC;AAGtC,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,SAGrF,CAAC;AAUH,eAAO,MAAM,UAAU,sDAKpB,WAAW,CAAC,iBAAiB,CAAC,qDAIhC,CAAC"}

package/lib/Inputs/ButtonLink/ButtonLink.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonLink = exports.buttonLinkStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DataDisplay_1 = require("../../DataDisplay");
+const Identity_1 = require("../../Identity");
+const Typography_1 = require("../../Typography");
+const util_1 = require("../../utils/util");
+const Button_styles_1 = require("../Button/Button.styles");
+const buttonLinkStyle = (theme, props) => ({
+    ...(0, Button_styles_1.buttonStyle)(theme, props),
+    display: 'inline-flex !important',
+});
+exports.buttonLinkStyle = buttonLinkStyle;
+const filterButtonLinkProps = (props) => {
+    return (0, util_1.filterProps)((0, Typography_1.filterTextProps)(props), [
+        'backgroundColor',
+        'disabled',
+        'noCapital',
+    ]);
+};
+const ButtonLink = ({ children, showLoading, loadingColor = Identity_1.COLOR.WHITE, ...props }) => ((0, jsx_runtime_1.jsx)("a", { css: (theme) => (0, exports.buttonLinkStyle)(theme, props), ...filterButtonLinkProps(props), children: showLoading ? (0, jsx_runtime_1.jsx)(DataDisplay_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children }));
+exports.ButtonLink = ButtonLink;

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, showLoading, loadingColor, ...props }: import("..").ButtonProps<HTMLAnchorElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomColor: Story;
+export declare const Loading: Story;
+//# sourceMappingURL=ButtonLink.stories.d.ts.map

package/lib/Inputs/ButtonLink/ButtonLink.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ButtonLink/ButtonLink.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}