@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/inputs/SingleSelectComboboxInput.js

@@ -0,0 +1,179 @@
+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__utils_search_js_89d5ae26__ from "../utils/search.js";
+import * as __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__ from "./SingleSelectComboboxInput.module.js";
+const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, onChange, options, optionToId, optionToLabel, value, placeholder, searchPlaceholder, searchFields, onCreate, onClear })=>{
+    const optionsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)([]);
+    const searchRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const listBoxRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
+    const [createNewOption, setCreateNewOption] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
+    const filteredOptions = "" !== searchTerm.trim() ? (0, __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__["default"])(options.map((option)=>({
+            ...option,
+            id: optionToId(option)
+        })), searchFields, searchTerm) : options;
+    const { refs: floatingUiRefs, floatingStyles, context } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
+        open: isOpen,
+        onOpenChange: (open)=>{
+            setIsOpen(open);
+            if (open) {
+                setActiveIndex(0);
+                setSearchTerm("");
+            }
+        },
+        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,
+        virtual: true
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useInteractions)([
+        click,
+        dismiss,
+        listNav
+    ]);
+    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__SingleSelectComboboxInput_module_js_54aa53da__["default"].toggleButton,
+                tabIndex: 0,
+                type: "button",
+                ref: floatingUiRefs.setReference,
+                ...getReferenceProps({
+                    id: id
+                }),
+                children: [
+                    value ? optionToLabel(value) : placeholder ?? "Select an option",
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].toggleButtonActions,
+                        children: [
+                            onClear && value ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                onClick: (event)=>{
+                                    event.stopPropagation();
+                                    setIsOpen(false);
+                                    onClear();
+                                },
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                                    symbol: "Close"
+                                })
+                            }) : null,
+                            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,
+                        initialFocus: searchRef,
+                        modal: false,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            ref: floatingUiRefs.setFloating,
+                            style: floatingStyles,
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].menu),
+                            ...getFloatingProps(),
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+                                    type: "text",
+                                    className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].searchInput,
+                                    placeholder: searchPlaceholder ?? "Search for an option",
+                                    "aria-autocomplete": "list",
+                                    onChange: (e)=>{
+                                        setSearchTerm(e.target.value);
+                                        setActiveIndex(0);
+                                    },
+                                    value: searchTerm,
+                                    ref: searchRef,
+                                    onKeyDown: (e)=>{
+                                        if ("Enter" === e.key && null != activeIndex) {
+                                            setIsOpen(false);
+                                            onChange(filteredOptions[activeIndex]);
+                                        }
+                                    }
+                                }),
+                                0 !== filteredOptions.length || onCreate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("ul", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listBox,
+                                    ref: listBoxRef,
+                                    children: [
+                                        filteredOptions.map((option, index)=>{
+                                            const optionId = optionToId(option);
+                                            const optionLabel = optionToLabel(option);
+                                            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
+                                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItem, {
+                                                    [__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].activeListItem]: activeIndex === index
+                                                }),
+                                                ...getItemProps({
+                                                    onClick: ()=>{
+                                                        setIsOpen(false);
+                                                        onChange(option);
+                                                    },
+                                                    ref: (node)=>{
+                                                        optionsRef.current[index] = node;
+                                                    }
+                                                }),
+                                                children: [
+                                                    optionLabel,
+                                                    value && 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);
+                                        }),
+                                        onCreate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
+                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                                __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItem,
+                                                __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listItemCreate
+                                            ]),
+                                            onClick: ()=>{
+                                                setIsOpen(false);
+                                                setCreateNewOption(true);
+                                            },
+                                            children: [
+                                                "+ Create new option ",
+                                                searchTerm ? `"${searchTerm}"` : null
+                                            ]
+                                        }) : null
+                                    ]
+                                }) : null
+                            ]
+                        })
+                    })
+                })
+            }) : null,
+            onCreate && createNewOption ? onCreate(()=>{
+                setCreateNewOption(false);
+            }, searchTerm) : null
+        ]
+    });
+};
+const SingleSelectComboboxInput_rslib_entry_ = SingleSelectComboBoxInput;
+export { SingleSelectComboboxInput_rslib_entry_ as default };

package/dist/inputs/SingleSelectComboboxInput.module.js

@@ -0,0 +1,12 @@
+import "./SingleSelectComboboxInput_module.css";
+const SingleSelectComboboxInput_module_rslib_entry_ = {
+    toggleButton: "toggleButton-XTdiGn",
+    toggleButtonActions: "toggleButtonActions-oS39_7",
+    searchInput: "searchInput-s9NjcM",
+    menu: "menu-f81oko",
+    listBox: "listBox-biTMkv",
+    listItem: "listItem-ASZkke",
+    listItemCreate: "listItemCreate-_tGId1",
+    activeListItem: "activeListItem-_B_E3X"
+};
+export { SingleSelectComboboxInput_module_rslib_entry_ as default };

package/dist/inputs/SingleSelectComboboxInput_module.css

@@ -0,0 +1,73 @@
+.toggleButton-XTdiGn {
+  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-XTdiGn:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.toggleButton-XTdiGn:focus-visible {
+  box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
+}
+
+.toggleButtonActions-oS39_7 {
+  align-items: center;
+  gap: var(--size-n2);
+  padding-left: var(--size-n2);
+  border-left: 1px solid var(--color-grey-t08);
+  display: flex;
+}
+
+.searchInput-s9NjcM {
+  padding: var(--size-00);
+}
+
+.searchInput-s9NjcM::placeholder {
+  color: var(--color-grey-t07);
+  font: var(--font-regular-italic);
+}
+
+.menu-f81oko {
+  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-biTMkv {
+  max-height: 320px;
+  padding: var(--size-n2);
+  border-top: 1px solid var(--color-grey-t08);
+  overflow-y: auto;
+}
+
+.listItem-ASZkke {
+  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-ASZkke:hover {
+  cursor: pointer;
+}
+
+.listItemCreate-_tGId1:hover, .activeListItem-_B_E3X {
+  background: var(--color-grey-t09);
+}
+

package/dist/inputs/StringInput.d.ts

@@ -0,0 +1,15 @@
+import { type Dispatch } from "react";
+type Props = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id?: string;
+    onChange: Dispatch<string | null>;
+    placeholder?: string;
+    type?: "text" | "multiline" | "email" | "tel" | "url" | "search" | "password";
+    value: string | null;
+    prefix?: string | null;
+    suffix?: string | null;
+    inputMode?: "text" | "numeric" | "decimal" | "numeric" | "tel" | "search" | "url" | "email";
+};
+declare const StringInput: ({ autoFocus, disabled, id, onChange, placeholder, type, value, prefix, suffix, inputMode, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default StringInput;

package/dist/inputs/StringInput.js

@@ -0,0 +1,51 @@
+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__StringInput_module_js_fa706166__ from "./StringInput.module.js";
+const StringInput = ({ autoFocus = false, disabled, id, onChange, placeholder, type = "text", value, prefix, suffix, inputMode = "text" })=>{
+    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__StringInput_module_js_fa706166__["default"].container,
+        children: [
+            prefix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__StringInput_module_js_fa706166__["default"].prefix,
+                children: prefix
+            }) : null,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+                ref: ref,
+                inputMode: "text" === type ? inputMode : void 0,
+                autoFocus: autoFocus,
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__StringInput_module_js_fa706166__["default"].input, {
+                    [__WEBPACK_EXTERNAL_MODULE__StringInput_module_js_fa706166__["default"].inputWithPrefix]: null != prefix,
+                    [__WEBPACK_EXTERNAL_MODULE__StringInput_module_js_fa706166__["default"].inputWithSuffix]: void 0 !== suffix && null !== prefix
+                }),
+                disabled: disabled,
+                id: id,
+                onChange: (event)=>{
+                    onChange(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,
+                type: type,
+                value: value ?? ""
+            }),
+            suffix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__StringInput_module_js_fa706166__["default"].suffix,
+                children: suffix
+            }) : null
+        ]
+    });
+};
+const StringInput_rslib_entry_ = StringInput;
+export { StringInput_rslib_entry_ as default };

package/dist/inputs/StringInput.module.js

@@ -0,0 +1,10 @@
+import "./StringInput_module.css";
+const StringInput_module_rslib_entry_ = {
+    container: "container-RF3uSt",
+    input: "input-YUEurG",
+    inputWithPrefix: "inputWithPrefix-sduNlf",
+    inputWithSuffix: "inputWithSuffix-_dIHEk",
+    prefix: "prefix-U2L5Nd",
+    suffix: "suffix-mlsco9"
+};
+export { StringInput_module_rslib_entry_ as default };

package/dist/inputs/StringInput_module.css

@@ -0,0 +1,59 @@
+.container-RF3uSt {
+  display: flex;
+}
+
+.input-YUEurG {
+  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-sduNlf {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.inputWithSuffix-_dIHEk {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-YUEurG:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-YUEurG::placeholder {
+  color: var(--color-grey-t07);
+  font: var(--font-regular-italic);
+}
+
+.input-YUEurG:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.prefix-U2L5Nd, .suffix-mlsco9 {
+  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-U2L5Nd {
+  border-top-left-radius: var(--size-n3);
+  border-bottom-left-radius: var(--size-n3);
+  border-right: none;
+}
+
+.suffix-mlsco9 {
+  border-top-right-radius: var(--size-n3);
+  border-bottom-right-radius: var(--size-n3);
+  border-left: none;
+}
+

package/dist/inputs/TextInput.d.ts

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

package/dist/inputs/TextInput.js

@@ -0,0 +1,51 @@
+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__TextInput_module_js_ecfc4c61__ from "./TextInput.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+const TextInput = ({ 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__TextInput_module_js_ecfc4c61__["default"].container,
+        children: [
+            prefix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__TextInput_module_js_ecfc4c61__["default"].prefix,
+                children: prefix
+            }) : null,
+            /*#__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__TextInput_module_js_ecfc4c61__["default"].input, {
+                    [__WEBPACK_EXTERNAL_MODULE__TextInput_module_js_ecfc4c61__["default"].inputWithPrefix]: null != prefix,
+                    [__WEBPACK_EXTERNAL_MODULE__TextInput_module_js_ecfc4c61__["default"].inputWithSuffix]: void 0 !== suffix && null !== prefix
+                }),
+                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 ?? ""
+            }),
+            suffix ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__TextInput_module_js_ecfc4c61__["default"].suffix,
+                children: suffix
+            }) : null
+        ]
+    });
+};
+const TextInput_rslib_entry_ = TextInput;
+export { TextInput_rslib_entry_ as default };

package/dist/inputs/TextInput.module.js

@@ -0,0 +1,10 @@
+import "./TextInput_module.css";
+const TextInput_module_rslib_entry_ = {
+    container: "container-sj243T",
+    input: "input-LiAU3S",
+    inputWithPrefix: "inputWithPrefix-dHF4zq",
+    inputWithSuffix: "inputWithSuffix-HATvoL",
+    prefix: "prefix-WAZmaj",
+    suffix: "suffix-MuCxOF"
+};
+export { TextInput_module_rslib_entry_ as default };

package/dist/inputs/TextInput_module.css

@@ -0,0 +1,59 @@
+.container-sj243T {
+  display: flex;
+}
+
+.input-LiAU3S {
+  border-radius: var(--size-n3);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  color: var(--color-grey-s01);
+  height: max-content;
+  min-height: calc(var(--size-p1) * 5);
+  padding: var(--size-n1) var(--size-00);
+  width: 100%;
+}
+
+.inputWithPrefix-dHF4zq {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.inputWithSuffix-HATvoL {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-LiAU3S:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-LiAU3S::placeholder {
+  color: var(--color-grey-t07);
+  font: var(--font-regular-italic);
+}
+
+.input-LiAU3S:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.prefix-WAZmaj, .suffix-MuCxOF {
+  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-WAZmaj {
+  border-top-left-radius: var(--size-n3);
+  border-bottom-left-radius: var(--size-n3);
+  border-right: none;
+}
+
+.suffix-MuCxOF {
+  border-top-right-radius: var(--size-n3);
+  border-bottom-right-radius: var(--size-n3);
+  border-left: none;
+}
+

package/dist/inputs/TimeInput.d.ts

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

package/dist/inputs/TimeInput.js

@@ -0,0 +1,26 @@
+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__TimeInput_module_js_52a006ec__ from "./TimeInput.module.js";
+const TimeInput = ({ autoFocus = false, disabled, id, onChange, value, step })=>{
+    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: __WEBPACK_EXTERNAL_MODULE__TimeInput_module_js_52a006ec__["default"].input,
+        disabled: disabled,
+        id: id,
+        onChange: (event)=>{
+            onChange(event.target.value);
+        },
+        type: "time",
+        value: value ?? "",
+        step: step
+    });
+};
+const TimeInput_rslib_entry_ = TimeInput;
+export { TimeInput_rslib_entry_ as default };

package/dist/inputs/TimeInput.module.js

@@ -0,0 +1,5 @@
+import "./TimeInput_module.css";
+const TimeInput_module_rslib_entry_ = {
+    input: "input-AE26ML"
+};
+export { TimeInput_module_rslib_entry_ as default };

package/dist/inputs/TimeInput_module.css

@@ -0,0 +1,33 @@
+.input-AE26ML {
+  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-AE26ML:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-color: #0000;
+}
+
+.input-AE26ML:disabled {
+  background: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.input-AE26ML::-webkit-calendar-picker-indicator {
+  border-left: 1px solid var(--color-grey-t08);
+  cursor: pointer;
+  padding: 16px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+

package/dist/layouts/BaseLayout.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+type Props = {
+    brandTypeface: string;
+    children: ReactNode;
+};
+declare const BaseLayout: ({ brandTypeface, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BaseLayout;

package/dist/layouts/BaseLayout.js

@@ -0,0 +1,15 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_IconSymbolSet_js_45454e7d__ from "../presentation/IconSymbolSet.js";
+const BaseLayout = ({ brandTypeface, children })=>/*#__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__.jsx)("style", {
+                dangerouslySetInnerHTML: {
+                    __html: `:root { --typeface-brand: ${brandTypeface}; }`
+                }
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_IconSymbolSet_js_45454e7d__["default"], {}),
+            children
+        ]
+    });
+const BaseLayout_rslib_entry_ = BaseLayout;
+export { BaseLayout_rslib_entry_ as default };