@tipp/ui 1.4.26 → 1.5.0

package/dist/chunk-FTQUO3IT.js

@@ -1,260 +0,0 @@
-import {
-  ScrollArea
-} from "./chunk-ZKZDVS7G.js";
-import {
-  Popover
-} from "./chunk-5AVBYDPB.js";
-import {
-  Flex
-} from "./chunk-25HMMI7R.js";
-import {
-  Grid
-} from "./chunk-EGEQY3KT.js";
-import {
-  Badge
-} from "./chunk-EFMOJ6IL.js";
-import {
-  Button
-} from "./chunk-4B77ZZOP.js";
-import {
-  CheckIcon
-} from "./chunk-AW44EUZH.js";
-import {
-  AutoSizingInput
-} from "./chunk-WTSYZD46.js";
-
-// src/molecules/tag-selector.tsx
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { ChevronRightIcon, Cross1Icon } from "@radix-ui/react-icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-var OPTION_HEIGHT = 32;
-var DefaultDropdownContainer = (props) => {
-  return props.children;
-};
-function TagSelector(props) {
-  const {
-    options = [],
-    tagRender,
-    placeholder,
-    maxCount = 0,
-    DropdownContainer = DefaultDropdownContainer
-  } = props;
-  const [selected, setSelected] = useState(props.selected || []);
-  const [value, setValue] = useState("");
-  const [focusIndex, setFocusIndex] = useState(null);
-  const [open, setOpen] = useState(false);
-  const fieldRef = useRef(null);
-  const scrollRef = useRef(null);
-  const onChangeValue = useCallback(
-    (e) => {
-      setValue(e.target.value);
-    },
-    []
-  );
-  const filteredOptions = useMemo(() => {
-    return options.filter((option) => {
-      return option.name.includes(value);
-    });
-  }, [options, value]);
-  const selectedItem = useMemo(() => {
-    const result = [];
-    selected.forEach((id) => {
-      const maybeItem = options.find((option) => option.id === id);
-      if (maybeItem)
-        result.push(maybeItem);
-    });
-    return result;
-  }, [options, selected]);
-  const onDelete = useCallback((id) => {
-    setSelected((prev) => prev.filter((el) => el !== id));
-  }, []);
-  const onSelect = useCallback(
-    (id) => {
-      if (maxCount && selected.length + 1 > maxCount)
-        return;
-      setSelected((prev) => [...prev, id]);
-    },
-    [maxCount, selected]
-  );
-  const toggleItem = useCallback(
-    (id) => {
-      if (selected.includes(id)) {
-        onDelete(id);
-      } else {
-        onSelect(id);
-      }
-    },
-    [onDelete, onSelect, selected]
-  );
-  const setScroll = useCallback((index) => {
-    if (scrollRef.current) {
-      const scrollTop = scrollRef.current.scrollTop;
-      const clientHeight = scrollRef.current.clientHeight;
-      const focusTop = index * OPTION_HEIGHT;
-      if (focusTop < scrollTop) {
-        scrollRef.current.scrollTop = focusTop;
-      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
-        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
-      }
-    }
-  }, []);
-  const handleKeyDown = useCallback(
-    (e) => {
-      const key = e.key;
-      switch (key) {
-        case "ArrowDown": {
-          e.preventDefault();
-          let newFocus = 0;
-          if (typeof focusIndex === "number") {
-            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
-          }
-          setFocusIndex(newFocus);
-          setScroll(newFocus);
-          break;
-        }
-        case "ArrowUp": {
-          e.preventDefault();
-          let newFocus = 0;
-          if (typeof focusIndex === "number") {
-            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
-          }
-          setFocusIndex(newFocus);
-          setScroll(newFocus);
-          break;
-        }
-        case "Enter":
-          if (focusIndex !== null) {
-            toggleItem(filteredOptions[focusIndex].id);
-            setValue("");
-          }
-          break;
-        case "Backspace":
-          if (value.length === 0) {
-            setSelected((prev) => prev.slice(0, -1));
-          }
-          break;
-        case "Escape":
-          setOpen(false);
-          break;
-      }
-    },
-    [
-      focusIndex,
-      value.length,
-      setScroll,
-      options.length,
-      toggleItem,
-      filteredOptions
-    ]
-  );
-  useEffect(() => {
-    setFocusIndex(null);
-  }, [open]);
-  useEffect(() => {
-    setFocusIndex(0);
-  }, [filteredOptions]);
-  return /* @__PURE__ */ jsxs(
-    Popover.Root,
-    {
-      onOpenChange: setOpen,
-      open: Boolean(filteredOptions.length) && open,
-      children: [
-        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", children: [
-          /* @__PURE__ */ jsxs(Flex, { gap: "1", wrap: "wrap", children: [
-            selectedItem.map((item) => {
-              return tagRender ? tagRender(item) : /* @__PURE__ */ jsxs(Badge, { children: [
-                item.name,
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    onClick: () => {
-                      onDelete(item.id);
-                    },
-                    variant: "transparent",
-                    children: /* @__PURE__ */ jsx(Cross1Icon, {})
-                  }
-                )
-              ] }, item.id);
-            }),
-            /* @__PURE__ */ jsx(
-              AutoSizingInput,
-              {
-                onChange: onChangeValue,
-                onKeyDown: handleKeyDown,
-                placeholder
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(ChevronRightIcon, {})
-        ] }) }),
-        /* @__PURE__ */ jsx(
-          Popover.Content,
-          {
-            onOpenAutoFocus: (e) => {
-              e.preventDefault();
-            },
-            children: /* @__PURE__ */ jsx(
-              DropdownContainer,
-              {
-                currentItem: filteredOptions[focusIndex || 0],
-                items: filteredOptions,
-                children: /* @__PURE__ */ jsx(
-                  ScrollArea,
-                  {
-                    ref: scrollRef,
-                    scrollbars: "vertical",
-                    style: { height: OPTION_HEIGHT * 8 },
-                    type: "auto",
-                    children: /* @__PURE__ */ jsx(Flex, { direction: "column", children: filteredOptions.map((item, i) => {
-                      const isSelected = Boolean(
-                        selected.find((el) => el === item.id)
-                      );
-                      const isFocus = i === focusIndex;
-                      return /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          onClick: () => {
-                            var _a;
-                            toggleItem(item.id);
-                            (_a = fieldRef.current) == null ? void 0 : _a.focus();
-                          },
-                          onMouseEnter: () => {
-                            setFocusIndex(i);
-                          },
-                          style: {
-                            width: "100%",
-                            background: isFocus ? "var(--accent-a3)" : void 0,
-                            color: "var(--gray-12)",
-                            fontWeight: 400,
-                            boxShadow: "none"
-                          },
-                          variant: isSelected ? "soft" : "outline",
-                          children: /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
-                            item.name,
-                            isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
-                          ] })
-                        },
-                        item.id
-                      );
-                    }) })
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-
-export {
-  TagSelector
-};
-//# sourceMappingURL=chunk-FTQUO3IT.js.map

package/dist/chunk-FTQUO3IT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/molecules/tag-selector.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronRightIcon, Cross1Icon } from '@radix-ui/react-icons';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\nimport { AutoSizingInput } from '../atoms';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex].id);\n            setValue('');\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  return (\n    <Popover.Root\n      onOpenChange={setOpen}\n      open={Boolean(filteredOptions.length) && open}\n    >\n      <Popover.Trigger>\n        <Grid columns=\"1fr auto\">\n          <Flex gap=\"1\" wrap=\"wrap\">\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n            <AutoSizingInput\n              onChange={onChangeValue}\n              onKeyDown={handleKeyDown}\n              placeholder={placeholder}\n            />\n          </Flex>\n          <ChevronRightIcon />\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FTRDLFF3.js

@@ -1,153 +0,0 @@
-import {
-  TextField
-} from "./chunk-JPIZP2PZ.js";
-import {
-  ScrollArea
-} from "./chunk-ZKZDVS7G.js";
-import {
-  Popover
-} from "./chunk-5AVBYDPB.js";
-import {
-  Flex
-} from "./chunk-25HMMI7R.js";
-import {
-  Badge
-} from "./chunk-EFMOJ6IL.js";
-import {
-  Box
-} from "./chunk-4Y5BEXVN.js";
-import {
-  Button
-} from "./chunk-V5VKW4N3.js";
-import {
-  CheckIcon
-} from "./chunk-7OOUSUGO.js";
-
-// src/molecules/tag-selector.tsx
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { ChevronRightIcon, Cross1Icon } from "@radix-ui/react-icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DefaultDropdownContainer = (props) => {
-  return props.children;
-};
-function TagSelector(props) {
-  const {
-    options = [],
-    tagRender,
-    placeholder,
-    DropdownContainer = DefaultDropdownContainer
-  } = props;
-  const [selected, setSelected] = useState(props.selected || []);
-  const [value, setValue] = useState("");
-  const onChangeValue = useCallback(
-    (e) => {
-      setValue(e.target.value);
-    },
-    []
-  );
-  const selectedItem = useMemo(() => {
-    const result = [];
-    selected.forEach((id) => {
-      const maybeItem = options.find((option) => option.id === id);
-      if (maybeItem)
-        result.push(maybeItem);
-    });
-    return result;
-  }, [options, selected]);
-  const onDelete = useCallback((id) => {
-    setSelected((prev) => prev.filter((el) => el !== id));
-  }, []);
-  const onSelect = useCallback((id) => {
-    setSelected((prev) => [...prev, id]);
-  }, []);
-  const Toggle = useCallback(
-    (id) => {
-      if (selected.includes(id)) {
-        onDelete(id);
-      } else {
-        onSelect(id);
-      }
-    },
-    [onDelete, onSelect, selected]
-  );
-  const [open, setOpen] = useState(false);
-  const fieldRef = useRef(null);
-  useEffect(() => {
-    const field = fieldRef.current;
-    if (!field)
-      return;
-    field.addEventListener("focus", () => {
-      setOpen(true);
-    });
-  }, []);
-  return /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange: setOpen, open, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-      TextField.Root,
-      {
-        onBlur: () => {
-          setOpen(false);
-        },
-        onChange: onChangeValue,
-        placeholder: selectedItem.length ? "" : placeholder,
-        ref: fieldRef,
-        value,
-        children: [
-          /* @__PURE__ */ jsx(TextField.Slot, { children: selectedItem.map((item) => {
-            return tagRender ? tagRender(item) : /* @__PURE__ */ jsxs(Badge, { children: [
-              item.name,
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => {
-                    onDelete(item.id);
-                  },
-                  variant: "ghost",
-                  children: /* @__PURE__ */ jsx(Cross1Icon, {})
-                }
-              )
-            ] });
-          }) }),
-          /* @__PURE__ */ jsx(TextField.Slot, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
-        ]
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      Popover.Content,
-      {
-        onOpenAutoFocus: (e) => {
-          e.preventDefault();
-        },
-        children: /* @__PURE__ */ jsx(DropdownContainer, { items: options, children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", children: options.map((item) => {
-          const isSelected = Boolean(
-            selected.find((el) => el === item.id)
-          );
-          return /* @__PURE__ */ jsxs(
-            Button,
-            {
-              onClick: () => {
-                Toggle(item.id);
-              },
-              style: { width: "100%" },
-              children: [
-                item.name,
-                isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
-              ]
-            },
-            item.id
-          );
-        }) }) }) })
-      }
-    )
-  ] });
-}
-
-export {
-  TagSelector
-};
-//# sourceMappingURL=chunk-FTRDLFF3.js.map

package/dist/chunk-FTRDLFF3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/molecules/tag-selector.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronRightIcon, Cross1Icon } from '@radix-ui/react-icons';\nimport { TextField } from '../atoms/text-field';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Box } from '../atoms/box';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    DropdownContainer = DefaultDropdownContainer,\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback((id: string) => {\n    setSelected((prev) => [...prev, id]);\n  }, []);\n\n  const Toggle = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const field = fieldRef.current;\n    if (!field) return;\n\n    field.addEventListener('focus', () => {\n      // console.log('??');\n      setOpen(true);\n      // queueMicrotask(() => field.focus());\n    });\n  }, []);\n\n  // key down시 활성화 인덱스 이동\n  // focus가 되면 dropdown open\n  // enter시 토글\n  // esc시 dropdown close\n  // blur시 dropdown close\n\n  return (\n    <Popover.Root onOpenChange={setOpen} open={open}>\n      <Popover.Trigger>\n        <Box>\n          <TextField.Root\n            onBlur={() => {\n              setOpen(false);\n            }}\n            onChange={onChangeValue}\n            placeholder={selectedItem.length ? '' : placeholder}\n            ref={fieldRef}\n            value={value}\n          >\n            <TextField.Slot>\n              {selectedItem.map((item) => {\n                return tagRender ? (\n                  tagRender(item)\n                ) : (\n                  <Badge>\n                    {item.name}\n                    <Button\n                      onClick={() => {\n                        onDelete(item.id);\n                      }}\n                      variant=\"ghost\"\n                    >\n                      <Cross1Icon />\n                    </Button>\n                  </Badge>\n                );\n              })}\n            </TextField.Slot>\n            <TextField.Slot>\n              <ChevronRightIcon />\n            </TextField.Slot>\n          </TextField.Root>\n        </Box>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer items={options}>\n          <ScrollArea>\n            <Flex direction=\"column\">\n              {options.map((item) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      Toggle(item.id);\n                    }}\n                    style={{ width: '100%' }}\n                  >\n                    {item.name}\n                    {isSelected ? <CheckIcon /> : null}\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FTZXGVY4.js

@@ -1,88 +0,0 @@
-import {
-  Button
-} from "./chunk-FQHVVQRF.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-N552FDTV.js";
-
-// src/atoms/dialog.tsx
-import * as RadixDialog from "@radix-ui/react-dialog";
-import { Cross1Icon } from "@radix-ui/react-icons";
-import { Flex } from "@radix-ui/themes";
-import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Content2(props) {
-  const _a = props, {
-    children,
-    style = {},
-    width,
-    maxWidth,
-    minWidth,
-    maxHeight,
-    height,
-    minHeight
-  } = _a, rest = __objRest(_a, [
-    "children",
-    "style",
-    "width",
-    "maxWidth",
-    "minWidth",
-    "maxHeight",
-    "height",
-    "minHeight"
-  ]);
-  const containerRef = useRef(null);
-  useEffect(() => {
-    containerRef.current = document.getElementsByClassName("radix-themes")[0];
-  }, []);
-  return /* @__PURE__ */ jsx(RadixDialog.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "DialogOverlay", children: /* @__PURE__ */ jsx(
-    RadixDialog.Content,
-    __spreadProps(__spreadValues({
-      className: "DialogContent",
-      style: __spreadValues({
-        width,
-        maxWidth,
-        minWidth,
-        maxHeight,
-        height,
-        minHeight
-      }, style)
-    }, rest), {
-      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "transparent", children: /* @__PURE__ */ jsx(Cross1Icon, { height: "18px", width: "18px" }) }) }),
-        children
-      ] })
-    })
-  ) }) });
-}
-function Close2(_a) {
-  var _b = _a, {
-    children
-  } = _b, rest = __objRest(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ jsx(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
-}
-function Trigger2(_a) {
-  var _b = _a, {
-    children
-  } = _b, rest = __objRest(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ jsx(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
-}
-var Dialog = {
-  Root: RadixDialog.Root,
-  Trigger: Trigger2,
-  Content: Content2,
-  Close: Close2,
-  Description: RadixDialog.Description,
-  Title: RadixDialog.Title
-};
-
-export {
-  Dialog
-};
-//# sourceMappingURL=chunk-FTZXGVY4.js.map

package/dist/chunk-FTZXGVY4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex } from '@radix-ui/themes';\nimport { useEffect, useRef } from 'react';\nimport { Button } from './button';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  height?: string;\n  maxHeight?: string;\n  minHeight?: string;\n};\n\nfunction Content(props: ContentProps): React.ReactElement {\n  const {\n    children,\n    style = {},\n    width,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    height,\n    minHeight,\n    ...rest\n  } = props;\n  const containerRef = useRef<Element | null>(null);\n\n  useEffect(() => {\n    containerRef.current = document.getElementsByClassName('radix-themes')[0];\n  }, []);\n\n  return (\n    <RadixDialog.Portal container={containerRef.current}>\n      <RadixDialog.Overlay className=\"DialogOverlay\">\n        <RadixDialog.Content\n          className=\"DialogContent\"\n          style={{\n            width,\n            maxWidth,\n            minWidth,\n            maxHeight,\n            height,\n            minHeight,\n            ...style,\n          }}\n          {...rest}\n        >\n          <Flex direction=\"column\" style={{ position: 'relative' }}>\n            <RadixDialog.Close asChild className=\"DialogClose\">\n              <Button color=\"gray\" variant=\"transparent\">\n                <Cross1Icon height=\"18px\" width=\"18px\" />\n              </Button>\n            </RadixDialog.Close>\n            {children}\n          </Flex>\n        </RadixDialog.Content>\n      </RadixDialog.Overlay>\n    </RadixDialog.Portal>\n  );\n}\n\nfunction Close({\n  children,\n  ...rest\n}: RadixDialog.DialogCloseProps): React.ReactElement {\n  return (\n    <RadixDialog.Close asChild {...rest}>\n      {children}\n    </RadixDialog.Close>\n  );\n}\n\nfunction Trigger({\n  children,\n  ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactElement {\n  return (\n    <RadixDialog.Trigger asChild {...rest}>\n      {children}\n    </RadixDialog.Trigger>\n  );\n}\n\nexport const Dialog = {\n  Root: RadixDialog.Root,\n  Trigger,\n  Content,\n  Close,\n  Description: RadixDialog.Description,\n  Title: RadixDialog.Title,\n};\n"],"mappings":";;;;;;;;;;AAAA,YAAY,iBAAiB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,WAAW,cAAc;AA8CxB,SAGM,KAHN;AAlCV,SAASA,SAAQ,OAAyC;AACxD,QAUI,YATF;AAAA;AAAA,IACA,QAAQ,CAAC;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAxBJ,IA0BM,IADC,iBACD,IADC;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,iBAAa,UAAU,SAAS,uBAAuB,cAAc,EAAE,CAAC;AAAA,EAC1E,GAAG,CAAC,CAAC;AAEL,SACE,oBAAa,oBAAZ,EAAmB,WAAW,aAAa,SAC1C,8BAAa,qBAAZ,EAAoB,WAAU,iBAC7B;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SACG;AAAA,OAED,OAXL;AAAA,MAaC,+BAAC,QAAK,WAAU,UAAS,OAAO,EAAE,UAAU,WAAW,GACrD;AAAA,4BAAa,mBAAZ,EAAkB,SAAO,MAAC,WAAU,eACnC,8BAAC,UAAO,OAAM,QAAO,SAAQ,eAC3B,8BAAC,cAAW,QAAO,QAAO,OAAM,QAAO,GACzC,GACF;AAAA,QACC;AAAA,SACH;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,SAASC,OAAM,IAGsC;AAHtC,eACb;AAAA;AAAA,EAhEF,IA+De,IAEV,iBAFU,IAEV;AAAA,IADH;AAAA;AAGA,SACE,oBAAa,mBAAZ,+BAAkB,SAAO,QAAK,OAA9B,EACE,WACH;AAEJ;AAEA,SAASC,SAAQ,IAGsC;AAHtC,eACf;AAAA;AAAA,EA3EF,IA0EiB,IAEZ,iBAFY,IAEZ;AAAA,IADH;AAAA;AAGA,SACE,oBAAa,qBAAZ,+BAAoB,SAAO,QAAK,OAAhC,EACE,WACH;AAEJ;AAEO,IAAM,SAAS;AAAA,EACpB,MAAkB;AAAA,EAClB,SAAAA;AAAA,EACA,SAAAF;AAAA,EACA,OAAAC;AAAA,EACA,aAAyB;AAAA,EACzB,OAAmB;AACrB;","names":["Content","Close","Trigger"]}

package/dist/chunk-FU2NF5HR.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-FU2NF5HR.js.map

package/dist/chunk-FUFW4U2M.js

@@ -1,123 +0,0 @@
-import {
-  TriangleArrowUpIcon
-} from "./chunk-NDUKDKGB.js";
-import {
-  Row
-} from "./chunk-JFKC7O5G.js";
-import {
-  TriangleArrowDownIcon
-} from "./chunk-BSTJBBEX.js";
-import {
-  Flex
-} from "./chunk-25HMMI7R.js";
-import {
-  Typo
-} from "./chunk-52MVZ6AN.js";
-
-// src/molecules/expand-table/index.tsx
-import {
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  getSortedRowModel,
-  createColumnHelper
-} from "@tanstack/react-table";
-import { useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function ExpandTable(props) {
-  const { data, columns, ExpandComp, placeholder, onRowClick, tableStyle } = props;
-  const defaultAlign = "left";
-  const [sorting, setSorting] = useState([]);
-  const { getRowModel, getHeaderGroups } = useReactTable({
-    data: data || [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-      sorting
-    },
-    onSortingChange: setSorting
-  });
-  const gridColTemp = useMemo(() => {
-    return columns.map((col) => {
-      var _a;
-      if ((_a = col.meta) == null ? void 0 : _a.autoSize)
-        return "1fr";
-      return `${col.size || 150}px`;
-    }).join(" ");
-  }, [columns]);
-  const rowModels = getRowModel();
-  return /* @__PURE__ */ jsxs("div", { className: "expand-table", style: tableStyle, children: [
-    /* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "tr",
-        style: { gridTemplateColumns: gridColTemp },
-        children: headerGroup.headers.map((header) => {
-          var _a;
-          const sortable = header.column.getCanSort();
-          const sortedState = header.column.getIsSorted();
-          const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
-          return /* @__PURE__ */ jsx("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: header.column.getToggleSortingHandler(),
-              style: sortable ? { cursor: "pointer" } : void 0,
-              type: "button",
-              children: [
-                /* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                ) }),
-                sortable ? /* @__PURE__ */ jsxs(
-                  Flex,
-                  {
-                    direction: "column",
-                    style: { marginLeft: "var(--space-2)" },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        TriangleArrowUpIcon,
-                        {
-                          color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        TriangleArrowDownIcon,
-                        {
-                          color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
-                        }
-                      )
-                    ]
-                  }
-                ) : null
-              ]
-            }
-          ) }, header.id);
-        })
-      },
-      headerGroup.id
-    )) }),
-    /* @__PURE__ */ jsxs("div", { className: "tbody", children: [
-      rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
-      rowModels.rows.map((row) => {
-        return /* @__PURE__ */ jsx(
-          Row,
-          {
-            ExpandComp,
-            defaultAlign,
-            gridColTemp,
-            onRowClick,
-            row
-          },
-          `row_${row.id}`
-        );
-      })
-    ] })
-  ] });
-}
-
-export {
-  createColumnHelper,
-  ExpandTable
-};
-//# sourceMappingURL=chunk-FUFW4U2M.js.map