@wireapp/react-ui-kit 9.31.0 → 9.33.0

package/lib/Form/InputBlock.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithSubmitCombo = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Input_1 = require("./Input");
+const InputBlock_1 = require("./InputBlock");
+const InputSubmitCombo_1 = require("./InputSubmitCombo");
+const RoundIconButton_1 = require("./RoundIconButton");
+const Icon_1 = require("../Icon");
+const meta = {
+    title: 'Form/InputBlock',
+    component: InputBlock_1.InputBlock,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputBlock_1.InputBlock, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "First input" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Second input" })] })),
+};
+exports.WithSubmitCombo = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputBlock_1.InputBlock, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Regular input" }), (0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Input with submit" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })] })),
+};
+exports.Invalid = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputBlock_1.InputBlock, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Invalid input", markInvalid: true }), (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Another invalid input", markInvalid: true })] })),
+};

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

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

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

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

package/lib/Form/InputLabel.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithInput = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Input_1 = require("./Input");
+const InputLabel_1 = require("./InputLabel");
+const meta = {
+    title: 'Form/InputLabel',
+    component: InputLabel_1.InputLabel,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Label Text',
+    },
+};
+exports.WithInput = {
+    args: {
+        children: 'Email address',
+        htmlFor: 'example-input',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Story, {}), (0, jsx_runtime_1.jsx)(Input_1.Input, { id: "example-input", type: "email", placeholder: "Enter email" })] })),
+    ],
+};
+exports.Invalid = {
+    args: {
+        children: 'Invalid Label',
+        markInvalid: true,
+    },
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputSubmitCombo.stories.d.ts","sourceRoot":"","sources":["../../src/Form/InputSubmitCombo.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAQrD,QAAA,MAAM,IAAI;;;;;;;CAO+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/lib/Form/InputSubmitCombo.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Invalid = exports.WithMultipleButtons = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Input_1 = require("./Input");
+const InputSubmitCombo_1 = require("./InputSubmitCombo");
+const RoundIconButton_1 = require("./RoundIconButton");
+const Icon_1 = require("../Icon");
+const meta = {
+    title: 'Form/InputSubmitCombo',
+    component: InputSubmitCombo_1.InputSubmitCombo,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type a message...", name: "message" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};
+exports.WithMultipleButtons = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type a message...", name: "message" }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.AttachmentIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};
+exports.Invalid = {
+    render: () => ((0, jsx_runtime_1.jsxs)(InputSubmitCombo_1.InputSubmitCombo, { markInvalid: true, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Invalid input", name: "message", markInvalid: true }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { type: "submit", children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) })] })),
+};

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./RangeInput").RangeInputProps<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 WithSteps: Story;
+export declare const Disabled: Story;
+export declare const CustomRange: Story;
+//# sourceMappingURL=RangeInput.stories.d.ts.map

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

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

package/lib/Form/RangeInput.stories.js

@@ -0,0 +1,62 @@
+"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.CustomRange = exports.Disabled = exports.WithSteps = exports.Default = void 0;
+const RangeInput_1 = require("./RangeInput");
+const meta = {
+    title: 'Form/RangeInput',
+    component: RangeInput_1.RangeInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        defaultValue: 50,
+        min: 0,
+        max: 100,
+    },
+};
+exports.WithSteps = {
+    args: {
+        defaultValue: 5,
+        min: 0,
+        max: 10,
+        step: 1,
+    },
+};
+exports.Disabled = {
+    args: {
+        defaultValue: 50,
+        min: 0,
+        max: 100,
+        disabled: true,
+    },
+};
+exports.CustomRange = {
+    args: {
+        defaultValue: 0,
+        min: -50,
+        max: 50,
+        step: 10,
+    },
+};

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./RoundIconButton").RoundIconButtonProps<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const IconGallery: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=RoundIconButton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoundIconButton.stories.d.ts","sourceRoot":"","sources":["../../src/Form/RoundIconButton.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAoBrD,QAAA,MAAM,IAAI;;;;;;;CAO8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/lib/Form/RoundIconButton.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.IconGallery = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const RoundIconButton_1 = require("./RoundIconButton");
+const Icon_1 = require("../Icon");
+const Identity_1 = require("../Identity");
+const meta = {
+    title: 'Form/RoundIconButton',
+    component: RoundIconButton_1.RoundIconButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}),
+    },
+};
+exports.IconGallery = {
+    render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.AttachmentIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.GifIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ImageIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.PingIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.PlaneIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.ProfileIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TeamIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TimedIcon, {}) }), (0, jsx_runtime_1.jsx)(RoundIconButton_1.RoundIconButton, { children: (0, jsx_runtime_1.jsx)(Icon_1.TrashIcon, { color: Identity_1.COLOR.RED }) })] })),
+};
+exports.Disabled = {
+    args: {
+        children: (0, jsx_runtime_1.jsx)(Icon_1.ArrowIcon, {}),
+        disabled: true,
+    },
+};

package/lib/Form/Select.d.ts

@@ -8,7 +8,7 @@ export type Option = {
     description?: string;
     isDisabled?: boolean;
 };
-interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>> extends StateManagerProps<Option, IsMulti, Group> {
+export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>> extends StateManagerProps<Option, IsMulti, Group> {
     id: string;
     disabled?: boolean;
     dataUieName: string;
@@ -23,7 +23,7 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
     isMulti?: IsMulti;
     isSearchable?: boolean;
     overlayMenu?: boolean;
+    menuListHeading?: string;
 }
-export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, markInvalid, required, isSearchable, overlayMenu, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAiBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CAC5E,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,kLAgBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAoE7B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAkBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,mMAiBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAqE7B,CAAC"}

package/lib/Form/Select.js

@@ -11,7 +11,7 @@ const InputLabel_1 = require("./InputLabel");
 const SelectComponents_1 = require("./SelectComponents");
 const SelectStyles_1 = require("./SelectStyles");
 const enums_1 = require("../types/enums");
-const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, ...props }) => {
+const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, menuListHeading, ...props }) => {
     const theme = (0, react_1.useTheme)();
     const hasError = !!error;
     return ((0, jsx_runtime_1.jsxs)("div", { 
@@ -34,6 +34,7 @@ const Select = ({ id, label, error, helperText, disabled = false, dataUieName, o
                     Menu: (0, SelectComponents_1.Menu)(dataUieName, menuCSS),
                     ValueContainer: SelectComponents_1.ValueContainer,
                     IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
+                    ...(menuListHeading && { MenuList: (0, SelectComponents_1.MenuList)(menuListHeading, dataUieName) }),
                 }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: isSearchable, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options, ...props }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
                     fontSize: theme.fontSizes.small,
                     fontWeight: 400,

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: import("./Select").SelectProps<IsMulti, Group>) => 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 WithLabel: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=Select.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAWrD,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/lib/Form/Select.stories.js

@@ -0,0 +1,68 @@
+"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.Disabled = exports.Invalid = exports.WithLabel = exports.Default = void 0;
+const Select_1 = require("./Select");
+const options = [
+    { value: '', label: 'Select an option' },
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+];
+const meta = {
+    title: 'Form/Select',
+    component: Select_1.Select,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        id: 'default-select',
+        dataUieName: 'default-select',
+        options,
+    },
+};
+exports.WithLabel = {
+    args: {
+        id: 'select-example',
+        dataUieName: 'select-with-label',
+        options,
+        label: 'Choose an option',
+    },
+};
+exports.Invalid = {
+    args: {
+        id: 'invalid-select',
+        dataUieName: 'invalid-select',
+        options,
+        markInvalid: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        id: 'disabled-select',
+        dataUieName: 'disabled-select',
+        options,
+        disabled: true,
+    },
+};

package/lib/Form/SelectComponents.d.ts

@@ -1,11 +1,15 @@
 import { CSSObject } from '@emotion/react';
-import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups } from 'react-select';
+import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups, MenuListProps } from 'react-select';
 import { Option } from './Select';
 export declare const SelectContainer: (props: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const isGroup: (options: OptionsOrGroups<Option, GroupBase<Option>>) => options is GroupBase<Option>[];
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Menu: (dataUieName: string, css?: CSSObject) => (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MenuList: {
+    (menuListHeading: string, dataUieName: string): (props: MenuListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const renderValue: (value: any) => any;
 export declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACT,SAAS,EACT,eAAe,EAChB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAOhC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAc9E,CAAC;AAEF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAW7F,CAAC"}
+{"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACT,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAShC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,KAAG,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,EAEzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,WAAW,CAAC,MAAM,CAAC,qDAsD/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,QAAQ,SAAS,aAAa,SAAS,qDAc9E,CAAC;AAGF,eAAO,MAAM,QAAQ;sBAAqB,MAAM,eAAe,MAAM,WAAa,aAAa;;CA0B9F,CAAC;AAGF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,mBAAmB,CAAC,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,wBAAwB,CAAC,MAAM,CAAC,qDAW7F,CAAC"}

package/lib/Form/SelectComponents.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
+exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.MenuList = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_select_1 = require("react-select");
+const SelectComponents_styles_1 = require("./SelectComponents.styles");
 const Icon_1 = require("../Icon");
 const ArrowDown_1 = require("../Icon/ArrowDown");
 const enums_1 = require("../types/enums");
@@ -53,6 +54,20 @@ const Menu = (dataUieName, css) => (props) => {
             }), children: children }) }));
 };
 exports.Menu = Menu;
+// eslint-disable-next-line react/display-name
+const MenuList = (menuListHeading, dataUieName) => (props) => {
+    const { selectProps, children } = props;
+    const handleClose = () => {
+        if (selectProps && selectProps.onMenuClose) {
+            selectProps.onMenuClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { ...(dataUieName && {
+                'data-uie-name': `menu-list-${dataUieName}`,
+            }), children: [(0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, SelectComponents_styles_1.menuListHeadingContainerStyles)(theme), children: [menuListHeading, (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, css: SelectComponents_styles_1.menuListCloseButtonStyles, "aria-label": `Close: ${menuListHeading}`, children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16 }) })] }), children] }) }));
+};
+exports.MenuList = MenuList;
+exports.MenuList.displayName = 'MenuList';
 const renderValue = value => {
     if (Array.isArray(value)) {
         const currentValue = (i) => value[i].props.children;

package/lib/Form/SelectComponents.styles.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject } from '@emotion/react';
+import { Theme } from '../Theme/Theme';
+export declare const menuListHeadingContainerStyles: (theme: Theme) => CSSObject;
+export declare const menuListCloseButtonStyles: CSSObject;
+//# sourceMappingURL=SelectComponents.styles.d.ts.map

package/lib/Form/SelectComponents.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponents.styles.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAErC,eAAO,MAAM,8BAA8B,UAAW,KAAK,KAAG,SAO5D,CAAC;AAEH,eAAO,MAAM,yBAAyB,EAAE,SAOvC,CAAC"}

package/lib/Form/SelectComponents.styles.js

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuListCloseButtonStyles = exports.menuListHeadingContainerStyles = void 0;
+const menuListHeadingContainerStyles = (theme) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontSize: theme.fontSizes.medium,
+    fontWeight: 600,
+    padding: '8px 16px',
+});
+exports.menuListHeadingContainerStyles = menuListHeadingContainerStyles;
+exports.menuListCloseButtonStyles = {
+    background: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    display: 'flex',
+    alignItems: 'center',
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShakeBox.stories.d.ts","sourceRoot":"","sources":["../../src/Form/ShakeBox.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAIrD,OAAO,EAAW,WAAW,EAAC,MAAM,YAAY,CAAC;AAEjD,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsBnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAsBF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/lib/Form/ShakeBox.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithForm = 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 Button_1 = require("./Button");
+const Input_1 = require("./Input");
+const ShakeBox_1 = require("./ShakeBox");
+const meta = {
+    title: 'Form/ShakeBox',
+    component: ShakeBox_1.ShakeBox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const DefaultStory = () => {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ShakeBox_1.ShakeBox, { ref: ref, children: (0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Type something..." }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => {
+                    ref.current?.shake();
+                }, style: { marginTop: '16px' }, children: "Shake Input" })] }));
+};
+exports.Default = {
+    render: () => (0, jsx_runtime_1.jsx)(DefaultStory, {}),
+};
+const FormStory = () => {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(ShakeBox_1.ShakeBox, { ref: ref, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: event => {
+                event.preventDefault();
+                ref.current?.shake();
+            }, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { placeholder: "Required field", required: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", style: { marginTop: '16px' }, children: "Submit to shake" })] }) }));
+};
+exports.WithForm = {
+    render: () => (0, jsx_runtime_1.jsx)(FormStory, {}),
+};

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

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Switch").SwitchProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    render: ({ checked, disabled, ...args }: Omit<import("./Switch").SwitchProps<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+//# sourceMappingURL=Switch.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../src/Form/Switch.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAcrD,QAAA,MAAM,IAAI;;;;;;;;CAQqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC"}