@crossangle-org/cs-ui 0.2.5 → 0.2.7

package/dist/components/dropdown-menu/cs-dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-dropdown-menu.js","sources":["../../../src/components/dropdown-menu/cs-dropdown-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * CsDropdownMenu 아이템 공통 스타일 (Design Token Reference)\n *\n * ## State 매핑\n * | UI 상태 | Token state |\n * |---------|-------------|\n * | 기본 | default |\n * | hover: | hover |\n * | 선택됨 (data-[state=checked]) | active |\n * | disabled: | disabled |\n *\n * ## CSS Variables\n * ```css\n * --dropdown-container-radius | padding-x | padding-y | gap | bg | border | border-width\n * --dropdown-item-common-radius | padding-x | padding-y | height | bg | border | border-width\n * --dropdown-item-simple-{state}-font | bg\n * --dropdown-item-icon-gap | icon-size | default-icon | disabled-icon\n * --dropdown-item-header-font\n * ```\n */\nconst csDropdownMenuItemCommonClassName = [\n  \"flex cursor-default items-center gap-(--dropdown-item-icon-gap) outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"rounded-(--dropdown-item-common-radius) px-(--dropdown-item-common-padding-x) py-(--dropdown-item-common-padding-y) h-(--dropdown-item-common-height) bg-(--dropdown-item-common-bg)\",\n  \"typo-body-sm text-(--dropdown-item-simple-default-font) hover:text-(--dropdown-item-simple-hover-font) hover:bg-(--dropdown-item-simple-hover-bg) data-[state=checked]:text-(--dropdown-item-simple-active-font) data-[disabled]:text-(--dropdown-item-simple-disabled-font)\",\n  \"[&_svg:not([class*='size-'])]:size-(--dropdown-item-icon-icon-size) [&_svg]:text-(--dropdown-item-icon-default-icon) data-[state=checked]:[&_svg]:text-(--dropdown-item-simple-active-icon) data-[disabled]:[&_svg]:text-(--dropdown-item-icon-disabled-icon)\",      \n].join(\" \")\n\n/**\n * CS Design System 드롭다운 메뉴 컴포넌트\n *\n * 버튼이나 아이콘 클릭 시 나타나는 액션 메뉴 컴포넌트.\n * 사용자 프로필 메뉴, 컨텍스트 메뉴, 더보기 옵션 등에 사용되며, 여러 서브 컴포넌트를 조합하여 구성합니다.\n *\n * ## 사용 시나리오\n * - 사용자 메뉴: 프로필, 설정, 로그아웃 등 계정 관련 액션\n * - 더보기 메뉴: 테이블 행의 ... 버튼 (수정, 삭제, 공유 등)\n * - 컨텍스트 메뉴: 우클릭 시 나타나는 액션 목록\n * - 필터/정렬 메뉴: 체크박스/라디오 선택 포함\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsSelect**: 값 선택 (폼 입력) - 선택한 값이 저장됨\n * - **CsPopover**: 정보 표시/간단한 폼 (클릭 후 입력)\n * - DropdownMenu는 액션 실행, Select는 값 선택\n *\n * @example 기본 조합\n * ```tsx\n * <CsDropdownMenu>\n *   <CsDropdownMenuTrigger asChild>\n *     <CsButton>메뉴 열기</CsButton>\n *   </CsDropdownMenuTrigger>\n *   <CsDropdownMenuContent>\n *     <CsDropdownMenuItem>항목 1</CsDropdownMenuItem>\n *     <CsDropdownMenuItem>항목 2</CsDropdownMenuItem>\n *   </CsDropdownMenuContent>\n * </CsDropdownMenu>\n * ```\n *\n * @example 그룹 + 라벨 + 구분선\n * ```tsx\n * <CsDropdownMenuContent>\n *   <CsDropdownMenuGroup>\n *     <CsDropdownMenuLabel>설정</CsDropdownMenuLabel>\n *     <CsDropdownMenuItem>프로필</CsDropdownMenuItem>\n *   </CsDropdownMenuGroup>\n *   <CsDropdownMenuSeparator />\n *   <CsDropdownMenuItem>로그아웃</CsDropdownMenuItem>\n * </CsDropdownMenuContent>\n * ```\n *\n * @example 체크박스/라디오 아이템\n * ```tsx\n * <CsDropdownMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>\n *   알림 켜기\n * </CsDropdownMenuCheckboxItem>\n *\n * <CsDropdownMenuRadioGroup value={value} onValueChange={setValue}>\n *   <CsDropdownMenuRadioItem value=\"light\">라이트</CsDropdownMenuRadioItem>\n *   <CsDropdownMenuRadioItem value=\"dark\">다크</CsDropdownMenuRadioItem>\n * </CsDropdownMenuRadioGroup>\n * ```\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu | Radix DropdownMenu}\n */\nfunction CsDropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\n/** 드롭다운 포탈 - body에 렌더링 */\nfunction CsDropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\n/** 드롭다운 트리거 - asChild로 커스텀 버튼 사용 권장 */\nfunction CsDropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\n/** 드롭다운 컨텐츠 컨테이너 - Portal 자동 포함 */\nfunction CsDropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          \"rounded-(--dropdown-container-radius) gap-(--dropdown-container-gap) px-(--dropdown-container-padding-x) py-(--dropdown-container-padding-y) bg-(--dropdown-container-bg) border-(--dropdown-container-border) border-(length:--dropdown-container-border-width) boxshadow-sm\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\n/** 아이템 그룹 컨테이너 */\nfunction CsDropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\n/**\n * 개별 메뉴 아이템\n *\n * 아이콘 크기 자동 조절: `[&_svg]:size-(--dropdown-item-icon-icon-size)`\n *\n * @param inset - 왼쪽 여백 추가 (체크박스/라디오 아이템과 정렬 시)\n * @param variant - `\"default\"` | `\"destructive\"`\n */\nfunction CsDropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"relative data-disabled:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 체크박스 아이템 - 체크 시 CheckIcon 표시 */\nfunction CsDropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"data-disabled:pointer-events-none\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      {checked \n        ? (<DropdownMenuPrimitive.ItemIndicator>\n            <CheckIcon />\n          </DropdownMenuPrimitive.ItemIndicator>)\n        : (<div className=\"size-(--dropdown-item-icon-icon-size)\" />)\n      }\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\n/** 라디오 그룹 - 단일 선택 아이템 그룹 */\nfunction CsDropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\n/** 라디오 아이템 - 선택 시 CircleIcon 표시 */\nfunction CsDropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"group data-disabled:pointer-events-none\",\n        className\n      )}\n      {...props}\n    >\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CircleIcon className=\"fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n      <div className=\"size-(--dropdown-item-icon-icon-size) group-data-[state=checked]:hidden\" />\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\n/** 그룹 라벨 - 선택 불가 텍스트 */\nfunction CsDropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"typo-productive-label-md text-(--dropdown-item-header-font)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 아이템 그룹 구분선 */\nfunction CsDropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-(--dropdown-item-common-border) w-full h-(--dropdown-item-common-border-width)\", className)}\n      {...props}\n    />\n  )\n}\n\n/** 단축키 표시 (아이템 우측 정렬) */\nfunction CsDropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-(--dropdown-item-icon-default-icon) ml-auto typo-body-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 서브메뉴 Root */\nfunction CsDropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\n/** 서브메뉴 트리거 - 기본 ChevronRightIcon, icon prop으로 변경 가능 */\nfunction CsDropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  icon,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n  icon?: React.ReactNode\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default select-none items-center rounded-(--dropdown-item-common-radius) py-(--dropdown-item-common-padding-y) pl-8 pr-2 outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 focus:bg-(--dropdown-item-simple-hover-bg) focus:text-(--dropdown-item-simple-hover-font)\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {icon ?? <ChevronRightIcon />}\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\n/** 서브메뉴 컨텐츠 컨테이너 */\nfunction CsDropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 overflow-hidden text-popover-foreground boxshadow-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) rounded-(--dropdown-container-radius) border-(--dropdown-container-border) p-(--dropdown-container-padding-x) shadow-lg bg-(--dropdown-container-bg)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  CsDropdownMenu,\n  CsDropdownMenuPortal,\n  CsDropdownMenuTrigger,\n  CsDropdownMenuContent,\n  CsDropdownMenuGroup,\n  CsDropdownMenuLabel,\n  CsDropdownMenuItem,\n  CsDropdownMenuCheckboxItem,\n  CsDropdownMenuRadioGroup,\n  CsDropdownMenuRadioItem,\n  CsDropdownMenuSeparator,\n  CsDropdownMenuShortcut,\n  CsDropdownMenuSub,\n  CsDropdownMenuSubTrigger,\n  CsDropdownMenuSubContent,\n  csDropdownMenuItemCommonClassName\n}\n"],"names":[],"mappings":"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"}

package/dist/components/dropzone/cs-dropzone.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UploadIcon } from "lucide-react";
+import { createContext, useContext } from "react";
+import { useDropzone } from "react-dropzone";
+import { cn } from "../../lib/utils.js";
+import { CsButton } from "../button/cs-button.js";
+const renderBytes = (bytes) => {
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+  let size = bytes;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(2)}${units[unitIndex]}`;
+};
+const CsDropzoneContext = createContext(
+  void 0
+);
+const CsDropzone = ({
+  accept,
+  maxFiles = 1,
+  maxSize,
+  minSize,
+  onDrop,
+  onError,
+  disabled,
+  src,
+  className,
+  children,
+  ...props
+}) => {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept,
+    maxFiles,
+    maxSize,
+    minSize,
+    onError,
+    disabled,
+    onDrop: (acceptedFiles, fileRejections, event) => {
+      if (fileRejections.length > 0) {
+        const message = fileRejections.at(0)?.errors.at(0)?.message;
+        onError?.(new Error(message));
+        return;
+      }
+      onDrop?.(acceptedFiles, fileRejections, event);
+    },
+    ...props
+  });
+  return /* @__PURE__ */ jsx(
+    CsDropzoneContext.Provider,
+    {
+      value: { src, accept, maxSize, minSize, maxFiles },
+      children: /* @__PURE__ */ jsxs(
+        CsButton,
+        {
+          className: cn(
+            "relative h-auto w-full flex-col overflow-hidden border-dashed",
+            "rounded-(--dropzone-common-radius) px-(--dropzone-common-padding-x) py-(--dropzone-common-padding-y) gap-(--dropzone-common-gap)",
+            "bg-(--dropzone-common-bg) hover:bg-(--dropzone-common-bg) border-(--dropzone-common-border) border-(length:--dropzone-common-border-width)",
+            isDragActive && "outline-none border-solid",
+            className
+          ),
+          disabled,
+          type: "button",
+          variant: "outline",
+          ...getRootProps(),
+          children: [
+            /* @__PURE__ */ jsx("input", { ...getInputProps(), disabled }),
+            children
+          ]
+        }
+      )
+    },
+    JSON.stringify(src)
+  );
+};
+const useDropzoneContext = () => {
+  const context = useContext(CsDropzoneContext);
+  if (!context) {
+    throw new Error("useDropzoneContext must be used within a Dropzone");
+  }
+  return context;
+};
+const maxLabelItems = 3;
+const CsDropzoneContent = ({
+  children,
+  className
+}) => {
+  const { src } = useDropzoneContext();
+  if (!src) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-(--dropzone-container-content-gap)", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center bg-(--dropzone-container-icon-bg) text-(--dropzone-container-icon-color) rounded-(--dropzone-container-icon-radius)", children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 }) }),
+    /* @__PURE__ */ jsx("p", { className: "w-full truncate typo-body-sm text-(--dropzone-container-content-title)", children: src.length > maxLabelItems ? `${new Intl.ListFormat("en").format(
+      src.slice(0, maxLabelItems).map((file) => file.name)
+    )} and ${src.length - maxLabelItems} more` : new Intl.ListFormat("en").format(src.map((file) => file.name)) }),
+    /* @__PURE__ */ jsx("p", { className: "w-full text-wrap typo-body-xs text-(--dropzone-container-content-description)", children: "Drag and drop or click to replace" })
+  ] });
+};
+const CsDropzoneEmptyState = ({
+  children,
+  className
+}) => {
+  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();
+  if (src) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  let caption = "";
+  if (accept) {
+    caption += "Accepts ";
+    caption += new Intl.ListFormat("en").format(Object.keys(accept));
+  }
+  if (minSize && maxSize) {
+    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
+  } else if (minSize) {
+    caption += ` at least ${renderBytes(minSize)}`;
+  } else if (maxSize) {
+    caption += ` less than ${renderBytes(maxSize)}`;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-(--dropzone-container-content-gap)", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center bg-(--dropzone-container-icon-bg) text-(--dropzone-container-icon-color) rounded-(--dropzone-container-icon-radius)", children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 }) }),
+    /* @__PURE__ */ jsxs("p", { className: "w-full truncate text-wrap typo-body-sm text-(--dropzone-container-content-title)", children: [
+      "Upload ",
+      maxFiles === 1 ? "a file" : "files"
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "w-full truncate text-wrap typo-body-xs text-(--dropzone-container-content-description)", children: "Drag and drop or click to upload" }),
+    caption && /* @__PURE__ */ jsxs("p", { className: "text-wrap typo-body-xs text-(--dropzone-container-content-description)", children: [
+      caption,
+      "."
+    ] })
+  ] });
+};
+export {
+  CsDropzone,
+  CsDropzoneContent,
+  CsDropzoneEmptyState
+};
+//# sourceMappingURL=cs-dropzone.js.map

package/dist/components/dropzone/cs-dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-dropzone.js","sources":["../../../src/components/dropzone/cs-dropzone.tsx"],"sourcesContent":["'use client';\n\nimport { UploadIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\nimport type { DropEvent, DropzoneOptions, FileRejection } from 'react-dropzone';\nimport { useDropzone } from 'react-dropzone';\nimport { cn } from '../../lib/utils';\nimport { CsButton } from '../button';\n\n/**\n * CsDropzone 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | 적용 |\n * |----------------|------|\n * | `dropzone/common/*` | 컨테이너 스타일 (radius, padding, bg, border) |\n * | `dropzone/container/content-*` | 내부 콘텐츠 스타일 |\n * | `dropzone/container/icon-*` | 아이콘 영역 스타일 |\n *\n * ## State 매핑\n * | UI 상태 | 조건 | 스타일 변화 |\n * |---------|------|------------|\n * | 기본 | - | dashed border |\n * | 드래그 중 | isDragActive | solid border |\n * | 비활성 | disabled | opacity 감소 |\n *\n * ## CSS Variables\n * ```css\n * --dropzone-common-radius | padding-x | padding-y | gap | bg | border | border-width\n * --dropzone-container-content-gap | icon-bg | icon-color | icon-radius\n * --dropzone-container-content-title | description\n * ```\n *\n * ## 서브 컴포넌트 구조\n * ```\n * CsDropzone (Root, react-dropzone 연동)\n * ├── CsDropzoneEmptyState (src 없을 때)\n * └── CsDropzoneContent (src 있을 때)\n * ```\n *\n * ## Props 옵션\n * | prop | 설명 |\n * |------|------|\n * | accept | 허용 MIME 타입 (e.g., `{ \"image/*\": [\".png\", \".jpg\"] }`) |\n * | maxSize | 최대 파일 크기 (bytes) |\n * | minSize | 최소 파일 크기 (bytes) |\n * | maxFiles | 최대 파일 개수 |\n * | src | 현재 업로드된 파일 목록 |\n *\n * @see {@link https://react-dropzone.js.org/ | react-dropzone}\n */\n\n/**\n * CS Design System 드롭존 컴포넌트\n *\n * 사용자가 파일을 드래그 앤 드롭하거나 클릭하여 업로드할 수 있는 영역.\n * 프로필 이미지, 문서 첨부, 파일 업로드 등에 사용됩니다.\n * react-dropzone 기반으로 파일 유효성 검사(타입, 크기)를 지원합니다.\n *\n * ## 사용 시나리오\n * - 프로필 이미지 업로드: 이미지 파일만 허용, 크기 제한\n * - 문서 첨부: PDF, DOC 등 특정 형식만 허용\n * - 다중 파일 업로드: 갤러리, 첨부파일 여러 개\n * - 드래그 앤 드롭: 대용량 파일 편리한 업로드\n * - 파일 미리보기: 업로드 전 파일 목록 표시\n *\n * @example 기본\n * ```tsx\n * <CsDropzone onDrop={handleFiles} src={files}>\n *   <CsDropzoneEmptyState />\n *   <CsDropzoneContent />\n * </CsDropzone>\n * ```\n *\n * @example 이미지만 허용 (5MB 제한)\n * ```tsx\n * <CsDropzone\n *   accept={{ \"image/*\": [\".png\", \".jpg\", \".jpeg\"] }}\n *   maxSize={5 * 1024 * 1024}\n *   onDrop={handleFiles}\n *   src={files}\n * >\n *   <CsDropzoneEmptyState />\n *   <CsDropzoneContent />\n * </CsDropzone>\n * ```\n *\n * @example 다중 파일\n * ```tsx\n * <CsDropzone maxFiles={5} onDrop={handleFiles} src={files}>\n *   <CsDropzoneEmptyState />\n *   <CsDropzoneContent />\n * </CsDropzone>\n * ```\n */\ntype CsDropzoneContextType = {\n  src?: File[];\n  accept?: DropzoneOptions['accept'];\n  maxSize?: DropzoneOptions['maxSize'];\n  minSize?: DropzoneOptions['minSize'];\n  maxFiles?: DropzoneOptions['maxFiles'];\n};\n\nconst renderBytes = (bytes: number) => {\n  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n  let size = bytes;\n  let unitIndex = 0;\n\n  while (size >= 1024 && unitIndex < units.length - 1) {\n    size /= 1024;\n    unitIndex++;\n  }\n\n  return `${size.toFixed(2)}${units[unitIndex]}`;\n};\n\nconst CsDropzoneContext = createContext<CsDropzoneContextType | undefined>(\n  undefined\n);\n\nexport type CsDropzoneProps = Omit<DropzoneOptions, 'onDrop'> & {\n  src?: File[];\n  className?: string;\n  onDrop?: (\n    acceptedFiles: File[],\n    fileRejections: FileRejection[],\n    event: DropEvent\n  ) => void;\n  children?: ReactNode;\n};\n\nexport const CsDropzone = ({\n  accept,\n  maxFiles = 1,\n  maxSize,\n  minSize,\n  onDrop,\n  onError,\n  disabled,\n  src,\n  className,\n  children,\n  ...props\n}: CsDropzoneProps) => {\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({\n    accept,\n    maxFiles,\n    maxSize,\n    minSize,\n    onError,\n    disabled,\n    onDrop: (acceptedFiles, fileRejections, event) => {\n      if (fileRejections.length > 0) {\n        const message = fileRejections.at(0)?.errors.at(0)?.message;\n        onError?.(new Error(message));\n        return;\n      }\n\n      onDrop?.(acceptedFiles, fileRejections, event);\n    },\n    ...props,\n  });\n\n  return (\n    <CsDropzoneContext.Provider\n      key={JSON.stringify(src)}\n      value={{ src, accept, maxSize, minSize, maxFiles }}\n    >\n      <CsButton\n        className={cn(\n          'relative h-auto w-full flex-col overflow-hidden border-dashed',\n          'rounded-(--dropzone-common-radius) px-(--dropzone-common-padding-x) py-(--dropzone-common-padding-y) gap-(--dropzone-common-gap)',\n          'bg-(--dropzone-common-bg) hover:bg-(--dropzone-common-bg) border-(--dropzone-common-border) border-(length:--dropzone-common-border-width)',\n          isDragActive && 'outline-none border-solid',\n          className\n        )}\n        disabled={disabled}\n        type=\"button\"\n        variant=\"outline\"\n        {...getRootProps()}\n      >\n        <input {...getInputProps()} disabled={disabled} />\n        {children}\n      </CsButton>\n    </CsDropzoneContext.Provider>\n  );\n};\n\nconst useDropzoneContext = () => {\n  const context = useContext(CsDropzoneContext);\n\n  if (!context) {\n    throw new Error('useDropzoneContext must be used within a Dropzone');\n  }\n\n  return context;\n};\n\n/**\n * CsDropzoneContent Props\n */\nexport type CsDropzoneContentProps = {\n  /** 커스텀 콘텐츠 (없으면 기본 파일 목록 표시) */\n  children?: ReactNode;\n  className?: string;\n};\n\nconst maxLabelItems = 3;\n\n/**\n * 드롭존 콘텐츠 영역 (파일 있을 때)\n *\n * src에 파일이 있을 때만 렌더링.\n * children 없으면 기본 파일 목록 UI 표시.\n *\n * @example 기본 (자동 파일 목록)\n * ```tsx\n * <CsDropzoneContent />\n * ```\n *\n * @example 커스텀 콘텐츠\n * ```tsx\n * <CsDropzoneContent>\n *   <MyCustomFileList files={files} />\n * </CsDropzoneContent>\n * ```\n */\nexport const CsDropzoneContent = ({\n  children,\n  className,\n}: CsDropzoneContentProps) => {\n  const { src } = useDropzoneContext();\n\n  if (!src) {\n    return null;\n  }\n\n  if (children) {\n    return children;\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center justify-center gap-(--dropzone-container-content-gap)', className)}>\n      <div className=\"flex size-8 items-center justify-center bg-(--dropzone-container-icon-bg) text-(--dropzone-container-icon-color) rounded-(--dropzone-container-icon-radius)\">\n        <UploadIcon size={16} />\n      </div>\n      <p className=\"w-full truncate typo-body-sm text-(--dropzone-container-content-title)\">\n        {src.length > maxLabelItems\n          ? `${new Intl.ListFormat('en').format(\n              src.slice(0, maxLabelItems).map((file) => file.name)\n            )} and ${src.length - maxLabelItems} more`\n          : new Intl.ListFormat('en').format(src.map((file) => file.name))}\n      </p>\n      <p className=\"w-full text-wrap typo-body-xs text-(--dropzone-container-content-description)\">\n        Drag and drop or click to replace\n      </p>\n    </div>\n  );\n};\n\n/**\n * CsDropzoneEmptyState Props\n */\nexport type CsDropzoneEmptyStateProps = {\n  /** 커스텀 콘텐츠 (없으면 기본 안내 UI 표시) */\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * 드롭존 빈 상태 영역 (파일 없을 때)\n *\n * src에 파일이 없을 때만 렌더링.\n * children 없으면 accept, maxSize 등 제약조건 기반 안내 UI 자동 생성.\n *\n * @example 기본 (자동 안내 메시지)\n * ```tsx\n * <CsDropzoneEmptyState />\n * ```\n *\n * @example 커스텀 콘텐츠\n * ```tsx\n * <CsDropzoneEmptyState>\n *   <p>이미지를 여기에 드래그하세요</p>\n * </CsDropzoneEmptyState>\n * ```\n */\nexport const CsDropzoneEmptyState = ({\n  children,\n  className,\n}: CsDropzoneEmptyStateProps) => {\n  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();\n\n  if (src) {\n    return null;\n  }\n\n  if (children) {\n    return children;\n  }\n\n  let caption = '';\n\n  if (accept) {\n    caption += 'Accepts ';\n    caption += new Intl.ListFormat('en').format(Object.keys(accept));\n  }\n\n  if (minSize && maxSize) {\n    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;\n  } else if (minSize) {\n    caption += ` at least ${renderBytes(minSize)}`;\n  } else if (maxSize) {\n    caption += ` less than ${renderBytes(maxSize)}`;\n  }\n\n  return (\n    <div className={cn('flex flex-col items-center justify-center gap-(--dropzone-container-content-gap)', className)}>\n      <div className=\"flex size-8 items-center justify-center bg-(--dropzone-container-icon-bg) text-(--dropzone-container-icon-color) rounded-(--dropzone-container-icon-radius)\">\n        <UploadIcon size={16} />\n      </div>\n      <p className=\"w-full truncate text-wrap typo-body-sm text-(--dropzone-container-content-title)\">\n        Upload {maxFiles === 1 ? 'a file' : 'files'}\n      </p>\n      <p className=\"w-full truncate text-wrap typo-body-xs text-(--dropzone-container-content-description)\">\n        Drag and drop or click to upload\n      </p>\n      {caption && (\n        <p className=\"text-wrap typo-body-xs text-(--dropzone-container-content-description)\">{caption}.</p>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAyGE,MAAA,cAAe,CAAA,UAAW;AAC1B,QAAI,QAAO,CAAA,KAAA,MAAA,MAAA,MAAA,MAAA,IAAA;AACX,MAAI,OAAA;AAEJ,MAAA,YAAe;AACb,iBAAQ,QAAA,YAAA,MAAA,SAAA,GAAA;AACR;AACF;AAAA,EAEA;AACF,SAAA,GAAA,KAAA,QAAA,CAAA,CAAA,GAAA,MAAA,SAAA,CAAA;AAEA;AAA0B,MACxB,oBAAA;AAAA,EACF;AAaO;AAAoB,MACzB,aAAA,CAAA;AAAA,EACA;AAAA,EACA,WAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACF,GAAA;AACE,MAAA;AAAkE,QAChE,EAAA,cAAA,eAAA,aAAA,IAAA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACE,QAAI,CAAA,eAAe,gBAAY,UAAA;AAC7B,yBAAgB,SAAA,GAAA;AAChB,uCAA4B,GAAA,CAAA,GAAA,OAAA,GAAA,CAAA,GAAA;AAC5B,kBAAA,IAAA,MAAA,OAAA,CAAA;AACF;AAAA,MAEA;AACF,eAAA,eAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IACD,GAAA;AAAA,EAED;AACE,SAAmB;AAAA,IAAlB,kBAAA;AAAA,IAAA;AAAA,MAIC,OAAA,wBAAA,SAAA,SAAA;AAAA,MAAA,UAAC;AAAA,QAAA;AAAA,QAAA;AAAA,UACY,WACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAA;AAAA,YACF;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAA;AAAA,UACC;UAED,gBAAA;AAAA,UAAA,UAAA;AAAA,YACC,oBAAA,SAAA,EAAA,GAAA,cAAA,GAAA,SAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAlBK;AAAA,IAmBP,KAAA,UAAA,GAAA;AAAA,EAEJ;AAEA;AACE,2BAAgB;AAEhB,QAAK,UAAS,WAAA,iBAAA;AACZ,MAAA,CAAA,SAAU;AACZ,UAAA,IAAA,MAAA,mDAAA;AAAA,EAEA;AACF,SAAA;AAWA;AAoBO,MAAM,gBAAA;AAAqB,MAChC,oBAAA,CAAA;AAAA,EACA;AAAA,EACF;AACE;AAEA,QAAK,EAAA,IAAK,IAAA,mBAAA;AACR,YAAO;AACT,WAAA;AAAA,EAEA;AACE,gBAAO;AACT,WAAA;AAAA,EAEA;AAEI,SAAC,4BAAI,EAAA,WAAU,GAAA,oFAAA,SAAA,GAAA,UAAA;AAAA,IAGf,oBAAC,OAAE,EAAA,WAAU,+JAEsB,UAAA,oBAAA,YAAA,EAAA,MAAA,GAAA,CAAA,EAAA,CAAA;AAAA,IACd,oBAAA,KAAA,EAAA,WAAoB,0EAAkB,UAAA,IAAA,SAAA,gBAAA,GAAA,IAAA,KAAA,WAAA,IAAA,EAAA;AAAA,MACpD,IAAA,MAAQ,GAAI,aAAS,EAAA,IAAA,CAAa,SAAA,KAC/B,IAAA;AAAA,IACV,CAAA,QAAA,IAAA,SACC,aAAE,UAAU,IAAA,KAAA,WAAA,IAAA,EAAA,OAAA,IAAA,IAAA,CAAA,SAAA,KAAA,IAAA,CAAA,EAAA,CAAA;AAAA,IAGf,oBAAA,KAAA,EAAA,WAAA,iFAAA,UAAA,oCAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AA6BO;AAA8B,MACnC,uBAAA,CAAA;AAAA,EACA;AAAA,EACF;AACE,MAAA;AAEA,UAAI,KAAK,QAAA,SAAA,SAAA,SAAA,IAAA,mBAAA;AACP,WAAO;AACT,WAAA;AAAA,EAEA;AACE,gBAAO;AACT,WAAA;AAAA,EAEA;AAEA,MAAI,UAAQ;AACV,MAAA;AACA,eAAW;AACb,eAAA,IAAA,KAAA,WAAA,IAAA,EAAA,OAAA,OAAA,KAAA,MAAA,CAAA;AAAA,EAEA;AACE;eACS,YAAS,YAAA,OAAA,CAAA,QAAA,YAAA,OAAA,CAAA;AAAA,EAClB,WAAA,SAAW;eACF,aAAS,YAAA,OAAA,CAAA;AAAA,EAClB,WAAA,SAAW;AACb,eAAA,cAAA,YAAA,OAAA,CAAA;AAAA,EAEA;AAEI,SAAC,4BAAI,EAAA,WAAU,GAAA,oFAAA,SAAA,GAAA,UAAA;AAAA,IAGf,oBAAA,OAAC,aAAY,+JAAmF,UAAA,oBAAA,YAAA,EAAA,MAAA,GAAA,CAAA,EAAA,CAAA;AAAA,IAAA,qBAAA,KAAA,EAAA,WAAA,oFAAA,UAAA;AAAA,MACtF;AAAA,mBACV,IAAA,WAAA;AAAA,IAAA,EAAA,CAAA;AAAA,IAIC,oBAAA,KAAA,EACC,WAAC,0FAAsF,UAAA,mCAAA,CAAA;AAAA,IAAA,WAAA,qBAAA,KAAA,EAAA,WAAA,0EAAA,UAAA;AAAA,MAAQ;AAAA,MAAA;AAAA,MAEnG,CAAA;AAAA,EAEJ,EAAA,CAAA;;"}

package/dist/components/empty/cs-empty.js

@@ -0,0 +1,107 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+function CsEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
+        "gap-(--empty-common-gap) px-(--empty-common-padding-x) py-(--empty-common-padding-y) rounded-(--empty-common-radius)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsEmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center text-center",
+        "gap-(--empty-container-content-gap)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const csEmptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-6 bg-(--empty-container-content-icon-bg) text-(--empty-container-content-icon) rounded-(--empty-common-radius)"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function CsEmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(csEmptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function CsEmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-(--empty-container-content-title) typo-heading-sm", className),
+      ...props
+    }
+  );
+}
+function CsEmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 text-(--empty-container-content-description) typo-body-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsEmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-content",
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
+        "gap-(--empty-container-footer-gap)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  CsEmpty,
+  CsEmptyContent,
+  CsEmptyDescription,
+  CsEmptyHeader,
+  CsEmptyMedia,
+  CsEmptyTitle,
+  csEmptyMediaVariants
+};
+//# sourceMappingURL=cs-empty.js.map

package/dist/components/empty/cs-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-empty.js","sources":["../../../src/components/empty/cs-empty.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * CsEmpty 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | 컴포넌트 |\n * |----------------|---------|\n * | `empty/common/*` | `CsEmpty` (컨테이너) |\n * | `empty/container/content-*` | `CsEmptyHeader`, `CsEmptyMedia`, `CsEmptyTitle`, `CsEmptyDescription` |\n * | `empty/container/footer-*` | `CsEmptyContent` |\n *\n * ## CSS Variables\n * ```css\n * --empty-common-gap | padding-x | padding-y | radius\n * --empty-container-content-gap | content-icon-bg | content-icon | content-title | content-description\n * --empty-container-footer-gap\n * ```\n *\n * ## 서브 컴포넌트 구조\n * ```\n * CsEmpty (Root)\n * ├── CsEmptyHeader\n * │   ├── CsEmptyMedia (아이콘/이미지)\n * │   ├── CsEmptyTitle\n * │   └── CsEmptyDescription\n * └── CsEmptyContent (액션 버튼 등)\n * ```\n */\n\n/**\n * CS Design System 빈 상태 컴포넌트\n *\n * 데이터가 없는 상태를 표시하는 컴포넌트.\n * 아이콘/이미지, 제목, 설명, 액션 버튼을 조합하여 사용자에게 빈 상태를 안내합니다.\n * 서브 컴포넌트(CsEmptyHeader, CsEmptyMedia, CsEmptyTitle 등)를 조합하여 구성합니다.\n *\n * ## 사용 시나리오\n * - 검색 결과 없음: \"검색 결과가 없습니다\" + 검색어 수정 안내\n * - 빈 리스트: \"아직 항목이 없습니다\" + \"항목 추가\" 버튼\n * - 빈 폴더/디렉토리: \"폴더가 비어 있습니다\" + 업로드 안내\n * - 필터 결과 없음: \"필터 조건에 맞는 항목이 없습니다\" + 필터 초기화\n * - 빈 대시보드: \"데이터가 아직 없습니다\" + 시작 가이드\n * - 아이콘 표시: `CsEmptyMedia variant=\"icon\"` - 둥근 배경 + 아이콘\n * - 이미지 표시: `CsEmptyMedia` - 일러스트, 이미지 포함\n *\n * @example 기본 조합\n * ```tsx\n * <CsEmpty>\n *   <CsEmptyHeader>\n *     <CsEmptyMedia variant=\"icon\"><Inbox /></CsEmptyMedia>\n *     <CsEmptyTitle>데이터가 없습니다</CsEmptyTitle>\n *     <CsEmptyDescription>아직 등록된 항목이 없습니다.</CsEmptyDescription>\n *   </CsEmptyHeader>\n *   <CsEmptyContent>\n *     <CsButton>항목 추가</CsButton>\n *   </CsEmptyContent>\n * </CsEmpty>\n * ```\n *\n * @example 이미지 포함\n * ```tsx\n * <CsEmpty>\n *   <CsEmptyHeader>\n *     <CsEmptyMedia><img src=\"/empty.svg\" alt=\"\" /></CsEmptyMedia>\n *     <CsEmptyTitle>검색 결과 없음</CsEmptyTitle>\n *   </CsEmptyHeader>\n * </CsEmpty>\n * ```\n */\n/** 빈 상태 루트 컴포넌트 */\nfunction CsEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col items-center justify-center text-center text-balance\",\n        \"gap-(--empty-common-gap) px-(--empty-common-padding-x) py-(--empty-common-padding-y) rounded-(--empty-common-radius)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 빈 상태 헤더 - 아이콘, 제목, 설명 영역 */\nfunction CsEmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\n        \"flex max-w-sm flex-col items-center text-center\",\n        \"gap-(--empty-container-content-gap)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * CsEmptyMedia Props\n */\ntype CsEmptyMediaProps = React.ComponentProps<\"div\"> & VariantProps<typeof csEmptyMediaVariants> & {\n  /**\n   * 미디어 표시 스타일\n   * - `default`: 기본 (이미지/커스텀)\n   * - `icon`: 아이콘 배경 스타일\n   * @default 'default'\n   */\n  variant?: 'default' | 'icon'\n}\n\nconst csEmptyMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-6 bg-(--empty-container-content-icon-bg) text-(--empty-container-content-icon) rounded-(--empty-common-radius)\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/** 빈 상태 미디어 - 아이콘 또는 이미지 표시 */\nfunction CsEmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: CsEmptyMediaProps) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(csEmptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\n/** 빈 상태 제목 */\nfunction CsEmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-(--empty-container-content-title) typo-heading-sm\", className)}\n      {...props}\n    />\n  )\n}\n\n/** 빈 상태 설명 */\nfunction CsEmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 text-(--empty-container-content-description) typo-body-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 빈 상태 액션 영역 */\nfunction CsEmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n        \"gap-(--empty-container-footer-gap)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  CsEmpty,\n  CsEmptyHeader,\n  CsEmptyTitle,\n  CsEmptyDescription,\n  CsEmptyContent,\n  CsEmptyMedia,\n  csEmptyMediaVariants,\n  type CsEmptyMediaProps,\n}\n"],"names":[],"mappings":";;;AAyEA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;AACrE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAeA,MAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAGA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,qBAAqB,EAAE,SAAS,UAAA,CAAW,CAAC;AAAA,MACzD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,0DAA0D,SAAS;AAAA,MAChF,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAoC;AAC9E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;AAC5E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/field/cs-field.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { CsSeparator } from "../separator/cs-separator.js";
+import { CsLabel } from "../label/cs-label.js";
+function CsFieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-(--spacing-component-gap-lg)",
+        "has-[>[data-slot=checkbox-group]]:gap-(--spacing-component-gap-md) has-[>[data-slot=radio-group]]:gap-(--spacing-component-gap-md)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsFieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsFieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-(--spacing-component-gap-lg) data-[slot=checkbox-group]:gap-(--spacing-component-gap-md) *:data-[slot=field-group]:gap-(--spacing-component-gap-md)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const csFieldVariants = cva(
+  "group/field flex w-full gap-(--input-common-group-gap) data-[invalid=true]:text-(--color-state-error-default)",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function CsField({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(csFieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function CsFieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-(--input-common-group-gap) leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsFieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CsLabel,
+    {
+      "data-slot": "field-label",
+      className,
+      ...props
+    }
+  );
+}
+function CsFieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className,
+      ...props
+    }
+  );
+}
+function CsFieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn("typo-productive-caption text-(--font-color-secondary-default)", className),
+      ...props
+    }
+  );
+}
+function CsFieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(CsSeparator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function CsFieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "flex list-disc flex-col gap-(--label-gap)", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-(--input-common-helpertext) typo-productive-caption", className),
+      ...props,
+      children: content
+    }
+  );
+}
+export {
+  CsField,
+  CsFieldContent,
+  CsFieldDescription,
+  CsFieldError,
+  CsFieldGroup,
+  CsFieldLabel,
+  CsFieldLegend,
+  CsFieldSeparator,
+  CsFieldSet,
+  CsFieldTitle
+};
+//# sourceMappingURL=cs-field.js.map

package/dist/components/field/cs-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-field.js","sources":["../../../src/components/field/cs-field.tsx"],"sourcesContent":["\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { CsLabel } from \"../label\"\nimport { CsSeparator } from \"../separator/cs-separator\"\n\n/**\n * CsField 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | 컴포넌트/Props |\n * |----------------|---------------|\n * | `input/common/group-gap` | `CsField`, `CsFieldContent` 내부 간격 |\n * | `input/common/helpertext` | `CsFieldError` 색상 |\n * | `spacing/component/gap-lg` | `CsFieldGroup`, `CsFieldSet` 간격 |\n * | `spacing/component/gap-md` | checkbox/radio 그룹 간격 |\n *\n * ## State 매핑\n * | UI 상태 | Token state | 적용 |\n * |---------|-------------|------|\n * | 유효성 실패 | - | `data-invalid=\"true\"` → 에러 색상 |\n *\n * ## Orientation 옵션\n * | 값 | 설명 |\n * |---|------|\n * | `vertical` | 라벨 위, 입력 아래 (기본) |\n * | `horizontal` | 라벨 좌측, 입력 우측 |\n * | `responsive` | 모바일: vertical, 데스크탑: horizontal |\n *\n * ## CSS Variables\n * ```css\n * --input-common-group-gap (필드 내부 간격)\n * --input-common-helpertext (에러 메시지 색상)\n * --label-gap (에러 리스트 간격)\n * --spacing-component-gap-lg | gap-md\n * ```\n *\n * ## 서브 컴포넌트 구조\n * ```\n * CsFieldSet (선택, fieldset 요소)\n * └── CsFieldLegend (선택)\n * CsFieldGroup\n * ├── CsField\n * │   ├── CsFieldLabel / CsFieldTitle\n * │   ├── CsFieldContent\n * │   │   ├── <입력 컴포넌트>\n * │   │   └── CsFieldError\n * │   └── CsFieldDescription (선택)\n * └── CsFieldSeparator (선택)\n * ```\n */\n\n/**\n * 폼 필드셋 컨테이너\n *\n * 의미론적으로 관련 필드를 그룹화하는 fieldset 요소.\n * checkbox/radio 그룹 포함 시 자동으로 간격 조정.\n *\n * @example\n * ```tsx\n * <CsFieldSet>\n *   <CsFieldLegend>개인정보</CsFieldLegend>\n *   <CsFieldGroup>...</CsFieldGroup>\n * </CsFieldSet>\n * ```\n */\nfunction CsFieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-(--spacing-component-gap-lg)\",\n        \"has-[>[data-slot=checkbox-group]]:gap-(--spacing-component-gap-md) has-[>[data-slot=radio-group]]:gap-(--spacing-component-gap-md)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * CsFieldLegend Props\n */\ntype CsFieldLegendProps = React.ComponentProps<\"legend\"> & {\n  /**\n   * 레전드 스타일 변형\n   * - `legend`: 큰 텍스트 (섹션 제목용)\n   * - `label`: 작은 텍스트 (라벨 스타일)\n   * @default 'legend'\n   */\n  variant?: \"legend\" | \"label\"\n}\n\n/**\n * 필드셋 레전드 (제목)\n *\n * CsFieldSet 내에서 그룹 제목으로 사용.\n */\nfunction CsFieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: CsFieldLegendProps) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * 필드 그룹 컨테이너\n *\n * 여러 CsField를 수직으로 배치.\n * Container Query(@container) 지원으로 반응형 레이아웃 가능.\n *\n * @example\n * ```tsx\n * <CsFieldGroup>\n *   <CsField>...</CsField>\n *   <CsField>...</CsField>\n * </CsFieldGroup>\n * ```\n */\nfunction CsFieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-(--spacing-component-gap-lg) data-[slot=checkbox-group]:gap-(--spacing-component-gap-md) *:data-[slot=field-group]:gap-(--spacing-component-gap-md)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst csFieldVariants = cva(\n  \"group/field flex w-full gap-(--input-common-group-gap) data-[invalid=true]:text-(--color-state-error-default)\",\n  {\n    variants: {\n      orientation: {\n        vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n        horizontal: [\n          \"flex-row items-center\",\n          \"[&>[data-slot=field-label]]:flex-auto\",\n          \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n        responsive: [\n          \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto\",\n          \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n          \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\n/**\n * CsField Props\n */\ntype CsFieldProps = React.ComponentProps<\"div\"> & {\n  /**\n   * 라벨과 입력 필드의 배치 방향\n   * - `vertical`: 라벨 위, 입력 아래 (기본, 모바일 최적화)\n   * - `horizontal`: 라벨 좌측, 입력 우측 (데스크탑 폼)\n   * - `responsive`: 모바일은 vertical, 데스크탑은 horizontal\n   * @default 'vertical'\n   */\n  orientation?: 'vertical' | 'horizontal' | 'responsive'\n}\n\n/**\n * CS Design System 폼 필드 컨테이너\n *\n * 라벨, 입력 필드, 에러 메시지를 하나의 단위로 묶어주는 컴포넌트.\n * 폼 레이아웃을 일관되게 유지하고, 라벨-입력 관계를 명확하게 합니다.\n * orientation으로 수직/수평 레이아웃을 제어합니다.\n *\n * ## 사용 시나리오\n * - 폼 입력 필드: 라벨 + 입력 + 에러 메시지 조합\n * - 수직 레이아웃: 모바일 폼, 좁은 공간 (`orientation=\"vertical\"`)\n * - 수평 레이아웃: 데스크탑 폼, 넓은 공간 (`orientation=\"horizontal\"`)\n * - 반응형 폼: 모바일은 수직, 데스크탑은 수평 (`orientation=\"responsive\"`)\n * - 에러 표시: `data-invalid=\"true\"`로 에러 상태 표시\n *\n * @example 기본 (수직)\n * ```tsx\n * <CsField>\n *   <CsFieldLabel>이름</CsFieldLabel>\n *   <CsFieldContent>\n *     <CsInput />\n *   </CsFieldContent>\n * </CsField>\n * ```\n *\n * @example 수평 레이아웃\n * ```tsx\n * <CsField orientation=\"horizontal\">\n *   <CsFieldLabel>이메일</CsFieldLabel>\n *   <CsFieldContent>\n *     <CsInput type=\"email\" />\n *   </CsFieldContent>\n * </CsField>\n * ```\n */\nfunction CsField({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: CsFieldProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(csFieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * 필드 콘텐츠 영역\n *\n * 입력 컴포넌트와 에러 메시지를 담는 컨테이너.\n * 내부 요소 간 간격 자동 적용.\n */\nfunction CsFieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-(--input-common-group-gap) leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * 필드 라벨\n *\n * CsLabel 기반. 입력 필드와 연결된 라벨 요소.\n * htmlFor 속성으로 입력 필드와 연결.\n */\nfunction CsFieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof CsLabel>) {\n  return (\n    <CsLabel\n      data-slot=\"field-label\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\n/**\n * 필드 제목 (비라벨)\n *\n * label 요소 대신 div로 렌더링. checkbox/radio 그룹 등에서 사용.\n */\nfunction CsFieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\n/**\n * 필드 설명 텍스트\n *\n * 입력 필드에 대한 추가 안내 텍스트.\n */\nfunction CsFieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\"typo-productive-caption text-(--font-color-secondary-default)\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * 필드 구분선\n *\n * 필드 그룹 내에서 섹션을 구분하는 선.\n * children으로 텍스트 전달 시 구분선 중앙에 표시.\n *\n * @example\n * ```tsx\n * <CsFieldSeparator />\n * <CsFieldSeparator>또는</CsFieldSeparator>\n * ```\n */\nfunction CsFieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <CsSeparator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"bg-background text-muted-foreground relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\n/**\n * CsFieldError Props\n */\ntype CsFieldErrorProps = React.ComponentProps<\"div\"> & {\n  /**\n   * 에러 객체 배열 (react-hook-form 등과 호환)\n   * 중복 메시지 자동 제거, 단일 에러는 텍스트로, 다중 에러는 리스트로 표시\n   */\n  errors?: Array<{ message?: string } | undefined>\n}\n\n/**\n * 필드 에러 메시지\n *\n * 유효성 검사 실패 시 에러 메시지 표시.\n * errors prop 또는 children으로 내용 전달.\n *\n * @example react-hook-form 연동\n * ```tsx\n * <CsFieldError errors={[formState.errors.email]} />\n * ```\n *\n * @example 직접 메시지 전달\n * ```tsx\n * <CsFieldError>이메일 형식이 올바르지 않습니다.</CsFieldError>\n * ```\n */\nfunction CsFieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: CsFieldErrorProps) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"flex list-disc flex-col gap-(--label-gap)\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-(--input-common-helpertext) typo-productive-caption\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  CsField,\n  CsFieldLabel,\n  CsFieldDescription,\n  CsFieldError,\n  CsFieldGroup,\n  CsFieldLegend,\n  CsFieldSeparator,\n  CsFieldSet,\n  CsFieldContent,\n  CsFieldTitle,\n  type CsFieldProps,\n  type CsFieldLegendProps,\n  type CsFieldErrorProps,\n}\n"],"names":[],"mappings":"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"}