jongsultest 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1234 @@
+import { Accordion as Accordion$1, Radio, Button as Button$1, TextInput, PasswordInput, NumberInput, ColorInput, FileInput, Textarea, Switch, Box, SegmentedControl, Select, Autocomplete, Badge as Badge$1, ActionIcon, Text, Table as Table$1, Group, Pagination as Pagination$1, Stack, Image, FileButton, Title, LoadingOverlay, Paper, Grid, Modal as Modal$1, Divider, Checkbox } from '@mantine/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconAlertCircle, IconCheck, IconX, IconChevronLeft, IconChevronRight, IconUpload, IconArrowLeft, IconPlus } from '@tabler/icons-react';
+import { DatePickerInput, DateTimePicker as DateTimePicker$1 } from '@mantine/dates';
+import clsx from 'clsx';
+import { useState, useEffect, useMemo } from 'react';
+import { notifications } from '@mantine/notifications';
+import { useRouter } from 'next/navigation';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var COMMON_STYLES = {
+  "--button-fz": "14px",
+  "--button-radius": "6px"
+};
+var SIZE_STYLES = {
+  xs: {
+    "--button-height": "24px",
+    "--button-padding-x": "6px"
+  },
+  sm: {
+    "--button-height": "38px",
+    "--button-padding-x": "16px"
+  },
+  md: {
+    "--button-height": "40px",
+    "--button-padding-x": "24px"
+  }
+};
+var getVariantStyles = (variant, color) => {
+  if (variant === "outline" && color === "gray") {
+    return { color: "var(--color-body)", borderColor: "var(--color-gray-3)" };
+  }
+  if (variant === "default") {
+    return { backgroundColor: "var(--mantine-color-blue-6)", color: "#FFFFFF", border: "none" };
+  }
+  if (variant === "light" && !color) {
+    return { backgroundColor: "var(--color-button-light)", color: "var(--color-body)", border: "none" };
+  }
+  return {};
+};
+var Button = (_a) => {
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  var _a2;
+  const sizeVars = (_a2 = SIZE_STYLES[props.size]) != null ? _a2 : SIZE_STYLES.md;
+  const variantStyles = getVariantStyles(props.variant, props.color);
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    __spreadProps(__spreadValues({}, props), {
+      classNames: { label: "!font-bold" },
+      style: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, COMMON_STYLES), sizeVars), variantStyles), style)
+    })
+  );
+};
+
+// src/atoms/inputClassNames.ts
+var inputClassNames = {
+  input: `!rounded-[8px] !border-input
+    !text-sm !h-12
+
+    data-[error=true]:!border-error-line
+    data-[error=true]:!border-2
+    data-[error=true]:!bg-error-fill
+    data-[error=true]:!text-body
+
+    data-[disabled=true]:!text-body
+    data-[disabled=true]:!bg-disabled-input
+    data-[disabled=true]:!opacity-100
+    data-[disabled=true]:!border-default
+    `,
+  label: "!text-sm !text-[#999] !font-bold !tracking-tight !mb-2",
+  placeholder: "!text-sm !tracking-normal",
+  error: "!mt-2 !ml-2",
+  description: "!-mt-[.5px] !mb-2",
+  root: "!leading-0"
+};
+var InputText = (props) => {
+  return /* @__PURE__ */ jsx(TextInput, __spreadValues({ classNames: inputClassNames }, props));
+};
+var InputPassword = (props) => {
+  const { error } = props;
+  return /* @__PURE__ */ jsx(
+    PasswordInput,
+    __spreadValues({
+      classNames: inputClassNames,
+      error: typeof error === "string" ? /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(IconAlertCircle, { size: 16, className: "mt-[2px] shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: error })
+      ] }) : error
+    }, props)
+  );
+};
+var InputNumber = (props) => {
+  return /* @__PURE__ */ jsx(
+    NumberInput,
+    __spreadValues({
+      classNames: __spreadProps(__spreadValues({}, inputClassNames), {
+        controls: "!h-8 !border-input",
+        control: "!border-input"
+      })
+    }, props)
+  );
+};
+var InputColor = (props) => {
+  return /* @__PURE__ */ jsx(ColorInput, __spreadValues({ classNames: inputClassNames }, props));
+};
+var InputFile = ((props) => {
+  return /* @__PURE__ */ jsx(FileInput, __spreadValues({ classNames: inputClassNames }, props));
+});
+var InputDatePicker = (props) => {
+  return /* @__PURE__ */ jsx(DatePickerInput, __spreadProps(__spreadValues({ classNames: inputClassNames }, props), { valueFormat: "YYYY-MM-DD" }));
+};
+var InputTextarea = (props) => {
+  return /* @__PURE__ */ jsx(Textarea, __spreadValues({ classNames: __spreadProps(__spreadValues({}, inputClassNames), { input: `${inputClassNames.input} !py-3` }) }, props));
+};
+var RadioBase = (props) => {
+  return /* @__PURE__ */ jsx(Radio, __spreadValues({}, props));
+};
+var RadioGroup = (props) => {
+  return /* @__PURE__ */ jsx(Radio.Group, __spreadValues({ classNames: { label: inputClassNames.label } }, props));
+};
+var InputRadio = Object.assign(RadioBase, {
+  Group: RadioGroup
+});
+var InputSwitch = (_a) => {
+  var _b = _a, { checked, style, classNames } = _b, props = __objRest(_b, ["checked", "style", "classNames"]);
+  return /* @__PURE__ */ jsx(
+    Switch,
+    __spreadProps(__spreadValues({
+      checked,
+      thumbIcon: /* @__PURE__ */ jsx(IconCheck, { size: 10, color: "white", stroke: 3 })
+    }, props), {
+      style: __spreadValues(__spreadValues({}, typeof style === "object" && style || {}), !checked && { "--switch-thumb-start": "6px" }),
+      classNames: __spreadValues({
+        thumb: "!w-[10px] !h-[10px] text-white",
+        label: "!text-gray-6 !font-medium"
+      }, classNames)
+    })
+  );
+};
+var InputSwitchInTable = ({
+  status,
+  onStatusChange,
+  id,
+  activeValue = "ACTIVE",
+  inactiveValue = "HIDDEN",
+  activeLabel = "\uD65C\uC131",
+  inactiveLabel = "\uC228\uAE40"
+}) => {
+  const isActive = status === activeValue;
+  return /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+    InputSwitch,
+    {
+      checked: isActive,
+      onChange: () => onStatusChange(id, isActive ? inactiveValue : activeValue),
+      size: "sm",
+      classNames: { label: "!font-semibold" }
+    }
+  ) });
+};
+var InputSegmentedControl = (props) => {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    __spreadValues({
+      classNames: {
+        root: "p-2! rounded-md!",
+        // 루트
+        control: "",
+        // 버튼
+        label: "h-10 px-4 text-sm",
+        // 텍스트 패딩/타이포
+        innerLabel: "leading-9 color-white"
+        // 선택 인디케이터 높이도 같이
+      }
+    }, props)
+  );
+};
+var ComboboxSelect = (props) => {
+  return /* @__PURE__ */ jsx(Select, __spreadValues({ classNames: inputClassNames }, props));
+};
+var ComboboxAutocomplete = (props) => {
+  return /* @__PURE__ */ jsx(Autocomplete, __spreadValues({ classNames: inputClassNames }, props));
+};
+var DateTimePicker = (props) => {
+  return /* @__PURE__ */ jsx(DateTimePicker$1, __spreadValues({ classNames: inputClassNames }, props));
+};
+var REMOVE_ABLE_BADGE_STYLES = {
+  light: "gray",
+  blue: "gray"
+  //  blue 임시 작업 blue 인 경우 생기면 컬러 변경 하셔도 됩니다.
+};
+var Badge = (_a) => {
+  var _b = _a, {
+    className,
+    classNames,
+    isRemoveAble = false,
+    onRemove
+  } = _b, props = __objRest(_b, [
+    "className",
+    "classNames",
+    "isRemoveAble",
+    "onRemove"
+  ]);
+  var _a2;
+  return /* @__PURE__ */ jsx(
+    Badge$1,
+    __spreadProps(__spreadValues({}, props), {
+      className,
+      classNames: __spreadProps(__spreadValues({}, classNames), {
+        label: clsx("!text-xs !font-semibold", classNames == null ? void 0 : classNames.label)
+      }),
+      rightSection: props.rightSection || (isRemoveAble ? /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          size: "xs",
+          variant: "transparent",
+          color: REMOVE_ABLE_BADGE_STYLES[(_a2 = props.variant) != null ? _a2 : "blue"],
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsx(IconX, { size: 12 })
+        }
+      ) : void 0),
+      styles: {
+        root: {
+          "--mantine-color-gray-light-color": "var(--color-body)",
+          "--mantine-color-green-light-color": "#166534"
+        }
+      }
+    })
+  );
+};
+var IconButton = (_a) => {
+  var _b = _a, { icon: Icon, iconSize, iconColor, disabled, children } = _b, props = __objRest(_b, ["icon", "iconSize", "iconColor", "disabled", "children"]);
+  return /* @__PURE__ */ jsx(ActionIcon, __spreadProps(__spreadValues({ variant: "subtle", color: "gray", disabled }, props), { children: Icon ? /* @__PURE__ */ jsx(Icon, { size: iconSize, color: iconColor, disabled }) : children }));
+};
+var colorPreset = {
+  red: "#FF4242",
+  white: "#FFFFFF",
+  gray: "#666666",
+  disabled: "#DDDDDD"
+};
+var resolveColor = (color) => {
+  var _a;
+  return (_a = colorPreset[color]) != null ? _a : color;
+};
+var PlusIcon = ({ size = 20, color = "gray", disabled }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "10", fill: disabled ? resolveColor("disabled") : resolveColor(color) }),
+  /* @__PURE__ */ jsx("path", { d: "M10 5.5V14.5M14.5 10L5.5 10", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round" })
+] });
+var TrashIcon = ({ size = 20, color = "gray" }) => {
+  const c = resolveColor(color);
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M14 4.5V2C14 1.72386 13.7761 1.5 13.5 1.5H6.5C6.22386 1.5 6 1.72386 6 2V4.5",
+        stroke: c,
+        strokeWidth: "1.2"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M2 4H18", stroke: c, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 7.00028V17C4 17.5523 4.44772 18 5 18H15C15.5523 18 16 17.5523 16 17V7",
+        stroke: c,
+        strokeWidth: "1.2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M8 7V13", stroke: c, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7V13", stroke: c, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+};
+var GripVerticalIcon = ({ size = 20, color = "gray" }) => {
+  const c = resolveColor(color);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      className: "cursor-grab",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "6.5", y: "3.5", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsx("rect", { x: "6.5", y: "9.39844", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsx("rect", { x: "6.5", y: "15.3008", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsx("rect", { x: "12.3008", y: "3.5", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsx("rect", { x: "12.3008", y: "9.39844", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsx("rect", { x: "12.3008", y: "15.3008", width: "1.2", height: "1.2", rx: "0.6", stroke: c })
+      ]
+    }
+  );
+};
+var ChevronDownIcon = ({ size = 20, color = "#191919" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M16 7L10.0007 13L4 7",
+    stroke: resolveColor(color),
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+function Table({
+  columns,
+  data,
+  rowKey,
+  emptyMessage = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+  highlightOnHover = false,
+  onRowClick
+}) {
+  const getRowKey = (row, index) => {
+    if (!rowKey) return String(index);
+    if (typeof rowKey === "function") return rowKey(row, index);
+    return String(row[rowKey]);
+  };
+  const getCellValue = (row, column, index) => {
+    if (column.render) {
+      return column.render(row, index);
+    }
+    if (column.accessor) {
+      return row[column.accessor];
+    }
+    return null;
+  };
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { py: "xl", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: emptyMessage }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Table$1,
+    {
+      highlightOnHover,
+      verticalSpacing: "md",
+      classNames: {
+        table: "!border-default !overflow-hidden !border-separate",
+        thead: "!bg-gray-0",
+        th: "!text-center !border-b !border-default",
+        td: "!text-center !border-b !border-default"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Table$1.Thead, { children: /* @__PURE__ */ jsx(Table$1.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx(
+          Table$1.Th,
+          {
+            style: {
+              textAlign: column.align || "left",
+              width: column.width
+            },
+            children: column.header
+          },
+          column.id
+        )) }) }),
+        /* @__PURE__ */ jsx(Table$1.Tbody, { children: data.map((row, index) => /* @__PURE__ */ jsx(
+          Table$1.Tr,
+          {
+            onClick: () => onRowClick == null ? void 0 : onRowClick(row, index),
+            style: { cursor: onRowClick ? "pointer" : void 0 },
+            children: columns.map((column) => /* @__PURE__ */ jsx(
+              Table$1.Td,
+              {
+                style: {
+                  textAlign: column.align || "left",
+                  width: column.width
+                },
+                children: getCellValue(row, column, index)
+              },
+              column.id
+            ))
+          },
+          getRowKey(row, index)
+        )) })
+      ]
+    }
+  );
+}
+function Pagination({
+  total,
+  page,
+  onChange,
+  siblings = 1,
+  boundaries = 1,
+  size = "sm",
+  withEdges = true,
+  position = "center"
+}) {
+  if (total <= 0) return null;
+  return /* @__PURE__ */ jsx(Group, { justify: position, mt: "xl", children: /* @__PURE__ */ jsx(
+    Pagination$1,
+    {
+      total,
+      value: page,
+      onChange,
+      siblings,
+      boundaries,
+      size,
+      withEdges
+    }
+  ) });
+}
+function Accordion({
+  items,
+  defaultOpen = [],
+  multiple = true,
+  variant = "separated",
+  onChange
+}) {
+  if (multiple) {
+    return /* @__PURE__ */ jsx(
+      Accordion$1,
+      {
+        variant,
+        multiple: true,
+        defaultValue: defaultOpen,
+        chevron: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+        styles: accordionStyles,
+        onChange,
+        classNames: { label: "!py-4" },
+        children: items.map((item) => /* @__PURE__ */ jsx(AccordionItem, { item }, item.id))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Accordion$1,
+    {
+      variant,
+      defaultValue: defaultOpen[0],
+      chevron: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+      styles: accordionStyles,
+      onChange,
+      children: items.map((item) => /* @__PURE__ */ jsx(AccordionItem, { item }, item.id))
+    }
+  );
+}
+function AccordionItem({ item }) {
+  return /* @__PURE__ */ jsxs(Accordion$1.Item, { value: item.id, children: [
+    /* @__PURE__ */ jsx(Accordion$1.Control, { disabled: item.disabled, icon: item.icon, children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsx(Text, { fw: 500, children: item.title }),
+      item.rightSection && /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: item.rightSection })
+    ] }) }),
+    /* @__PURE__ */ jsx(Accordion$1.Panel, { children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      item.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: item.description }),
+      item.content
+    ] }) })
+  ] });
+}
+var accordionStyles = {
+  control: { padding: "17px 24px" },
+  item: { "--item-filled-color": "#F3F9FF" }
+};
+Accordion.Root = ((props) => /* @__PURE__ */ jsx(Accordion$1, __spreadValues({ chevron: /* @__PURE__ */ jsx(ChevronDownIcon, {}), styles: accordionStyles }, props)));
+Accordion.Item = Accordion$1.Item;
+Accordion.Control = Accordion$1.Control;
+Accordion.Panel = Accordion$1.Panel;
+function NavigationBanner({
+  items,
+  currentIndex: controlledIndex,
+  onIndexChange,
+  imageSize = 275,
+  emptyText = "\uC774\uBBF8\uC9C0\uB97C \uCD94\uAC00\uD558\uC138\uC694",
+  showNavigation = true,
+  className
+}) {
+  const [internalIndex, setInternalIndex] = useState(0);
+  const currentIndex = controlledIndex != null ? controlledIndex : internalIndex;
+  const setCurrentIndex = onIndexChange != null ? onIndexChange : setInternalIndex;
+  useEffect(() => {
+    if (currentIndex >= items.length && items.length > 0) {
+      setCurrentIndex(items.length - 1);
+    }
+  }, [items.length, currentIndex, setCurrentIndex]);
+  const isItems = items.length > 0;
+  const currentItem = items[currentIndex];
+  const isMultiple = items.length > 1;
+  const handlePrev = () => {
+    const newIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+    setCurrentIndex(newIndex);
+  };
+  const handleNext = () => {
+    const newIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+    setCurrentIndex(newIndex);
+  };
+  return /* @__PURE__ */ jsxs(Box, { className, children: [
+    /* @__PURE__ */ jsx(Box, { className: "overflow-hidden rounded-sm bg-gray-100", style: { width: imageSize, height: imageSize }, children: isItems && currentItem ? /* @__PURE__ */ jsx("img", { src: currentItem.image, alt: currentItem.title, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(Box, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: emptyText }) }) }),
+    showNavigation && /* @__PURE__ */ jsxs(Group, { justify: "center", gap: "md", mt: "sm", style: { width: imageSize }, children: [
+      /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", onClick: handlePrev, disabled: !isMultiple, children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 18 }) }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, className: "flex-1 text-center tracking-wider uppercase", lineClamp: 1, children: (currentItem == null ? void 0 : currentItem.title) || "\uC81C\uBAA9 \uC5C6\uC74C" }),
+      /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", onClick: handleNext, disabled: !isMultiple, children: /* @__PURE__ */ jsx(IconChevronRight, { size: 18 }) })
+    ] })
+  ] });
+}
+
+// src/utils/file.ts
+function readFileAsDataURL(file) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(file);
+  });
+}
+function DeleteIndicator({ onClick }) {
+  return /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      size: 18,
+      radius: "xl",
+      color: "red",
+      variant: "filled",
+      style: { position: "absolute", top: -6, right: -6, zIndex: 10 },
+      className: "shadow-sm",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: /* @__PURE__ */ jsx(IconX, { size: 10, stroke: 3 })
+    }
+  );
+}
+function validateImageDimensions(file, maxW, maxH) {
+  if (!maxW && !maxH) return Promise.resolve(true);
+  return new Promise((resolve) => {
+    const img = new window.Image();
+    img.onload = () => {
+      URL.revokeObjectURL(img.src);
+      const isWidthOk = !maxW || img.naturalWidth <= maxW;
+      const isHeightOk = !maxH || img.naturalHeight <= maxH;
+      resolve(isWidthOk && isHeightOk);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(img.src);
+      resolve(false);
+    };
+    img.src = URL.createObjectURL(file);
+  });
+}
+function ImageUpload({
+  value,
+  onChange,
+  maxCount,
+  variant = "gallery",
+  previewWidth = 80,
+  previewHeight,
+  previewFit = "cover",
+  label,
+  buttonText = "\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC",
+  placeholder = "No Image",
+  description,
+  accept = "image/png,image/jpeg,image/gif",
+  showCount = false,
+  maxWidth,
+  maxHeight
+}) {
+  const effectiveHeight = previewHeight != null ? previewHeight : previewWidth;
+  const [dimensionError, setDimensionError] = useState(null);
+  const buildDimensionErrorMessage = () => {
+    if (maxWidth && maxHeight) return `\uC774\uBBF8\uC9C0 \uD06C\uAE30\uB294 \uCD5C\uB300 ${maxWidth}x${maxHeight}px \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4.`;
+    if (maxWidth) return `\uC774\uBBF8\uC9C0 \uAC00\uB85C \uD06C\uAE30\uB294 \uCD5C\uB300 ${maxWidth}px \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4.`;
+    return `\uC774\uBBF8\uC9C0 \uC138\uB85C \uD06C\uAE30\uB294 \uCD5C\uB300 ${maxHeight}px \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4.`;
+  };
+  const MAX_FILE_SIZE = 20 * 1024 * 1024;
+  const handleFileSelect = async (file) => {
+    if (!file) return;
+    if (file.size > MAX_FILE_SIZE) {
+      notifications.show({ title: "\uC5C5\uB85C\uB4DC \uC2E4\uD328", message: "\uD30C\uC77C \uD06C\uAE30\uB294 20MB \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4.", color: "red" });
+      return;
+    }
+    setDimensionError(null);
+    const isValid = await validateImageDimensions(file, maxWidth, maxHeight);
+    if (!isValid) {
+      const msg = buildDimensionErrorMessage();
+      setDimensionError(msg);
+      notifications.show({ title: "\uC5C5\uB85C\uB4DC \uC2E4\uD328", message: msg, color: "red" });
+      return;
+    }
+    const src = await readFileAsDataURL(file);
+    if (maxCount === 1) {
+      onChange([src]);
+    } else {
+      onChange([...value, src]);
+    }
+  };
+  const handleMultipleFileSelect = async (files) => {
+    if (!files || files.length === 0) return;
+    setDimensionError(null);
+    const sizeOverCount = files.filter((f) => f.size > MAX_FILE_SIZE).length;
+    const sizeValidFiles = files.filter((f) => f.size <= MAX_FILE_SIZE);
+    if (sizeOverCount > 0) {
+      notifications.show({
+        title: "\uC5C5\uB85C\uB4DC \uC2E4\uD328",
+        message: `${sizeOverCount}\uAC1C\uC758 \uD30C\uC77C\uC774 20MB\uB97C \uCD08\uACFC\uD558\uC5EC \uC81C\uC678\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`,
+        color: "red"
+      });
+    }
+    if (sizeValidFiles.length === 0) return;
+    const validFiles = [];
+    for (const file of sizeValidFiles) {
+      const isValid = await validateImageDimensions(file, maxWidth, maxHeight);
+      if (isValid) {
+        validFiles.push(file);
+      }
+    }
+    if (validFiles.length < sizeValidFiles.length) {
+      const msg = buildDimensionErrorMessage();
+      setDimensionError(msg);
+      notifications.show({
+        title: "\uC5C5\uB85C\uB4DC \uC2E4\uD328",
+        message: `${sizeValidFiles.length - validFiles.length}\uAC1C\uC758 \uC774\uBBF8\uC9C0\uAC00 \uD06C\uAE30 \uC81C\uD55C\uC744 \uCD08\uACFC\uD558\uC5EC \uC81C\uC678\uB418\uC5C8\uC2B5\uB2C8\uB2E4. ${msg}`,
+        color: "red"
+      });
+    }
+    if (validFiles.length === 0) return;
+    const results = await Promise.all(validFiles.map(readFileAsDataURL));
+    onChange([...value, ...results]);
+  };
+  const handleRemove = (index) => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+  const isAdd = maxCount === void 0 || value.length < maxCount;
+  if (variant === "gallery") {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Box, { style: { display: "flex", flexWrap: "wrap", gap: 12, paddingTop: 6, paddingRight: 6 }, children: [
+        value.map((src, index) => /* @__PURE__ */ jsxs(Box, { style: { position: "relative", width: previewWidth, height: effectiveHeight }, children: [
+          /* @__PURE__ */ jsx(Image, { src, alt: "", w: previewWidth, h: effectiveHeight, fit: previewFit, radius: "sm" }),
+          /* @__PURE__ */ jsx(DeleteIndicator, { onClick: () => handleRemove(index) })
+        ] }, index)),
+        isAdd && /* @__PURE__ */ jsx(FileButton, { onChange: handleFileSelect, accept, children: (props) => /* @__PURE__ */ jsx(
+          Box,
+          __spreadProps(__spreadValues({}, props), {
+            className: "flex cursor-pointer items-center justify-center rounded border-2 border-dashed border-gray-300 hover:border-blue-400",
+            style: { width: previewWidth, height: effectiveHeight },
+            children: /* @__PURE__ */ jsx(IconPlus, { size: 24, className: "text-gray-400" })
+          })
+        ) })
+      ] }),
+      showCount && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: [
+        "\uB4F1\uB85D\uB41C \uC0AC\uC9C4: ",
+        value.length,
+        "\uC7A5"
+      ] }),
+      description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: "xs", children: description }),
+      dimensionError && /* @__PURE__ */ jsx(Text, { size: "xs", c: "red", mt: "xs", children: dimensionError })
+    ] });
+  }
+  if (variant === "area") {
+    return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx(FileButton, { onChange: handleFileSelect, accept, children: (props) => /* @__PURE__ */ jsxs(
+        Box,
+        __spreadProps(__spreadValues({
+          style: { position: "relative", width: previewWidth, height: effectiveHeight }
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "flex h-full w-full cursor-pointer items-center justify-center overflow-hidden rounded-md border border-gray-200 bg-gray-50 transition-colors hover:border-blue-400 hover:bg-gray-100",
+                children: value[0] ? /* @__PURE__ */ jsx(Image, { src: value[0], alt: "", fit: previewFit, className: "p-4" }) : /* @__PURE__ */ jsxs(Box, { className: "flex flex-col items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(IconUpload, { size: 20, className: "text-gray-400" }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", className: "font-medium", children: placeholder })
+                ] })
+              }
+            ),
+            value[0] && /* @__PURE__ */ jsx(DeleteIndicator, { onClick: () => onChange([]) })
+          ]
+        })
+      ) }),
+      description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: "xs", children: description }),
+      dimensionError && /* @__PURE__ */ jsx(Text, { size: "xs", c: "red", mt: "xs", children: dimensionError })
+    ] });
+  }
+  const isMultiple = maxCount === void 0 || maxCount > 1;
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    isMultiple ? /* @__PURE__ */ jsx(
+      InputFile,
+      {
+        label,
+        placeholder: "\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD558\uC138\uC694",
+        accept,
+        leftSection: /* @__PURE__ */ jsx(IconUpload, { size: 16 }),
+        onChange: handleMultipleFileSelect,
+        multiple: true,
+        value: []
+      }
+    ) : /* @__PURE__ */ jsx(
+      InputFile,
+      {
+        label,
+        placeholder: "\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD558\uC138\uC694",
+        accept,
+        leftSection: /* @__PURE__ */ jsx(IconUpload, { size: 16 }),
+        onChange: handleFileSelect
+      }
+    ),
+    value.length > 0 && /* @__PURE__ */ jsx(Box, { style: { display: "flex", flexWrap: "wrap", gap: 12, paddingTop: 6, paddingRight: 6, marginTop: 8 }, children: value.map((src, index) => /* @__PURE__ */ jsxs(Box, { style: { position: "relative", width: previewWidth, height: effectiveHeight }, children: [
+      /* @__PURE__ */ jsx(Image, { src, alt: "", w: previewWidth, h: effectiveHeight, fit: previewFit, radius: "sm" }),
+      /* @__PURE__ */ jsx(DeleteIndicator, { onClick: () => handleRemove(index) })
+    ] }, index)) }),
+    showCount && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: [
+      value.length,
+      "\uAC1C\uC758 \uC774\uBBF8\uC9C0\uAC00 \uB4F1\uB85D\uB418\uC5C8\uC2B5\uB2C8\uB2E4."
+    ] }),
+    description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: "xs", children: description }),
+    dimensionError && /* @__PURE__ */ jsx(Text, { size: "xs", c: "red", mt: "xs", children: dimensionError })
+  ] });
+}
+function PageTitle(_a) {
+  var _b = _a, {
+    title,
+    subText,
+    rightContent,
+    leftContent
+  } = _b, props = __objRest(_b, [
+    "title",
+    "subText",
+    "rightContent",
+    "leftContent"
+  ]);
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "end", mb: "xl", children: [
+    leftContent,
+    /* @__PURE__ */ jsxs(Title, __spreadProps(__spreadValues({ order: 2, c: "var(--color-brand-dark)" }, props), { children: [
+      title,
+      subText && /* @__PURE__ */ jsx(Text, { size: "md", c: "var(--color-subtitle)", mt: "5", children: subText })
+    ] })),
+    rightContent
+  ] });
+}
+function PageLoading({ bg = "transparent" }) {
+  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: "var(--sidebar-width)", right: 0, bottom: 0, style: { zIndex: 400 }, children: /* @__PURE__ */ jsx(
+    LoadingOverlay,
+    {
+      visible: true,
+      overlayProps: {
+        backgroundOpacity: bg === "transparent" ? 0 : 1,
+        color: bg
+      }
+    }
+  ) });
+}
+var Panel = (_a) => {
+  var _b = _a, {
+    title,
+    totalCount,
+    description,
+    children,
+    headerRightContent,
+    contentBottomPadding = 40,
+    footer
+  } = _b, props = __objRest(_b, [
+    "title",
+    "totalCount",
+    "description",
+    "children",
+    "headerRightContent",
+    "contentBottomPadding",
+    "footer"
+  ]);
+  return /* @__PURE__ */ jsxs(Paper, __spreadProps(__spreadValues({ bg: "white", radius: "lg", shadow: "xs", className: "border-default border-1" }, props), { children: [
+    title && /* @__PURE__ */ jsxs("div", { className: "px-[30px]", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", gap: "xs", py: "24", children: [
+        /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "10", children: [
+          /* @__PURE__ */ jsx(Title, { c: "blue", order: 2, fz: 20, fw: 700, lh: "2", children: title }),
+          totalCount && /* @__PURE__ */ jsx(Text, { c: "blue", size: "20", lh: "1", children: totalCount })
+        ] }),
+        headerRightContent
+      ] }),
+      description && /* @__PURE__ */ jsx(Text, { c: "#666", fz: 14, fw: 400, lh: "160%", mb: "24", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-[30px]", style: { paddingBottom: `${contentBottomPadding}px` }, children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "border-gray-2 border-t px-[30px] py-5", children: footer })
+  ] }));
+};
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 last:mb-0", children: [
+    title && /* @__PURE__ */ jsx(Text, { c: "blue", fz: 20, fw: 700, lh: "2", py: "24", children: title }),
+    children
+  ] });
+}
+Panel.Section = Section;
+function BoxContainer({ children }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "main",
+      style: {
+        flexGrow: 1,
+        padding: 24
+      },
+      children
+    }
+  );
+}
+function EditorLayout({
+  leftPanel,
+  centerPanel,
+  rightPanel,
+  leftSpan = 2,
+  centerSpan = 5,
+  rightSpan = 5
+}) {
+  return /* @__PURE__ */ jsxs(Grid, { gutter: "md", children: [
+    /* @__PURE__ */ jsx(Grid.Col, { span: leftSpan, children: leftPanel }),
+    /* @__PURE__ */ jsx(Grid.Col, { span: centerSpan, children: centerPanel }),
+    /* @__PURE__ */ jsx(Grid.Col, { span: rightSpan, children: rightPanel })
+  ] });
+}
+function Modal(_a) {
+  var _b = _a, {
+    opened,
+    onClose,
+    title,
+    size,
+    styles,
+    children
+  } = _b, props = __objRest(_b, [
+    "opened",
+    "onClose",
+    "title",
+    "size",
+    "styles",
+    "children"
+  ]);
+  var _a2, _b2, _c, _d;
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    __spreadProps(__spreadValues({
+      opened,
+      onClose,
+      title,
+      size,
+      styles
+    }, props), {
+      classNames: __spreadProps(__spreadValues({}, props.classNames), {
+        header: "!-mt-8 !p-6",
+        title: `text-center !font-bold ${(_b2 = (_a2 = props.classNames) == null ? void 0 : _a2.title) != null ? _b2 : ""}`,
+        body: `!p-6 ${(_d = (_c = props.classNames) == null ? void 0 : _c.body) != null ? _d : ""}`
+      }),
+      children
+    })
+  );
+}
+function ModalDeleteConfirm({ opened, onClose, onConfirm, message }) {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      opened,
+      onClose,
+      size: "md",
+      centered: true,
+      withCloseButton: false,
+      classNames: { body: "text-center" },
+      children: /* @__PURE__ */ jsxs(Box, { className: "flex flex-col items-center gap-5", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-red-50", children: /* @__PURE__ */ jsx("i", { className: "text-error text-2xl", "data-fa-i2svg": "", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            "aria-hidden": "true",
+            focusable: "false",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 448 512",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"
+              }
+            )
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("h3", { className: "text-xl leading-tight font-bold text-gray-900", children: "\uC815\uB9D0 \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
+        message && /* @__PURE__ */ jsx("p", { className: "-mt-2 text-sm leading-relaxed text-gray-600", children: message }),
+        /* @__PURE__ */ jsxs(Group, { justify: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", color: "gray", size: "md", onClick: onClose, children: "\uCDE8\uC18C" }),
+          /* @__PURE__ */ jsx(Button, { variant: "filled", color: "red", size: "md", onClick: onConfirm, children: "\uC0AD\uC81C" })
+        ] })
+      ] })
+    }
+  );
+}
+function ModalTokenExpired() {
+  const [isOpened, setIsOpened] = useState(false);
+  useEffect(() => {
+    const handleTokenExpired = () => {
+      setIsOpened(true);
+      setTimeout(() => {
+        localStorage.removeItem("accessToken");
+        localStorage.removeItem("tokenExpiresAt");
+        localStorage.removeItem("featureVersion");
+        localStorage.removeItem("units");
+        window.location.href = "/login";
+      }, 3e3);
+    };
+    window.addEventListener("token-expired", handleTokenExpired);
+    return () => window.removeEventListener("token-expired", handleTokenExpired);
+  }, []);
+  return /* @__PURE__ */ jsx(Modal, { opened: isOpened, onClose: () => {
+  }, withCloseButton: false, centered: true, size: "sm", zIndex: 1e3, children: /* @__PURE__ */ jsxs(Box, { className: "flex flex-col items-center gap-5", children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-red-50", children: /* @__PURE__ */ jsx("i", { className: "text-error text-2xl", "data-fa-i2svg": "", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "32",
+        height: "32",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        className: "icon icon-tabler icons-tabler-filled icon-tabler-exclamation-circle",
+        children: [
+          /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+          /* @__PURE__ */ jsx("path", { d: "M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-5 11.66a1 1 0 0 0 -1 1v.01a1 1 0 0 0 2 0v-.01a1 1 0 0 0 -1 -1m0 -7a1 1 0 0 0 -1 1v4a1 1 0 0 0 2 0v-4a1 1 0 0 0 -1 -1" })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Text, { ta: "center", fw: 600, size: "lg", mb: "xs", children: [
+      "\uD1A0\uD070\uC774 \uB9CC\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4 ",
+      /* @__PURE__ */ jsx("br", {}),
+      "\uC7A0\uC2DC \uD6C4 \uB85C\uADF8\uC778 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9\uD569\uB2C8\uB2E4."
+    ] })
+  ] }) });
+}
+function DataTable({
+  columns,
+  data,
+  getRowId,
+  onRowClick,
+  rowsPerPageOptions = [5, 10, 25, 50],
+  defaultRowsPerPage = 10,
+  style,
+  containerStyle,
+  rowStyle,
+  emptyMessage = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+}) {
+  const [page, setPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const paginatedData = useMemo(() => {
+    const startIndex = (page - 1) * rowsPerPage;
+    const endIndex = startIndex + rowsPerPage;
+    return data.slice(startIndex, endIndex);
+  }, [data, page, rowsPerPage]);
+  const totalPages = Math.ceil(data.length / rowsPerPage);
+  const handleRowClick = (row) => {
+    if (onRowClick) {
+      onRowClick(row);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Paper, { shadow: "xs", p: "md", mt: "md", style: containerStyle, children: [
+    /* @__PURE__ */ jsxs(Table$1, { style, highlightOnHover: !!onRowClick, children: [
+      /* @__PURE__ */ jsx(Table$1.Thead, { children: /* @__PURE__ */ jsx(Table$1.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx(
+        Table$1.Th,
+        {
+          style: __spreadValues({
+            minWidth: column.minWidth,
+            fontWeight: "bold",
+            textAlign: column.align || "left"
+          }, column.headerStyle),
+          children: column.label
+        },
+        column.id
+      )) }) }),
+      /* @__PURE__ */ jsx(Table$1.Tbody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx(Table$1.Tr, { children: /* @__PURE__ */ jsx(Table$1.Td, { colSpan: columns.length, style: { textAlign: "center", padding: "32px" }, children: emptyMessage }) }) : paginatedData.map((row, index) => /* @__PURE__ */ jsx(
+        Table$1.Tr,
+        {
+          onClick: () => handleRowClick(row),
+          style: __spreadValues({
+            cursor: onRowClick ? "pointer" : "default"
+          }, rowStyle),
+          children: columns.map((column) => {
+            const value = row[column.id];
+            return /* @__PURE__ */ jsxs(
+              Table$1.Td,
+              {
+                suppressHydrationWarning: true,
+                style: __spreadValues({
+                  textAlign: column.align || "left"
+                }, column.style),
+                children: [
+                  column.id === "no" ? mounted ? (page - 1) * rowsPerPage + index + 1 : null : null,
+                  column.id !== "no" && (column.format ? column.format(value, row) : value)
+                ]
+              },
+              column.id
+            );
+          })
+        },
+        getRowId(row)
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { mt: "md", className: "flex justify-end", children: /* @__PURE__ */ jsx(Pagination$1, { value: page, onChange: setPage, total: totalPages }) })
+  ] });
+}
+function PageHeader({ headerText, back }) {
+  const router = useRouter();
+  const handleBack = () => {
+    router.back();
+  };
+  return /* @__PURE__ */ jsxs(Box, { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    back && /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "lg", onClick: handleBack, children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 20 }) }),
+    /* @__PURE__ */ jsx(Title, { order: 2, children: headerText })
+  ] });
+}
+var SectionGroupWithTitle = ({ title, children }) => {
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Text, { fw: 600, mb: "sm", children: title }),
+    /* @__PURE__ */ jsx(Divider, { mb: "xs" }),
+    children
+  ] });
+};
+var SectionGroupWithTitle_default = SectionGroupWithTitle;
+function TagInput({
+  label,
+  placeholder,
+  items,
+  onAdd,
+  onRemove,
+  badgeVariant = "filled",
+  badgeColor = "blue"
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const handleAdd = () => {
+    if (!inputValue.trim()) return;
+    const values = inputValue.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+    onAdd(values);
+    setInputValue("");
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      InputText,
+      {
+        size: "xs",
+        label,
+        placeholder,
+        value: inputValue,
+        onChange: (e) => setInputValue(e.currentTarget.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            handleAdd();
+          }
+        },
+        rightSection: /* @__PURE__ */ jsx(Button, { size: "xs", variant: "light", onClick: handleAdd, children: /* @__PURE__ */ jsx(IconPlus, { size: 10 }) }),
+        rightSectionWidth: 27,
+        mb: "xs"
+      }
+    ),
+    items.length > 0 && /* @__PURE__ */ jsx(Group, { gap: 4, children: items.map((item) => /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "sm",
+        variant: badgeVariant,
+        color: badgeColor,
+        h: "24",
+        rightSection: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            size: 14,
+            variant: "transparent",
+            c: badgeVariant === "light" ? "gray" : "white",
+            onClick: () => onRemove(item.id),
+            children: /* @__PURE__ */ jsx(IconX, { size: 10 })
+          }
+        ),
+        children: item.label
+      },
+      item.id
+    )) })
+  ] });
+}
+function StrictModeDroppable(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const [isEnabled, setIsEnabled] = useState(false);
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setIsEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setIsEnabled(false);
+    };
+  }, []);
+  if (!isEnabled) return null;
+  return /* @__PURE__ */ jsx(Droppable, __spreadProps(__spreadValues({}, props), { children }));
+}
+function AccordionDraggable({
+  items,
+  droppableId = "draggable-accordion",
+  activeId = null,
+  onActiveChange,
+  onReorder,
+  onDelete,
+  onRequiredChange,
+  onUsedChange,
+  emptyMessage = "\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
+  showDeleteButton = true,
+  showRequiredToggle = false,
+  showUsedToggle = false,
+  draggingBgColor = "var(--color-dragging)"
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { style: { padding: 40, textAlign: "center" }, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: emptyMessage }) });
+  }
+  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd: onReorder, children: /* @__PURE__ */ jsx(StrictModeDroppable, { droppableId, children: (provided) => /* @__PURE__ */ jsx(Box, __spreadProps(__spreadValues({ ref: provided.innerRef }, provided.droppableProps), { children: /* @__PURE__ */ jsxs(
+    Accordion.Root,
+    {
+      variant: "separated",
+      value: activeId,
+      onChange: onActiveChange,
+      classNames: { label: "!py-0", content: "!p-6 !pb-10" },
+      children: [
+        items.map((item, index) => /* @__PURE__ */ jsx(Draggable, { draggableId: item.id, index, children: (provided2) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsx(
+            Box,
+            __spreadProps(__spreadValues({
+              ref: provided2.innerRef
+            }, provided2.draggableProps), {
+              style: __spreadProps(__spreadValues({}, provided2.draggableProps.style), {
+                marginBottom: 8
+              }),
+              children: /* @__PURE__ */ jsxs(
+                Accordion.Item,
+                {
+                  value: item.id,
+                  "data-active": activeId === item.id || void 0,
+                  style: { backgroundColor: draggingBgColor },
+                  className: "group data-[active]:!bg-[var(--color-active,transparent)]",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Accordion.Control,
+                      {
+                        icon: item.icon,
+                        className: "group-data-[active]:!border-b group-data-[active]:!border-gray-200",
+                        children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { width: "100%" }, children: [
+                          /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, provided2.dragHandleProps), { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(GripVerticalIcon, {}) })),
+                          /* @__PURE__ */ jsx(Text, { fw: 500, className: "flex-1 !text-[15px]", children: item.title }),
+                          item.rightSection && /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              onClick: (e) => e.stopPropagation(),
+                              style: {
+                                marginRight: 16,
+                                padding: "4px 8px",
+                                borderRadius: 4,
+                                backgroundColor: "var(--color-right-section)"
+                              },
+                              children: item.rightSection
+                            }
+                          ),
+                          (showRequiredToggle || showUsedToggle) && !item.rightSection && /* @__PURE__ */ jsxs(
+                            Group,
+                            {
+                              gap: "sm",
+                              wrap: "nowrap",
+                              className: "mr-6 h-5 border-r border-[#E1E4E8] pr-6",
+                              onClick: (e) => e.stopPropagation(),
+                              children: [
+                                showUsedToggle && onUsedChange && /* @__PURE__ */ jsx(
+                                  Checkbox,
+                                  {
+                                    checked: (_a = item.isUsed) != null ? _a : false,
+                                    onChange: (e) => onUsedChange(item.id, e.currentTarget.checked),
+                                    label: "\uC0AC\uC6A9"
+                                  }
+                                ),
+                                showRequiredToggle && onRequiredChange && /* @__PURE__ */ jsx(
+                                  Checkbox,
+                                  {
+                                    checked: (_b = item.isRequired) != null ? _b : false,
+                                    onChange: (e) => onRequiredChange(item.id, e.currentTarget.checked),
+                                    label: "\uD544\uC218"
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          showDeleteButton && onDelete && !item.rightSection && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "mr-6 h-5 border-r border-[#E1E4E8] pr-6",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onDelete(item.id);
+                              },
+                              children: /* @__PURE__ */ jsx(TrashIcon, { color: "red" })
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsx(Stack, { gap: "24", children: item.content }) })
+                  ]
+                }
+              )
+            })
+          );
+        } }, item.id)),
+        provided.placeholder
+      ]
+    }
+  ) })) }) });
+}
+
+export { Accordion, AccordionDraggable, Badge, BoxContainer, Button, ChevronDownIcon, ComboboxAutocomplete, ComboboxSelect, DataTable, DateTimePicker, EditorLayout, GripVerticalIcon, IconButton, ImageUpload, InputColor, InputDatePicker, InputFile, InputNumber, InputPassword, InputRadio, InputSegmentedControl, InputSwitch, InputSwitchInTable, InputText, InputTextarea, Modal, ModalDeleteConfirm, ModalTokenExpired, NavigationBanner, PageHeader, PageLoading, PageTitle, Pagination, Panel, PlusIcon, SectionGroupWithTitle_default as SectionGroupWithTitle, Table, TagInput, TrashIcon, inputClassNames, readFileAsDataURL };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map