@wireapp/react-ui-kit 9.69.7-beta.14.5ce5ca523 → 9.70.0

package/lib/Identity/motions/motions.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Duration exception - When a motion longer than 0.7 seconds is needed use a multiplier of 700.
+ */
+export declare const DURATION: {
+    DEFAULT: number;
+    EXTRA_LONG: number;
+    PROACTIVE_FAST: number;
+    PROACTIVE_SLOW: number;
+    SYSTEM: number;
+};
+/**
+ * The rule of thumb is using Quart Out when animating only the object's opacity,
+ * otherwise use Expo Out ease.
+ */
+export declare const EASE: {
+    EXPONENTIAL: string;
+    QUART: string;
+};
+export declare const ANIMATION: {
+    bottomUpMovement: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    fadeIn: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    rotate: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    topDownMovement: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    topDownMovementLight: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+};
+export declare const defaultTransition = "all 0.24s";
+//# sourceMappingURL=motions.d.ts.map

package/lib/Identity/motions/motions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motions.d.ts","sourceRoot":"","sources":["../../../src/Identity/motions/motions.ts"],"names":[],"mappings":"AAuBA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI;;;CAGhB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,cAAc,CAAC"}

package/lib/Identity/motions/motions.js

@@ -0,0 +1,84 @@
+"use strict";
+/*
+ * 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/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTransition = exports.ANIMATION = exports.EASE = exports.DURATION = void 0;
+const react_1 = require("@emotion/react");
+// https://motion.wire.com/_guidelines_/rules.html
+/**
+ * Duration exception - When a motion longer than 0.7 seconds is needed use a multiplier of 700.
+ */
+exports.DURATION = {
+    DEFAULT: 550,
+    EXTRA_LONG: 2400,
+    PROACTIVE_FAST: 150,
+    PROACTIVE_SLOW: 350,
+    SYSTEM: 700,
+};
+/**
+ * The rule of thumb is using Quart Out when animating only the object's opacity,
+ * otherwise use Expo Out ease.
+ */
+exports.EASE = {
+    EXPONENTIAL: 'cubic-bezier(0.19, 1, 0.22, 1)',
+    QUART: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
+};
+exports.ANIMATION = {
+    bottomUpMovement: (0, react_1.keyframes) `
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  `,
+    fadeIn: (0, react_1.keyframes) `
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  `,
+    rotate: (0, react_1.keyframes) `
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  `,
+    topDownMovement: (0, react_1.keyframes) `
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  `,
+    topDownMovementLight: (0, react_1.keyframes) `
+    0% {
+      transform: translateY(-20%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  `,
+};
+exports.defaultTransition = 'all 0.24s';

package/lib/Images/SuccessShield.d.ts

@@ -0,0 +1,2 @@
+export declare const SuccessShield: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SuccessShield.d.ts.map

package/lib/Images/SuccessShield.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuccessShield.d.ts","sourceRoot":"","sources":["../../src/Images/SuccessShield.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,aAAa,wDAqDzB,CAAC"}

package/lib/Images/SuccessShield.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuccessShield = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * 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/.
+ *
+ */
+const SuccessShield = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "240", height: "241", viewBox: "0 0 240 241", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M124.995 30.3382L125.813 31.1008L126.372 31.5963L127.228 32.302L128.379 33.1958C131.092 35.2446 134.401 37.3271 138.303 39.2916C149.684 45.0214 163.443 48.4847 179.674 48.4847C185.311 48.4847 189.882 53.0865 189.882 58.763V140.989C189.882 163.089 179.827 181.78 163.083 195.267C149.451 206.247 132.012 212.937 118.426 212.937C104.841 212.937 87.4008 206.247 73.7696 195.267C57.0254 181.78 46.9707 163.089 46.9707 140.989V58.763C46.9707 53.0865 51.5409 48.4847 57.1786 48.4847C73.4093 48.4847 87.168 45.0214 98.5491 39.2916C102.451 37.3271 105.76 35.2446 108.473 33.1958L109.624 32.302L110.797 31.3209L111.208 30.9387C114.985 27.136 120.984 26.9359 124.995 30.3382Z", fill: "url(#paint0_linear_8509_36899)", stroke: "black", strokeWidth: "4.11429" }), (0, jsx_runtime_1.jsx)("rect", { x: "51.0859", y: "52.0981", width: "136.455", height: "120.32", rx: "16.1385", fill: "url(#pattern0_8509_36899)" }), (0, jsx_runtime_1.jsx)("path", { d: "M87.626 105.797C90.3875 105.797 92.6337 108.06 92.6338 110.842L92.6299 127.9C92.6299 131.189 91.4525 134.195 89.4756 136.513C91.2438 137.831 93.4488 138.621 95.8125 138.621C101.498 138.621 106.107 134.108 106.39 128.452L106.403 127.9V107.091H108.907V127.9C108.907 135.202 103.049 141.144 95.7998 141.144C92.7262 141.144 89.9413 140.068 87.7002 138.281C85.4591 140.068 82.6085 141.144 79.5352 141.144C72.2859 141.143 66.3359 135.202 66.3359 127.9V107.091H68.8398V127.9C68.8398 133.812 73.6402 138.621 79.5088 138.621C81.8728 138.621 84.0784 137.831 85.8467 136.513C83.8697 134.195 82.6133 131.189 82.6133 127.9L82.6172 110.842C82.6173 108.06 84.8644 105.797 87.626 105.797ZM144.623 111.521C151.336 104.753 162.258 104.753 168.971 111.521C169.268 111.821 169.552 112.129 169.823 112.445L157.679 124.689L147.316 135.137C153.09 140.048 161.758 139.765 167.196 134.285L168.968 136.07C162.255 142.835 151.335 142.834 144.623 136.067C137.91 129.3 137.91 118.288 144.623 111.521ZM118.929 140.476H116.424V107.022H118.929V140.476ZM140.853 108.966C134.288 108.966 128.946 114.346 128.946 120.958H128.945V140.476H126.44V107.022H128.945V112.787C131.543 108.958 135.911 106.439 140.853 106.439V108.966ZM87.626 108.319C86.2453 108.319 85.1212 109.451 85.1211 110.842L85.1172 127.9C85.1172 130.525 86.0611 132.929 87.6211 134.795C89.181 132.93 90.1249 130.525 90.125 127.901L90.1299 110.842C90.1298 109.451 89.0065 108.32 87.626 108.319ZM166.276 112.451C160.502 107.539 151.832 107.823 146.394 113.306C140.956 118.788 140.673 127.53 145.546 133.352L166.276 112.451Z", fill: "white" }), (0, jsx_runtime_1.jsx)("rect", { x: "144", y: "167.5", width: "50", height: "50", rx: "25", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M169 167.5C155.193 167.5 144 178.693 144 192.5C144 206.307 155.193 217.5 169 217.5C182.807 217.5 194 206.307 194 192.5C194 178.693 182.807 167.5 169 167.5ZM186.875 185.828L164.802 207.681L150.972 194.039L155.391 189.62L164.802 198.842L182.455 181.409L186.875 185.828Z", fill: "#1D7833" }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("pattern", { id: "pattern0_8509_36899", patternContentUnits: "objectBoundingBox", width: "0.0236539", height: "0.0268259", children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#image0_8509_36899", transform: "scale(0.00295674 0.00335324)" }) }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_8509_36899", x1: "160.772", y1: "200.018", x2: "62.5707", y2: "35.9853", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0.82932" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#54A6FF" })] }), (0, jsx_runtime_1.jsx)("image", { id: "image0_8509_36899", width: "8", height: "8", preserveAspectRatio: "none", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACZJREFUGBljYGBg+A/EuAA+OVx6CIiDjEQxlomABipJo9iJZuZ/AC8NBf1LtGs1AAAAAElFTkSuQmCC" })] })] }));
+exports.SuccessShield = SuccessShield;

package/lib/Images/WavesPattern.d.ts

@@ -0,0 +1,2 @@
+export declare const WavesPattern: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WavesPattern.d.ts.map

package/lib/Images/WavesPattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WavesPattern.d.ts","sourceRoot":"","sources":["../../src/Images/WavesPattern.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,YAAY,wDAwCxB,CAAC"}

package/lib/Images/WavesPattern.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WavesPattern = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * 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/.
+ *
+ */
+const WavesPattern = () => ((0, jsx_runtime_1.jsxs)("svg", { css: {
+        bottom: 0,
+        position: 'absolute',
+        width: '100%',
+        height: 'auto',
+        left: 0,
+    }, width: "457", height: "311", viewBox: "0 0 457 311", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M841.651 -527.209C964.429 -307.492 902.996 -233.095 657.354 -304.019C411.713 -374.943 350.28 -300.546 473.058 -80.829C595.835 138.888 534.402 213.285 288.761 142.361C43.1188 71.4374 -18.3134 145.834 104.464 365.551C227.241 585.269 165.809 659.665 -79.8332 588.741", stroke: "#54A6FF", strokeWidth: "8.46296", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M812.808 -272.458C823.01 -144.581 764.405 -95.9381 636.992 -126.53C509.579 -157.121 450.974 -108.479 461.177 19.3985C471.38 147.276 412.775 195.918 285.362 165.327C157.949 134.735 99.3436 183.378 109.546 311.255C119.749 439.132 61.144 487.775 -66.2689 457.183", stroke: "#FFE57D", strokeWidth: "6.77037", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M383.347 148.382C413.674 260.208 374.864 292.421 266.917 245.021C158.969 197.62 120.159 229.833 150.486 341.659C180.813 453.485 142.003 485.698 34.0553 438.297C-73.892 390.897 -112.702 423.11 -82.3753 534.936C-52.0485 646.762 -90.8587 678.975 -198.806 631.574M849.424 -238.409C879.751 -126.583 840.941 -94.37 732.994 -141.771C625.046 -189.171 586.236 -156.959 616.563 -45.1322C646.89 66.6941 608.08 98.9069 500.132 51.5063C392.185 4.10561 353.375 36.3184 383.702 148.145C414.029 259.971 375.218 292.184 267.271 244.783", stroke: "#30DB5B", strokeWidth: "7.86659", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M-137.046 621.16C-107.536 538.457 -48.8093 488.749 39.1334 472.036C127.076 455.324 185.802 405.616 215.313 322.913C244.823 240.21 303.549 190.502 391.492 173.79C479.434 157.078 538.161 107.37 567.671 24.6669C597.181 -58.0361 655.907 -107.744 743.85 -124.456", stroke: "#DA8FFF", strokeWidth: "2.94997", strokeLinecap: "round" })] }));
+exports.WavesPattern = WavesPattern;

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

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react';
+import { ButtonVariant } from './Button';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Button").ButtonProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: ButtonVariant[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Send: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const Block: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

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"}