@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/inputs/CheckboxInput.js

@@ -0,0 +1,48 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__CheckboxInput_module_js_09452d6b__ from "./CheckboxInput.module.js";
+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__utils_TrackingContext_js_139012da__ from "../utils/TrackingContext.js";
+const CheckboxInput = ({ autoFocus = false, disabled = false, id, includeValueInTracking, onChange, onClick, value, indeterminate })=>{
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const trackingContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__["default"]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (ref.current) ref.current.indeterminate = indeterminate ?? false;
+    }, [
+        indeterminate
+    ]);
+    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__CheckboxInput_module_js_09452d6b__["default"].input,
+                disabled: disabled,
+                id: id,
+                onChange: (event)=>{
+                    onChange(event.target.checked, event);
+                    if (trackingContext && id) trackingContext.trackInput(id, includeValueInTracking ? event.target.checked.toString() : void 0);
+                },
+                ref: ref,
+                type: "checkbox"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__CheckboxInput_module_js_09452d6b__["default"].visual,
+                onClick: (event)=>{
+                    event.preventDefault();
+                    if (ref.current) {
+                        ref.current.click();
+                        if (onClick) onClick(event);
+                    }
+                },
+                children: indeterminate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "Dash"
+                }) : value ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "CheckMark"
+                }) : null
+            })
+        ]
+    });
+};
+const CheckboxInput_rslib_entry_ = CheckboxInput;
+export { CheckboxInput_rslib_entry_ as default };

package/dist/inputs/CheckboxInput.module.js

@@ -0,0 +1,6 @@
+import "./CheckboxInput_module.css";
+const CheckboxInput_module_rslib_entry_ = {
+    input: "input-OINnFk",
+    visual: "visual-KuehwJ"
+};
+export { CheckboxInput_module_rslib_entry_ as default };

package/dist/inputs/CheckboxInput_module.css

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

package/dist/inputs/ColorPickerInput.d.ts

@@ -0,0 +1,8 @@
+import type { Color } from "../presentation/Tag";
+type Props = {
+    id: string;
+    value: Color;
+    onChange: (value: Color) => void;
+};
+declare const ColorPickerInput: ({ id, value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ColorPickerInput;

package/dist/inputs/ColorPickerInput.js

@@ -0,0 +1,36 @@
+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__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__ from "./ColorPickerInput.module.js";
+const LABELS = {
+    purple: "Purple",
+    blue: "Blue",
+    teal: "Teal",
+    green: "Green",
+    yellow: "Yellow",
+    orange: "Orange",
+    red: "Red",
+    maroon: "Maroon",
+    grey: "Grey"
+};
+const ColorPickerInput = ({ id, value, onChange })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        id: id,
+        className: __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__["default"].colorPickerContainer,
+        children: Object.entries(LABELS).map(([color, label])=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                    __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__["default"][color],
+                    __WEBPACK_EXTERNAL_MODULE__ColorPickerInput_module_js_ca9970c9__["default"].colorSwatch
+                ]),
+                onClick: ()=>{
+                    onChange(color);
+                },
+                "aria-label": label,
+                title: label,
+                type: "button",
+                children: color === value ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "CheckMark"
+                }) : null
+            }, color))
+    });
+const ColorPickerInput_rslib_entry_ = ColorPickerInput;
+export { ColorPickerInput_rslib_entry_ as default };

package/dist/inputs/ColorPickerInput.module.js

@@ -0,0 +1,15 @@
+import "./ColorPickerInput_module.css";
+const ColorPickerInput_module_rslib_entry_ = {
+    colorPickerContainer: "colorPickerContainer-vtcSYx",
+    colorSwatch: "colorSwatch-wpMMGe",
+    blue: "blue-v9K5JJ",
+    green: "green-veeZjl",
+    grey: "grey-mX5qFz",
+    maroon: "maroon-eUNVgs",
+    orange: "orange-xgdRV3",
+    purple: "purple-HWsWJl",
+    red: "red-JL2bM_",
+    teal: "teal-wgRaV3",
+    yellow: "yellow-Acf9kq"
+};
+export { ColorPickerInput_module_rslib_entry_ as default };

package/dist/inputs/ColorPickerInput_module.css

@@ -0,0 +1,99 @@
+.colorPickerContainer-vtcSYx {
+  gap: var(--size-n2);
+  display: flex;
+}
+
+.colorSwatch-wpMMGe {
+  width: var(--size-p3);
+  height: var(--size-p3);
+  border-radius: var(--size-n3);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.colorSwatch-wpMMGe:focus-visible {
+  box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
+}
+
+.blue-v9K5JJ {
+  background-color: var(--color-blue-t09);
+  color: var(--color-blue-000);
+}
+
+.blue-v9K5JJ:hover {
+  background-color: var(--color-blue-t08);
+}
+
+.green-veeZjl {
+  background-color: var(--color-green-t09);
+  color: var(--color-green-000);
+}
+
+.green-veeZjl:hover {
+  background-color: var(--color-green-t08);
+}
+
+.grey-mX5qFz {
+  background-color: var(--color-grey-t09);
+  color: var(--color-grey-000);
+}
+
+.grey-mX5qFz:hover {
+  background-color: var(--color-grey-t08);
+}
+
+.maroon-eUNVgs {
+  background-color: var(--color-maroon-t09);
+  color: var(--color-maroon-000);
+}
+
+.maroon-eUNVgs:hover {
+  background-color: var(--color-maroon-t08);
+}
+
+.orange-xgdRV3 {
+  background-color: var(--color-orange-t09);
+  color: var(--color-orange-000);
+}
+
+.orange-xgdRV3:hover {
+  background-color: var(--color-orange-t08);
+}
+
+.purple-HWsWJl {
+  background-color: var(--color-purple-t09);
+  color: var(--color-purple-000);
+}
+
+.purple-HWsWJl:hover {
+  background-color: var(--color-purple-t08);
+}
+
+.red-JL2bM_ {
+  background-color: var(--color-red-t09);
+  color: var(--color-red-000);
+}
+
+.red-JL2bM_:hover {
+  background-color: var(--color-red-t08);
+}
+
+.teal-wgRaV3 {
+  background-color: var(--color-teal-t09);
+  color: var(--color-teal-000);
+}
+
+.teal-wgRaV3:hover {
+  background-color: var(--color-teal-t08);
+}
+
+.yellow-Acf9kq {
+  background-color: var(--color-yellow-t09);
+  color: var(--color-yellow-000);
+}
+
+.yellow-Acf9kq:hover {
+  background-color: var(--color-yellow-t08);
+}
+

package/dist/inputs/DateInput.d.ts

@@ -0,0 +1,19 @@
+import { type Dispatch } from "react";
+type Props = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id?: string;
+    onChange: Dispatch<string | null>;
+    value: string | null | undefined;
+    prefix?: string | null;
+    suffix?: string | null;
+};
+/**
+ * The value dispatched to the `onChange`handler will always be either a valid
+ * Temporal Plain Date string (e.g. `2000-01-01`) or null.
+ *
+ * If the string passed in via the `value` prop is not a valid Temporal Plain
+ * Date string (e.g. `2000-01-01`) will be treated as null.
+ */
+declare const DateInput: ({ autoFocus, disabled, id, onChange, value, prefix, suffix }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DateInput;

package/dist/inputs/DateInput.js

@@ -0,0 +1,43 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__DateInput_module_js_c56ce979__ from "./DateInput.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__worknice_utils_temporal_isValidPlainDate_e044a4f8__ from "@worknice/utils/temporal/isValidPlainDate";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const DateInput = ({ autoFocus = false, disabled, id, onChange, 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__DateInput_module_js_c56ce979__["default"].container,
+        children: [
+            prefix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__DateInput_module_js_c56ce979__["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__DateInput_module_js_c56ce979__["default"].input, {
+                    [__WEBPACK_EXTERNAL_MODULE__DateInput_module_js_c56ce979__["default"].inputWithPrefix]: null != prefix,
+                    [__WEBPACK_EXTERNAL_MODULE__DateInput_module_js_c56ce979__["default"].inputWithSuffix]: void 0 !== suffix && null !== prefix
+                }),
+                disabled: disabled,
+                id: id,
+                onChange: (event)=>{
+                    onChange((0, __WEBPACK_EXTERNAL_MODULE__worknice_utils_temporal_isValidPlainDate_e044a4f8__["default"])(event.target.value) ? event.target.value : null);
+                },
+                type: "date",
+                value: (0, __WEBPACK_EXTERNAL_MODULE__worknice_utils_temporal_isValidPlainDate_e044a4f8__["default"])(value) ? value : ""
+            }),
+            suffix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__DateInput_module_js_c56ce979__["default"].suffix,
+                children: suffix
+            }) : null
+        ]
+    });
+};
+const DateInput_rslib_entry_ = DateInput;
+export { DateInput_rslib_entry_ as default };

package/dist/inputs/DateInput.module.js

@@ -0,0 +1,10 @@
+import "./DateInput_module.css";
+const DateInput_module_rslib_entry_ = {
+    container: "container-gNGJGb",
+    input: "input-Pkt2vm",
+    inputWithPrefix: "inputWithPrefix-MFj1Ii",
+    inputWithSuffix: "inputWithSuffix-nZn9Jj",
+    prefix: "prefix-L5yioE",
+    suffix: "suffix-D_3zaS"
+};
+export { DateInput_module_rslib_entry_ as default };

package/dist/inputs/DateInput_module.css

@@ -0,0 +1,60 @@
+.container-gNGJGb {
+  display: flex;
+}
+
+.input-Pkt2vm {
+  border-radius: var(--size-n3);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  box-sizing: border-box;
+  color: var(--color-grey-s01);
+  padding: var(--size-n1) var(--size-00);
+  background: var(--color-white);
+  width: 100%;
+  display: inline-block;
+  position: relative;
+}
+
+.inputWithPrefix-MFj1Ii {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.inputWithSuffix-nZn9Jj {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-Pkt2vm::-webkit-date-and-time-value {
+  text-align: left;
+}
+
+.input-Pkt2vm:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-Pkt2vm:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.prefix-L5yioE, .suffix-D_3zaS {
+  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-L5yioE {
+  border-top-left-radius: var(--size-n3);
+  border-bottom-left-radius: var(--size-n3);
+  border-right: none;
+}
+
+.suffix-D_3zaS {
+  border-top-right-radius: var(--size-n3);
+  border-bottom-right-radius: var(--size-n3);
+  border-left: none;
+}
+

package/dist/inputs/DateTimeInput.d.ts

@@ -0,0 +1,17 @@
+import { type Dispatch } from "react";
+type Props = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id?: string;
+    onChange: Dispatch<string | null>;
+    value: string | null;
+};
+/**
+ * The value dispatched to the `onChange`handler will always be either a valid
+ * Temporal Instant string (e.g. `2000-01-01T00:00:00+00:00`) or null.
+ *
+ * If the string passed in via the `value` prop is not a valid Temporal Instant
+ * string (e.g. `2000-01-01T00:00:00+00:00`) will be treated as null.
+ */
+declare const DateTimeInput: ({ autoFocus, disabled, id, onChange, value }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DateTimeInput;

package/dist/inputs/DateTimeInput.js

@@ -0,0 +1,34 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__DateTimeInput_module_js_5a6bf7f0__ from "./DateTimeInput.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__worknice_utils_temporal_isValidInstant_8d12e4b0__ from "@worknice/utils/temporal/isValidInstant";
+import * as __WEBPACK_EXTERNAL_MODULE__worknice_utils_temporal_isValidPlainDateTime_4f94a6cb__ from "@worknice/utils/temporal/isValidPlainDateTime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_temporal_polyfill_11c1db1c__ from "temporal-polyfill";
+const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const DateTimeInput = ({ autoFocus = false, disabled, id, onChange, 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)("input", {
+        ref: ref,
+        autoFocus: autoFocus,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__DateTimeInput_module_js_5a6bf7f0__["default"].input),
+        disabled: disabled,
+        id: id,
+        onChange: (event)=>{
+            onChange((0, __WEBPACK_EXTERNAL_MODULE__worknice_utils_temporal_isValidPlainDateTime_4f94a6cb__["default"])(event.target.value) ? __WEBPACK_EXTERNAL_MODULE_temporal_polyfill_11c1db1c__.Temporal.PlainDateTime.from(event.target.value).toZonedDateTime(timeZone).toInstant().toString({
+                smallestUnit: "second"
+            }) : null);
+        },
+        type: "datetime-local",
+        value: (0, __WEBPACK_EXTERNAL_MODULE__worknice_utils_temporal_isValidInstant_8d12e4b0__["default"])(value) ? __WEBPACK_EXTERNAL_MODULE_temporal_polyfill_11c1db1c__.Temporal.Instant.from(value).toZonedDateTimeISO(timeZone).toPlainDateTime().toString({
+            smallestUnit: "minute"
+        }) : ""
+    });
+};
+const DateTimeInput_rslib_entry_ = DateTimeInput;
+export { DateTimeInput_rslib_entry_ as default };

package/dist/inputs/DateTimeInput.module.js

@@ -0,0 +1,5 @@
+import "./DateTimeInput_module.css";
+const DateTimeInput_module_rslib_entry_ = {
+    input: "input-MU0wP3"
+};
+export { DateTimeInput_module_rslib_entry_ as default };

package/dist/inputs/DateTimeInput_module.css

@@ -0,0 +1,27 @@
+.input-MU0wP3 {
+  border-radius: var(--size-n3);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  box-sizing: border-box;
+  color: var(--color-grey-s01);
+  padding: var(--size-n1) var(--size-00);
+  background: var(--color-white);
+  width: 100%;
+  display: inline-block;
+  position: relative;
+}
+
+.input-MU0wP3::-webkit-date-and-time-value {
+  text-align: left;
+}
+
+.input-MU0wP3:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-MU0wP3:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+

package/dist/inputs/FileInput.d.ts

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

package/dist/inputs/FileInput.js

@@ -0,0 +1,12 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+const FileInput = ({ id, onChange, disabled })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+        id: id,
+        type: "file",
+        onChange: (event)=>{
+            const file = event.target?.files?.item(0);
+            onChange(file ? file : null);
+        },
+        disabled: disabled
+    });
+const FileInput_rslib_entry_ = FileInput;
+export { FileInput_rslib_entry_ as default };

package/dist/inputs/ListBoxInput.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+type Props<Option> = {
+    onChange: (option: Option) => void;
+    options: Array<Option>;
+    optionToId: (option: Option) => string;
+    optionToLabel: (option: Option) => ReactNode;
+    optionToDisabled?: (option: Option) => boolean;
+    searchField: keyof Option & string;
+    value: Array<Option>;
+    id?: string;
+    includeValueInTracking?: boolean;
+};
+declare const ListBoxInput: <Option>({ onChange, options, optionToId, optionToLabel, optionToDisabled, searchField, value, id, includeValueInTracking, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
+export default ListBoxInput;

package/dist/inputs/ListBoxInput.js

@@ -0,0 +1,66 @@
+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__utils_TrackingContext_js_139012da__ from "../utils/TrackingContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__ from "../utils/search.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CheckboxInput_js_1a7df59a__ from "./CheckboxInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__ from "./ListBoxInput.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__StringInput_js_3cb68a8a__ from "./StringInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+const ListBoxInput = ({ onChange, options, optionToId, optionToLabel, optionToDisabled, searchField, value, id, includeValueInTracking })=>{
+    const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
+    const trackingContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__["default"]);
+    const filteredOptions = "" !== searchTerm.trim() ? (0, __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__["default"])(options.map((option)=>({
+            ...option,
+            id: optionToId(option)
+        })), [
+        searchField
+    ], searchTerm) : options;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].container,
+        id: id,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].searchContainer,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__StringInput_js_3cb68a8a__["default"], {
+                    placeholder: "Search options",
+                    onChange: (value)=>{
+                        setSearchTerm(value ?? "");
+                    },
+                    value: searchTerm
+                })
+            }),
+            0 !== filteredOptions.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].optionsContainer,
+                children: filteredOptions.map((option)=>{
+                    const optionId = optionToId(option);
+                    const optionLabel = optionToLabel(option);
+                    const optionDisabled = optionToDisabled ? optionToDisabled(option) : false;
+                    const selected = value.some((value)=>optionToId(value) === optionToId(option));
+                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("label", {
+                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].option, {
+                            [__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].disabled]: optionDisabled
+                        }),
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CheckboxInput_js_1a7df59a__["default"], {
+                                disabled: optionDisabled,
+                                value: selected,
+                                onChange: ()=>{
+                                    onChange(option);
+                                    if (trackingContext && id) trackingContext.trackInput(id, includeValueInTracking ? optionToId(option) : void 0);
+                                }
+                            }),
+                            optionLabel
+                        ]
+                    }, optionId);
+                })
+            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].noResultsContainer,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                    children: "No options found."
+                })
+            })
+        ]
+    });
+};
+const ListBoxInput_rslib_entry_ = ListBoxInput;
+export { ListBoxInput_rslib_entry_ as default };

package/dist/inputs/ListBoxInput.module.js

@@ -0,0 +1,10 @@
+import "./ListBoxInput_module.css";
+const ListBoxInput_module_rslib_entry_ = {
+    container: "container-RqDms0",
+    searchContainer: "searchContainer-V8D3A2",
+    optionsContainer: "optionsContainer-q0if3P",
+    noResultsContainer: "noResultsContainer-FEqb9D",
+    option: "option-uViftw",
+    disabled: "disabled-wpSMEL"
+};
+export { ListBoxInput_module_rslib_entry_ as default };

package/dist/inputs/ListBoxInput_module.css

@@ -0,0 +1,44 @@
+.container-RqDms0 {
+  border: 1px solid var(--color-grey-t08);
+  border-radius: var(--size-n3);
+  overflow-y: auto;
+}
+
+.searchContainer-V8D3A2 {
+  padding: var(--size-n1);
+  border-bottom: 1px solid var(--color-grey-t08);
+}
+
+.optionsContainer-q0if3P {
+  gap: var(--size-n4);
+  padding: var(--size-n3);
+  display: grid;
+}
+
+.noResultsContainer-FEqb9D {
+  padding: var(--size-00);
+}
+
+.option-uViftw {
+  padding: var(--size-n2);
+  gap: var(--size-n2);
+  border-radius: var(--size-n3);
+  -webkit-user-select: none;
+  user-select: none;
+  align-items: center;
+  display: flex;
+}
+
+.option-uViftw:hover {
+  background: var(--color-grey-t09);
+  cursor: pointer;
+}
+
+.disabled-wpSMEL {
+  color: var(--tone-muted);
+}
+
+.disabled-wpSMEL:hover {
+  cursor: not-allowed;
+}
+

package/dist/inputs/MarkdownInput.d.ts

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