@wireapp/react-ui-kit 9.32.0 → 9.33.0

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

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react';
+import { ButtonVariant } from './Button';
+declare const meta: {
+    title: string;
+    component: ({ showLoading, children, loadingColor, ...props }: import("./Button").ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    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/Form/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/Form/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/Form/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("../Icon");
+const Identity_1 = require("../Identity");
+const meta = {
+    title: 'Form/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/Form/ButtonLink.stories.d.ts

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

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

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

package/lib/Form/ButtonLink.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.CustomColor = exports.Default = void 0;
+const ButtonLink_1 = require("./ButtonLink");
+const Identity_1 = require("../Identity");
+const meta = {
+    title: 'Form/ButtonLink',
+    component: ButtonLink_1.ButtonLink,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Button Link',
+        href: '#',
+    },
+};
+exports.CustomColor = {
+    args: {
+        children: 'Colored Button Link',
+        backgroundColor: Identity_1.COLOR.GREEN,
+        href: '#',
+    },
+};
+exports.Loading = {
+    args: {
+        children: 'Loading Button Link',
+        showLoading: true,
+        href: '#',
+    },
+};

package/lib/Form/Checkbox.d.ts

@@ -7,7 +7,7 @@ export interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<
     aligncenter?: boolean;
     labelBeforeCheckbox?: boolean;
 }
-interface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {
+export interface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {
     id?: string;
     aligncenter?: boolean;
     labelBeforeCheckbox?: boolean;
@@ -16,5 +16,4 @@ interface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {
 export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;
 export declare const CheckboxLabel: ({ ...props }: CheckboxLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAkB,UAAU,EAAC,MAAM,SAAS,CAAC;AAGpD,OAAO,EAAO,SAAS,EAAY,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAmFD,UAAU,aAAa,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACjE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,uHA8DpB,CAAC;AAGF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,aAAa,iBAAgB,kBAAkB,qDAS3D,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAkB,UAAU,EAAC,MAAM,SAAS,CAAC;AAGpD,OAAO,EAAO,SAAS,EAAY,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAmFD,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,uHA8DpB,CAAC;AAGF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,aAAa,iBAAgB,kBAAkB,qDAS3D,CAAC"}

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

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

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

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

package/lib/Form/Checkbox.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Invalid = exports.WithLink = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Checkbox_1 = require("./Checkbox");
+const Text_1 = require("../Text");
+const meta = {
+    title: 'Form/Checkbox',
+    component: Checkbox_1.Checkbox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: "Default Checkbox" }),
+    },
+};
+exports.WithLink = {
+    render: () => ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { children: (0, jsx_runtime_1.jsxs)(Checkbox_1.CheckboxLabel, { children: ["I accept the ", (0, jsx_runtime_1.jsx)(Text_1.Link, { href: "#", children: "Terms and Conditions" })] }) })),
+};
+exports.Invalid = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: "Invalid Checkbox" }),
+        markInvalid: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: "Disabled Checkbox" }),
+        disabled: true,
+    },
+};

package/lib/Form/CodeInput.d.ts

@@ -1,4 +1,5 @@
 import { InputProps } from './Input';
+export type DigitInputProps<T = HTMLInputElement> = InputProps<T>;
 export interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {
     autoFocus?: boolean;
     digits?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../src/Form/CodeInput.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAC,UAAU,EAAa,MAAM,SAAS,CAAC;AAuC/C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,SAAS,yEAOnB,cAAc,qDAqGhB,CAAC"}
+{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../src/Form/CodeInput.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAC,UAAU,EAAa,MAAM,SAAS,CAAC;AAgB/C,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AAuBlE,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,SAAS,yEAOnB,cAAc,qDAqGhB,CAAC"}

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ style, digits, autoFocus, markInvalid, onCodeComplete, disabled, }: import("./CodeInput").CodeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Invalid: Story;
+export declare const CustomLength: Story;
+//# sourceMappingURL=CodeInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.stories.d.ts","sourceRoot":"","sources":["../../src/Form/CodeInput.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;CAOwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}

package/lib/Form/CodeInput.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomLength = exports.Invalid = exports.Default = void 0;
+const CodeInput_1 = require("./CodeInput");
+const meta = {
+    title: 'Form/CodeInput',
+    component: CodeInput_1.CodeInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        // eslint-disable-next-line no-console
+        onCodeComplete: code => console.log('Code entered:', code),
+    },
+};
+exports.Invalid = {
+    args: {
+        markInvalid: true,
+        // eslint-disable-next-line no-console
+        onCodeComplete: code => console.log('Code entered:', code),
+    },
+};
+exports.CustomLength = {
+    args: {
+        digits: 4,
+        // eslint-disable-next-line no-console
+        onCodeComplete: code => console.log('Code entered:', code),
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropFileInput.stories.d.ts","sourceRoot":"","sources":["../../src/Form/DropFileInput.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;CAO4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC"}

package/lib/Form/DropFileInput.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const DropFileInput_1 = require("./DropFileInput");
+const meta = {
+    title: 'Form/DropFileInput',
+    component: DropFileInput_1.DropFileInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        headingText: 'Drag & Drop an image \nor',
+        labelText: 'select one from your device',
+        accept: 'image/png, image/jpeg',
+        description: 'Image (JPG/PNG) size up to 1 MB, minimum 200 x 600 px',
+        // eslint-disable-next-line no-console
+        onFilesUploaded: files => console.log('Files uploaded:', files),
+        // eslint-disable-next-line no-console
+        onInvalidFilesDropError: () => console.log('Invalid file type'),
+    },
+};

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

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, ...props }: import("..").FlexBoxProps<HTMLDivElement>) => 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 WithLink: Story;
+//# sourceMappingURL=ErrorMessage.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.stories.d.ts","sourceRoot":"","sources":["../../src/Form/ErrorMessage.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;;;;;;CAO2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/lib/Form/ErrorMessage.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLink = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const ErrorMessage_1 = require("./ErrorMessage");
+const Text_1 = require("../Text");
+const meta = {
+    title: 'Form/ErrorMessage',
+    component: ErrorMessage_1.ErrorMessage,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'This is an error message',
+    },
+};
+exports.WithLink = {
+    render: () => ((0, jsx_runtime_1.jsxs)(ErrorMessage_1.ErrorMessage, { children: ["This is an error message with a ", (0, jsx_runtime_1.jsx)(Text_1.Link, { href: "#", children: "link" })] })),
+};

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: React.HTMLProps<HTMLFormElement>) => 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;
+//# sourceMappingURL=Form.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Form.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;uBAJL,MAAO,SAAS;;;;;CAWQ,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC"}

package/lib/Form/Form.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Button_1 = require("./Button");
+const Form_1 = require("./Form");
+const Input_1 = require("./Input");
+const meta = {
+    title: 'Form/Form',
+    component: Form_1.Form,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Form_1.Form, { onSubmit: event => {
+            event.preventDefault();
+            // eslint-disable-next-line no-console
+            console.log('Form submitted');
+        }, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Email", type: "email", required: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", children: "Submit" })] })),
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorRangeInput.stories.d.ts","sourceRoot":"","sources":["../../src/Form/IndicatorRangeInput.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAcrD,QAAA,MAAM,IAAI;;;;;;;CAOkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/lib/Form/IndicatorRangeInput.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const IndicatorRangeInput_1 = require("./IndicatorRangeInput");
+const dataListOptions = [
+    { value: 10, label: '10px', heading: 'Small' },
+    { value: 12, label: '12px' },
+    { value: 14, label: '14px' },
+    { value: 16, label: '16px', heading: 'Default' },
+    { value: 18, label: '18px' },
+    { value: 20, label: '20px' },
+    { value: 24, label: '24px', heading: 'Large' },
+];
+const meta = {
+    title: 'Form/IndicatorRangeInput',
+    component: IndicatorRangeInput_1.IndicatorRangeInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        label: 'Font size',
+        value: 3,
+        dataListOptions,
+        // eslint-disable-next-line no-console
+        onChange: event => console.log('Value changed:', event.currentTarget.value),
+        // eslint-disable-next-line no-console
+        onOptionClick: value => console.log('Option clicked:', value),
+    },
+};

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

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Input").InputProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    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 Password: Story;
+export declare const Invalid: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=Input.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Input.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAKrD,QAAA,MAAM,IAAI;;;;;;;CAOoB,CAAC;AAE/B,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,KAOtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/lib/Form/Input.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.Required = exports.Invalid = exports.Password = exports.WithLabel = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const ErrorMessage_1 = require("./ErrorMessage");
+const Input_1 = require("./Input");
+const meta = {
+    title: 'Form/Input',
+    component: Input_1.Input,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        placeholder: 'Enter text...',
+    },
+};
+exports.WithLabel = {
+    args: {
+        label: 'Username',
+        placeholder: 'Enter username',
+    },
+};
+exports.Password = {
+    args: {
+        type: 'password',
+        label: 'Password',
+        placeholder: 'Enter password',
+        helperText: 'Must have at least one: uppercase letter, lowercase letter, number, symbol',
+    },
+};
+exports.Invalid = {
+    args: {
+        label: 'Email',
+        placeholder: 'Enter email',
+        markInvalid: true,
+        error: (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { children: "Please enter a valid email address" }),
+    },
+};
+exports.Required = {
+    args: {
+        label: 'Required Field',
+        placeholder: 'This field is required',
+        required: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        label: 'Disabled Input',
+        placeholder: 'Cannot edit this field',
+        disabled: true,
+    },
+};

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("./InputBlock").InputBlockProps) => 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 WithSubmitCombo: Story;
+export declare const Invalid: Story;
+//# sourceMappingURL=InputBlock.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputBlock.stories.d.ts","sourceRoot":"","sources":["../../src/Form/InputBlock.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AASrD,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC"}