@wireapp/react-ui-kit 9.31.0 → 9.33.0

package/lib/Form/Switch.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledChecked = exports.Disabled = exports.Checked = exports.Default = 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 react_1 = require("react");
+const Switch_1 = require("./Switch");
+const DefaultStory = ({ checked, disabled }) => {
+    const [isChecked, setIsChecked] = (0, react_1.useState)(checked);
+    return (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: isChecked, disabled: disabled, onToggle: () => setIsChecked(!isChecked) });
+};
+const meta = {
+    title: 'Form/Switch',
+    component: Switch_1.Switch,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    render: ({ checked, disabled, ...args }) => (0, jsx_runtime_1.jsx)(DefaultStory, { ...args, checked: checked, disabled: disabled }),
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        checked: false,
+        disabled: false,
+        onToggle: () => { },
+    },
+};
+exports.Checked = {
+    args: {
+        checked: true,
+        disabled: false,
+        onToggle: () => { },
+    },
+};
+exports.Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+        onToggle: () => { },
+    },
+};
+exports.DisabledChecked = {
+    args: {
+        checked: true,
+        disabled: true,
+        onToggle: () => { },
+    },
+};

package/lib/Form/TextArea.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./TextArea").TextAreaProps<HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=TextArea.stories.d.ts.map

package/lib/Form/TextArea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../src/Form/TextArea.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAKrD,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,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,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/lib/Form/TextArea.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Invalid = exports.WithLabel = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const InputLabel_1 = require("./InputLabel");
+const TextArea_1 = require("./TextArea");
+const meta = {
+    title: 'Form/TextArea',
+    component: TextArea_1.TextArea,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        placeholder: 'Enter your message...',
+    },
+};
+exports.WithLabel = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: "textarea-example", children: "Message" }), (0, jsx_runtime_1.jsx)(TextArea_1.TextArea, { id: "textarea-example", placeholder: "Type your message here..." })] })),
+};
+exports.Invalid = {
+    args: {
+        placeholder: 'Invalid input...',
+        markInvalid: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        placeholder: 'Disabled textarea...',
+        disabled: true,
+    },
+};

package/lib/Form/Tooltip.d.ts

@@ -1,8 +1,7 @@
 import { HTMLProps, ReactNode } from 'react';
-interface TooltipProps<T = HTMLDivElement> extends HTMLProps<T> {
+export interface TooltipProps<T = HTMLDivElement> extends HTMLProps<T> {
     body: ReactNode;
     selector?: string;
 }
 export declare const Tooltip: ({ children, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/lib/Form/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAqJrF,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC7D,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAmCzD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAqJrF,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAmCzD,CAAC"}

package/lib/Form/Tooltip.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, ...props }: import("./Tooltip").TooltipProps) => 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 WithInput: Story;
+export declare const CustomPosition: Story;
+export declare const LongContent: Story;
+export declare const WithMarkup: Story;
+//# sourceMappingURL=Tooltip.stories.d.ts.map

package/lib/Form/Tooltip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;;;;;;CAOsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}

package/lib/Form/Tooltip.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithMarkup = exports.LongContent = exports.CustomPosition = exports.WithInput = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Button_1 = require("./Button");
+const Input_1 = require("./Input");
+const Tooltip_1 = require("./Tooltip");
+const meta = {
+    title: 'Form/Tooltip',
+    component: Tooltip_1.Tooltip,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        body: 'This is a tooltip',
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover me" }),
+    },
+};
+exports.WithInput = {
+    args: {
+        body: 'Enter your username',
+        children: (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Username" }),
+    },
+};
+exports.CustomPosition = {
+    args: {
+        body: 'Tooltip on the right',
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover me" }),
+    },
+};
+exports.LongContent = {
+    args: {
+        body: 'This is a longer tooltip that might wrap to multiple lines. It contains more detailed information about the element.',
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover for more info" }),
+    },
+};
+exports.WithMarkup = {
+    args: {
+        body: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Bold text" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("em", { children: "Italic text" }), (0, jsx_runtime_1.jsx)("br", {}), "Regular text"] })),
+        children: (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "Hover for formatted tooltip" }),
+    },
+};

package/lib/Icon/SVGIcon.stories.d.ts

@@ -0,0 +1,12 @@
+declare const meta: {
+    title: string;
+    component: ({ realWidth, realHeight, scale, width, height, shadow, children, fill, ...props }: import("./SVGIcon").InternalSVGIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    render: (args: import("./SVGIcon").InternalSVGIconProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default meta;
+export declare const Default: {};
+//# sourceMappingURL=SVGIcon.stories.d.ts.map

package/lib/Icon/SVGIcon.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGIcon.stories.d.ts","sourceRoot":"","sources":["../../src/Icon/SVGIcon.stories.tsx"],"names":[],"mappings":"AA2BA,QAAA,MAAM,IAAI;;;;;;;;CAQsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/lib/Icon/SVGIcon.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const SVGIcon_1 = require("./SVGIcon");
+const Icons = __importStar(require("./index"));
+const meta = {
+    title: 'Icon/SVGIcon',
+    component: SVGIcon_1.SVGIcon,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    render: args => (0, jsx_runtime_1.jsx)(IconGallery, { ...args }),
+};
+exports.default = meta;
+const IconGallery = (props) => {
+    const allIcons = { ...Icons };
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: '24px',
+            padding: '24px',
+            maxWidth: '800px',
+        }, children: Object.entries(allIcons)
+            .filter(([_, component]) => typeof component === 'function')
+            .map(([name, IconComponent]) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '8px',
+                padding: '16px',
+                border: '1px solid #e5e5e5',
+                borderRadius: '8px',
+            }, children: [(0, jsx_runtime_1.jsx)(IconComponent, { ...props, "data-uie-name": name }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '12px', textAlign: 'center' }, children: name })] }, name))) }));
+};
+exports.Default = {};

package/lib/Identity/Animation.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { ReactNode, ComponentType, HTMLProps } from 'react';
 type TransitionProps = Partial<any> & {
-    children: React.ReactNode;
-    component?: string | React.ComponentType<any>;
+    children: ReactNode;
+    component?: string | ComponentType<any>;
 };
 type OpacityProps = TransitionProps & {
     endValue?: number;
@@ -11,7 +11,7 @@ type MovementProps = TransitionProps & {
     endValue?: string;
     startValue?: string;
 };
-type TransitionContainerProps = React.HTMLProps<any> & {
+type TransitionContainerProps = HTMLProps<any> & {
     appear?: boolean;
     component?: string;
     enter?: boolean;
@@ -23,9 +23,9 @@ export declare const Opacity: ({ startValue, endValue, timeout, ...props }: Opac
 export declare const YAxisMovement: ({ startValue, endValue, timeout, ...props }: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const XAxisMovement: ({ startValue, endValue, timeout, ...props }: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Slide: ({ startValue, endValue, timeout, ...props }: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const LeftRightMovement: (props: any) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const RightLeftMovement: (props: any) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const TopDownMovement: (props: any) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const BottomUpMovement: (props: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LeftRightMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RightLeftMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TopDownMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BottomUpMovement: (props: MovementProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Animation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Animation.d.ts","sourceRoot":"","sources":["../../src/Identity/Animation.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,eAAe,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,GAAG;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,aAAa,GAAG,eAAe,GAAG;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,wBAAwB,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,qDAAmC,CAAC;AAEvG,eAAO,MAAM,UAAU,+DAAsE,eAAe,qDAQ3G,CAAC;AAEF,eAAO,MAAM,OAAO,gDAA0E,YAAY,qDAmBzG,CAAC;AAEF,eAAO,MAAM,aAAa,gDAKvB,aAAa,qDAmBf,CAAC;AAEF,eAAO,MAAM,aAAa,gDAKvB,aAAa,qDAmBf,CAAC;AAEF,eAAO,MAAM,KAAK,gDAAmF,aAAa,qDAmBjH,CAAC;AAEF,eAAO,MAAM,iBAAiB,kEAA2E,CAAC;AAC1G,eAAO,MAAM,iBAAiB,kEAA0E,CAAC;AAEzG,eAAO,MAAM,eAAe,kEAAyE,CAAC;AACtG,eAAO,MAAM,gBAAgB,kEAAwE,CAAC"}
+{"version":3,"file":"Animation.d.ts","sourceRoot":"","sources":["../../src/Identity/Animation.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQzE,KAAK,eAAe,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;CACzC,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,GAAG;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,aAAa,GAAG,eAAe,GAAG;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,wBAAwB,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,qDAAmC,CAAC;AAEvG,eAAO,MAAM,UAAU,+DAAsE,eAAe,qDAQ3G,CAAC;AAEF,eAAO,MAAM,OAAO,gDAA0E,YAAY,qDAmBzG,CAAC;AAEF,eAAO,MAAM,aAAa,gDAKvB,aAAa,qDAmBf,CAAC;AAEF,eAAO,MAAM,aAAa,gDAKvB,aAAa,qDAmBf,CAAC;AAEF,eAAO,MAAM,KAAK,gDAAmF,aAAa,qDAmBjH,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,aAAa,qDAErD,CAAC;AACF,eAAO,MAAM,iBAAiB,UAAW,aAAa,qDAErD,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,aAAa,qDAAkE,CAAC;AACvH,eAAO,MAAM,gBAAgB,UAAW,aAAa,qDAAiE,CAAC"}

package/lib/Identity/Animation.js

@@ -1,27 +1,4 @@
 "use strict";
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BottomUpMovement = exports.TopDownMovement = exports.RightLeftMovement = exports.LeftRightMovement = exports.Slide = exports.XAxisMovement = exports.YAxisMovement = exports.Opacity = exports.Transition = exports.TransitionContainer = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -43,13 +20,13 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  * along with this program. If not, see http://www.gnu.org/licenses/.
  *
  */
-const React = __importStar(require("react"));
-const react_1 = require("@emotion/react");
+const react_1 = require("react");
+const react_2 = require("@emotion/react");
 const motions_1 = require("./motions");
 const { CSSTransition, TransitionGroup } = require('react-transition-group');
 const TransitionContainer = (props) => (0, jsx_runtime_1.jsx)(TransitionGroup, { ...props });
 exports.TransitionContainer = TransitionContainer;
-const Transition = ({ animationStyle, timeout, component = 'div', children, ...props }) => ((0, jsx_runtime_1.jsx)(react_1.ClassNames, { children: ({ css }) => ((0, jsx_runtime_1.jsx)(CSSTransition, { timeout: timeout, classNames: css(animationStyle), ...props, children: component ? React.createElement(component, {}, children) : children })) }));
+const Transition = ({ animationStyle, timeout, component = 'div', children, ...props }) => ((0, jsx_runtime_1.jsx)(react_2.ClassNames, { children: ({ css }) => ((0, jsx_runtime_1.jsx)(CSSTransition, { timeout: timeout, classNames: css(animationStyle), ...props, children: component ? (0, react_1.createElement)(component, {}, children) : children })) }));
 exports.Transition = Transition;
 const Opacity = ({ startValue = 0, endValue = 1, timeout = motions_1.DURATION.DEFAULT, ...props }) => ((0, jsx_runtime_1.jsx)(exports.Transition, { animationStyle: {
         '&-enter': { opacity: startValue },
@@ -111,11 +88,11 @@ const Slide = ({ startValue = '-100%', endValue = '0%', timeout = motions_1.DURA
         '&-exit-done': { marginTop: startValue },
     }, timeout: timeout, ...props }));
 exports.Slide = Slide;
-const LeftRightMovement = props => (0, jsx_runtime_1.jsx)(exports.XAxisMovement, { startValue: "-100vh", endValue: "0vh", ...props });
+const LeftRightMovement = (props) => ((0, jsx_runtime_1.jsx)(exports.XAxisMovement, { startValue: "-100vh", endValue: "0vh", ...props }));
 exports.LeftRightMovement = LeftRightMovement;
-const RightLeftMovement = props => (0, jsx_runtime_1.jsx)(exports.XAxisMovement, { startValue: "100vh", endValue: "0vh", ...props });
+const RightLeftMovement = (props) => ((0, jsx_runtime_1.jsx)(exports.XAxisMovement, { startValue: "100vh", endValue: "0vh", ...props }));
 exports.RightLeftMovement = RightLeftMovement;
-const TopDownMovement = props => (0, jsx_runtime_1.jsx)(exports.YAxisMovement, { startValue: "-100%", endValue: "0%", ...props });
+const TopDownMovement = (props) => (0, jsx_runtime_1.jsx)(exports.YAxisMovement, { startValue: "-100%", endValue: "0%", ...props });
 exports.TopDownMovement = TopDownMovement;
-const BottomUpMovement = props => (0, jsx_runtime_1.jsx)(exports.YAxisMovement, { startValue: "100%", endValue: "0%", ...props });
+const BottomUpMovement = (props) => (0, jsx_runtime_1.jsx)(exports.YAxisMovement, { startValue: "100%", endValue: "0%", ...props });
 exports.BottomUpMovement = BottomUpMovement;

package/lib/Identity/Animation.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const AllAnimations: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomizableAnimation: StoryObj;
+//# sourceMappingURL=Animation.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Animation.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/Animation.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAahD,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AA4CpB,eAAO,MAAM,aAAa,wDA4EzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,QAqCnC,CAAC"}

package/lib/Identity/Animation.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomizableAnimation = exports.AllAnimations = 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 react_1 = require("react");
+const Animation_1 = require("./Animation");
+const colors_1 = require("./colors");
+const meta = {
+    title: 'Identity/Animation',
+    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;
+const AnimationDemo = ({ title, children, }) => {
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const toggle = () => setIsAnimating(!isAnimating);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { marginBottom: '8px' }, children: title }), (0, jsx_runtime_1.jsx)("button", { onClick: toggle, style: {
+                            backgroundColor: colors_1.COLOR.BLUE,
+                            border: 'none',
+                            borderRadius: '4px',
+                            color: colors_1.COLOR.WHITE,
+                            cursor: 'pointer',
+                            padding: '8px 16px',
+                        }, children: "Toggle Animation" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    backgroundColor: colors_1.COLOR.GRAY_LIGHTEN_72,
+                    borderRadius: '4px',
+                    minHeight: '100px',
+                    padding: '24px',
+                }, children: children(isAnimating, toggle) })] }));
+};
+const AllAnimations = () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Opacity", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Fade in/out content" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Top Down Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.TopDownMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from top" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Bottom Up Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.BottomUpMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from bottom" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Y-Axis Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.YAxisMovement, { in: isAnimating, startValue: "50%", endValue: "-50%", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Custom vertical movement" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Left Right Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.LeftRightMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from left" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Right Left Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.RightLeftMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Moving from right" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "X-Axis Movement", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.XAxisMovement, { in: isAnimating, startValue: "10vh", endValue: "-10vh", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Custom horizontal movement" }) })) }), (0, jsx_runtime_1.jsx)(AnimationDemo, { title: "Combined Animations", children: isAnimating => ((0, jsx_runtime_1.jsx)(Animation_1.TopDownMovement, { in: isAnimating, children: (0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, children: (0, jsx_runtime_1.jsx)(Animation_1.XAxisMovement, { in: isAnimating, startValue: "40vh", endValue: "10vh", children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Combined fade, vertical and horizontal movement" }) }) }) })) })] }));
+exports.AllAnimations = AllAnimations;
+exports.CustomizableAnimation = {
+    render: function Render() {
+        const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+        const toggle = () => setIsAnimating(!isAnimating);
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { onClick: toggle, style: {
+                        backgroundColor: colors_1.COLOR.BLUE,
+                        border: 'none',
+                        borderRadius: '4px',
+                        color: colors_1.COLOR.WHITE,
+                        cursor: 'pointer',
+                        marginBottom: '24px',
+                        padding: '8px 16px',
+                    }, children: "Toggle Animation" }), (0, jsx_runtime_1.jsx)(Animation_1.Opacity, { in: isAnimating, timeout: 2000, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '16px', backgroundColor: colors_1.COLOR.WHITE, borderRadius: '4px' }, children: "Customizable animation duration (2 seconds)" }) })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Animations can be customized with different durations and timing functions.',
+            },
+        },
+    },
+};

package/lib/Identity/Avatar.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const WithInitials: Story;
+export declare const WithImage: Story;
+export declare const CustomColors: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const ForcedInitials: Story;
+export declare const MultipleSizes: Story;
+//# sourceMappingURL=Avatar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/Avatar.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAY7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC"}

package/lib/Identity/Avatar.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleSizes = exports.ForcedInitials = exports.Large = exports.Small = exports.CustomColors = exports.WithImage = exports.WithInitials = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Avatar_1 = require("./Avatar");
+const colors_1 = require("./colors");
+const meta = {
+    component: Avatar_1.Avatar,
+    title: 'Identity/Avatar',
+    argTypes: {
+        backgroundColor: { control: 'color' },
+        borderColor: { control: 'color' },
+        size: { control: { type: 'number', min: 16, max: 128, step: 4 } },
+        name: { control: 'text' },
+        url: { control: 'text' },
+        forceInitials: { control: 'boolean' },
+        isAvatarGridItem: { control: 'boolean' },
+    },
+};
+exports.default = meta;
+exports.WithInitials = {
+    args: {
+        name: 'John Doe',
+        size: 48,
+    },
+};
+exports.WithImage = {
+    args: {
+        name: 'John Doe',
+        size: 48,
+        url: 'https://wire.com/hs-fs/hubfs/images%202024/about-us-hero-min.jpg?width=2175&height=2043&name=about-us-hero-min.jpg',
+    },
+};
+exports.CustomColors = {
+    args: {
+        backgroundColor: colors_1.COLOR.BLUE,
+        borderColor: colors_1.COLOR.WHITE,
+        name: 'Jane Smith',
+        size: 48,
+    },
+};
+exports.Small = {
+    args: {
+        name: 'JS',
+        size: 24,
+    },
+};
+exports.Large = {
+    args: {
+        name: 'Jane Smith',
+        size: 96,
+    },
+};
+exports.ForcedInitials = {
+    args: {
+        forceInitials: true,
+        name: 'John Doe',
+        size: 48,
+        url: 'https://placekitten.com/200/200',
+    },
+};
+exports.MultipleSizes = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 24 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 32 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 48 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 64 }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { name: "John Doe", size: 96 })] })),
+};

package/lib/Identity/AvatarGrid.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AvatarGrid } from './AvatarGrid';
+declare const meta: Meta<typeof AvatarGrid>;
+export default meta;
+type Story = StoryObj<typeof AvatarGrid>;
+export declare const Default: Story;
+export declare const WithImages: Story;
+export declare const CustomStyle: Story;
+export declare const TwoItems: Story;
+export declare const SingleItem: Story;
+export declare const MultipleSizes: Story;
+//# sourceMappingURL=AvatarGrid.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGrid.stories.d.ts","sourceRoot":"","sources":["../../src/Identity/AvatarGrid.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CASjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC"}