@wireapp/react-ui-kit 9.69.4 → 9.69.5

package/lib/Inputs/Checkbox/Checkbox.js

@@ -0,0 +1,140 @@
+"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.CheckboxLabel = exports.Checkbox = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const React = __importStar(require("react"));
+const Typography_1 = require("../../Typography");
+const Input_1 = require("../Input");
+const StyledLabel = ({ disabled, markInvalid, aligncenter = false, labelBeforeCheckbox = false, children, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("label", { css: (theme) => ({
+            [`.${Input_1.INPUT_CLASSNAME}:checked + &::before`]: {
+                background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,
+                borderColor: disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor,
+            },
+            [`.${Input_1.INPUT_CLASSNAME}:checked + & > svg`]: {
+                fill: theme.general.backgroundColor,
+            },
+            [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: {
+                fill: 'none',
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                ...(labelBeforeCheckbox
+                    ? {
+                        right: '11px',
+                    }
+                    : {
+                        left: '4px',
+                    }),
+            },
+            ...(!disabled && {
+                [`.${Input_1.INPUT_CLASSNAME}:hover + &::before`]: {
+                    borderColor: theme.general.primaryColor,
+                },
+            }),
+            [`.${Input_1.INPUT_CLASSNAME} + &::before`]: {
+                background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,
+                ...(!disabled
+                    ? {
+                        border: markInvalid
+                            ? `2px solid ${theme.Checkbox.invalidBorderColor}`
+                            : `2px solid ${theme.Checkbox.border}`,
+                    }
+                    : {
+                        border: `2px solid ${theme.Checkbox.disableBorderColor}`,
+                    }),
+                borderRadius: '3px',
+                boxSizing: 'border-box',
+                content: '""',
+                display: 'inline-block',
+                minWidth: '22px',
+                height: '22px',
+                lineHeight: '1.4rem',
+                margin: '0 8px 0 0px',
+                color: theme.general.color,
+            },
+            ...(labelBeforeCheckbox && {
+                flexDirection: 'row-reverse',
+                justifyContent: 'space-between',
+            }),
+            alignItems: 'center',
+            position: 'relative',
+            margin: '0 0 0 -16px',
+            width: aligncenter ? 'auto' : '100%',
+            lineHeight: '1.4rem',
+            display: 'flex',
+            opacity: disabled ? 0.56 : 1,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            borderRadius: '4px',
+        }), ...props, children: [children, (0, jsx_runtime_1.jsx)("svg", { width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }) })] }));
+};
+exports.Checkbox = React.forwardRef(({ id, children, style, disabled, wrapperCSS = {}, markInvalid, aligncenter, labelBeforeCheckbox, outlineOffset = '0.4rem', ...props }, ref) => {
+    const inputId = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => ({
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            position: 'relative',
+            left: '-0.3rem',
+            [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
+                outline: `1px solid ${theme.general.primaryColor}`,
+                outlineOffset: outlineOffset,
+            },
+            ...wrapperCSS,
+        }), style: style, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: id ?? inputId, style: {
+                    height: '22px',
+                    marginBottom: '0',
+                    opacity: 0,
+                    width: '22px',
+                    cursor: disabled ? 'not-allowed' : 'pointer',
+                }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME, ...props }), (0, jsx_runtime_1.jsx)(StyledLabel, { htmlFor: id ?? inputId, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox, children: children })] }));
+});
+exports.Checkbox.displayName = 'Checkbox';
+const CheckboxLabel = ({ ...props }) => ((0, jsx_runtime_1.jsx)(Typography_1.Text, { css: (theme) => ({
+        ...(0, Typography_1.textStyle)(theme, {
+            ...props,
+        }),
+    }), ...props }));
+exports.CheckboxLabel = CheckboxLabel;

package/lib/Inputs/Checkbox/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/Inputs/Checkbox/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Checkbox/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/Inputs/Checkbox/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 Typography_1 = require("../../Typography");
+const meta = {
+    title: 'Inputs/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)(Typography_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/Inputs/Checkbox/index.d.ts

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

package/lib/Inputs/Checkbox/index.d.ts.map

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

package/lib/Inputs/Checkbox/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Checkbox"), exports);

package/lib/Inputs/CodeInput/CodeInput.d.ts

@@ -0,0 +1,12 @@
+import { InputProps } from '../Input';
+export type DigitInputProps<T = HTMLInputElement> = InputProps<T>;
+export interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {
+    autoFocus?: boolean;
+    digits?: number;
+    markInvalid?: boolean;
+    onCodeComplete?: (completeCode?: string) => void;
+    codeInputLabel?: string;
+    codePlaceholder?: string;
+}
+export declare const CodeInput: ({ style, digits, markInvalid, onCodeComplete, disabled, codeInputLabel, codePlaceholder, }: CodeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CodeInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../src/Inputs/CodeInput/CodeInput.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAC,UAAU,EAAa,MAAM,UAAU,CAAC;AAwBhD,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;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS,+FAQnB,cAAc,qDAwHhB,CAAC"}

package/lib/Inputs/CodeInput/CodeInput.js

@@ -0,0 +1,156 @@
+"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.CodeInput = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const React = __importStar(require("react"));
+const Identity_1 = require("../../Identity");
+const util_1 = require("../../utils/util");
+const Input_1 = require("../Input");
+const CodeInputWrapper = (props) => ((0, jsx_runtime_1.jsx)("div", { css: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+    }, ...props }));
+const codeInputLabelStyle = theme => ({
+    color: Identity_1.COLOR_V2.GRAY_70,
+    textAlign: 'center',
+    marginBottom: '0.5rem',
+    fontSize: theme.fontSizes.base,
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: '1.5rem',
+    letterSpacing: '0.003rem',
+});
+const digitInputStyle = (theme, props) => ({
+    ...(0, Input_1.inputStyle)(theme, props),
+    '& + &': {
+        marginLeft: 'min(19px, 2vw)',
+    },
+    '&:hover': {
+        boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.GRAY_60}`,
+    },
+    fontSize: theme.fontSizes.extraLarge,
+    lineHeight: '1.75rem',
+    borderRadius: '12px',
+    padding: 0,
+    textAlign: 'center',
+    width: 'min(48px, 13vw)',
+    height: '56px',
+});
+const DigitInput = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("input", { ref: ref, css: (theme) => digitInputStyle(theme, props), ...props })));
+DigitInput.displayName = 'DigitInput';
+const CodeInput = ({ style, digits = 6, markInvalid, onCodeComplete = util_1.noop, disabled, codeInputLabel, codePlaceholder, }) => {
+    const [values, setValues] = (0, react_1.useState)(Array(digits).fill(''));
+    const inputs = Array(digits);
+    const forceSelection = (event) => {
+        const target = event.target;
+        target.select();
+    };
+    const forceSelectionPreventDefault = (event) => {
+        forceSelection(event);
+        event.preventDefault();
+    };
+    const nextField = (currentFieldIndex) => {
+        const nextFieldIndex = currentFieldIndex + 1;
+        if (nextFieldIndex < digits) {
+            inputs[nextFieldIndex].focus();
+        }
+    };
+    const previousField = (currentFieldIndex) => {
+        if (currentFieldIndex > 0) {
+            inputs[currentFieldIndex - 1].focus();
+        }
+    };
+    const setValue = (fieldIndex, value) => {
+        if (/^[0-9]?$/.test(value)) {
+            const valuesCopy = values.slice();
+            valuesCopy[fieldIndex] = value;
+            setValues(valuesCopy);
+            if (value.length) {
+                nextField(fieldIndex);
+            }
+        }
+    };
+    const handleKeyDown = (fieldIndex, { key }) => {
+        switch (key) {
+            case 'Backspace':
+                setValue(fieldIndex, '');
+                previousField(fieldIndex);
+                break;
+            case 'ArrowLeft':
+                previousField(fieldIndex);
+                break;
+            case 'ArrowRight':
+                nextField(fieldIndex);
+                break;
+        }
+        if (/^[0-9]$/.test(key)) {
+            setValue(fieldIndex, key);
+        }
+    };
+    const handlePaste = (fieldIndex, event) => {
+        const pastedValue = event.clipboardData.getData('Text');
+        const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');
+        if (/^[0-9]+$/.test(cleanedPaste)) {
+            setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const completeCode = values.join('');
+        if (completeCode.length === digits) {
+            onCodeComplete(completeCode);
+        }
+    }, [values]);
+    const labelId = React.useId();
+    const getDigitAriaLabel = (value) => (value ? `${codePlaceholder}, ${value}` : `${codePlaceholder}`);
+    return ((0, jsx_runtime_1.jsxs)(CodeInputWrapper, { role: "group", "aria-labelledby": labelId, style: style, children: [(0, jsx_runtime_1.jsx)("span", { id: labelId, css: codeInputLabelStyle, children: codeInputLabel }), (0, jsx_runtime_1.jsx)("div", { css: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexWrap: 'nowrap',
+                    width: '100%',
+                }, children: Array.from({ length: digits }, (_, index) => ((0, jsx_runtime_1.jsx)(DigitInput, { onPaste: event => handlePaste(index, event), onFocus: forceSelection, onMouseDown: forceSelectionPreventDefault, onTouchStart: forceSelectionPreventDefault, onKeyDown: event => handleKeyDown(index, event), onKeyUp: forceSelection, markInvalid: markInvalid, ref: node => (inputs[index] = node), value: values[index], disabled: disabled, id: `code-input-digit-${index}`, inputMode: "numeric", pattern: "[0-9]*", autoComplete: "one-time-code", "aria-label": getDigitAriaLabel(values[index]), "aria-describedby": labelId }, index))) })] }));
+};
+exports.CodeInput = CodeInput;

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ style, digits, markInvalid, onCodeComplete, disabled, codeInputLabel, codePlaceholder, }: 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/Inputs/CodeInput/CodeInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/CodeInput/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/Inputs/CodeInput/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: 'Inputs/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/Inputs/CodeInput/index.d.ts

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

package/lib/Inputs/CodeInput/index.d.ts.map

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

package/lib/Inputs/CodeInput/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CodeInput"), exports);

package/lib/Inputs/ComboboxSelect/ComboboxSelect.d.ts

@@ -0,0 +1,30 @@
+import { CSSObject } from '@emotion/react';
+import { MenuPosition } from 'react-select';
+export type ComboboxSelectOption = {
+    value: string | number;
+    label: string;
+    description?: string;
+};
+export interface ComboboxSelectProps {
+    id: string;
+    options: ComboboxSelectOption[];
+    value?: ComboboxSelectOption | ComboboxSelectOption[];
+    onChange?: (value: ComboboxSelectOption | ComboboxSelectOption[]) => void;
+    isDisabled?: boolean;
+    placeholder?: string;
+    dataUieName?: string;
+    onCreateOption?: (inputValue: string) => void;
+    createOptionLabel?: (inputValue: string) => string;
+    noOptionsMessage: string;
+    label?: string;
+    labelVisuallyHidden?: boolean;
+    required?: boolean;
+    menuPortalTarget?: HTMLElement;
+    menuPosition?: MenuPosition;
+    menuListCSS?: CSSObject;
+    isLoading?: boolean;
+    loadingMessage?: string;
+    closeMenuOnSelect?: boolean;
+}
+export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, labelVisuallyHidden, required, menuPortalTarget, menuPosition, menuListCSS, isLoading, loadingMessage, closeMenuOnSelect, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComboboxSelect.d.ts.map

package/lib/Inputs/ComboboxSelect/ComboboxSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxSelect.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ComboboxSelect/ComboboxSelect.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAmB,EAAa,YAAY,EAAqC,MAAM,cAAc,CAAC;AAgBtG,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,kQAoBxB,mBAAmB,qDA4BrB,CAAC"}

package/lib/Inputs/ComboboxSelect/ComboboxSelect.js

@@ -0,0 +1,79 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboboxSelect = 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 react_2 = require("@emotion/react");
+const react_select_1 = __importStar(require("react-select"));
+const creatable_1 = __importDefault(require("react-select/creatable"));
+const ComboboxSelect_styles_1 = require("./ComboboxSelect.styles");
+const Icon_1 = require("../../DataDisplay/Icon");
+const InputLabel_1 = require("../InputLabel");
+const BaseSelectDropdownIndicator_1 = require("../Select/BaseSelect/BaseSelectDropdownIndicator");
+const ComboboxSelect = ({ id, options, value, onChange, isDisabled = false, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, labelVisuallyHidden = false, required, menuPortalTarget, menuPosition = 'absolute', menuListCSS, isLoading = false, loadingMessage, closeMenuOnSelect = true, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: ComboboxSelect_styles_1.wrapperStyles, "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, isRequired: required, labelCSS: (0, ComboboxSelect_styles_1.labelCSS)({ isVisuallyHidden: labelVisuallyHidden }), children: label })), (0, jsx_runtime_1.jsx)(Select, { id: id, options: options, value: value, onChange: onChange, isDisabled: isDisabled, placeholder: placeholder, menuPortalTarget: menuPortalTarget, menuPosition: menuPosition, createOptionLabel: createOptionLabel, onCreateOption: onCreateOption, creatable: !!onCreateOption, isLoading: isLoading, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, menuListCSS: menuListCSS, closeMenuOnSelect: closeMenuOnSelect })] }));
+};
+exports.ComboboxSelect = ComboboxSelect;
+const Select = ({ id, options, value, onChange, isDisabled = false, placeholder, onCreateOption, createOptionLabel, noOptionsMessage, menuPortalTarget, menuPosition = 'absolute', menuListCSS, isLoading = false, loadingMessage, creatable = false, closeMenuOnSelect = true, }) => {
+    const theme = (0, react_2.useTheme)();
+    const components = (0, react_1.useMemo)(() => {
+        return {
+            ClearIndicator: () => null,
+            DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
+            MultiValueRemove: (props) => (0, jsx_runtime_1.jsx)(MultiValueRemove, { ...props }),
+            NoOptionsMessage: (props) => (0, jsx_runtime_1.jsx)(NoOptionsMessage, { ...props, message: noOptionsMessage }),
+            LoadingMessage: (props) => (0, jsx_runtime_1.jsx)(LoadingMessage, { ...props, message: loadingMessage }),
+        };
+    }, [loadingMessage, noOptionsMessage]);
+    if (!creatable) {
+        return ((0, jsx_runtime_1.jsx)(react_select_1.default, { id: id, inputId: id, options: options, value: value, onChange: onChange, isMulti: true, isSearchable: true, isDisabled: isDisabled, placeholder: placeholder, menuPortalTarget: menuPortalTarget, menuPosition: menuPosition, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme, menuListCSS }), classNamePrefix: "select", closeMenuOnSelect: closeMenuOnSelect, components: components }));
+    }
+    return ((0, jsx_runtime_1.jsx)(creatable_1.default, { id: id, inputId: id, options: options, value: value, onChange: onChange, isMulti: true, isSearchable: true, isDisabled: isDisabled, placeholder: placeholder, menuPortalTarget: menuPortalTarget, menuPosition: menuPosition, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme, menuListCSS }), classNamePrefix: "select", formatCreateLabel: createOptionLabel, onCreateOption: onCreateOption, closeMenuOnSelect: closeMenuOnSelect, isLoading: isLoading, components: components }));
+};
+const MultiValueRemove = (props) => ((0, jsx_runtime_1.jsx)(react_select_1.components.MultiValueRemove, { ...props, children: (0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 10, height: 10 }) }));
+const NoOptionsMessage = ({ message, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.NoOptionsMessage, { ...props, children: (0, jsx_runtime_1.jsx)("div", { css: ComboboxSelect_styles_1.noOptionsMessageStyles, children: message }) }));
+const LoadingMessage = ({ message, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.LoadingMessage, { ...props, children: (0, jsx_runtime_1.jsx)("div", { css: ComboboxSelect_styles_1.loadingMessageStyles, children: message }) }));