@wireapp/react-ui-kit 9.59.1 → 9.59.2

package/lib/Identity/Logo/Logo.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InContext = exports.OnDifferentBackgrounds = exports.Colors = exports.Sizes = exports.CustomColor = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const colors_1 = require("../colors");
+const Logo_1 = require("../Logo");
+const meta = {
+    component: Logo_1.Logo,
+    title: 'Identity/Logo',
+    argTypes: {
+        height: { control: { type: 'number', min: 12, max: 96, step: 4 } },
+        color: { control: 'color' },
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '24px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        height: 32,
+    },
+};
+exports.CustomColor = {
+    args: {
+        color: colors_1.COLOR.BLUE,
+        height: 32,
+    },
+};
+exports.Sizes = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px', alignItems: 'flex-start' }, children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 16 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 24 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 48 }), (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 64 })] })),
+};
+exports.Colors = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { padding: '12px' }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.BLUE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: colors_1.COLOR.BLUE }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.WHITE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: colors_1.COLOR.BLACK }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.WHITE }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: '12px', backgroundColor: colors_1.COLOR.GRAY }, children: (0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: colors_1.COLOR.WHITE }) })] })),
+};
+exports.OnDifferentBackgrounds = {
+    render: () => ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [
+            colors_1.COLOR.WHITE,
+            colors_1.COLOR.GRAY_LIGHTEN_48,
+            colors_1.COLOR.GRAY_LIGHTEN_72,
+            colors_1.COLOR.GRAY,
+            colors_1.COLOR.GRAY_DARKEN_48,
+            colors_1.COLOR.GRAY_DARKEN_72,
+            colors_1.COLOR.BLACK,
+        ].map(backgroundColor => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                alignItems: 'center',
+                backgroundColor,
+                display: 'flex',
+                gap: '24px',
+                padding: '24px',
+            }, children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 32, color: backgroundColor === colors_1.COLOR.WHITE ? colors_1.COLOR.BLACK : colors_1.COLOR.WHITE }), (0, jsx_runtime_1.jsx)("code", { style: { color: backgroundColor === colors_1.COLOR.WHITE ? colors_1.COLOR.BLACK : colors_1.COLOR.WHITE }, children: backgroundColor })] }, backgroundColor))) })),
+};
+exports.InContext = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignItems: 'center',
+            backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_72,
+            display: 'flex',
+            gap: '16px',
+            justifyContent: 'space-between',
+            padding: '16px 24px',
+        }, children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, { height: 24 }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: '24px', width: '24px', backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_32 } }), (0, jsx_runtime_1.jsx)("div", { style: { height: '24px', width: '24px', backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_32 } }), (0, jsx_runtime_1.jsx)("div", { style: { height: '24px', width: '24px', backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_32 } })] })] })),
+};

package/lib/Identity/Logo/index.d.ts

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

package/lib/Identity/Logo/index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sizes.d.ts","sourceRoot":"","sources":["../../../src/Identity/Sizes/Sizes.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}

package/lib/Identity/Sizes/index.d.ts

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

package/lib/Identity/Sizes/index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/Identity/Theme/Theme.tsx"],"names":[],"mappings":"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"}

package/lib/Identity/Theme/Theme.js

@@ -0,0 +1,246 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.themes = exports.THEME_ID = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const colors_1 = require("../colors");
+const colors_v2_1 = require("../colors-v2");
+const Sizes_1 = require("../Sizes");
+var THEME_ID;
+(function (THEME_ID) {
+    THEME_ID["DARK"] = "THEME_DARK";
+    THEME_ID["LIGHT"] = "THEME_LIGHT";
+    THEME_ID["DEFAULT"] = "THEME_DEFAULT";
+})(THEME_ID || (exports.THEME_ID = THEME_ID = {}));
+exports.themes = {
+    [THEME_ID.DEFAULT]: {
+        fontSizes: Sizes_1.fontSizes,
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        Checkbox: {
+            background: 'var(--checkbox-background)',
+            border: 'var(--checkbox-border)',
+            borderFocused: 'var(--accent-color)',
+            disableBgColor: 'var(--checkbox-background-disabled)',
+            disableBorderColor: 'var(--checkbox-border-disabled)',
+            disablecheckedBgColor: 'var(--checkbox-background-disabled-selected)',
+            invalidBorderColor: 'var(--danger-color)',
+        },
+        IconButton: {
+            activePrimaryBgColor: 'var(--accent-color-highlight)',
+            focusBorderColor: 'var(--accent-color-border)',
+            hoverPrimaryBgColor: 'var(--icon-button-primary-hover-bg)',
+            primaryActiveFillColor: 'var(--icon-primary-active-fill)',
+            primaryBgColor: 'var(--icon-button-primary-enabled-bg)',
+            primaryBorderColor: 'var(--icon-button-primary-border)',
+            primaryDisabledBgColor: 'var(--icon-button-primary-disabled-bg)',
+            primaryDisabledBorderColor: 'var(--icon-button-primary-disabled-border)',
+            primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',
+            secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',
+        },
+        IndicatorRangeInput: {
+            thumb: 'var(--indicator-range-input-thumb)',
+            trackBg: 'var(--indicator-range-input-track-bg)',
+        },
+        Input: {
+            backgroundColor: 'var(--text-input-background)',
+            backgroundColorDisabled: 'var(--text-input-disabled)',
+            backgroundAutocomplete: 'var(--text-input-autocomplete-background)',
+            labelColor: 'var(--text-input-label)',
+            placeholderColor: 'var(--text-input-placeholder)',
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        Select: {
+            borderColor: 'var(--text-input-border)',
+            contrastTextColor: 'var(--text-input-background)',
+            disabledColor: 'var(--text-input-placeholder)',
+            focusedDescriptionColor: 'var(--select-focused-description)',
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-hover)',
+        },
+        Tooltip: {
+            backgroundColor: 'var(--button-tertiary-bg)',
+            color: 'var(--main-color)',
+        },
+        general: {
+            backgroundColor: 'var(--app-bg)',
+            color: 'var(--main-color)',
+            dangerColor: 'var(--danger-color)',
+            successColor: 'var(--success-color)',
+            primaryColor: 'var(--accent-color)',
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+    },
+    [THEME_ID.LIGHT]: {
+        fontSizes: Sizes_1.fontSizes,
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        Checkbox: {
+            background: colors_v2_1.COLOR_V2.GRAY_20,
+            border: colors_v2_1.COLOR_V2.GRAY_80,
+            borderFocused: colors_v2_1.BASE_LIGHT_COLOR.BLUE,
+            disableBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            disableBorderColor: colors_v2_1.COLOR_V2.GRAY_60,
+            disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            invalidBorderColor: colors_v2_1.BASE_LIGHT_COLOR.RED,
+        },
+        IconButton: {
+            activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+            focusBorderColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+            hoverPrimaryBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            primaryActiveFillColor: colors_v2_1.COLOR_V2.BLUE,
+            primaryBgColor: colors_v2_1.COLOR_V2.WHITE,
+            primaryBorderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            primaryDisabledBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            primaryDisabledBorderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_50,
+            secondaryActiveBorderColor: 'transparent',
+        },
+        IndicatorRangeInput: {
+            thumb: 'var(--indicator-range-input-thumb)',
+            trackBg: 'var(--indicator-range-input-track-bg)',
+        },
+        Input: {
+            backgroundColor: colors_1.COLOR.WHITE,
+            backgroundColorDisabled: colors_v2_1.COLOR_V2.GRAY_20,
+            backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+            placeholderColor: colors_1.COLOR.GRAY_DARKEN_24,
+            labelColor: colors_v2_1.COLOR_V2.GRAY_80,
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        Select: {
+            disabledColor: colors_v2_1.COLOR_V2.GRAY_70,
+            contrastTextColor: colors_1.COLOR.WHITE,
+            borderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            focusedDescriptionColor: colors_v2_1.COLOR_V2.WHITE,
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-hover)',
+        },
+        Tooltip: {
+            backgroundColor: colors_1.COLOR.WHITE,
+            color: colors_1.COLOR.TEXT,
+        },
+        general: {
+            backgroundColor: colors_v2_1.COLOR_V2.GRAY_20,
+            color: colors_1.COLOR.TEXT,
+            primaryColor: colors_v2_1.COLOR_V2.BLUE,
+            dangerColor: colors_v2_1.COLOR_V2.RED,
+            successColor: colors_v2_1.COLOR_V2.GREEN_LIGHT_500,
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+    },
+    [THEME_ID.DARK]: {
+        fontSizes: Sizes_1.fontSizes,
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        Checkbox: {
+            background: colors_v2_1.COLOR_V2.GRAY_20,
+            border: colors_v2_1.COLOR_V2.GRAY_60,
+            borderFocused: colors_v2_1.BASE_DARK_COLOR.BLUE,
+            disableBgColor: colors_v2_1.COLOR_V2.GRAY_10,
+            disableBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
+            disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_60,
+            invalidBorderColor: colors_v2_1.BASE_DARK_COLOR.RED,
+        },
+        IconButton: {
+            activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
+            focusBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_600,
+            hoverPrimaryBgColor: colors_v2_1.COLOR_V2.GRAY_80,
+            primaryActiveFillColor: colors_1.COLOR.WHITE,
+            primaryBgColor: colors_v2_1.COLOR_V2.GRAY_90,
+            primaryBorderColor: colors_v2_1.COLOR_V2.GRAY_100,
+            primaryDisabledBgColor: colors_v2_1.COLOR_V2.GRAY_95,
+            primaryDisabledBorderColor: colors_v2_1.COLOR_V2.GRAY_90,
+            primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
+            secondaryActiveBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
+        },
+        IndicatorRangeInput: {
+            thumb: 'var(--indicator-range-input-thumb)',
+            trackBg: 'var(--indicator-range-input-track-bg)',
+        },
+        Input: {
+            backgroundColor: colors_1.COLOR.BLACK_LIGHTEN_24,
+            backgroundColorDisabled: colors_1.COLOR.GRAY_100,
+            backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_900,
+            placeholderColor: colors_1.COLOR.GRAY_LIGHTEN_88,
+            labelColor: colors_v2_1.COLOR_V2.GRAY_40,
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        Select: {
+            disabledColor: colors_v2_1.COLOR_V2.GRAY_60,
+            contrastTextColor: colors_1.COLOR.BLACK,
+            borderColor: colors_v2_1.COLOR_V2.GRAY_90,
+            focusedDescriptionColor: colors_v2_1.COLOR_V2.GRAY_40,
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-active)',
+        },
+        Tooltip: {
+            backgroundColor: colors_1.COLOR.TEXT,
+            color: colors_1.COLOR.WHITE,
+        },
+        general: {
+            backgroundColor: colors_1.COLOR.BLACK,
+            color: colors_1.COLOR.WHITE,
+            primaryColor: colors_v2_1.COLOR_V2.BLUE,
+            dangerColor: colors_v2_1.COLOR_V2.RED,
+            successColor: colors_v2_1.COLOR_V2.GREEN_DARK_500,
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+    },
+};
+const ThemeProvider = (props) => (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { ...props, theme: props.theme });
+exports.ThemeProvider = ThemeProvider;

package/lib/Identity/Theme/index.d.ts

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

package/lib/Identity/Theme/index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/Identity/colors/colors.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAgE3F,eAAO,MAAM,KAAK,EAAE,GAWnB,CAAC"}

package/lib/Identity/colors/colors.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.stories.d.ts","sourceRoot":"","sources":["../../../src/Identity/colors/colors.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AA8CpB,eAAO,MAAM,UAAU,wDAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAMxB,CAAC;AAEF,eAAO,MAAM,aAAa,wDAMzB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAM1B,CAAC;AAEF,eAAO,MAAM,eAAe,wDAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wDAuB5B,CAAC"}

package/lib/Identity/colors/index.d.ts

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

package/lib/Identity/colors/index.d.ts.map

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

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

package/lib/Identity/colors-v2/colors-v2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-v2.d.ts","sourceRoot":"","sources":["../../../src/Identity/colors-v2/colors-v2.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,gBAAgB;;;;;;;CAOnB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC;AA8LX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQX,CAAC"}

package/lib/Identity/colors-v2/colors-v2.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-v2.stories.d.ts","sourceRoot":"","sources":["../../../src/Identity/colors-v2/colors-v2.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAwDpB,eAAO,MAAM,UAAU,wDAetB,CAAC;AAEF,eAAO,MAAM,SAAS,wDAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,wDAQrB,CAAC;AAEF,eAAO,MAAM,UAAU,wDAQtB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAQ1B,CAAC;AAEF,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,QAAQ,wDAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,wDAQtB,CAAC"}

package/lib/Identity/colors-v2/index.d.ts

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

package/lib/Identity/colors-v2/index.d.ts.map

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

package/lib/Identity/colors-v2/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("./colors-v2"), exports);

package/lib/Identity/index.d.ts

@@ -1,7 +1,10 @@
 export * from './Animation';
-export * from './Avatar';
-export * from './AvatarGrid';
 export * from './colors';
 export * from './colors-v2';
+export * from './GlobalCssVariables';
+export * from './GlobalStyle';
 export * from './Logo';
+export * from './motions';
+export * from './Sizes';
+export * from './Theme';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Identity/index.ts"],"names":[],"mappings":"AAmBA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Identity/index.ts"],"names":[],"mappings":"AAmBA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/lib/Identity/index.js

@@ -33,8 +33,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Animation"), exports);
-__exportStar(require("./Avatar"), exports);
-__exportStar(require("./AvatarGrid"), exports);
 __exportStar(require("./colors"), exports);
 __exportStar(require("./colors-v2"), exports);
+__exportStar(require("./GlobalCssVariables"), exports);
+__exportStar(require("./GlobalStyle"), exports);
 __exportStar(require("./Logo"), exports);
+__exportStar(require("./motions"), exports);
+__exportStar(require("./Sizes"), exports);
+__exportStar(require("./Theme"), exports);

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

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

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

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

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

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