@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/inputs/MarkdownInput.js

@@ -0,0 +1,35 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__MarkdownInput_module_js_03abc498__ from "./MarkdownInput.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+const MarkdownInput = ({ autoFocus = false, disabled, id, onChange, placeholder, value })=>{
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (autoFocus && ref.current) ref.current.focus();
+    }, [
+        autoFocus
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("textarea", {
+        autoComplete: "off",
+        autoFocus: autoFocus,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__MarkdownInput_module_js_03abc498__["default"].input),
+        disabled: disabled,
+        id: id,
+        onChange: (event)=>{
+            onChange("" === event.target.value.trim() ? null : event.target.value);
+        },
+        onKeyDown: (event)=>{
+            if ("Escape" === event.key && ref.current) {
+                event.stopPropagation();
+                if (null !== value && "" !== value) onChange(null);
+                else ref.current.blur();
+            }
+        },
+        placeholder: placeholder,
+        ref: ref,
+        spellCheck: "false",
+        value: value ?? ""
+    });
+};
+const MarkdownInput_rslib_entry_ = MarkdownInput;
+export { MarkdownInput_rslib_entry_ as default };

package/dist/inputs/MarkdownInput.module.js

@@ -0,0 +1,5 @@
+import "./MarkdownInput_module.css";
+const MarkdownInput_module_rslib_entry_ = {
+    input: "input-mp5KMG"
+};
+export { MarkdownInput_module_rslib_entry_ as default };

package/dist/inputs/MarkdownInput_module.css

@@ -0,0 +1,27 @@
+.input-mp5KMG {
+  border-radius: var(--size-n3);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  color: var(--color-grey-s01);
+  font: var(--font-monospace);
+  height: max-content;
+  min-height: calc(var(--size-p1) * 5);
+  padding: var(--size-n1) var(--size-00);
+  width: 100%;
+}
+
+.input-mp5KMG:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-mp5KMG::placeholder {
+  color: var(--color-grey-t07);
+  font: var(--font-regular-italic);
+}
+
+.input-mp5KMG:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+

package/dist/inputs/NumberInput.d.ts

@@ -0,0 +1,13 @@
+import { type Dispatch } from "react";
+type Props = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id?: string;
+    onChange: Dispatch<number | null>;
+    placeholder?: string;
+    value: number | null;
+    prefix?: string;
+    suffix?: string;
+};
+declare const NumberInput: ({ autoFocus, disabled, id, onChange, placeholder, value, prefix, suffix, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default NumberInput;

package/dist/inputs/NumberInput.js

@@ -0,0 +1,44 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__ from "./NumberInput.module.js";
+const NumberInput = ({ autoFocus = false, disabled, id, onChange, placeholder, value, prefix, suffix })=>{
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (autoFocus && ref.current) ref.current.focus();
+    }, [
+        autoFocus
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].container,
+        children: [
+            prefix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].prefix,
+                children: prefix
+            }) : null,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+                ref: ref,
+                autoFocus: autoFocus,
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].input, {
+                    [__WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].inputWithPrefix]: void 0 !== prefix,
+                    [__WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].inputWithSuffix]: void 0 !== suffix
+                }),
+                disabled: disabled,
+                id: id,
+                onChange: (event)=>{
+                    onChange(event.target.value ? parseFloat(event.target.value) : null);
+                },
+                placeholder: placeholder,
+                type: "text",
+                value: null === value ? "" : value.toString(),
+                inputMode: "numeric"
+            }),
+            suffix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__NumberInput_module_js_5606faf2__["default"].suffix,
+                children: suffix
+            }) : null
+        ]
+    });
+};
+const NumberInput_rslib_entry_ = NumberInput;
+export { NumberInput_rslib_entry_ as default };

package/dist/inputs/NumberInput.module.js

@@ -0,0 +1,10 @@
+import "./NumberInput_module.css";
+const NumberInput_module_rslib_entry_ = {
+    container: "container-vRPXJv",
+    input: "input-XxKMGy",
+    inputWithPrefix: "inputWithPrefix-ZRaO3g",
+    inputWithSuffix: "inputWithSuffix-jX5Qrr",
+    prefix: "prefix-AOTkAo",
+    suffix: "suffix-iXpGKW"
+};
+export { NumberInput_module_rslib_entry_ as default };

package/dist/inputs/NumberInput_module.css

@@ -0,0 +1,59 @@
+.container-vRPXJv {
+  display: flex;
+}
+
+.input-XxKMGy {
+  border-radius: var(--size-n3);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  color: var(--color-grey-s01);
+  padding: var(--size-n1) var(--size-00);
+  background: var(--color-white);
+  z-index: 1;
+  width: 100%;
+}
+
+.inputWithPrefix-ZRaO3g {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.inputWithSuffix-jX5Qrr {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-XxKMGy:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-XxKMGy::placeholder {
+  color: var(--color-grey-t07);
+  font: var(--font-regular-italic);
+}
+
+.input-XxKMGy:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.prefix-AOTkAo, .suffix-iXpGKW {
+  padding: var(--size-n1) var(--size-00);
+  background: var(--color-grey-t10);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  white-space: nowrap;
+}
+
+.prefix-AOTkAo {
+  border-top-left-radius: var(--size-n3);
+  border-bottom-left-radius: var(--size-n3);
+  border-right: none;
+}
+
+.suffix-iXpGKW {
+  border-top-right-radius: var(--size-n3);
+  border-bottom-right-radius: var(--size-n3);
+  border-left: none;
+}
+

package/dist/inputs/RadioInput.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id?: string;
+    onChange: (value: boolean) => void;
+    value: boolean;
+};
+declare const RadioButtonInput: ({ autoFocus, disabled, id, onChange, value, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default RadioButtonInput;

package/dist/inputs/RadioInput.js

@@ -0,0 +1,34 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__RadioInput_module_js_28b4e6e5__ from "./RadioInput.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+const RadioButtonInput = ({ autoFocus = false, disabled = false, id, onChange, value })=>{
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+                autoFocus: autoFocus,
+                checked: value,
+                className: __WEBPACK_EXTERNAL_MODULE__RadioInput_module_js_28b4e6e5__["default"].input,
+                disabled: disabled,
+                id: id,
+                onChange: (event)=>{
+                    onChange(event.target.checked);
+                },
+                ref: ref,
+                type: "radio"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__RadioInput_module_js_28b4e6e5__["default"].visual,
+                onClick: ()=>{
+                    ref.current?.click();
+                },
+                children: value ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "CheckMark"
+                }) : null
+            })
+        ]
+    });
+};
+const RadioInput_rslib_entry_ = RadioButtonInput;
+export { RadioInput_rslib_entry_ as default };

package/dist/inputs/RadioInput.module.js

@@ -0,0 +1,6 @@
+import "./RadioInput_module.css";
+const RadioInput_module_rslib_entry_ = {
+    input: "input-oBfuhy",
+    visual: "visual-s5W2Nw"
+};
+export { RadioInput_module_rslib_entry_ as default };

package/dist/inputs/RadioInput_module.css

@@ -0,0 +1,31 @@
+.input-oBfuhy {
+  clip-path: inset(50%);
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.visual-s5W2Nw {
+  border-radius: var(--size-00);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  color: var(--color-purple-000);
+  cursor: pointer;
+  height: var(--size-p2);
+  width: var(--size-p2);
+  place-content: center;
+  display: grid;
+}
+
+.input-oBfuhy:focus-visible + .visual-s5W2Nw {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-oBfuhy:disabled + .visual-s5W2Nw {
+  color: var(--color-grey-t09);
+  cursor: not-allowed;
+}
+

package/dist/inputs/SelectInput.d.ts

@@ -0,0 +1,14 @@
+import { type Dispatch } from "react";
+type Props<Option, Value> = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id: string;
+    includeValueInTracking?: boolean;
+    onChange: Dispatch<Option>;
+    options: Array<Option>;
+    optionToId: (option: Option | Value) => string;
+    optionToLabel: (option: Option | Value) => string;
+    value: Option | Value;
+};
+declare const SelectInput: <Option = any, Value = never>({ autoFocus, disabled, id, onChange, options, optionToId, optionToLabel, value, }: Props<Option, Value>) => import("react/jsx-runtime").JSX.Element;
+export default SelectInput;

package/dist/inputs/SelectInput.js

@@ -0,0 +1,130 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__ from "@floating-ui/react";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__ from "./SelectInput.module.js";
+const SelectInput = ({ autoFocus = false, disabled = false, id, onChange, options, optionToId, optionToLabel, value })=>{
+    const optionsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)([]);
+    const optionsContentRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(options.map((option)=>optionToLabel(option)));
+    const listBoxRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(options.findIndex((option)=>optionToId(option) === optionToId(value)));
+    const { refs: floatingUiRefs, floatingStyles, context } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
+        open: isOpen,
+        onOpenChange: (open)=>{
+            setIsOpen(open);
+            setActiveIndex(options.findIndex((option)=>optionToId(option) === optionToId(value)));
+        },
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate,
+        placement: "bottom-start",
+        middleware: [
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.flip)(),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.offset)(4),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.size)({
+                apply ({ rects, elements }) {
+                    Object.assign(elements.floating.style, {
+                        minWidth: `${rects.reference.width}px`,
+                        maxWidth: rects.reference.width > 200 ? `${rects.reference.width}px` : "200px"
+                    });
+                }
+            })
+        ]
+    });
+    const click = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useClick)(context);
+    const dismiss = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useDismiss)(context);
+    const listNav = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useListNavigation)(context, {
+        listRef: optionsRef,
+        activeIndex,
+        onNavigate: setActiveIndex
+    });
+    const typeahead = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useTypeahead)(context, {
+        listRef: optionsContentRef,
+        activeIndex,
+        onMatch: setActiveIndex
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useInteractions)([
+        click,
+        dismiss,
+        listNav,
+        typeahead
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+                autoFocus: autoFocus,
+                disabled: disabled,
+                className: __WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__["default"].toggleButton,
+                tabIndex: 0,
+                type: "button",
+                ref: floatingUiRefs.setReference,
+                ...getReferenceProps({
+                    id: id
+                }),
+                children: [
+                    optionToLabel(value),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__["default"].toggleButtonActions,
+                        children: isOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                            symbol: "ChevronUp"
+                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                            symbol: "ChevronDown"
+                        })
+                    })
+                ]
+            }),
+            !disabled && isOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingPortal, {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingFocusManager, {
+                        context: context,
+                        modal: false,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            ref: floatingUiRefs.setFloating,
+                            style: floatingStyles,
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__["default"].menu),
+                            ...getFloatingProps(),
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
+                                className: __WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__["default"].listBox,
+                                ref: listBoxRef,
+                                children: options.map((option, index)=>{
+                                    const optionId = optionToId(option);
+                                    const optionLabel = optionToLabel(option);
+                                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
+                                        tabIndex: index === activeIndex ? 0 : -1,
+                                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__["default"].listItem, {
+                                            [__WEBPACK_EXTERNAL_MODULE__SelectInput_module_js_3ac344a1__["default"].activeListItem]: activeIndex === index
+                                        }),
+                                        ref: (node)=>{
+                                            optionsRef.current[index] = node;
+                                        },
+                                        ...getItemProps({
+                                            onClick: ()=>{
+                                                setIsOpen(false);
+                                                onChange(option);
+                                            },
+                                            onKeyDown (event) {
+                                                if ("Enter" === event.key) {
+                                                    event.preventDefault();
+                                                    setIsOpen(false);
+                                                    onChange(option);
+                                                }
+                                            }
+                                        }),
+                                        children: [
+                                            optionLabel,
+                                            optionToId(value) === optionToId(option) ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                                                symbol: "CheckMark"
+                                            }) : null
+                                        ]
+                                    }, optionId);
+                                })
+                            })
+                        })
+                    })
+                })
+            }) : null
+        ]
+    });
+};
+const SelectInput_rslib_entry_ = SelectInput;
+export { SelectInput_rslib_entry_ as default };

package/dist/inputs/SelectInput.module.js

@@ -0,0 +1,10 @@
+import "./SelectInput_module.css";
+const SelectInput_module_rslib_entry_ = {
+    toggleButton: "toggleButton-MOzLDN",
+    toggleButtonActions: "toggleButtonActions-fQijiu",
+    menu: "menu-LbUY77",
+    listBox: "listBox-qJGtUx",
+    listItem: "listItem-gKH16R",
+    activeListItem: "activeListItem-zGkblD"
+};
+export { SelectInput_module_rslib_entry_ as default };

package/dist/inputs/SelectInput_module.css

@@ -0,0 +1,63 @@
+.toggleButton-MOzLDN {
+  border-radius: var(--size-n3);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  color: var(--color-grey-s01);
+  font: var(--font-regular);
+  align-items: center;
+  gap: var(--size-00);
+  padding: var(--size-n1) var(--size-00);
+  background: var(--color-white);
+  grid-template-columns: 1fr max-content;
+  width: 100%;
+  display: grid;
+}
+
+.toggleButton-MOzLDN:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.toggleButton-MOzLDN:focus-visible {
+  box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
+}
+
+.toggleButtonActions-fQijiu {
+  align-items: center;
+  gap: var(--size-n2);
+  padding-left: var(--size-n2);
+  border-left: 1px solid var(--color-grey-t08);
+  display: flex;
+}
+
+.menu-LbUY77 {
+  background: var(--color-white);
+  border: 1px solid var(--color-grey-t08);
+  border-radius: var(--size-n3);
+  box-shadow: var(--shadow-heavy);
+  z-index: 1;
+}
+
+.listBox-qJGtUx {
+  max-height: 320px;
+  padding: var(--size-n2);
+  overflow-y: auto;
+}
+
+.listItem-gKH16R {
+  padding: var(--size-n2);
+  border-radius: var(--size-n3);
+  align-items: center;
+  gap: var(--size-n2);
+  grid-template-columns: 1fr max-content;
+  display: grid;
+}
+
+.listItem-gKH16R:hover {
+  cursor: pointer;
+}
+
+.activeListItem-zGkblD {
+  background: var(--color-grey-t09);
+}
+

package/dist/inputs/SingleSelectComboboxInput.d.ts

@@ -0,0 +1,19 @@
+import { type Dispatch, type ReactNode } from "react";
+type Props<Option> = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id: string;
+    includeValueInTracking?: boolean;
+    onChange: Dispatch<Option>;
+    options: Array<Option>;
+    optionToId: (option: Option) => string;
+    optionToLabel: (option: Option) => ReactNode;
+    value: Option | null;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    searchFields: Array<keyof Option & string>;
+    onCreate?: (onClose: () => void, searchTerm: string) => ReactNode;
+    onClear?: () => void;
+};
+declare const SingleSelectComboBoxInput: <Option>({ autoFocus, disabled, id, onChange, options, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
+export default SingleSelectComboBoxInput;