\n {props.children}\n \n );\n};"
+}
\ No newline at end of file
diff --git a/docs/components/example/skeleton-wave-activity.tsx b/docs/components/example/skeleton-wave-activity.tsx
new file mode 100644
index 000000000..f856c1310
--- /dev/null
+++ b/docs/components/example/skeleton-wave-activity.tsx
@@ -0,0 +1,63 @@
+import type { ActivityComponentType } from "@stackflow/react/future";
+import type * as React from "react";
+
+import Layout from "@/components/stackflow/ActivityLayout";
+import { Skeleton } from "seed-design/ui/skeleton";
+import {
+ useSkeletonDuration,
+ useIsRealLoading,
+ useSkeletonLoading,
+ useSkeletonTimingFunction,
+ useSkeletonInitTransitionDuration,
+ useSkeletonGradient,
+} from "@/stores/skeleton";
+
+declare module "@stackflow/config" {
+ interface Register {
+ SkeletonWave: unknown;
+ }
+}
+
+const Fallback = () => {
+ return (
+
+ );
+};
+
+const SkeletonWaveActivity: ActivityComponentType<"SkeletonWave"> = () => {
+ const isLoading = useSkeletonLoading();
+ const isRealLoading = useIsRealLoading();
+ const animationDuration = useSkeletonDuration();
+ const animationTiming = useSkeletonTimingFunction();
+ const initTransitionDuration = useSkeletonInitTransitionDuration();
+ const gradient = useSkeletonGradient();
+
+ return (
+
+
+ {isLoading ? isRealLoading &&
:
content
}
+
+
+
+ 라벨1
+
+ 라벨2
+
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-disabled.tsx b/docs/components/example/tabs-disabled.tsx
new file mode 100644
index 000000000..20e28865e
--- /dev/null
+++ b/docs/components/example/tabs-disabled.tsx
@@ -0,0 +1,44 @@
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+
+export default function TabsDisabled() {
+ return (
+
+
+
+ 라벨1
+
+ 라벨2
+
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-dynamic-height.tsx b/docs/components/example/tabs-dynamic-height.tsx
new file mode 100644
index 000000000..45866434f
--- /dev/null
+++ b/docs/components/example/tabs-dynamic-height.tsx
@@ -0,0 +1,44 @@
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+
+export default function TabsDynamicHeight() {
+ return (
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
아래 컨텐츠
+
+ {children}
+
+ );
+};
diff --git a/docs/components/example/tabs-layout-fill.tsx b/docs/components/example/tabs-layout-fill.tsx
new file mode 100644
index 000000000..5e427c324
--- /dev/null
+++ b/docs/components/example/tabs-layout-fill.tsx
@@ -0,0 +1,48 @@
+import {
+ Tabs,
+ TabContent,
+ TabContentList,
+ TabTrigger,
+ TabTriggerList,
+} from "seed-design/ui/tabs";
+
+export default function TabsLayoutFill() {
+ return (
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-layout-hug.tsx b/docs/components/example/tabs-layout-hug.tsx
new file mode 100644
index 000000000..d38d14c71
--- /dev/null
+++ b/docs/components/example/tabs-layout-hug.tsx
@@ -0,0 +1,42 @@
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+
+export default function TabsLayoutHug() {
+ return (
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-preview.tsx b/docs/components/example/tabs-preview.tsx
new file mode 100644
index 000000000..404343435
--- /dev/null
+++ b/docs/components/example/tabs-preview.tsx
@@ -0,0 +1,42 @@
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+
+export default function TabsPreview() {
+ return (
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-size-medium.tsx b/docs/components/example/tabs-size-medium.tsx
new file mode 100644
index 000000000..2b5c1b0f2
--- /dev/null
+++ b/docs/components/example/tabs-size-medium.tsx
@@ -0,0 +1,42 @@
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+
+export default function TabsSizeMedium() {
+ return (
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-size-small.tsx b/docs/components/example/tabs-size-small.tsx
new file mode 100644
index 000000000..fb5dda9bd
--- /dev/null
+++ b/docs/components/example/tabs-size-small.tsx
@@ -0,0 +1,42 @@
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+
+export default function TabsSizeSmall() {
+ return (
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-swipeable.tsx b/docs/components/example/tabs-swipeable.tsx
new file mode 100644
index 000000000..d271e9aee
--- /dev/null
+++ b/docs/components/example/tabs-swipeable.tsx
@@ -0,0 +1,42 @@
+import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+
+export default function TabsSwipeable() {
+ return (
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/icongraphy/icon-bottom-infomation.tsx b/docs/components/icongraphy/icon-bottom-infomation.tsx
new file mode 100644
index 000000000..bff59cf97
--- /dev/null
+++ b/docs/components/icongraphy/icon-bottom-infomation.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import { Badge } from "seed-design/ui/badge";
+
+import { useIcon } from "./icon-context";
+
+import * as changeCase from "change-case";
+
+export const IconBottomInfomation = () => {
+ const { selectedIcon, search, iconComponents } = useIcon();
+
+ if (!selectedIcon) {
+ return null;
+ }
+
+ const pascalCaseIconName = changeCase.pascalCase(selectedIcon?.name);
+ const Icon = iconComponents[pascalCaseIconName] as React.ForwardRefExoticComponent<
+ Omit<
+ React.SVGProps & {
+ size?: number | string;
+ },
+ "ref"
+ > &
+ React.RefAttributes
+ >;
+
+ return (
+
+
+
+
{selectedIcon.name}
+
{pascalCaseIconName}
+
+
+ {selectedIcon?.metadatas.map((metadata) => (
+
+ {metadata}
+
+ ))}
+
+
+
{}
+
+ {Object.keys(iconComponents).map((iconName) => {
+ const IconComponent = iconComponents[iconName] as React.ForwardRefExoticComponent<
+ Omit<
+ React.SVGProps
& {
+ size?: number | string;
+ },
+ "ref"
+ > &
+ React.RefAttributes
+ >;
+ const snakeCaseIconName = changeCase.snakeCase(iconName);
+ const isSelected = selectedIcon?.name === snakeCaseIconName;
+ const metadataString = iconData[snakeCaseIconName].metadatas.join(", ");
+
+ if (search !== "" && !metadataString.includes(search)) {
+ return null;
+ }
+
+ return (
+ onSelect(snakeCaseIconName)}
+ key={iconName}
+ className={`aspect-square rounded-md flex items-center justify-center ${isSelected ? "hover:bg-seed-bg-brand-weak-pressed" : "hover:bg-seed-bg-layer-default-pressed"} cursor-pointer transition-colors ${isSelected ? "bg-seed-bg-brand-weak" : "bg-seed-bg-layer-default"}`}
+ data-metadatas={metadataString}
+ >
+
+
+ );
+ })}
+
+
+ {search === "" ? "아이콘을 검색해보세요." : `\`${search}\`로 검색한 결과입니다.`}
+
+ setSearch(e.target.value)}
+ />
+
+ );
+};
diff --git a/docs/components/icongraphy/icons.tsx b/docs/components/icongraphy/icons.tsx
new file mode 100644
index 000000000..94b081192
--- /dev/null
+++ b/docs/components/icongraphy/icons.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+
+import * as Index from "@daangn/react-icon";
+import IconData from "@daangn/icon-data";
+
+import { IconProvider } from "./icon-context";
+import { IconGrid } from "./icon-grid";
+import { IconSearch } from "./icon-search";
+import { IconBottomInfomation } from "./icon-bottom-infomation";
+
+export const Icons = () => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/docs/components/installation.tsx b/docs/components/installation.tsx
new file mode 100644
index 000000000..7446c0bd4
--- /dev/null
+++ b/docs/components/installation.tsx
@@ -0,0 +1,72 @@
+import type { RegistryComponentItemMachineGenerated } from "@/registry/schema";
+import { Step, Steps } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import type * as React from "react";
+import { CodeBlock } from "./code-block";
+import ErrorBoundary from "./error-boundary";
+
+interface InstallationProps {
+ name: string;
+}
+
+const Heading3 = ({ children }: { children: React.ReactNode }) => (
+
+ {children}
+
+);
+
+/**
+ * @see https://github.com/shuding/nextra/blob/main/packages/nextra/src/components/pre.tsx
+ * @type {React.FC}
+ */
+export async function Installation(props: InstallationProps) {
+ const { name } = props;
+
+ const json = (await import(
+ `@/public/__registry__/component/${name}.json`
+ ).then((module) => {
+ return module.default;
+ })) as RegistryComponentItemMachineGenerated;
+
+ return (
+
+
+
+
+
+
+
+ {json?.dependencies && (
+
+ 의존성 설치
+
+
+ )}
+
+
+ 아래 코드를 복사 후 붙여넣고 사용하세요
+ {json?.registries.map((registry) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+ );
+}
diff --git a/docs/components/mdx/icon.tsx b/docs/components/mdx/icon.tsx
new file mode 100644
index 000000000..3958a66eb
--- /dev/null
+++ b/docs/components/mdx/icon.tsx
@@ -0,0 +1,37 @@
+import * as V3Icons from "@daangn/react-icon";
+import * as V2Icons from "@seed-design/react-icon";
+import Link from "fumadocs-core/link";
+import * as changecase from "change-case";
+
+export const V3 = ({ name }: { name: keyof typeof V3Icons }) => {
+ const NewIcon = V3Icons[name];
+
+ if (!NewIcon) {
+ return {name};
+ }
+
+ const snakeCase = changecase.snakeCase(name);
+ return (
+
+
+
+ {name}
+
+
+ );
+};
+
+export const V2 = ({ name }: { name: keyof typeof V2Icons }) => {
+ const OldIcon = V2Icons[name];
+
+ if (!OldIcon) {
+ return {name};
+ }
+
+ return (
+
+ );
+};
diff --git a/docs/components/stackflow-example.tsx b/docs/components/stackflow-example.tsx
new file mode 100644
index 000000000..47d50e048
--- /dev/null
+++ b/docs/components/stackflow-example.tsx
@@ -0,0 +1,47 @@
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import * as React from "react";
+import * as Index from "./example/index.json";
+
+import ErrorBoundary from "./error-boundary";
+import { CodeBlock } from "./code-block";
+
+import { Stackflow } from "./stackflow/Stackflow";
+import type { ActivityComponentType } from "@stackflow/react/future";
+
+interface StackflowExampleProps {
+ name: string;
+}
+
+export function StackflowExample(props: StackflowExampleProps) {
+ const { name } = props;
+
+ const Activity = React.useMemo(() => {
+ const Component = React.lazy(() => import(`./example/${name}.tsx`));
+
+ if (!Component) {
+ return 컴포넌트가 존재하지 않습니다.
;
+ }
+
+ return Component;
+ // biome-ignore lint/suspicious/noExplicitAny:
+ }, [name]) as unknown as ActivityComponentType;
+
+ const Code = React.useMemo(() => {
+ return (Index as Record)[name];
+ }, [name]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/components/stackflow/ActivityLayout.tsx b/docs/components/stackflow/ActivityLayout.tsx
new file mode 100644
index 000000000..d1ca1f63d
--- /dev/null
+++ b/docs/components/stackflow/ActivityLayout.tsx
@@ -0,0 +1,89 @@
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+
+import {
+ IconChevronDownFill,
+ IconChevronDownLine,
+ IconDot3HorizontalChatbubbleLeftLine,
+ IconGearLine,
+ IconHorizline3VerticalLine,
+ IconHouseLine,
+ IconPersonLine,
+ IconPlusSquareFill,
+} from "@daangn/react-icon";
+
+type PropOf = T extends React.ComponentType ? U : never;
+
+interface LayoutProps {
+ appBar?: PropOf["appBar"];
+ children: React.ReactNode;
+}
+
+const Layout: React.FC = ({ children }) => {
+ const appBarLeft = () => (
+
+ );
+
+ const appBarRight = () => (
+
+
+
+ );
+
+ return (
+
+
+
+ );
+};
+
+Layout.displayName = "Layout";
+
+export default Layout;
+
+const BottomTab: React.FC = () => (
+
+
+
+
+
+
+
+ {Icon ? : }
+
+ );
+}
diff --git a/docs/content/comingSoon.png b/docs/content/comingSoon.png
deleted file mode 100644
index b7b74826f..000000000
Binary files a/docs/content/comingSoon.png and /dev/null differ
diff --git a/docs/content/comingSoonWide.png b/docs/content/comingSoonWide.png
deleted file mode 100644
index 13f4d6a5b..000000000
Binary files a/docs/content/comingSoonWide.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/actionsheet-options-action-label.png b/docs/content/component/action-sheet/actionsheet-options-action-label.png
deleted file mode 100644
index df14e5fee..000000000
Binary files a/docs/content/component/action-sheet/actionsheet-options-action-label.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/actionsheet-options-action-variant.png b/docs/content/component/action-sheet/actionsheet-options-action-variant.png
deleted file mode 100644
index eb576e634..000000000
Binary files a/docs/content/component/action-sheet/actionsheet-options-action-variant.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/actionsheet-options-description.png b/docs/content/component/action-sheet/actionsheet-options-description.png
deleted file mode 100644
index 5d3360450..000000000
Binary files a/docs/content/component/action-sheet/actionsheet-options-description.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-1.png b/docs/content/component/action-sheet/actionsheet-touch-mouse-control-1.png
deleted file mode 100644
index 43df08e72..000000000
Binary files a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-1.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-2.png b/docs/content/component/action-sheet/actionsheet-touch-mouse-control-2.png
deleted file mode 100644
index 27e9939cb..000000000
Binary files a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-2.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-3.png b/docs/content/component/action-sheet/actionsheet-touch-mouse-control-3.png
deleted file mode 100644
index df9610e9c..000000000
Binary files a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-3.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-4.png b/docs/content/component/action-sheet/actionsheet-touch-mouse-control-4.png
deleted file mode 100644
index d7890d2e0..000000000
Binary files a/docs/content/component/action-sheet/actionsheet-touch-mouse-control-4.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/anatomy.png b/docs/content/component/action-sheet/anatomy.png
deleted file mode 100644
index 1a9c24b49..000000000
Binary files a/docs/content/component/action-sheet/anatomy.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/component-meta.json b/docs/content/component/action-sheet/component-meta.json
deleted file mode 100644
index dc9b9458d..000000000
--- a/docs/content/component/action-sheet/component-meta.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Action Sheet",
- "description": "OS 시스템 액션시트를 대체하는 커스텀 액션시트입니다.",
- "thumbnail": "./thumbnail.png",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/action-sheet"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "todo",
- "path": ""
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=35319-33895&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/action-sheet/overview.mdx b/docs/content/component/action-sheet/overview.mdx
deleted file mode 100644
index e68a6d76c..000000000
--- a/docs/content/component/action-sheet/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/action-sheet/overview
----
diff --git a/docs/content/component/action-sheet/style.mdx b/docs/content/component/action-sheet/style.mdx
deleted file mode 100644
index b016a44c2..000000000
--- a/docs/content/component/action-sheet/style.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-slug: /component/action-sheet/style
----
-
-## Anatomy
-
-
-
-1. Backdrop
-2. Container
-3. Header
-4. Title
-5. Description
-6. Action Group
-7. Action
-8. Action Label
-
-## Root
-
-### 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ----------- | --------- | --------------------------- |
-| Container | Color | $semantic.color.paper-sheet |
-| Backdrop | Color | $semantic.color.overlay-dim |
-| Title | Color | $scale.color.gray-900 |
-| Description | Color | $scale.color.gray-600 |
-| Divider | Color | $semantic.color.divider-2 |
-
-### 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----------- | ---------- | ------------------------------------- |
-| Title | Typography | $semantic.typography.subtitle2-bold |
-| Description | Typography | $semantic.typography.caption1-regular |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ------------------- | ------------------ | ----- |
-| Container | Horizontal Padding | 16pt |
-| | Vertical Padding | 14pt |
-| | Corder Radius Top | 20pt |
-| Title / Description | Vertical Spacing | 4pt |
-| Divider | Height | 0.5pt |
-| | Horizontal Margin | 16pt |
-
-## Action
-
-### Visual Options
-
-| Property | Value | Description |
-| -------- | -------------------- | ----------- |
-| variant | default, destructive | |
-
-### 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| -------- | ------------------- | --------- | ------------------------- |
-| Enabled | Label (default) | Color | $semantic.color.secondary |
-| | Label (destructive) | Color | $semantic.color.danger |
-| Hovered | Label (default) | Color | $scale.color.gray-700 |
-| | Label (destructive) | Color | $scale.color.red-400 |
-| Pressed | Label (default) | Color | $scale.color.gray-700 |
-| | Label (destructive) | Color | $scale.color.red-400 |
-| Disabled | Label (default) | Color | $scale.color.gray-400 |
-| | Label (destructive) | Color | $scale.color.gray-400 |
-
-### 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label2-regular |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ----- | ------------------ | ----- |
-| Label | Horizontal Padding | 16pt |
-| Label | Vertical Padding | 12pt |
diff --git a/docs/content/component/action-sheet/thumbnail.png b/docs/content/component/action-sheet/thumbnail.png
deleted file mode 100644
index b3ba1e8a2..000000000
Binary files a/docs/content/component/action-sheet/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/action-sheet/usage.mdx b/docs/content/component/action-sheet/usage.mdx
deleted file mode 100644
index 39fc4d04a..000000000
--- a/docs/content/component/action-sheet/usage.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
----
-slug: /component/action-sheet/usage
----
-
-## 구조도
-
-
-
-1. Backdrop
-2. Container
-3. Header
-4. Title
-5. Description
-6. Action Group
-7. Action
-8. Action Label
-
-## 옵션
-
-
-
- 
-
-
- Title / Description
-
- Title은 Action Sheet의 내용의 목적이나 핵심 메시지를 강조, 요약하여
- 전달합니다. Description은 유저에게 추가적인 컨텍스트와 부가 설명을
- 제공합니다.
-
-
-
-
-
-
- 
-
-
- Action Label
-
- Action의 Label은 유저가 어떤 동작을 수행하게 될지 이해하고 선택할 수
- 있도록 설명합니다. Label은 유저가 명확하게 이해할 수 있도록 직관적으로
- 간결하게 제공합니다.
-
-
-
-
-
-
- 
-
-
- Action Variant
-
- Default는 주로 일반적이거나 중립적인 상황일 때 사용되는 옵션입니다.
- Destructive는 유저가 주의해야 할 액션이거나, 데이터를 삭제 혹은 변경하는
- 작업일 경우에 사용합니다. Destructive는 데이터나 설정에 영향을 줄 수
- 있으므로, 유저가 명확히 인지할 수 있는 레이블을 제공합니다.
-
-
-
-
-
-### 옵션 테이블 (Action Sheet)
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | ----------- | ------ | ---- |
-| is open | false, true | false | |
-| title | text | | |
-| description | text | | |
-
-### 옵션 테이블 (Action)
-
-| 속성 | 값 | 기본값 | 설명 |
-| ------- | -------------------- | ------- | ---- |
-| label | text | | |
-| variant | default, destructive | default | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Action Sheet와 상호작용할 수 있습니다. Title과
- Description 영역은 클릭이나 터치할 수 없습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- ↑ 혹은 ↓키를 통해 Action간 Focus
- 이동이 가능합니다.
-
-
-
-
-
-
- 
-
-
- Action
-
- Action에 Focus된 상태에서 Enter키를 통해 Action을
- 실행 시킬 수 있습니다.
-
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline-do-outline.png b/docs/content/component/actionable-callout/actionablecallout-guideline-do-outline.png
deleted file mode 100644
index 5ef206025..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline-do-outline.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline-do.png b/docs/content/component/actionable-callout/actionablecallout-guideline-do.png
deleted file mode 100644
index e622044f0..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline-do.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline-dont-action.png b/docs/content/component/actionable-callout/actionablecallout-guideline-dont-action.png
deleted file mode 100644
index 0582e500a..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline-dont-action.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline-dont-outline.png b/docs/content/component/actionable-callout/actionablecallout-guideline-dont-outline.png
deleted file mode 100644
index 4bf3dc8cb..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline-dont-outline.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline-dont-promotion.png b/docs/content/component/actionable-callout/actionablecallout-guideline-dont-promotion.png
deleted file mode 100644
index 463bca19d..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline-dont-promotion.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline-dont.png b/docs/content/component/actionable-callout/actionablecallout-guideline-dont.png
deleted file mode 100644
index a6a72fc9c..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline-dont.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline-short.png b/docs/content/component/actionable-callout/actionablecallout-guideline-short.png
deleted file mode 100644
index 4936fd5bd..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline-short.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-guideline.png b/docs/content/component/actionable-callout/actionablecallout-guideline.png
deleted file mode 100644
index b3bbb0dd2..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-guideline.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-options-danger.png b/docs/content/component/actionable-callout/actionablecallout-options-danger.png
deleted file mode 100644
index 22fb71d31..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-options-danger.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-options-info.png b/docs/content/component/actionable-callout/actionablecallout-options-info.png
deleted file mode 100644
index 1adbabd69..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-options-info.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-options-normal.png b/docs/content/component/actionable-callout/actionablecallout-options-normal.png
deleted file mode 100644
index 1a630b945..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-options-normal.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-options-outline.png b/docs/content/component/actionable-callout/actionablecallout-options-outline.png
deleted file mode 100644
index b47ceea28..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-options-outline.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-options-title-description.png b/docs/content/component/actionable-callout/actionablecallout-options-title-description.png
deleted file mode 100644
index 258f0a128..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-options-title-description.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-options-warning.png b/docs/content/component/actionable-callout/actionablecallout-options-warning.png
deleted file mode 100644
index 090f438dc..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-options-warning.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-usage-click-touch.png b/docs/content/component/actionable-callout/actionablecallout-usage-click-touch.png
deleted file mode 100644
index f0737641b..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/actionablecallout-usage-enter-action.png b/docs/content/component/actionable-callout/actionablecallout-usage-enter-action.png
deleted file mode 100644
index 946650ad7..000000000
Binary files a/docs/content/component/actionable-callout/actionablecallout-usage-enter-action.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/anatomy.png b/docs/content/component/actionable-callout/anatomy.png
deleted file mode 100644
index 62e58f7ed..000000000
Binary files a/docs/content/component/actionable-callout/anatomy.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/component-meta.json b/docs/content/component/actionable-callout/component-meta.json
deleted file mode 100644
index a9b264574..000000000
--- a/docs/content/component/actionable-callout/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Actionable Callout",
- "description": "사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다. 사용자가 누르는 것으로 액션이 발생합니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Callouts",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/actionable-callout"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-callouts-actionablecallout--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=47537-35063&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-callouts-actionablecallout--basic&viewMode=story",
- "height": "200px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/actionable-callout/overview.mdx b/docs/content/component/actionable-callout/overview.mdx
deleted file mode 100644
index 28b60eb01..000000000
--- a/docs/content/component/actionable-callout/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/actionable-callout/overview
----
diff --git a/docs/content/component/actionable-callout/style.mdx b/docs/content/component/actionable-callout/style.mdx
deleted file mode 100644
index de1de863d..000000000
--- a/docs/content/component/actionable-callout/style.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-slug: /component/actionable-callout/style
----
-
-## Anatomy
-
-
-
-1. Root
-2. Title
-3. Description
-4. Action Indicator
-
-## Visual Options
-
-| Property | Value |
-| ----------- | -------------------------------------- |
-| variant | outline, normal, info, warning, danger |
-| title | text |
-| description | text |
-
-## 디자인 결정 (Color)
-
-### variant=outline
-
-| Part | Attribute | Value |
-| ------------------------------------ | ------------- | --------------------- |
-| Root | Outline Color | $scale.color.gray-300 |
-| Title, Description, Action Indicator | Color | $scale.color.gray-900 |
-
-### variant=normal
-
-| Part | Attribute | Value |
-| ------------------------------------ | --------- | --------------------- |
-| Root | Color | $scale.color.gray-100 |
-| Title, Description, Action Indicator | Color | $scale.color.gray-900 |
-
-### variant=info
-
-| Part | Attribute | Value |
-| ------------------------------------ | --------- | -------------------------- |
-| Root | Color | $scale.color.blue-alpha-50 |
-| Title, Description, Action Indicator | Color | $scale.color.blue-950 |
-
-### variant=warning
-
-| Part | Attribute | Value |
-| ------------------------------------ | --------- | ---------------------------- |
-| Root | Color | $scale.color.yellow-alpha-50 |
-| Title, Description, Action Indicator | Color | $scale.color.yellow-950 |
-
-### variant=danger
-
-| Part | Attribute | Value |
-| ------------------------------------ | --------- | ------------------------- |
-| Root | Color | $scale.color.red-alpha-50 |
-| Title, Description, Action Indicator | Color | $scale.color.red-950 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----- | ---------- | ------------------------------------ |
-| Title | Typography | $semantic.typography.body-m2-bold |
-| Label | Typography | $semantic.typography.body-m2-regular |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| -------------------------- | ---------------- | ----- |
-| Root | Vertical Padding | 14pt |
-| | Left Padding | 16pt |
-| | Right Padding | 12pt |
-| | Corner Radius | 10pt |
-| Content / Action Indicator | Spacing | 10pt |
-| Action Indicator | Size | 18pt |
diff --git a/docs/content/component/actionable-callout/thumbnail.png b/docs/content/component/actionable-callout/thumbnail.png
deleted file mode 100644
index 2e93787fb..000000000
Binary files a/docs/content/component/actionable-callout/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/actionable-callout/usage.mdx b/docs/content/component/actionable-callout/usage.mdx
deleted file mode 100644
index 6b99de5e7..000000000
--- a/docs/content/component/actionable-callout/usage.mdx
+++ /dev/null
@@ -1,232 +0,0 @@
----
-slug: /component/actionable-callout/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Title
-3. Description
-4. Action Indicator
-
-## 옵션
-
-
-
- 
-
-
- Outline
-
- Outline Variant는 안내 및 단순 정보를 전달합니다. Normal Variant보다
- 주목도를 낮추고 싶을 때, 혹은 면분할이 많은 화면에서 다른 gray 토큰과의
- 충돌을 방지하고자 할 때 사용합니다.
-
-
-
-
-
-
- 
-
-
- Normal
-
- Normal Variant는 시스템 안내 및 공지사항을 전달합니다. 특별한 강조나
- 경고가 필요하지 않을 때, 혹은 일상적인 상황을 제공합니다.
-
-
-
-
-
-
- 
-
-
- Info
-
- Info Variant는 특정 기능이나 서비스의 부가 설명을 제공하는 데 사용합니다.
- 이를 통해 유저는 해당 기능에 대한 추가 정보를 얻을 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Warning
-
- Warning Variant는 주로 경고나 주의사항을 전달합니다. 위험 요소가 낮으며
- 즉각적인 변화나 문제가 없는 경우, 조심해야 할 사항을 제공합니다.
-
-
-
-
-
-
- 
-
-
- Danger
-
- Danger Variant는 심각한 위험 상황이나 조심해야 할 사항을 제공합니다.
- 데이터가 삭제될 가능성이 있거나, 오류 상황에도 사용할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Title / Description
-
- Title은 Callout의 내용의 목적이나 핵심 메시지를 강조, 요약하여 전달합니다.
- Description은 유저에게 추가적인 컨텍스트와 부가 설명을 제공합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | -------------------------------------- | ------ |
-| variant | outline, normal, info, warning, danger | normal |
-| title | text | |
-| description | text | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Actionable Callout과 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Action
-
- Space 또는 Enter키를 통해
- Actionable Callout의 액션을 실행시킬 수 있습니다.
-
-
-
-
-## 가이드라인
-
-
-
- 
-
-
-
- 필요할 때만, 아껴서 쓰기
-
-
- Actionable Callout은 화면에서 많은 면적을 차지하고, 유저의 주의를 끌기
- 때문에 중요한 정보에만 절제하여 사용합니다. 과도한 사용은 Actionable
- Callout의 강조 효과를 약화시킬 수 있습니다.
-
-
-
-
-
- 
-
-
- 간결한 문구
-
- Description은 2줄 이내로 간결하게 작성하여 유저가 빠르게 내용을 파악할 수
- 있도록 합니다.
-
-
-
-### Do / Don't
-
-
-
-
-
-
- 
-
-
- Gray 컬러가 많은 화면에서는 Outline Variant를 사용하여 다른 요소와의
- 충돌을 피합니다.
-
-
-
-
- 
-
-
- 면분할이 많은 화면에서의 사용을 주의합니다. 화면의 복잡도를 높여 유저에게
- 혼란을 줄 수 있습니다.
-
-
-
-
-
-
-
- 
-
-
- 연결되는 Action이 예측 가능하도록 Description을 작성합니다.
-
-
-
-
- 
-
-
- 마케팅 및 프로모션 용도로 사용하지 않습니다. 해당 용도에는 Banner를
- 사용합니다.
-
-
-
-
-
-
-
- 
-
-
- 의미에 맞는 Variant를 사용합니다. 각 Variant는 목적에 맞는 컬러를 가지기
- 때문에, 이를 무시하고 사용할 경우 유저에게 혼란을 줄 수 있습니다.
-
-
-
-
- 
-
-
- 시각적인 효과만을 위해 특정 Variant를 사용하지 않습니다. 특히 위험 사항을
- 알리는 Warning과 Danger Variant는 목적에 맞게 유의하여 사용합니다.
-
-
-
-
diff --git a/docs/content/component/alert-dialog/alert-dialog-style-max-width.png b/docs/content/component/alert-dialog/alert-dialog-style-max-width.png
deleted file mode 100644
index da1d29573..000000000
Binary files a/docs/content/component/alert-dialog/alert-dialog-style-max-width.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alert-dialog-style-overflow.png b/docs/content/component/alert-dialog/alert-dialog-style-overflow.png
deleted file mode 100644
index 1e2fe7e74..000000000
Binary files a/docs/content/component/alert-dialog/alert-dialog-style-overflow.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alert-dialog-usage-click-touch.png b/docs/content/component/alert-dialog/alert-dialog-usage-click-touch.png
deleted file mode 100644
index b0c6699d8..000000000
Binary files a/docs/content/component/alert-dialog/alert-dialog-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alert-dialog-usage-enter-action.png b/docs/content/component/alert-dialog/alert-dialog-usage-enter-action.png
deleted file mode 100644
index 63886b924..000000000
Binary files a/docs/content/component/alert-dialog/alert-dialog-usage-enter-action.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alert-dialog-usage-focus-1.png b/docs/content/component/alert-dialog/alert-dialog-usage-focus-1.png
deleted file mode 100644
index 58073b9ac..000000000
Binary files a/docs/content/component/alert-dialog/alert-dialog-usage-focus-1.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alert-dialog-usage-focus-2.png b/docs/content/component/alert-dialog/alert-dialog-usage-focus-2.png
deleted file mode 100644
index 51405cb59..000000000
Binary files a/docs/content/component/alert-dialog/alert-dialog-usage-focus-2.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alert-dialog-usage-focus-3.png b/docs/content/component/alert-dialog/alert-dialog-usage-focus-3.png
deleted file mode 100644
index 4732a2c1b..000000000
Binary files a/docs/content/component/alert-dialog/alert-dialog-usage-focus-3.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guide-do.png b/docs/content/component/alert-dialog/alertdialog-guide-do.png
deleted file mode 100644
index 5ddd7d498..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guide-do.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guide-do2.png b/docs/content/component/alert-dialog/alertdialog-guide-do2.png
deleted file mode 100644
index 5ddd7d498..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guide-do2.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guide-dont.png b/docs/content/component/alert-dialog/alertdialog-guide-dont.png
deleted file mode 100644
index 70a7757ea..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guide-dont.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guide-dont2.png b/docs/content/component/alert-dialog/alertdialog-guide-dont2.png
deleted file mode 100644
index f9035dca9..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guide-dont2.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-2.png b/docs/content/component/alert-dialog/alertdialog-guideline-2.png
deleted file mode 100644
index 3af780469..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-2.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-do-1.png b/docs/content/component/alert-dialog/alertdialog-guideline-do-1.png
deleted file mode 100644
index ee86daad3..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-do-1.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-do-2.png b/docs/content/component/alert-dialog/alertdialog-guideline-do-2.png
deleted file mode 100644
index 748d51a41..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-do-2.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-do-3.png b/docs/content/component/alert-dialog/alertdialog-guideline-do-3.png
deleted file mode 100644
index 748d51a41..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-do-3.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-dont-2-1.png b/docs/content/component/alert-dialog/alertdialog-guideline-dont-2-1.png
deleted file mode 100644
index 7e7fb7387..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-dont-2-1.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-dont-2.png b/docs/content/component/alert-dialog/alertdialog-guideline-dont-2.png
deleted file mode 100644
index bfcd0ffb6..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-dont-2.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-dont-3.png b/docs/content/component/alert-dialog/alertdialog-guideline-dont-3.png
deleted file mode 100644
index 19d92b529..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-dont-3.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-dont-4.png b/docs/content/component/alert-dialog/alertdialog-guideline-dont-4.png
deleted file mode 100644
index 387b75cd8..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-dont-4.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-dont-5.png b/docs/content/component/alert-dialog/alertdialog-guideline-dont-5.png
deleted file mode 100644
index 9efcfa6fe..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-dont-5.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-guideline-dont-6.png b/docs/content/component/alert-dialog/alertdialog-guideline-dont-6.png
deleted file mode 100644
index 2db10d6fb..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-guideline-dont-6.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-options-action-primary.png b/docs/content/component/alert-dialog/alertdialog-options-action-primary.png
deleted file mode 100644
index 9f42467e7..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-options-action-primary.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-options-action-secondary-alternative.png b/docs/content/component/alert-dialog/alertdialog-options-action-secondary-alternative.png
deleted file mode 100644
index 35c533570..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-options-action-secondary-alternative.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-options-action-secondary-neutral.png b/docs/content/component/alert-dialog/alertdialog-options-action-secondary-neutral.png
deleted file mode 100644
index 1fe3a370e..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-options-action-secondary-neutral.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-options-action-secondary-nonpreffered.png b/docs/content/component/alert-dialog/alertdialog-options-action-secondary-nonpreffered.png
deleted file mode 100644
index b57aa1c4c..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-options-action-secondary-nonpreffered.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-options-description.png b/docs/content/component/alert-dialog/alertdialog-options-description.png
deleted file mode 100644
index c5d619a26..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-options-description.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/alertdialog-options-title.png b/docs/content/component/alert-dialog/alertdialog-options-title.png
deleted file mode 100644
index 523fce23a..000000000
Binary files a/docs/content/component/alert-dialog/alertdialog-options-title.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/anatomy.png b/docs/content/component/alert-dialog/anatomy.png
deleted file mode 100644
index f66cc565f..000000000
Binary files a/docs/content/component/alert-dialog/anatomy.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/component-meta.json b/docs/content/component/alert-dialog/component-meta.json
deleted file mode 100644
index b6f1ed98e..000000000
--- a/docs/content/component/alert-dialog/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Alert Dialog",
- "description": "사용자에게 중요한 정보를 전달하고, 필요하면 응답을 요구하는 컴포넌트입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/dialog/primitive-meta.json",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/alert-dialog"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-dialog-alertdialog--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=39212-27850&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-dialog-dialogtrigger--default-open&viewMode=story",
- "height": "300px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/alert-dialog/overview.mdx b/docs/content/component/alert-dialog/overview.mdx
deleted file mode 100644
index eafe8cac4..000000000
--- a/docs/content/component/alert-dialog/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/alert-dialog/overview
----
diff --git a/docs/content/component/alert-dialog/style.mdx b/docs/content/component/alert-dialog/style.mdx
deleted file mode 100644
index c1de26174..000000000
--- a/docs/content/component/alert-dialog/style.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
----
-slug: /component/alert-dialog/style
----
-
-## Anatomy
-
-
-
-1. Backdrop - Alert Dialog Primitive (Backdrop)
-2. Container - Alert Dialog Primitive (Container)
-3. Text Container
-4. Title - Alert Dialog Primitive (Title)
-5. Description - Alert Dialog Primitive (Description)
-6. Action Container
-7. Primary Action - Button Primitive
-8. Primary Action Label - Button Primitive
-9. Secondary Action - Button Primitive
-10. Secondary Action Label - Button Primitive
-
-## Visual Options
-
-| Property | Value |
-| ----------------------- | ---------------------------------- |
-| title | text |
-| description | text |
-| secondary action intent | alternative, neutral, nonpreferred |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ----------- | --------- | ---------------------------- |
-| Backdrop | Color | $semantic.color.overlay-dim |
-| Container | Color | $semantic.color.paper-dialog |
-| Title | Color | $scale.color.gray-900 |
-| Description | Color | $scale.color.gray-900 |
-
-### Primary Action
-
-| State | Part | Attribute | Value |
-| -------- | -------------------- | --------- | ------------------------------- |
-| Enabled | Primary Action | Color | $semantic.color.primary |
-| | Primary Action Label | Color | $semantic.color.on-primary |
-| Hovered | Primary Action | Color | $semantic.color.primary-hover |
-| | Primary Action Label | Color | $semantic.color.on-primary |
-| Pressed | Primary Action | Color | $semantic.color.primary-pressed |
-| | Primary Action Label | Color | $semantic.color.on-primary |
-| Disabled | Primary Action | Color | $scale.color.gray-300 |
-| | Primary Action Label | Color | $scale.color.gray-500 |
-
-### Secondary Action (alternative)
-
-| State | Part | Attribute | Value |
-| -------- | ---------------------- | --------- | ----------------------------------- |
-| Enabled | Secondary Action | Color | $semantic.color.primary-low |
-| | Secondary Action Label | Color | $semantic.color.primary |
-| Hovered | Secondary Action | Color | $semantic.color.primary-low-hover |
-| | Secondary Action Label | Color | $semantic.color.primary |
-| Pressed | Secondary Action | Color | $semantic.color.primary-low-pressed |
-| | Secondary Action Label | Color | $semantic.color.primary |
-| Disabled | Secondary Action | Color | $scale.color.gray-300 |
-| | Secondary Action Label | Color | $scale.color.gray-500 |
-
-### Secondary Action (neutral)
-
-| State | Part | Attribute | Value |
-| -------- | ---------------------- | --------- | ----------------------------- |
-| Enabled | Secondary Action | Color | $semantic.color.secondary-low |
-| | Secondary Action Label | Color | $scale.color.gray-900 |
-| Hovered | Secondary Action | Color | $scale.color.gray-300 |
-| | Secondary Action Label | Color | $scale.color.gray-900 |
-| Pressed | Secondary Action | Color | $scale.color.gray-300 |
-| | Secondary Action Label | Color | $scale.color.gray-900 |
-| Disabled | Secondary Action | Color | $scale.color.gray-300 |
-| | Secondary Action Label | Color | $scale.color.gray-500 |
-
-### Secondary Action (nonpreferred)
-
-| State | Part | Attribute | Value |
-| -------- | ---------------------- | --------- | --------------------- |
-| Enabled | Secondary Action Label | Color | $scale.color.gray-700 |
-| Hovered | Secondary Action Label | Color | $scale.color.gray-700 |
-| Pressed | Secondary Action Label | Color | $scale.color.gray-700 |
-| Disabled | Secondary Action Label | Color | $scale.color.gray-500 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ---------------------- | ---------- | -------------------------------------- |
-| Title | Typography | $semantic.typography.title3-bold |
-| Description | Typography | $semantic.typography.subtitle1-regular |
-| Primary Action Label | Typography | $semantic.typography.label3-bold |
-| Secondary Action Label | Typography | $semantic.typography.label3-bold |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| --------------------------------- | ------------------ | ----- |
-| Container | Max Width | 272pt |
-| | Corder Radius | 16pt |
-| Text Container / Action Container | Spacing | 16pt |
-| Text Container | Horizontal Padding | 20pt |
-| Text Container | Padding Top | 20pt |
-| Action Container | Horizontal Padding | 16pt |
-| Action Container | Padding Bottom | 20pt |
-| Title / Description | Spacing | 6pt |
-| Primary Action / Secondary Action | Spacing | 8pt |
-| Primary Action | Corder Radius | 6pt |
-| Secondary Action | Corder Radius | 6pt |
-
-### secondary action intent=nonpreferred
-
-| Part | Attribute | Value |
-| ---------------- | --------------- | ------ |
-| Action Container | Align Direction | Column |
-
-### secondary action intent=neutral
-
-| Part | Attribute | Value |
-| ---------------- | --------------- | ----- |
-| Action Container | Align Direction | Row |
-
-### secondary action intent=alternative
-
-| Part | Attribute | Value |
-| ---------------- | --------------- | ----- |
-| Action Container | Align Direction | Row |
diff --git a/docs/content/component/alert-dialog/thumbnail.png b/docs/content/component/alert-dialog/thumbnail.png
deleted file mode 100644
index 1478d3f89..000000000
Binary files a/docs/content/component/alert-dialog/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/alert-dialog/usage.mdx b/docs/content/component/alert-dialog/usage.mdx
deleted file mode 100644
index 0d9e6fee7..000000000
--- a/docs/content/component/alert-dialog/usage.mdx
+++ /dev/null
@@ -1,310 +0,0 @@
----
-slug: /component/alert-dialog/usage
----
-
-## 구조도
-
-
-
-1. Backdrop
-2. Container
-3. Text Container
-4. Title
-5. Description
-6. Action Container
-7. Primary Action
-8. Primary Action Label
-9. Secondary Action
-10. Secondary Action Label
-
-## 옵션
-
-
-
- 
-
-
- Title
-
- Title은 Alert Dialog가 어떤 정보를 담고 있는지 요약된 내용으로 제공합니다.
- 유저에게 경고의 원인 또는 맥락을 명확하게 전달함으로써, Alert Dialog의
- 목적과 중요성을 전달합니다. 또한 Bold 스타일을 적용하여, Description 보다
- 주목도를 높여 중요한 정보를 빨리 인지할 수 있도록 합니다. Title을
- 필수적으로 작성하기를 권장합니다.
-
-
-
-
-
-
- 
-
-
- Description
-
- Alert Dialog는 Description을 항상 제공해야 합니다. 유저가 Action을
- 실행하기 위해 알아야 하는 추가 정보나 컨텍스트를 전달합니다. 이러한
- 컨텍스트를 통하여 유저가 의사결정을 내릴 수 있도록 도와줍니다.
-
-
-
-
-
-
- 
-
-
- Primary Action
-
- 가장 중요한 Action이 한 가지만 존재하는 경우, Primary Action을 사용합니다.
- 불필요한 선택지를 제외하고 주요 Action만 제공하여, 유저가 쉽게 수행할 수
- 있도록 합니다.
-
-
-
-
-
-
- 
-
-
- Alternative
-
- 두 개의 Action의 레벨이 유사하거나, 모든 Action이 Dismiss 외 동작을
- 실행하는 경우 Alternative 옵션을 사용합니다.
-
-
-
-
-
-
- 
-
-
- Neutral
-
- Primary Action 외 Action이 Dismiss의 성격을 가지는 경우 Neutral 옵션을
- 사용합니다.
-
-
-
-
-
-
- 
-
-
- Nonpreferred
-
- Primary Action과 Secondary Action의 중요도 차이가 큰 경우 Nonpreferred
- 옵션을 사용합니다. 혹은 Action Label이 길어지는 경우 사용합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------------------- | ---------------------------------- | ------- | ---- |
-| title | string | | |
-| description | string | | |
-| primary action label | string | | |
-| secondary action label | string | | |
-| secondary action intent | alternative, neutral, nonpreferred | neutral | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Alert Dialog와 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- Tab키를 통해 Action에 Focus할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Focus
-
- Tab키를 통해 Action간 Focus 이동이 가능합니다
-
-
-
-
-
-
- 
-
-
- Action
-
- Action에 Focus된 상태에서 Enter키를 통해 Action을
- 실행 시킬 수 있습니다.
-
-
-
-
-## 가이드라인
-
-
-
- 
-
-
- Max Width
-
- Alert Dialog의 Max Width는 272입니다.
-
-
-
-
-
-
- 
-
-
- 간결한 문구
-
- Alert Dialog는 유저에게 중요한 알림, 확인, 경고 등의 메시지를 전달합니다.
- 유저의 여정을 방해하는 속성을 지니므로 내용을 간결하게 작성하고, 신중하게
- 사용합니다.
-
-
-
-
-
-
- 
-
-
-
- 경고 또는 데이터 손실 알림
-
-
- Alert Dialog는 유저에게 경고나 주의 사항을 강조하는 역할을 합니다. 돌이킬
- 수 없는 데이터 유실이 발생하는 경우, 유저에게 경고의 메시지를 전달합니다.
-
-
-
-
-
-
-### Do / Don't
-
-
-
-
-
-
- 
-
-
- Title은 명확한 정보 전달을 위한 중요한 요소입니다. 어떤 유형의 메시지,
- 알림인지 신속하게 파악할 수 있도록 합니다. 또한 스크린 리더와 같은 접근성
- 보조 기술에서도 Title은 중요한 역할을 합니다.
-
-
-
-
- 
-
-
- Title 요소 없이 Description으로만 내용을 서술하지 않습니다. Title을 통해
- Description이 어떤 정보를 전달하는지 미리 파악할 수 있도록 합니다.
-
-
-
-
-
-
-
-
-
- 
-
-
- Description은 명확하고 간결하게 작성하여 유저가 쉽게 인지할 수 있도록
- 합니다.
-
-
-
-
- 
-
- Description은 3줄 이내로 작성할 것을 권장합니다.
-
-
-
-
-
-
-
-
- 
-
-
- Alert Dialog의 버튼 Label은 간결한 단어로 제공합니다. 짧은 레이블은 유저가
- 원하는 작업을 빠르게 결정하고 선택할 수 있도록 도와줍니다.
-
-
-
-
- 
-
-
- 서술형 Label은 유저가 읽고 이해해야 하므로 결정 행동을 지연시킬 수
- 있습니다. 버튼 레이블을 간결하게 전달함으로써 유저가 빠른 결정을 내릴 수
- 있도록 도와줍니다.
-
-
-
-
-
-
-
-
-
- 
-
-
- 취소, 닫기 등 변경사항 없이 단순 Dismiss 역할을 하는 Action에는 Secondary
- 버튼을 사용합니다.
-
-
-
-
- 
-
-
- 위와 같이 가벼운 피드백은 Alert Dialog로 제공하기에 적절하지 않습니다.
- Snackbar 사용을 권장합니다.
-
-
-
-
-
diff --git a/docs/content/component/avatar-group/anatomy.png b/docs/content/component/avatar-group/anatomy.png
deleted file mode 100644
index 33cea4295..000000000
Binary files a/docs/content/component/avatar-group/anatomy.png and /dev/null differ
diff --git a/docs/content/component/avatar-group/avatargroup-options-disabled.png b/docs/content/component/avatar-group/avatargroup-options-disabled.png
deleted file mode 100644
index 6a7477e3b..000000000
Binary files a/docs/content/component/avatar-group/avatargroup-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/avatar-group/component-meta.json b/docs/content/component/avatar-group/component-meta.json
deleted file mode 100644
index 5c51c431a..000000000
--- a/docs/content/component/avatar-group/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Avatar Group",
- "description": "프로필 사진 또는 대체 이미지를 통해 여러 사용자를 표현합니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Avatars",
- "platform": {
- "ios": {
- "status": "todo",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "todo",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-avatars-avatargroup--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=39206-26446&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-avatars-avatargroup--basic&viewMode=story",
- "height": "100px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/avatar-group/overview.mdx b/docs/content/component/avatar-group/overview.mdx
deleted file mode 100644
index 20e23d697..000000000
--- a/docs/content/component/avatar-group/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/avatar-group/overview
----
diff --git a/docs/content/component/avatar-group/style.mdx b/docs/content/component/avatar-group/style.mdx
deleted file mode 100644
index 630f3c363..000000000
--- a/docs/content/component/avatar-group/style.mdx
+++ /dev/null
@@ -1,121 +0,0 @@
----
-slug: /component/avatar-group/style
----
-
-## Anatomy
-
-
-
-1. Group
-2. Avatar
-3. Excess
-4. Excess Count
-
-## Visual Options
-
-| Property | Value | Description |
-| -------- | ------------------------------------------------------ | ----------- |
-| size | xxsmall, xsmall, small, medium, large, xlarge, xxlarge | |
-| limit | number | |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ------------ | ------------- | -------------------------------- |
-| Excess | Color | $semantic.color.paper-background |
-| | Outline Color | $scale.color.gray-400 |
-| Excess Count | Color | $scale.color.gray-600 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ------------ | -------------- | -------------------------- |
-| Excess Count | Font Weight | $scale.font-weight-regular |
-| | Line Height | $scale.line-height-small |
-| | Letter Spacing | $scale.letter-spacing-none |
-
-### Size=Xxlarge
-
-| Part | Attribute | Value |
-| ------------ | --------- | ----------------------------- |
-| Excess Count | Font Size | $scale.dimension.font-size-10 |
-
-### Size=Xlarge
-
-| Part | Attribute | Value |
-| ------------ | --------- | ----------------------------- |
-| Excess Count | Font Size | $scale.dimension.font-size-10 |
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ------------ | --------- | ----------------------------- |
-| Excess Count | Font Size | $scale.dimension.font-size-50 |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | --------- | ------------------------------ |
-| Excess Count | Font Size | $scale.dimension.font-size-200 |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | --------- | ------------------------------ |
-| Excess Count | Font Size | $scale.dimension.font-size-300 |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ------------ | --------- | ------------------------------ |
-| Excess Count | Font Size | $scale.dimension.font-size-400 |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | --------- | ------------------------------ |
-| Excess Count | Font Size | $scale.dimension.font-size-500 |
-
-## 디자인 결정 (Layout)
-
-### Size=Xxlarge
-
-| Part | Attribute | Value |
-| ----- | --------- | ----- |
-| Group | Gap | -16pt |
-
-### Size=Xlarge
-
-| Part | Attribute | Value |
-| ----- | --------- | ----- |
-| Group | Gap | -13pt |
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ----- | --------- | ----- |
-| Group | Gap | -10pt |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ----- | --------- | ----- |
-| Group | Gap | -8pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ----- | --------- | ----- |
-| Group | Gap | -6pt |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ----- | --------- | ----- |
-| Group | Gap | -5pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ----- | --------- | ----- |
-| Group | Gap | -4pt |
diff --git a/docs/content/component/avatar-group/thumbnail.png b/docs/content/component/avatar-group/thumbnail.png
deleted file mode 100644
index c59cd054b..000000000
Binary files a/docs/content/component/avatar-group/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/avatar-group/usage.mdx b/docs/content/component/avatar-group/usage.mdx
deleted file mode 100644
index 9b0fe105b..000000000
--- a/docs/content/component/avatar-group/usage.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
----
-slug: /component/avatar-group/usage
----
-
-## 구조도
-
-
-
-1. Group
-2. Avatar
-3. Excess
-4. Excess Count
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- medium이 가장 보편적으로 사용되며, 페이지 내의 아바타 그룹이 가진 중요도와
- 시각적 균형에 맞게 적절하게 사용합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----- | ------------------------------------------------------ | ------ |
-| size | xxsmall, xsmall, small, medium, large, xlarge, xxlarge | medium |
-| limit | number | |
-
-## 상호작용
-
-Working In Progress
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/avatar/avatar-options-image.png b/docs/content/component/avatar/avatar-options-image.png
deleted file mode 100644
index 3ab6396a2..000000000
Binary files a/docs/content/component/avatar/avatar-options-image.png and /dev/null differ
diff --git a/docs/content/component/avatar/avatar-options-size.png b/docs/content/component/avatar/avatar-options-size.png
deleted file mode 100644
index ea982af82..000000000
Binary files a/docs/content/component/avatar/avatar-options-size.png and /dev/null differ
diff --git a/docs/content/component/avatar/avatar-style-anatomy.png b/docs/content/component/avatar/avatar-style-anatomy.png
deleted file mode 100644
index 8924916a4..000000000
Binary files a/docs/content/component/avatar/avatar-style-anatomy.png and /dev/null differ
diff --git a/docs/content/component/avatar/component-meta.json b/docs/content/component/avatar/component-meta.json
deleted file mode 100644
index a842dc860..000000000
--- a/docs/content/component/avatar/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Avatar",
- "description": "프로필 사진 또는 대체 이미지를 통해 사용자를 표현합니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Avatars",
- "primitive": "../../primitive/avatar/primitive-meta.json",
- "platform": {
- "ios": {
- "status": "todo",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "todo",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-avatars-avatar--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=21792-42636&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-avatars-avatar--basic&viewMode=story",
- "height": "100px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/avatar/overview.mdx b/docs/content/component/avatar/overview.mdx
deleted file mode 100644
index cafa0bf1c..000000000
--- a/docs/content/component/avatar/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/avatar/overview
----
diff --git a/docs/content/component/avatar/style.mdx b/docs/content/component/avatar/style.mdx
deleted file mode 100644
index ddcd2b1ee..000000000
--- a/docs/content/component/avatar/style.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-slug: /component/avatar/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Image - Primitive.Image
-3. Fallback - Primitive.Fallback
-4. Badge
-5. Badge Icon
-
-## Visual Options
-
-| Property | Value | Description |
-| ---------- | ------------------------------------------------------ | ----------- |
-| size | xxsmall, xsmall, small, medium, large, xlarge, xxlarge | |
-| image | Image | |
-| fallback | Image | |
-| badge icon | Image | |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | ------------------------------- |
-| loading | load = loading |
-| loaded | load = loaded |
-| fallback | load = fallback OR load = error |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ----- | ------------- | -------------------------- |
-| Root | Outline Color | $scale.color.gray-alpha-50 |
-| Badge | Color | $scale.color.gray-00 |
-
-## 디자인 결정 (Layout)
-
-### Size=Xxlarge
-
-| Part | Attribute | Value |
-| ----- | ------------- | ----- |
-| Root | Size | 96pt |
-| | Corner Radius | 100% |
-| Badge | Size | 32pt |
-
-### Size=Xlarge
-
-| Part | Attribute | Value |
-| ----- | ------------- | ----- |
-| Root | Size | 80pt |
-| | Corner Radius | 100% |
-| Badge | Size | 24pt |
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ----- | ------------- | ----- |
-| Root | Size | 64pt |
-| | Corner Radius | 100% |
-| Badge | Size | 24pt |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ----- | ------------- | ----- |
-| Root | Size | 48pt |
-| | Corner Radius | 100% |
-| Badge | Size | 24pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ----- | ------------- | ----- |
-| Root | Size | 36pt |
-| | Corner Radius | 100% |
-| Badge | Size | 20pt |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ----- | ------------- | ----- |
-| Root | Size | 24pt |
-| | Corner Radius | 100% |
-| Badge | Size | 12pt |
-
-### Size=Xxsmall
-
-| Part | Attribute | Value |
-| ----- | ------------- | ----- |
-| Root | Size | 20pt |
-| | Corner Radius | 100% |
-| Badge | Size | 10pt |
diff --git a/docs/content/component/avatar/thumbnail.png b/docs/content/component/avatar/thumbnail.png
deleted file mode 100644
index e4c37a6bd..000000000
Binary files a/docs/content/component/avatar/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/avatar/usage.mdx b/docs/content/component/avatar/usage.mdx
deleted file mode 100644
index b28bba71c..000000000
--- a/docs/content/component/avatar/usage.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-slug: /component/avatar/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Image
-3. Fallback
-4. Badge
-5. Badge Icon
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Avatar는 xxsmall, xsmall, small, medium, large, xlarge, xxlarge 7개의
- 사이즈를 가질 수 있습니다. 중요도와 시각적 균형에 맞게 사이즈를
- 사용합니다.
-
-
-
-
-
-
- 
-
-
- Image
-
- Avatar는 사용자가 업로드한 이미지를 표현합니다. 이미지가 없을 경우
- fallback 이미지를 표현합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| -------------- | ------------------------------------------------------ | ------ | ---- |
-| size | xxsmall, xsmall, small, medium, large, xlarge, xxlarge | medium | |
-| image | Image | | |
-| fallback | Image | | |
-| badge icon | Image | | |
-| fallback delay | true, false | 100ms | |
-
-## 상호작용
-
-Working In Progress
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/bottom-sheet/anatomy.png b/docs/content/component/bottom-sheet/anatomy.png
deleted file mode 100644
index c19af0b5b..000000000
Binary files a/docs/content/component/bottom-sheet/anatomy.png and /dev/null differ
diff --git a/docs/content/component/bottom-sheet/component-meta.json b/docs/content/component/bottom-sheet/component-meta.json
deleted file mode 100644
index 1606be93f..000000000
--- a/docs/content/component/bottom-sheet/component-meta.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Bottom Sheet",
- "description": "화면 하단에 고정된 보충 콘텐츠가 포함된 표면 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "platform": {
- "ios": {
- "status": "todo",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "todo",
- "path": ""
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=33160-40315&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "in-progress",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/bottom-sheet/overview.mdx b/docs/content/component/bottom-sheet/overview.mdx
deleted file mode 100644
index 61a0e0d5f..000000000
--- a/docs/content/component/bottom-sheet/overview.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
----
-slug: /component/bottom-sheet/overview
----
-
-
diff --git a/docs/content/component/bottom-sheet/style.mdx b/docs/content/component/bottom-sheet/style.mdx
deleted file mode 100644
index 0e2af9564..000000000
--- a/docs/content/component/bottom-sheet/style.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-slug: /component/bottom-sheet/style
----
-
-## Anatomy
-
-
-
-1. Backdrop - Primitive.Backdrop
-2. Container - Primitive.Container
-3. Header
-4. Title - Primitive.Title
-5. Description - Primitive.Description
-6. Content
-7. Close Button - Primitive.CloseButton
-8. Action Button
-
-## Visual Options
-
-| Property | Value |
-| ------------ | ------------- |
-| header align | start, center |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ------------ | --------- | ----------------------------- |
-| Container | Color | $semantic.color.paper-default |
-| Backdrop | Color | $semantic.color.overlay-dim |
-| Close Button | Color | $scale.color.gray-900 |
-| Title | Color | $scale.color.gray-900 |
-| Description | Color | $scale.color.gray-900 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----------- | ---------- | ----------------------------------- |
-| Title | Typography | $semantic.typography.label3-bold |
-| Description | Typography | $semantic.typography.label3-regular |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ------------------- | ------------------ | ----- |
-| Container | Max Height | 375pt |
-| | Corder Radius Top | 20pt |
-| Title / Description | Vertical Spacing | 6pt |
-| Header / Content | Vertical Spacing | 16pt |
-| Close Button | Size | 24pt |
-
-### header align = start
-
-| Part | Attribute | Value |
-| ------ | ---------- | ----- |
-| Header | Text Align | Start |
-
-### header align = center
-
-| Part | Attribute | Value |
-| ------ | ---------- | ------ |
-| Header | Text Align | Center |
-
-## 디자인 결정 (Motion)
-
-| Part | Attribute | Value |
-| --------- | --------------- | ----- |
-| Container | Duration | TBD |
-| | Timing Function | TBD |
diff --git a/docs/content/component/bottom-sheet/thumbnail.png b/docs/content/component/bottom-sheet/thumbnail.png
deleted file mode 100644
index ca4e61e4c..000000000
Binary files a/docs/content/component/bottom-sheet/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/bottom-sheet/usage.mdx b/docs/content/component/bottom-sheet/usage.mdx
deleted file mode 100644
index b52480b64..000000000
--- a/docs/content/component/bottom-sheet/usage.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-slug: /component/bottom-sheet/usage
----
-
-## 구조도
-
-
-
-1. Backdrop
-2. Container
-3. Header
-4. Title
-5. Description
-6. Content
-7. Close Button
-8. Action Button
-
-## 옵션
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ------------ | ------------- | ------ | ---- |
-| is open | false, true | false | |
-| header align | start, center | start | |
-
-## 상호작용
-
-Working In Progress
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/box-button/anatomy.png b/docs/content/component/box-button/anatomy.png
deleted file mode 100644
index 8de24db20..000000000
Binary files a/docs/content/component/box-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-click-touch-control-1.png b/docs/content/component/box-button/boxbutton-click-touch-control-1.png
deleted file mode 100644
index 24620a1a6..000000000
Binary files a/docs/content/component/box-button/boxbutton-click-touch-control-1.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-click-touch-control-2.png b/docs/content/component/box-button/boxbutton-click-touch-control-2.png
deleted file mode 100644
index cd26b2d7b..000000000
Binary files a/docs/content/component/box-button/boxbutton-click-touch-control-2.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-click-touch-control-3.png b/docs/content/component/box-button/boxbutton-click-touch-control-3.png
deleted file mode 100644
index ba88a816a..000000000
Binary files a/docs/content/component/box-button/boxbutton-click-touch-control-3.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-click-touch-control-4.png b/docs/content/component/box-button/boxbutton-click-touch-control-4.png
deleted file mode 100644
index 4b2f3828c..000000000
Binary files a/docs/content/component/box-button/boxbutton-click-touch-control-4.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-1.png b/docs/content/component/box-button/boxbutton-guideline-1.png
deleted file mode 100644
index 89a9f1401..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-1.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-2.png b/docs/content/component/box-button/boxbutton-guideline-2.png
deleted file mode 100644
index 5607a2635..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-2.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-3.png b/docs/content/component/box-button/boxbutton-guideline-3.png
deleted file mode 100644
index e6aa8138c..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-3.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-4.png b/docs/content/component/box-button/boxbutton-guideline-4.png
deleted file mode 100644
index ceef7f664..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-4.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-5.png b/docs/content/component/box-button/boxbutton-guideline-5.png
deleted file mode 100644
index 27a5dd8eb..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-5.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-do-1.png b/docs/content/component/box-button/boxbutton-guideline-do-1.png
deleted file mode 100644
index 88f7617a9..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-do-1.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-do-2.png b/docs/content/component/box-button/boxbutton-guideline-do-2.png
deleted file mode 100644
index 7b8810914..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-do-2.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-do-3.png b/docs/content/component/box-button/boxbutton-guideline-do-3.png
deleted file mode 100644
index 62e38db66..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-do-3.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-do-4.png b/docs/content/component/box-button/boxbutton-guideline-do-4.png
deleted file mode 100644
index bc13e581c..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-do-4.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-dont-1.png b/docs/content/component/box-button/boxbutton-guideline-dont-1.png
deleted file mode 100644
index ee5f243d5..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-dont-1.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-dont-2.png b/docs/content/component/box-button/boxbutton-guideline-dont-2.png
deleted file mode 100644
index 50d028e3b..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-dont-2.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-dont-3.png b/docs/content/component/box-button/boxbutton-guideline-dont-3.png
deleted file mode 100644
index 898f65768..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-dont-3.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-guideline-dont-4.png b/docs/content/component/box-button/boxbutton-guideline-dont-4.png
deleted file mode 100644
index 5d5156961..000000000
Binary files a/docs/content/component/box-button/boxbutton-guideline-dont-4.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-keyboard-control-1.png b/docs/content/component/box-button/boxbutton-keyboard-control-1.png
deleted file mode 100644
index d44455eba..000000000
Binary files a/docs/content/component/box-button/boxbutton-keyboard-control-1.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-keyboard-control-2.png b/docs/content/component/box-button/boxbutton-keyboard-control-2.png
deleted file mode 100644
index a408c82c6..000000000
Binary files a/docs/content/component/box-button/boxbutton-keyboard-control-2.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-keyboard-control-3.png b/docs/content/component/box-button/boxbutton-keyboard-control-3.png
deleted file mode 100644
index f34aca9d3..000000000
Binary files a/docs/content/component/box-button/boxbutton-keyboard-control-3.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-max-width-1.png b/docs/content/component/box-button/boxbutton-max-width-1.png
deleted file mode 100644
index e172c8922..000000000
Binary files a/docs/content/component/box-button/boxbutton-max-width-1.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-max-width-2.png b/docs/content/component/box-button/boxbutton-max-width-2.png
deleted file mode 100644
index d0f7ad53a..000000000
Binary files a/docs/content/component/box-button/boxbutton-max-width-2.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-min-width.png b/docs/content/component/box-button/boxbutton-min-width.png
deleted file mode 100644
index 5fd6a0119..000000000
Binary files a/docs/content/component/box-button/boxbutton-min-width.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-options-danger.png b/docs/content/component/box-button/boxbutton-options-danger.png
deleted file mode 100644
index a0f43867e..000000000
Binary files a/docs/content/component/box-button/boxbutton-options-danger.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-options-disabled.png b/docs/content/component/box-button/boxbutton-options-disabled.png
deleted file mode 100644
index cde12943b..000000000
Binary files a/docs/content/component/box-button/boxbutton-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-options-icon.png b/docs/content/component/box-button/boxbutton-options-icon.png
deleted file mode 100644
index a821641d5..000000000
Binary files a/docs/content/component/box-button/boxbutton-options-icon.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-options-primary.png b/docs/content/component/box-button/boxbutton-options-primary.png
deleted file mode 100644
index 4c919dcea..000000000
Binary files a/docs/content/component/box-button/boxbutton-options-primary.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-options-prioity.png b/docs/content/component/box-button/boxbutton-options-prioity.png
deleted file mode 100644
index 3e285c64d..000000000
Binary files a/docs/content/component/box-button/boxbutton-options-prioity.png and /dev/null differ
diff --git a/docs/content/component/box-button/boxbutton-options-size.png b/docs/content/component/box-button/boxbutton-options-size.png
deleted file mode 100644
index 96d4fb07e..000000000
Binary files a/docs/content/component/box-button/boxbutton-options-size.png and /dev/null differ
diff --git a/docs/content/component/box-button/component-meta.json b/docs/content/component/box-button/component-meta.json
deleted file mode 100644
index 897c89867..000000000
--- a/docs/content/component/box-button/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Box Button",
- "description": "누르면 액션을 일으키는 박스 모양의 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/button/primitive-meta.json",
- "group": "Buttons",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "KarrotBoxButton",
- "path": "seedcatalog://components/box-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-buttons-boxbutton--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?node-id=45662%3A33412&t=0VmTcEW0PAehBNQf-11"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-buttons-boxbutton--basic&viewMode=story",
- "height": "85px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/box-button/overview.mdx b/docs/content/component/box-button/overview.mdx
deleted file mode 100644
index 9702e3c74..000000000
--- a/docs/content/component/box-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/box-button/overview
----
diff --git a/docs/content/component/box-button/style.mdx b/docs/content/component/box-button/style.mdx
deleted file mode 100644
index 0f2927dec..000000000
--- a/docs/content/component/box-button/style.mdx
+++ /dev/null
@@ -1,212 +0,0 @@
----
-slug: /component/box-button/style
----
-
-## Anatomy
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - Primitive.Root
-2. Label : Button에 대한 정보를 전달하는 라벨 - Primitive.Label
-3. Prefix Icon : Button에 대한 정보를 전달하는 아이콘
-4. Suffix Icon
-
-## Visual Options
-
-| Property | Value |
-| ----------- | --------------------------------------- |
-| size | xsmall, small, medium, large, xlarge |
-| variant | primary, primary-low, secondary, danger |
-| prefix icon | Icon |
-| suffix icon | Icon |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| hovered | isDisabled = False, isPressed = False, isHovered = True |
-| focused | isDisabled = False, isPressed = False, isFocused = True |
-| pressed | isDisabled = False, isPressed = True |
-| disabled | isDisabled = True |
-
-## 디자인 결정 (Color)
-
-### Variant=Primary
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | ------------------------------- |
-| Enabled | Root | Color | $semantic.color.primary |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Hovered | Root | Color | $semantic.color.primary-hover |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Pressed | Root | Color | $semantic.color.primary-pressed |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Disabled | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-### Variant=Primary Low
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | ----------------------------------- |
-| Enabled | Root | Color | $semantic.color.primary-low |
-| | Label, Icon | Color | $semantic.color.primary |
-| Hovered | Root | Color | $semantic.color.primary-low-hover |
-| | Label, Icon | Color | $semantic.color.primary |
-| Pressed | Root | Color | $semantic.color.primary-low-pressed |
-| | Label, Icon | Color | $semantic.color.primary |
-| Disabled | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-### Variant=Secondary
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | --------------------- |
-| Enabled | Root | Color | $scale.color.gray-100 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Hovered | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Pressed | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Disabled | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-### Variant=Danger
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | -------------------------- |
-| Enabled | Root | Color | $semantic.color.danger |
-| | Label, Icon | Color | $static.color.static-white |
-| Hovered | Root | Color | $scale.color.red-400 |
-| | Label, Icon | Color | $static.color.static-white |
-| Pressed | Root | Color | $scale.color.red-400 |
-| | Label, Icon | Color | $static.color.static-white |
-| Disabled | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-## 디자인 결정 (Typography)
-
-### Size=Xlarge
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label1-bold |
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label5-bold |
-
-## 디자인 결정 (Layout)
-
-### Size=Xlarge
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 72pt |
-| | Height | 52pt |
-| | Horizontal Padding | 22pt |
-| | Corner Radius | 6pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 18pt |
-| Suffix Icon | Size | 16pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 66pt |
-| | Height | 48pt |
-| | Horizontal Padding | 20pt |
-| | Corner Radius | 6pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 16pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 58pt |
-| | Height | 40pt |
-| | Horizontal Padding | 16pt |
-| | Corner Radius | 6pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 54pt |
-| | Height | 36pt |
-| | Horizontal Padding | 14pt |
-| | Corner Radius | 4pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 40pt |
-| | Height | 32pt |
-| | Horizontal Padding | 10pt |
-| | Corner Radius | 4pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 12pt |
-| Suffix Icon | Size | 12pt |
-| Label / Icon | Padding | 2pt |
-
-## 디자인 결정 (Focus)
-
-| State | Part | Attribute | Value |
-| ------- | ---- | ------------- | --------------------- |
-| Focused | Root | Outline Color | $scale.color.blue-600 |
-| | | Outline Width | 2pt |
-
-## 디자인 결정 (Motion)
-
-| State | Part | Property | Attribute | Value |
-| ----------- | ---- | --------- | --------------- | -------------------------------------- |
-| Pressed In | Root | transform | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| Pressed Out | Root | transform | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-
-### State=Pressed In
-
-| Part | Attribute | From | To |
-| ---- | --------- | -------- | ----------- |
-| Root | transform | scale(1) | scale(0.95) |
-
-### State=Pressed Out
-
-| Part | Attribute | From | To |
-| ---- | --------- | ----------- | -------- |
-| Root | transform | scale(0.95) | scale(1) |
diff --git a/docs/content/component/box-button/thumbnail.png b/docs/content/component/box-button/thumbnail.png
deleted file mode 100644
index 686c22b27..000000000
Binary files a/docs/content/component/box-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/box-button/usage.mdx b/docs/content/component/box-button/usage.mdx
deleted file mode 100644
index 17fad9e0d..000000000
--- a/docs/content/component/box-button/usage.mdx
+++ /dev/null
@@ -1,307 +0,0 @@
----
-slug: /component/box-button/usage
----
-
-## 구조도
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역
-2. Label : Button에 대한 정보를 전달하는 라벨
-3. Prefix Icon : Button에 대한 정보를 전달하는 아이콘
-4. Suffix Icon
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Box Button은 xsmall, small, medium, large, xlarge 5개의 사이즈를 가질 수
- 있습니다. medium이 가장 보편적으로 사용되며, 페이지 내의 중요도와 시각적
- 균형에 맞게 적절하게 사용합니다.
-
-
-
-
-
-
- 
-
-
- Variant
-
- Variant의 중요도는 Primary로 갈수록 높아지며, Secondary로 갈수록
- 낮아집니다. 화면 내에서 액션의 중요도에 따라 버튼의 variant를 다르게
- 사용합니다.
-
-
-
-
-
-
- 
-
-
- Primary variant
-
- Primary variant는 강한 강조나 중요한 역할을 하는 버튼일 경우에 사용합니다.
- Primary 버튼은 한 화면에서 너무 많이 사용되지 않도록 제한적으로
- 사용해야합니다. 또한, Primary 버튼은 단독으로 하단에 고정하여 사용할 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Danger variant
-
- Danger variant는 유저에게 위험 요소에 대한 경고를 전달할 때 사용합니다. 이
- 버튼으로 인해 파괴적 변화나 부정적인 행동이 일어날 수 있다는 시각적 인지를
- 제공합니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Box Button이 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-
-
- 
-
-
- Icon
-
- Prefix Icon으로 Label을 보조하기 위한 모노크롬 아이콘을 사용할 수
- 있습니다. Suffix Icon으로 Chevron을 사용해 버튼의 상호작용을 강조할 수
- 있습니다. 동시 사용은 권장하지 않습니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | --------------------------------------- | ------- |
-| size | xsmall, small, medium, large, xlarge | medium |
-| variant | primary, primary-low, secondary, danger | primary |
-| is disabled | true, false | false |
-| prefix icon | Icon | |
-| suffix icon | Icon | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Button과 상호작용할 수 있습니다.
-
-
-
-
-
- 
-
-
- PC 환경에서 버튼에 Hover 할 경우 커서가 포인터 모양으로 바뀝니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Space 또는 Enter 키를 통해
- Button의 액션을 실행시킬 수 있습니다.
-
-
-
-### Max Width
-
-
-
- 
-
-
- Box Button은 모바일 해상도 내에서 좌우 16px 영역을 침범하지 않아야 합니다.
-
-
-
-### Overflow
-
-
-
- 
-
-
- Box Button의 Label은 1줄을 초과하지 않도록 작성되어야 합니다.
-
-
-
-## 가이드라인
-
-
-
- 
-
-
- Primary, Primary-low
-
- Box Button이 나란히 나열되는 경우, 액션 버튼의 우선순위를 고려하여
- 배치합니다. Primary는 현재 페이지에서 가장 중요한 액션을 수행하는
- 버튼이며, Primary low는 주로 서브 액션을 수행하는 버튼입니다.
-
-
-
-
-
-
- 
-
-
- Secondary, Primary
-
- Box Button이 나란히 나열되는 경우, 액션 버튼의 우선순위를 고려하여
- 배치합니다.
-
-
-
-
-
-
- 
-
-
- Secondary, Primary
-
- Box Button이 나란히 나열되는 경우, 액션의 중요도 차이가 큰 경우 너비
- 비율을 조정하여 사용하기를 권장합니다.
-
-
-
-
-
-
- 
-
-
- Secondary
-
- 동일한 위계의 서브 액션이 나열되는 경우, Secondary 사용을 권장합니다.
-
-
-
-
-
-
- 
-
-
- Prefix Icon
-
- Label을 보조하는 아이콘을 Prefix에 사용할 수 있습니다. 적절한 아이콘
- 배치는 유저가 빠르고 쉽게 Button의 기능을 이해할 수 있도록 돕습니다.
-
-
-
-
-
-
-### Do / Don't
-
-
-
-
-
- 
-
- Box Button 형태를 임의로 변형하여 Full-Width 타입으로 사용하지 않습니다.
-
-
-
-
- 
-
-
- 임의로 버튼의 컬러를 바꾸거나 폰트 사이즈를 조정하여 사용하지 않습니다.
-
-
-
-
-
-
-
-
- 
-
- 테마에 관계없이 Primary 위 Label은 static-white를 사용합니다.
-
-
-
-
- 
-
-
- 다크 테마에서 Primary 위 Label의 컬러는 반전되지 않습니다.
-
-
-
-
-
-
-
-
- 
- Label을 명확하고 간결하게 작성합니다.
-
-
-
- 
-
-
- Box Button에 불필요한 이모지, 아이콘을 사용하지 않습니다. 또는 구어체나
- 서술형을 사용하지 않습니다.
-
-
-
-
-
-
-
-
- 
- Suffix에는 Chevron Icon만 사용할 수 있습니다.
-
-
-
- 
-
- Suffix에는 Chevron이 아닌 Icon을 사용지 않습니다.
-
-
diff --git a/docs/content/component/box-toggle-button/anatomy.png b/docs/content/component/box-toggle-button/anatomy.png
deleted file mode 100644
index c0716223a..000000000
Binary files a/docs/content/component/box-toggle-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-click-touch-control.png b/docs/content/component/box-toggle-button/boxtogglebutton-click-touch-control.png
deleted file mode 100644
index 52300c919..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-click-touch-control.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-1.png b/docs/content/component/box-toggle-button/boxtogglebutton-guideline-1.png
deleted file mode 100644
index 65fdbeabf..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-1.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-2.png b/docs/content/component/box-toggle-button/boxtogglebutton-guideline-2.png
deleted file mode 100644
index 11a59e139..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-2.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-dont-1.png b/docs/content/component/box-toggle-button/boxtogglebutton-guideline-dont-1.png
deleted file mode 100644
index e7f985e3d..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-dont-1.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-dont-2.png b/docs/content/component/box-toggle-button/boxtogglebutton-guideline-dont-2.png
deleted file mode 100644
index 86cac5ed5..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-guideline-dont-2.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-1.png b/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-1.png
deleted file mode 100644
index ac95957ef..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-1.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-2.png b/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-2.png
deleted file mode 100644
index f147891c0..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-2.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-3.png b/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-3.png
deleted file mode 100644
index 4f4467bc4..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-keyboard-control-3.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-max-width-1.png b/docs/content/component/box-toggle-button/boxtogglebutton-max-width-1.png
deleted file mode 100644
index 21c900c60..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-max-width-1.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-max-width-2.png b/docs/content/component/box-toggle-button/boxtogglebutton-max-width-2.png
deleted file mode 100644
index 421378cb2..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-max-width-2.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-min-width.png b/docs/content/component/box-toggle-button/boxtogglebutton-min-width.png
deleted file mode 100644
index 0726504e1..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-min-width.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-options-disabled.png b/docs/content/component/box-toggle-button/boxtogglebutton-options-disabled.png
deleted file mode 100644
index 7bbf059ba..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-options-size.png b/docs/content/component/box-toggle-button/boxtogglebutton-options-size.png
deleted file mode 100644
index 1008fca67..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-options-size.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-options-variants.png b/docs/content/component/box-toggle-button/boxtogglebutton-options-variants.png
deleted file mode 100644
index 24edc8b67..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-options-variants.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-touch-mouse-control-1.png b/docs/content/component/box-toggle-button/boxtogglebutton-touch-mouse-control-1.png
deleted file mode 100644
index d4df7cdd5..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-touch-mouse-control-1.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/boxtogglebutton-touch-mouse-control-2.png b/docs/content/component/box-toggle-button/boxtogglebutton-touch-mouse-control-2.png
deleted file mode 100644
index 83d466585..000000000
Binary files a/docs/content/component/box-toggle-button/boxtogglebutton-touch-mouse-control-2.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/component-meta.json b/docs/content/component/box-toggle-button/component-meta.json
deleted file mode 100644
index 65ef8312a..000000000
--- a/docs/content/component/box-toggle-button/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Box Toggle Button",
- "description": "선택 여부를 켜거나 끌 수 있는 박스 모양의 버튼입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/button/primitive-meta.json",
- "group": "Buttons",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "KarrotBoxToggleButton",
- "path": "seedcatalog://components/box-toggle-button"
- },
- "android": {
- "status": "todo",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-buttons-boxtogglebutton--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?node-id=45669%3A35056&t=0VmTcEW0PAehBNQf-11"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-buttons-boxtogglebutton--basic&viewMode=story",
- "height": "85px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/box-toggle-button/overview.mdx b/docs/content/component/box-toggle-button/overview.mdx
deleted file mode 100644
index f3627279b..000000000
--- a/docs/content/component/box-toggle-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/box-toggle-button/overview
----
diff --git a/docs/content/component/box-toggle-button/style.mdx b/docs/content/component/box-toggle-button/style.mdx
deleted file mode 100644
index 7d9cfc0a7..000000000
--- a/docs/content/component/box-toggle-button/style.mdx
+++ /dev/null
@@ -1,212 +0,0 @@
----
-slug: /component/box-toggle-button/style
----
-
-## Anatomy
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - Primitive.Root
-2. Label : Button에 대한 정보를 전달하는 라벨 - Primitive.Label
-3. Prefix Icon : Button에 대한 정보를 전달하는 아이콘
-4. Suffix Icon
-
-## Visual Options
-
-| Property | Value |
-| ----------- | --------------------------------------- |
-| size | xsmall, small, medium, large |
-| variant | primary, primary-low, secondary, danger |
-| prefix icon | Icon |
-| suffix icon | Icon |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| hovered | isDisabled = False, isPressed = False, isHovered = True |
-| focused | isDisabled = False, isPressed = False, isFocused = True |
-| pressed | isDisabled = False, isPressed = True |
-| disabled | isDisabled = True |
-
-| State | Condition |
-| ---------- | ------------------ |
-| unselected | isSelected = false |
-| selected | isSelected = true |
-
-## 디자인 결정 (Color)
-
-### Variant=Primary
-
-| State | Part | Attribute | Value |
-| -------------------- | ----------- | --------- | ------------------------------- |
-| Enabled, Unselected | Root | Color | $semantic.color.primary |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Hovered, Unselected | Root | Color | $semantic.color.primary-hover |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Pressed, Unselected | Root | Color | $semantic.color.primary-pressed |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Disabled, Unselected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-| Enabled, Selected | Root | Color | $semantic.color.secondary-low |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Hovered, Selected | Root | Color | $scale.color.gray-200 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Pressed, Selected | Root | Color | $scale.color.gray-200 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Disabled, Selected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-### Variant=Primary Low
-
-| State | Part | Attribute | Value |
-| -------------------- | ----------- | --------- | ----------------------------------- |
-| Enabled, Unselected | Root | Color | $semantic.color.primary-low |
-| | Label, Icon | Color | $semantic.color.primary |
-| Hovered, Unselected | Root | Color | $semantic.color.primary-low-hover |
-| | Label, Icon | Color | $semantic.color.primary |
-| Pressed, Unselected | Root | Color | $semantic.color.primary-low-pressed |
-| | Label, Icon | Color | $semantic.color.primary |
-| Disabled, Unselected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-| Enabled, Selected | Root | Color | $semantic.color.secondary-low |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Hovered, Selected | Root | Color | $scale.color.gray-200 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Pressed, Selected | Root | Color | $scale.color.gray-200 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Disabled, Selected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-### Variant=Secondary
-
-| State | Part | Attribute | Value |
-| -------------------- | ----------- | --------- | ----------------------------------- |
-| Enabled, Unselected | Root | Color | $scale.color.gray-100 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Hovered, Unselected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Pressed, Unselected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Disabled, Unselected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-| Enabled, Selected | Root | Color | $semantic.color.primary-low |
-| | Label, Icon | Color | $semantic.color.primary |
-| Hovered, Selected | Root | Color | $semantic.color.primary-low-hover |
-| | Label, Icon | Color | $semantic.color.primary |
-| Pressed, Selected | Root | Color | $semantic.color.primary-low-pressed |
-| | Label, Icon | Color | $semantic.color.primary |
-| Disabled, Selected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-## 디자인 결정 (Typography)
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label5-bold |
-
-## 디자인 결정 (Layout)
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 66pt |
-| | Height | 48pt |
-| | Horizontal Padding | 20pt |
-| | Corner Radius | 6pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 16pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 58pt |
-| | Height | 40pt |
-| | Horizontal Padding | 16pt |
-| | Corner Radius | 6pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 54pt |
-| | Height | 36pt |
-| | Horizontal Padding | 14pt |
-| | Corner Radius | 4pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 40pt |
-| | Height | 32pt |
-| | Horizontal Padding | 10pt |
-| | Corner Radius | 4pt |
-| Label | Text Align | Center |
-| Prefix Icon | Size | 12pt |
-| Suffix Icon | Size | 12pt |
-| Label / Icon | Padding | 2pt |
-
-## 디자인 결정 (Focus)
-
-| State | Part | Attribute | Value |
-| ------- | ---- | ------------- | --------------------- |
-| Focused | Root | Outline Color | $scale.color.blue-600 |
-| | | Outline Width | 2pt |
-
-## 디자인 결정 (Motion)
-
-| State | Part | Property | Attribute | Value |
-| ----------- | ---- | --------- | --------------- | -------------------------------------- |
-| Pressed In | Root | transform | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| Pressed Out | Root | transform | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| \* | Root | color | Duration | 50ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| | | | Delay | 50ms |
-
-### State=Pressed In
-
-| Part | Attribute | From | To |
-| ---- | --------- | -------- | ----------- |
-| Root | transform | scale(1) | scale(0.95) |
-
-### State=Pressed Out
-
-| Part | Attribute | From | To |
-| ---- | --------- | ----------- | -------- |
-| Root | transform | scale(0.95) | scale(1) |
diff --git a/docs/content/component/box-toggle-button/thumbnail.png b/docs/content/component/box-toggle-button/thumbnail.png
deleted file mode 100644
index 7fed2ea9f..000000000
Binary files a/docs/content/component/box-toggle-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/box-toggle-button/usage.mdx b/docs/content/component/box-toggle-button/usage.mdx
deleted file mode 100644
index 31aca2716..000000000
--- a/docs/content/component/box-toggle-button/usage.mdx
+++ /dev/null
@@ -1,196 +0,0 @@
----
-slug: /component/box-toggle-button/usage
----
-
-## 구조도
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역
-2. Label : Button에 대한 정보를 전달하는 라벨
-3. Prefix Icon : Button에 대한 정보를 전달하는 아이콘
-4. Suffix Icon
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Box Toggle Button은 xsmall, small, medium, large 4개의 사이즈를 가질 수
- 있습니다. medium이 가장 보편적으로 사용되며, 페이지 내의 중요도와 시각적
- 균형에 맞게 적절하게 사용합니다.
-
-
-
-
-
-
- 
-
-
- Variant
-
- Box Toggle Button은 primary, primary-low, secondary 3개의 스타일 옵션을
- 가질 수 있습니다. 기본값은 primary입니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Box Toggle Button이 존재하지만 지금은 사용할 수 없는
- 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이
- 가능할 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | ------------------------------- | ------- |
-| size | xsmall, small, medium, large | medium |
-| variant | primary, primary-low, secondary | primary |
-| is disabled | true, false | false |
-| prefix icon | Icon | |
-| suffix icon | Icon | |
-
-## 상호작용
-
-### 터치 / 마우스 상호작용
-
-
-
- 
-
-
- 터치 혹은 마우스 클릭으로 Box Toggle Button과 상호작용할 수 있는 영역입니다.
-
-
-
-
-
- 
-
-
- PC 환경에서 버튼에 Hover시 커서가 포인터 모양으로 변경됩니다.
-
-
-
-
-
- 
-
-
- Loading / Disabled 상태인 경우 상호작용이 불가능합니다.
-
-
-
-### 키보드 상호작용
-
-
-
- 
-
-
- Space 또는 Enter 키를 통해
- selected 상태를 전환할 수 있습니다.
-
-
-
-
-
- 
-
-
- Loading
-
- Loading 상태인 경우 Focus는 가능하지만 상호작용할 수 없습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태인 경우 상호작용할 수 없습니다.
-
-
-
-
-## 가이드라인
-
-
-
- 
-
-
- Selected State
-
- 유저가 Selected State를 명확하게 인지할 수 있도록, Selected variant를
- 올바르게 사용합니다.
-
-
-
-
-
-
- 
-
-
- Label
-
- Box Button이 아닌, Selected 가 가능한 Toggle Button이라는 점을 유저가
- 인지할 수 있도록 Label을 명확하게 작성합니다.
-
-
-
-
-
-
-### Do / Don't
-
-
-
-
-
-
- 
-
-
- Unselected 와 Selected 배리언츠를 올바르게 사용합니다. Selected인 경우
- 해당 State를 잘 나타낼 수 있는 Label 을 사용할 것을 권장합니다.
-
-
-
-
- 
-
-
- Unselected 와 Selected 배리언츠를 반대로 사용하지 않습니다.{" "}
-
-
-
-
-
diff --git a/docs/content/component/callout/anatomy.png b/docs/content/component/callout/anatomy.png
deleted file mode 100644
index 0c8e9cb4d..000000000
Binary files a/docs/content/component/callout/anatomy.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-do-icon.png b/docs/content/component/callout/callout-guideline-do-icon.png
deleted file mode 100644
index d4dc6b801..000000000
Binary files a/docs/content/component/callout/callout-guideline-do-icon.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-do-outline.png b/docs/content/component/callout/callout-guideline-do-outline.png
deleted file mode 100644
index daede1e0c..000000000
Binary files a/docs/content/component/callout/callout-guideline-do-outline.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-do-use.png b/docs/content/component/callout/callout-guideline-do-use.png
deleted file mode 100644
index 730d17ac5..000000000
Binary files a/docs/content/component/callout/callout-guideline-do-use.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-do-variant.png b/docs/content/component/callout/callout-guideline-do-variant.png
deleted file mode 100644
index 7103ccbc9..000000000
Binary files a/docs/content/component/callout/callout-guideline-do-variant.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-dont-icon.png b/docs/content/component/callout/callout-guideline-dont-icon.png
deleted file mode 100644
index 7b41e49bf..000000000
Binary files a/docs/content/component/callout/callout-guideline-dont-icon.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-dont-outline.png b/docs/content/component/callout/callout-guideline-dont-outline.png
deleted file mode 100644
index e529084b5..000000000
Binary files a/docs/content/component/callout/callout-guideline-dont-outline.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-dont-promotion.png b/docs/content/component/callout/callout-guideline-dont-promotion.png
deleted file mode 100644
index 299719731..000000000
Binary files a/docs/content/component/callout/callout-guideline-dont-promotion.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-dont-use.png b/docs/content/component/callout/callout-guideline-dont-use.png
deleted file mode 100644
index 82c85bc05..000000000
Binary files a/docs/content/component/callout/callout-guideline-dont-use.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-dont-variant.png b/docs/content/component/callout/callout-guideline-dont-variant.png
deleted file mode 100644
index d7a9e6a64..000000000
Binary files a/docs/content/component/callout/callout-guideline-dont-variant.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline-short.png b/docs/content/component/callout/callout-guideline-short.png
deleted file mode 100644
index 429b55e2c..000000000
Binary files a/docs/content/component/callout/callout-guideline-short.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-guideline.png b/docs/content/component/callout/callout-guideline.png
deleted file mode 100644
index 410d10e51..000000000
Binary files a/docs/content/component/callout/callout-guideline.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-options-danger.png b/docs/content/component/callout/callout-options-danger.png
deleted file mode 100644
index 2b7ea4d65..000000000
Binary files a/docs/content/component/callout/callout-options-danger.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-options-icon.png b/docs/content/component/callout/callout-options-icon.png
deleted file mode 100644
index 6ec098130..000000000
Binary files a/docs/content/component/callout/callout-options-icon.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-options-info.png b/docs/content/component/callout/callout-options-info.png
deleted file mode 100644
index 09009ce34..000000000
Binary files a/docs/content/component/callout/callout-options-info.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-options-normal.png b/docs/content/component/callout/callout-options-normal.png
deleted file mode 100644
index 0aa996150..000000000
Binary files a/docs/content/component/callout/callout-options-normal.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-options-outline.png b/docs/content/component/callout/callout-options-outline.png
deleted file mode 100644
index ae7562f0d..000000000
Binary files a/docs/content/component/callout/callout-options-outline.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-options-title-description.png b/docs/content/component/callout/callout-options-title-description.png
deleted file mode 100644
index 01e8937af..000000000
Binary files a/docs/content/component/callout/callout-options-title-description.png and /dev/null differ
diff --git a/docs/content/component/callout/callout-options-warning.png b/docs/content/component/callout/callout-options-warning.png
deleted file mode 100644
index 8c198b7da..000000000
Binary files a/docs/content/component/callout/callout-options-warning.png and /dev/null differ
diff --git a/docs/content/component/callout/component-meta.json b/docs/content/component/callout/component-meta.json
deleted file mode 100644
index 98af8e90d..000000000
--- a/docs/content/component/callout/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Callout",
- "description": "사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Callouts",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/callout"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-callouts-callout--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=39212-31981&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-callouts-callout--basic&viewMode=story",
- "height": "110px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/callout/overview.mdx b/docs/content/component/callout/overview.mdx
deleted file mode 100644
index 1ea48d266..000000000
--- a/docs/content/component/callout/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/callout/overview
----
diff --git a/docs/content/component/callout/style.mdx b/docs/content/component/callout/style.mdx
deleted file mode 100644
index 20d2b4111..000000000
--- a/docs/content/component/callout/style.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-slug: /component/callout/style
----
-
-## Anatomy
-
-
-
-1. Root
-2. Icon
-3. Title
-4. Description
-
-## Visual Options
-
-| Property | Value |
-| ----------- | -------------------------------------- |
-| variant | outline, normal, info, warning, danger |
-| title | text |
-| description | text |
-| icon | Icon |
-
-## 디자인 결정 (Color)
-
-### variant=outline
-
-| Part | Attribute | Value |
-| ------------------------ | ------------- | --------------------- |
-| Root | Outline Color | $scale.color.gray-300 |
-| Title, Description, Icon | Color | $scale.color.gray-900 |
-
-### variant=normal
-
-| Part | Attribute | Value |
-| ------------------------ | --------- | --------------------- |
-| Root | Color | $scale.color.gray-100 |
-| Title, Description, Icon | Color | $scale.color.gray-900 |
-
-### variant=info
-
-| Part | Attribute | Value |
-| ------------------------ | --------- | -------------------------- |
-| Root | Color | $scale.color.blue-alpha-50 |
-| Title, Description, Icon | Color | $scale.color.blue-950 |
-
-### variant=warning
-
-| Part | Attribute | Value |
-| ------------------------ | --------- | ---------------------------- |
-| Root | Color | $scale.color.yellow-alpha-50 |
-| Title, Description, Icon | Color | $scale.color.yellow-950 |
-
-### variant=danger
-
-| Part | Attribute | Value |
-| ------------------------ | --------- | ------------------------- |
-| Root | Color | $scale.color.red-alpha-50 |
-| Title, Description, Icon | Color | $scale.color.red-950 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----- | ---------- | ------------------------------------ |
-| Title | Typography | $semantic.typography.body-m2-bold |
-| Label | Typography | $semantic.typography.body-m2-regular |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ------------------ | ------------------ | ----- |
-| Root | Vertical Padding | 14pt |
-| | Horizontal Padding | 16pt |
-| | Corner Radius | 10pt |
-| Icon | Size | 16pt |
-| Icon / Description | Spacing | 8pt |
diff --git a/docs/content/component/callout/thumbnail.png b/docs/content/component/callout/thumbnail.png
deleted file mode 100644
index 64fe53e4b..000000000
Binary files a/docs/content/component/callout/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/callout/usage.mdx b/docs/content/component/callout/usage.mdx
deleted file mode 100644
index 148279aae..000000000
--- a/docs/content/component/callout/usage.mdx
+++ /dev/null
@@ -1,227 +0,0 @@
----
-slug: /component/callout/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Icon
-3. Title
-4. Description
-
-## 옵션
-
-
-
- 
-
-
- Outline
-
- Outline Variant는 안내 및 단순 정보를 전달합니다. Normal Variant보다
- 주목도를 낮추고 싶을 때, 혹은 면분할이 많은 화면에서 다른 gray 토큰과의
- 충돌을 방지하고자 할 때 사용합니다.
-
-
-
-
-
-
- 
-
-
- Normal
-
- Normal Variant는 시스템 안내 및 공지사항을 전달합니다. 특별한 강조나
- 경고가 필요하지 않을 때, 혹은 일상적인 상황을 제공합니다.
-
-
-
-
-
-
- 
-
-
- Info
-
- Info Variant는 특정 기능이나 서비스의 부가 설명을 제공하는 데 사용합니다.
- 이를 통해 유저는 해당 기능에 대한 추가 정보를 얻을 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Warning
-
- Warning Variant는 주로 경고나 주의사항을 전달합니다. 위험 요소가 낮으며
- 즉각적인 변화나 문제가 없는 경우, 조심해야 할 사항을 제공합니다.
-
-
-
-
-
-
- 
-
-
- Danger
-
- Danger Variant는 심각한 위험 상황이나 조심해야 할 사항을 제공합니다.
- 데이터가 삭제될 가능성이 있거나, 오류 상황에도 사용할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Title / Description
-
- Title은 Callout의 내용의 목적이나 핵심 메시지를 강조, 요약하여 전달합니다.
- Description은 유저에게 추가적인 컨텍스트와 부가 설명을 제공합니다.
-
-
-
-
-
-
- 
-
-
- Icon
-
- Icon은 Callout의 내용이나 목적을 시각적으로 나타내고 보조하는 역할을
- 합니다. 유저가 Icon을 통해 어떤 유형의 메시지인지 쉽게 인지할 수 있도록
- 돕습니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | -------------------------------------- | ------ |
-| variant | outline, normal, info, warning, danger | normal |
-| title | text | |
-| description | text | |
-| icon | Icon | |
-
-## 가이드라인
-
-
-
- 
-
-
-
- 필요할 때만, 아껴서 쓰기
-
-
- Callout은 화면에서 많은 면적을 차지하고, 유저의 주의를 끌기 때문에 중요한
- 정보에만 절제하여 사용합니다. 과도한 사용은 Callout의 강조 효과를 약화시킬
- 수 있습니다.
-
-
-
-
-
-
- 
-
-
- 간결한 문구
-
- Description은 2줄 이내로 간결하게 작성하여 유저가 빠르게 내용을 파악할 수
- 있도록 합니다.
-
-
-
-
-### Do / Don't
-
-
-
-
-
- 
-
- Gray 컬러가 많은 화면에서는 Outline Variant를 사용하여 다른 요소와의
- 충돌을 피합니다.
-
-
-
-
- 
-
-
- 면분할이 많은 화면에서의 사용을 주의합니다. 화면의 복잡도를 높여 유저에게
- 혼란을 줄 수 있습니다.
-
-
-
-
-
-
-
- 
-
-
- Sub Title, Description으로 대체 가능한 경우 Callout을 사용하지 않습니다.
-
-
-
-
- 
-
-
- 마케팅 및 프로모션 용도로 사용하지 않습니다. 해당 용도에는 Banner를
- 사용합니다.
-
-
-
-
-
-
- 
-
- 의미에 맞는 Variant를 사용합니다. 각 Variant는 목적에 맞는 컬러를 가지기
- 때문에, 이를 무시하고 사용할 경우 유저에게 혼란을 줄 수 있습니다.
-
-
-
-
- 
-
-
- 시각적인 효과만을 위해 특정 Variant를 사용하지 않습니다. 특히 위험 사항을
- 알리는 Warning과 Danger Variant는 목적에 맞게 유의하여 사용합니다.
-
-
-
-
-
-
-
- 
- Icon 옵션 사용시, 각 Variant의 기본 Icon 사용을 권장합니다.
-
-
-
- 
-
-
- Variant의 의미와 관련 없는 Icon을 사용하지 않습니다. Icon은 유저가
- 메시지의 유형을 쉽게 인지하도록 보조해야 합니다.
-
-
-
diff --git a/docs/content/component/capsule-toggle-button/anatomy.png b/docs/content/component/capsule-toggle-button/anatomy.png
deleted file mode 100644
index 7ea191471..000000000
Binary files a/docs/content/component/capsule-toggle-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-dont-1.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-dont-1.png
deleted file mode 100644
index 4a75d3188..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-dont-1.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-dont-2.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-dont-2.png
deleted file mode 100644
index 5a6860220..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-dont-2.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-guideline.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-guideline.png
deleted file mode 100644
index 60fa625bf..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-guideline.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-1.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-1.png
deleted file mode 100644
index 6469b6ba3..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-1.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-2.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-2.png
deleted file mode 100644
index 979a66ab7..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-2.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-3.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-3.png
deleted file mode 100644
index 7871de774..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-keyboard-control-3.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-max-width-1.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-max-width-1.png
deleted file mode 100644
index 3a7ef14df..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-max-width-1.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-max-width-2.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-max-width-2.png
deleted file mode 100644
index bf0c0eedc..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-max-width-2.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-min-width.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-min-width.png
deleted file mode 100644
index 39bb7b071..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-min-width.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-disabled.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-disabled.png
deleted file mode 100644
index fab334b53..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-loading.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-loading.png
deleted file mode 100644
index 5894e2792..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-loading.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-size.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-size.png
deleted file mode 100644
index 1ece749ff..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-options-size.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-response-control.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-response-control.png
deleted file mode 100644
index bc9ac3119..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-response-control.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-touch-mouse-control-1.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-touch-mouse-control-1.png
deleted file mode 100644
index dba58b2e7..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-touch-mouse-control-1.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/capsuletogglebutton-touch-mouse-control-2.png b/docs/content/component/capsule-toggle-button/capsuletogglebutton-touch-mouse-control-2.png
deleted file mode 100644
index 2094b0cbe..000000000
Binary files a/docs/content/component/capsule-toggle-button/capsuletogglebutton-touch-mouse-control-2.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/component-meta.json b/docs/content/component/capsule-toggle-button/component-meta.json
deleted file mode 100644
index fe724b335..000000000
--- a/docs/content/component/capsule-toggle-button/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Capsule Toggle Button",
- "description": "사용자가 선택 여부를 켜거나 끌 수 있는 버튼 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/button/primitive-meta.json",
- "group": "Buttons",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "KarrotCapsuleToggleButton",
- "path": "seedcatalog://components/capsule-toggle-button"
- },
- "android": {
- "status": "todo",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-buttons-capsuletogglebutton--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?node-id=31072%3A45902&t=0VmTcEW0PAehBNQf-11"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-buttons-capsuletogglebutton--basic&viewMode=story",
- "height": "70px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/capsule-toggle-button/overview.mdx b/docs/content/component/capsule-toggle-button/overview.mdx
deleted file mode 100644
index 93b46f9d4..000000000
--- a/docs/content/component/capsule-toggle-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/capsule-toggle-button/overview
----
diff --git a/docs/content/component/capsule-toggle-button/style.mdx b/docs/content/component/capsule-toggle-button/style.mdx
deleted file mode 100644
index 9cec80915..000000000
--- a/docs/content/component/capsule-toggle-button/style.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-slug: /component/capsule-toggle-button/style
----
-
-## Anatomy
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - Primitive.Root
-2. Label : Button에 대한 정보를 전달하는 라벨 - Primitive.Label
-3. Icon : Button에 대한 정보를 전달하는 아이콘
-
-## Visual Options
-
-| Property | Value |
-| -------- | ------------- |
-| size | small, xsmall |
-
-## 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| -------------------- | ----------- | --------- | ----------------------------------- |
-| Enabled, Unselected | Root | Color | $semantic.color.secondary-low |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Hovered, Unselected | Root | Color | $scale.color.gray-200 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Pressed, Unselected | Root | Color | $scale.color.gray-200 |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Disabled, Unselected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-| Enabled, Selected | Root | Color | $semantic.color.primary-low |
-| | Label, Icon | Color | $semantic.color.primary |
-| Hovered, Selected | Root | Color | $semantic.color.primary-low-hover |
-| | Label, Icon | Color | $semantic.color.primary |
-| Pressed, Selected | Root | Color | $semantic.color.primary-low-pressed |
-| | Label, Icon | Color | $semantic.color.primary |
-| Disabled, Selected | Root | Color | $scale.color.gray-300 |
-| | Label, Icon | Color | $scale.color.gray-500 |
-
-## 디자인 결정 (Typography)
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label5-bold |
-
-## 디자인 결정 (Layout)
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 54pt |
-| | Horizontal Padding | 14pt |
-| | Vertical Padding | 8pt |
-| | Corner Radius | 18pt |
-| Label | Text Align | Center |
-| Icon | Size | 16pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Xsmall
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ------ |
-| Root | Min Width | 40pt |
-| | Horizontal Padding | 10pt |
-| | Vertical Padding | 8pt |
-| | Corner Radius | 16pt |
-| Label | Text Align | Center |
-| Icon | Size | 12pt |
-| Label / Icon | Padding | 2pt |
-
-## 디자인 결정 (Focus)
-
-| State | Part | Attribute | Value |
-| ------- | ---- | ------------- | --------------------- |
-| Focused | Root | Outline Color | $scale.color.blue-600 |
-| | | Outline Width | 2pt |
diff --git a/docs/content/component/capsule-toggle-button/thumbnail.png b/docs/content/component/capsule-toggle-button/thumbnail.png
deleted file mode 100644
index bae7c4c23..000000000
Binary files a/docs/content/component/capsule-toggle-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/capsule-toggle-button/usage.mdx b/docs/content/component/capsule-toggle-button/usage.mdx
deleted file mode 100644
index 81516947b..000000000
--- a/docs/content/component/capsule-toggle-button/usage.mdx
+++ /dev/null
@@ -1,226 +0,0 @@
----
-slug: /component/capsule-toggle-button/usage
----
-
-## 구조도
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역
-2. Label : Button에 대한 정보를 전달하는 라벨
-3. Icon : Button에 대한 정보를 전달하는 아이콘
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Capsule Toggle Button은 xsmall, small 2개의 사이즈를 가질 수 있습니다.
- Small이 가장 보편적으로 사용되며, 한 화면에 배치되는 요소가 많거나 복잡한
- 경우 xsmall 사이즈를 사용하여 시각적 피로도를 낮춥니다.
-
-
-
-
-
-
- 
-
-
- Loading
-
- 네트워크 요청 등의 이유로 유저에게 피드백을 즉시 전달할 수 없는 경우,
- loading 상태를 사용합니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Capsule Toggle Button이 존재하지만 지금은 사용할 수 없는
- 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이
- 가능할 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | ------------- | ------ |
-| size | xsmall, small | small |
-| is disabled | true, false | false |
-| is loading | true, false | false |
-
-## 상호작용
-
-### 터치 / 마우스 상호작용
-
-
-
- 
-
-
- 터치 혹은 마우스 클릭으로 Capsule Toggle Button과 상호작용할 수 있는
- 영역입니다.
-
-
-
-
-
- 
-
-
- PC 환경에서 버튼에 Hover 시 커서가 포인터 모양으로 변경됩니다.
-
-
-
-
-
- 
-
-
- Loading / Disabled 상태인 경우 상호작용이 불가능합니다.
-
-
-
-### 키보드 상호작용
-
-
-
- 
-
-
- Space 또는 Enter 키를 통해
- selected 상태를 전환할 수 있습니다.
-
-
-
-
-
- 
-
-
- Loading
-
- Loading 상태인 경우 Focus는 가능하지만 상호작용할 수 없습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태인 경우 상호작용할 수 없습니다.
-
-
-
-
-### 응답없음
-
-
-
- 
-
-
- Loading 상태로 전환되어 있는 경우, duration은 최대 2초를 초과하지 않아야
- 합니다. 로딩 상태가 길어져 응답없음 상태에 진입하는 경우 Toggled - False
- 상태로 되돌아갑니다.
-
-
-
-## 가이드라인
-
-
-
- 
-
-
- Capsule Toggle Button
-
- Capsule Toggle Button은 소셜 서비스, 후기와 같은 컨텐츠에서 리액션용
- Toggle Button으로 사용합니다.
-
-
-
-
-### Max Width
-
-
-
- 
-
-
- 모바일 해상도에서 좌우 Margin 16px씩을 유지한 width까지만 확장될 수
- 있습니다.
-
-
- 
-
-
- Label은 1줄을 초과할 수 없으며 좌우 Padding은 각 20px을 유지한 범위 내에서만
- 텍스트가 노출될 수 있습니다.
-
-
-
-### Min Width
-
-
-
- 
-
-
- Capsule Toggle Button은 최소 너비값을 가지며 사이즈별로 각 값은 상이합니다.
-
-
-
-
-
-### Do / Don't
-
-
-
-
-
-
- 
-
-
- Selected 상태를 유저에게 명확하게 전달하기 위해 Selected 배리언츠를
- 올바르게 사용하며, Selected인 경우 icon은 fill 타입 사용을 권장합니다.
-
-
-
-
- 
-
-
- Unselected 와 Selected 배리언츠를 반대로 사용하지 않습니다.{" "}
-
-
-
-
-
diff --git a/docs/content/component/checkbox/checkbox-behavior-1.png b/docs/content/component/checkbox/checkbox-behavior-1.png
deleted file mode 100644
index 5abacd638..000000000
Binary files a/docs/content/component/checkbox/checkbox-behavior-1.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-behavior-2.png b/docs/content/component/checkbox/checkbox-behavior-2.png
deleted file mode 100644
index 0df1802af..000000000
Binary files a/docs/content/component/checkbox/checkbox-behavior-2.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-behavior-3.png b/docs/content/component/checkbox/checkbox-behavior-3.png
deleted file mode 100644
index 2a0d53429..000000000
Binary files a/docs/content/component/checkbox/checkbox-behavior-3.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-behavior-4.png b/docs/content/component/checkbox/checkbox-behavior-4.png
deleted file mode 100644
index 3ac234884..000000000
Binary files a/docs/content/component/checkbox/checkbox-behavior-4.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-behavior-checkbox-vs-switch.png b/docs/content/component/checkbox/checkbox-behavior-checkbox-vs-switch.png
deleted file mode 100644
index cb3c2f0d0..000000000
Binary files a/docs/content/component/checkbox/checkbox-behavior-checkbox-vs-switch.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-behavior-indeterminate.png b/docs/content/component/checkbox/checkbox-behavior-indeterminate.png
deleted file mode 100644
index 041958ba7..000000000
Binary files a/docs/content/component/checkbox/checkbox-behavior-indeterminate.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-options-disabled.png b/docs/content/component/checkbox/checkbox-options-disabled.png
deleted file mode 100644
index 98cbb2e8f..000000000
Binary files a/docs/content/component/checkbox/checkbox-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-options-label.png b/docs/content/component/checkbox/checkbox-options-label.png
deleted file mode 100644
index 1a557a311..000000000
Binary files a/docs/content/component/checkbox/checkbox-options-label.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-options-selected.png b/docs/content/component/checkbox/checkbox-options-selected.png
deleted file mode 100644
index eae9a8979..000000000
Binary files a/docs/content/component/checkbox/checkbox-options-selected.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-options-size.png b/docs/content/component/checkbox/checkbox-options-size.png
deleted file mode 100644
index 91f29f5dc..000000000
Binary files a/docs/content/component/checkbox/checkbox-options-size.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-style-anatomy.png b/docs/content/component/checkbox/checkbox-style-anatomy.png
deleted file mode 100644
index 14682f31a..000000000
Binary files a/docs/content/component/checkbox/checkbox-style-anatomy.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-style-overflow.png b/docs/content/component/checkbox/checkbox-style-overflow.png
deleted file mode 100644
index 1234297a3..000000000
Binary files a/docs/content/component/checkbox/checkbox-style-overflow.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-touch-mouse-control-1.png b/docs/content/component/checkbox/checkbox-touch-mouse-control-1.png
deleted file mode 100644
index b5e4c1b22..000000000
Binary files a/docs/content/component/checkbox/checkbox-touch-mouse-control-1.png and /dev/null differ
diff --git a/docs/content/component/checkbox/checkbox-usage-anatomy.png b/docs/content/component/checkbox/checkbox-usage-anatomy.png
deleted file mode 100644
index 14682f31a..000000000
Binary files a/docs/content/component/checkbox/checkbox-usage-anatomy.png and /dev/null differ
diff --git a/docs/content/component/checkbox/component-meta.json b/docs/content/component/checkbox/component-meta.json
deleted file mode 100644
index 57332ac32..000000000
--- a/docs/content/component/checkbox/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Checkbox",
- "description": "최소 1가지 이상의 옵션을 선택 또는 해제할 수 있는 컨트롤입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/checkbox/primitive-meta.json",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "KarrotCheckbox",
- "path": "seedcatalog://components/checkbox"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-checkbox--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=51258-39461&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "done",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-checkbox--basic&viewMode=story",
- "height": "75px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "done",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/checkbox/overview.mdx b/docs/content/component/checkbox/overview.mdx
deleted file mode 100644
index fd3f32bfc..000000000
--- a/docs/content/component/checkbox/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/checkbox/overview
----
diff --git a/docs/content/component/checkbox/style.mdx b/docs/content/component/checkbox/style.mdx
deleted file mode 100644
index 25c80bbcf..000000000
--- a/docs/content/component/checkbox/style.mdx
+++ /dev/null
@@ -1,217 +0,0 @@
----
-slug: /component/checkbox/style
----
-
-## Anatomy
-
-
-
-1. Root : 체크박스 컴포넌트를 감싸는 컨테이너 영역 - Primitive.Root
-2. Control : 체크박스의 상태를 나타내는 시각 요소 - Primitive.Control
-3. Label : 체크박스에 대한 정보를 전달하는 라벨 - Primitive.Label
-4. Icon : 체크박스의 상태를 표현하는 아이콘
-
-## Visual Options
-
-| Property | Value | Description |
-| -------- | --------------------- | ----------- |
-| size | small, medium, large | |
-| shape | square, circle, ghost | |
-| bold | true, false | |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | ----------------------------------------------------------- |
-| enabled | isDisabled OFF, isHovered OFF, isFocused OFF, isPressed OFF |
-| hovered | isDisabled OFF, isPressed OFF, isHovered ON |
-| focused | isDisabled OFF, isPressed OFF, isFocused ON |
-| pressed | isDisabled OFF, isPressed ON |
-| disabled | isDisabled ON |
-
-| State | Condition |
-| ------------- | ----------------------------------- |
-| unselected | isIndeterminate OFF, isSelected OFF |
-| selected | isIndeterminate OFF, isSelected ON |
-| indeterminate | isIndeterminate ON |
-
-## 디자인 결정 (Color)
-
-### variant=square, circle
-
-| State | Part | Attribute | Value |
-| -------- | -------------------- | ------------- | ------------------------------- |
-| Enabled | Control (unselected) | Color | None |
-| | | Outline Color | $scale.color.gray-300 |
-| | Control (selected) | Color | $semantic.color.primary |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-900 |
-| | Icon (selected) | Color | $semantic.color.on-primary |
-| Disabled | Control (unselected) | Color | $scale.color.gray-200 |
-| | | Outline Color | $scale.color.gray-300 |
-| | Control (selected) | Color | $scale.color.gray-300 |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-400 |
-| | Icon (selected) | Color | $scale.color.gray-500 |
-| Hovered | Control (unselected) | Color | $semantic.color.gray-hover |
-| | | Outline Color | $scale.color.gray-300 |
-| | Control (selected) | Color | $semantic.color.primary-hover |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-900 |
-| | Icon (selected) | Color | $semantic.color.on-primary |
-| Focused | Control | Outline Color | $scale.color.blue-600 |
-| | | Outline Width | 2pt |
-| Pressed | Control (unselected) | Color | $semantic.color.gray-pressed |
-| | | Outline Color | $scale.color.gray-300 |
-| | Control (selected) | Color | $semantic.color.primary-pressed |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-900 |
-| | Icon (selected) | Color | $semantic.color.on-primary |
-
-### variant=ghost
-
-| State | Part | Attribute | Value |
-| -------- | -------------------- | ------------- | ----------------------------------- |
-| Enabled | Control (unselected) | Color | None |
-| | | Outline Color | None |
-| | Control (selected) | Color | None |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-900 |
-| | Icon (unselected) | Color | $scale.color.gray-500 |
-| | Icon (selected) | Color | $semantic.color.primary |
-| Disabled | Control (unselected) | Color | None |
-| | | Outline Color | None |
-| | Control (selected) | Color | None |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-400 |
-| | Icon (unselected) | Color | $scale.color.gray-300 |
-| | Icon (selected) | Color | $scale.color.gray-300 |
-| Hovered | Control (unselected) | Color | $semantic.color.gray-hover |
-| | | Outline Color | None |
-| | Control (selected) | Color | $semantic.color.primary-low-hover |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-900 |
-| | Icon (unselected) | Color | $scale.color.gray-500 |
-| | Icon (selected) | Color | $semantic.color.primary |
-| Focused | Control | Outline Color | $scale.color.blue-600 |
-| | | Outline Width | 2pt |
-| Pressed | Control (unselected) | Color | $semantic.color.gray-pressed |
-| | | Outline Color | None |
-| | Control (selected) | Color | $semantic.color.primary-low-pressed |
-| | | Outline Color | None |
-| | Label | Color | $scale.color.gray-900 |
-| | Icon (unselected) | Color | $scale.color.gray-500 |
-| | Icon (selected) | Color | $semantic.color.on-primary |
-
-## 디자인 결정 (Typography)
-
-### Size=Large, Bold=True
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label2-bold |
-
-### Size=Large, Bold=False
-
-| Part | Attribute | Value |
-| ----- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label2-regular |
-
-### Size=Medium, Bold=True
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Medium, Bold=False
-
-| Part | Attribute | Value |
-| ----- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-regular |
-
-### Size=Small, Bold=True
-
-| Part | Attribute | Value |
-| ----- | ---------- | ---------------------------------- |
-| Label | Typography | $semantic.typography.caption1-bold |
-
-### Size=Small, Bold=False
-
-| Part | Attribute | Value |
-| ----- | ---------- | ------------------------------------- |
-| Label | Typography | $semantic.typography.caption1-regular |
-
-## 디자인 결정 (Layout)
-
-### Shape
-
-| Shape | Part | Attribute | Value |
-| ------ | ------- | ------------- | ----- |
-| Square | Control | Corner Radius | 4px |
-| Ghost | Control | Corner Radius | 4px |
-| Circle | Control | Corner Radius | 100% |
-
-### Size=Large
-
-| Part | Attribute | Value |
-| --------------- | ---------- | ----- |
-| Root | Min Width | 160px |
-| | Min Height | 36px |
-| Control | Size | 24px |
-| Label | Text Align | Start |
-| Icon | Size | 10px |
-| Control / Label | Spacing | 8px |
-| Control / Icon | Padding | 12px |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| --------------- | ---------- | ----- |
-| Root | Min Width | 130px |
-| | Min Height | 28px |
-| Control | Size | 20px |
-| Label | Text Align | Start |
-| Icon | Size | 9px |
-| Control / Label | Spacing | 8px |
-| Control / Icon | Padding | 10px |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| --------------- | ---------- | ----- |
-| Root | Min Width | 110px |
-| | Min Height | 24px |
-| Control | Size | 18px |
-| Label | Text Align | Start |
-| Icon | Size | 8px |
-| Control / Label | Spacing | 8px |
-| Control / Icon | Padding | 8px |
-
-## 디자인 결정 (Motion)
-
-| State | Part | Property | Attribute | Value |
-| ---------- | ------- | ----------------- | --------------- | -------------------------------------- |
-| Selected | Icon | stroke dashoffset | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| Selected | Control | background color | Duration | 50ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| | | | Delay | 20ms |
-| Unselected | Icon | opacity | Duration | 50ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-
-### State=Unselected
-
-| Part | Attribute | From | To |
-| ---- | --------- | ---- | --- |
-| Icon | opacity | 1 | 0 |
-
-## Overflow
-
-
-
- 
-
-
- Label이 2줄을 초과할 경우 텍스트 시작점을 기준으로 위와 같이 개행처리됩니다
-
-
diff --git a/docs/content/component/checkbox/thumbnail.png b/docs/content/component/checkbox/thumbnail.png
deleted file mode 100644
index 45bb2ed52..000000000
Binary files a/docs/content/component/checkbox/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/checkbox/usage.mdx b/docs/content/component/checkbox/usage.mdx
deleted file mode 100644
index 4547e1fd1..000000000
--- a/docs/content/component/checkbox/usage.mdx
+++ /dev/null
@@ -1,196 +0,0 @@
----
-slug: /component/checkbox/usage
----
-
-## 구조도
-
-
-
-1. Root : 체크박스 컴포넌트를 감싸는 컨테이너 영역
-2. Control : 체크박스의 상태를 나타내는 시각 요소
-3. Label : 체크박스에 대한 정보를 전달하는 라벨
-4. Icon: 체크박스의 상태를 표현하는 아이콘
-
-## 옵션
-
-
-
- 
-
-
- Label
-
- Checkbox는 항상 Label을 가져야 합니다. Label이 설정되지 않은 체크박스는
- 다른 컴포넌트와의 관계가 매우 명확하고, 사용자에게 충분한 맥락을 전달할 수
- 있을때만 사용합니다.
-
-
-
-
-
-
- 
-
-
- Selection
-
- Checkbox는 selected, unselected, indeterminate 중 하나의 상태를 가질 수
- 있습니다. Indeterminate 상태는 하위 체크박스들을 포함하고 있을 때, 하위
- 체크박스들의 isSelected 상태가 일관되지 않은 경우 사용합니다.
-
-
-
-
-
-
- 
-
-
- Size
-
- Checkbox는 small, medium, large 3개의 사이즈를 가질 수 있습니다. medium이
- 가장 보편적으로 사용되며, 다른 사이즈는 페이지 내의 중요도를 나눠서
- 표현해야 할 때만 제한적으로 사용합니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 체크박스가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ---------------- | --------------------- | ------ | ------------------------------------------------------ |
-| label | text, none | - | |
-| size | small, medium, large | medium | |
-| shape | square, circle, ghost | square | |
-| bold | true, false | false | |
-| is selected | true, false | false | Checkbox가 선택되었을 시 True로 전환 |
-| is disabled | true, false | false | True일 경우, Checkbox가 유저와 상호작용하지 않음 |
-| is readonly | true, false | false | True일 경우, is selected를 변경할 수 없음 |
-| is indeterminate | true, false | false | True일 경우, is selected를 결정할 수 없음을 나타냄 |
-| is required | true, false | false | True일 경우, is selected = true가 필수임을 나타냄 |
-| is invalid | true, false | false | True일 경우, is selected가 유효하지 않은 값임을 나타냄 |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 checkbox를 토글할 수 있습니다.
-
-
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- Tab 키를 통해 Checkbox로 Focus를 옮길 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Selected ON/OFF
-
- Focus된 상태에서 Space 키를 통해 ON / OFF를 전환할 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- 포커스 이동시 Disabled 상태인 Checkbox는 인식하지 않습니다.
-
-
-
-
-### Overflow
-
-
-
- 
-
-
- Label이 2줄을 초과할 경우 개행 처리하며, Control은 Label 첫 번째 줄에 세로
- 중앙 정렬합니다.
-
-
-
-## 가이드라인
-
-
-
- 
-
-
- Checkbox vs Radio Group
-
- Checkbox와 Radio Group은 서로 다른 상호작용을 가지고 있습니다. Checkbox는
- 여러 개의 선택지 중 여러 개를 선택할 수 있고, Radio Group은 여러 개의
- 선택지 중 하나만 선택할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Checkbox vs Switch
-
- Checkbox는 선택을 표현할 때 (예를 들어, 리스트에서 선택된 아이템을 표현할
- 때) 사용하고, Switch는 활성화/비활성화를 표현할 때 (예를 들어, 알림을 켜고
- 끌 때) 사용합니다. Checkbox는 Switch와 다르게 error 상태를 가질 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Indeterminate 상태
-
- Checkbox가 동일하지 않은 여러 값을 나타내는 경우 Checkbox는 Indeterminate
- 상태로 나타나야 합니다. 이 상태에서 Checkbox를 토글하는 행위는 모든 하위
- 값들을 selected로 전환해야 합니다.
-
-
-
diff --git a/docs/content/component/chip-button/anatomy.png b/docs/content/component/chip-button/anatomy.png
deleted file mode 100644
index cfdb51b92..000000000
Binary files a/docs/content/component/chip-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-guideline-do.png b/docs/content/component/chip-button/chipbutton-guideline-do.png
deleted file mode 100644
index 7741b9e26..000000000
Binary files a/docs/content/component/chip-button/chipbutton-guideline-do.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-guideline-dont.png b/docs/content/component/chip-button/chipbutton-guideline-dont.png
deleted file mode 100644
index ae13cb6b4..000000000
Binary files a/docs/content/component/chip-button/chipbutton-guideline-dont.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-options-count.png b/docs/content/component/chip-button/chipbutton-options-count.png
deleted file mode 100644
index d3371fcda..000000000
Binary files a/docs/content/component/chip-button/chipbutton-options-count.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-options-disabled.png b/docs/content/component/chip-button/chipbutton-options-disabled.png
deleted file mode 100644
index 24fa9bd96..000000000
Binary files a/docs/content/component/chip-button/chipbutton-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-options-icon.png b/docs/content/component/chip-button/chipbutton-options-icon.png
deleted file mode 100644
index c1add7906..000000000
Binary files a/docs/content/component/chip-button/chipbutton-options-icon.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-options-size.png b/docs/content/component/chip-button/chipbutton-options-size.png
deleted file mode 100644
index 37853c089..000000000
Binary files a/docs/content/component/chip-button/chipbutton-options-size.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-usage-click-touch.png b/docs/content/component/chip-button/chipbutton-usage-click-touch.png
deleted file mode 100644
index 1cb315f4d..000000000
Binary files a/docs/content/component/chip-button/chipbutton-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/chip-button/chipbutton-usage-focus.png b/docs/content/component/chip-button/chipbutton-usage-focus.png
deleted file mode 100644
index e7dfdd297..000000000
Binary files a/docs/content/component/chip-button/chipbutton-usage-focus.png and /dev/null differ
diff --git a/docs/content/component/chip-button/component-meta.json b/docs/content/component/chip-button/component-meta.json
deleted file mode 100644
index 7529063ca..000000000
--- a/docs/content/component/chip-button/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Chip Button",
- "description": "누르면 액션을 일으키는 칩 모양의 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Chips",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/chip-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipbutton--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=21160-40044&mode=design&t=43ulOY6lWYqUyGPF-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-chips-chipbutton--basic&viewMode=story",
- "height": "80px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "todo",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/chip-button/overview.mdx b/docs/content/component/chip-button/overview.mdx
deleted file mode 100644
index 3c6958bcf..000000000
--- a/docs/content/component/chip-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/chip-button/overview
----
diff --git a/docs/content/component/chip-button/style.mdx b/docs/content/component/chip-button/style.mdx
deleted file mode 100644
index 8dfecf9ba..000000000
--- a/docs/content/component/chip-button/style.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
----
-slug: /component/chip-button/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Label - Primitive.Label
-3. Count
-4. Prefix Icon
-5. Suffix Icon
-
-## Visual Options
-
-| Property | Value |
-| ----------- | ------------- |
-| size | small, medium |
-| count | number |
-| prefix icon | Icon |
-| suffix icon | Icon |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| hovered | isDisabled = False, isPressed = False, isHovered = True |
-| focused | isDisabled = False, isPressed = False, isFocused = True |
-| pressed | isDisabled = False, isPressed = True |
-| disabled | isDisabled = True |
-
-## 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| -------- | -------------------------------------- | ------------- | ---------------------------- |
-| Enabled | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| | Count | Color | $scale.color.gray-600 |
-| Hovered | Root | Color | $semantic.color.gray-hover |
-| | | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| | Count | Color | $scale.color.gray-700 |
-| Pressed | Root | Color | $semantic.color.gray-pressed |
-| | | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| | Count | Color | $scale.color.gray-700 |
-| Disabled | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon, Count | Color | $scale.color.gray-400 |
-
-## 디자인 결정 (Typography)
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------------------------------------ |
-| Label, Count | Typography | $semantic.typography.body-m2-regular |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------------------------------------- |
-| Label, Count | Typography | $semantic.typography.caption1-regular |
-
-## 디자인 결정 (Layout)
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 38pt |
-| | Horizontal Padding | 14pt |
-| | Corner Radius | Full |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 32pt |
-| | Horizontal Padding | 12pt |
-| | Corner Radius | Full |
-| Prefix Icon | Size | 14pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
diff --git a/docs/content/component/chip-button/thumbnail.png b/docs/content/component/chip-button/thumbnail.png
deleted file mode 100644
index 406c63c56..000000000
Binary files a/docs/content/component/chip-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/chip-button/usage.mdx b/docs/content/component/chip-button/usage.mdx
deleted file mode 100644
index 0f783129f..000000000
--- a/docs/content/component/chip-button/usage.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
----
-slug: /component/chip-button/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Label
-3. Count
-4. Prefix Icon
-5. Suffix Icon
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Chip Button은 small, medium 2개의 사이즈를 가질 수 있습니다. medium이 가장
- 보편적으로 사용되며, 페이지 내의 중요도와 시각적 균형에 맞게 적절하게
- 사용합니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Chip Button이 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-
-
- 
-
-
- Count
-
- Chip Button이 특정 데이터의 개수 값을 포함하고 있거나, 필터링된 항목 수를
- 표시할 때 Count 옵션을 사용할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Icon
-
- Prefix Icon으로 Label을 보조하기 위한 모노크롬 아이콘을 사용할 수
- 있습니다. Suffix Icon으로 Chevron을 사용해 칩 버튼의 상호작용을 강조할 수
- 있습니다. 동시 사용은 권장하지 않습니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | ------------- | ------ |
-| size | medium, small | medium |
-| is disabled | true, false | false |
-| count | number | |
-| prefix icon | icon | |
-| suffix icon | Icon | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Chip Button과 상호작용할 수 있습니다. Close Button이
- 있는 Chip Button의 경우, 터치 영역이 Close Button 영역으로 제한됩니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- Space 또는 Enter 키를 통해 Chip
- Button의 액션을 실행시킬 수 있습니다.
-
-
-
-
-## 가이드라인
-
-### Do / Don't
-
-
-
-
-
- 
-
- 유저가 빠르게 원하는 액션을 선택할 수 있도록 Label을 간결하고 명료하게
- 작성합니다.
-
-
-
-
- 
-
-
- 불필요한 단어 사용을 지양합니다. Label은 1줄을 초과할 수 없습니다.
-
-
-
diff --git a/docs/content/component/chip-filter/anatomy.png b/docs/content/component/chip-filter/anatomy.png
deleted file mode 100644
index 32ec3888f..000000000
Binary files a/docs/content/component/chip-filter/anatomy.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/chipfilter-guideline-do.png b/docs/content/component/chip-filter/chipfilter-guideline-do.png
deleted file mode 100644
index 070317249..000000000
Binary files a/docs/content/component/chip-filter/chipfilter-guideline-do.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/chipfilter-guideline-dont.png b/docs/content/component/chip-filter/chipfilter-guideline-dont.png
deleted file mode 100644
index dcdce7572..000000000
Binary files a/docs/content/component/chip-filter/chipfilter-guideline-dont.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/chipfilter-options-disabled.png b/docs/content/component/chip-filter/chipfilter-options-disabled.png
deleted file mode 100644
index d75af6fe9..000000000
Binary files a/docs/content/component/chip-filter/chipfilter-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/chipfilter-options-icon.png b/docs/content/component/chip-filter/chipfilter-options-icon.png
deleted file mode 100644
index 0b87bab57..000000000
Binary files a/docs/content/component/chip-filter/chipfilter-options-icon.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/chipfilter-options-selection.png b/docs/content/component/chip-filter/chipfilter-options-selection.png
deleted file mode 100644
index 48b8387ce..000000000
Binary files a/docs/content/component/chip-filter/chipfilter-options-selection.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/chipfilter-usage-click-touch.png b/docs/content/component/chip-filter/chipfilter-usage-click-touch.png
deleted file mode 100644
index 1d3afecee..000000000
Binary files a/docs/content/component/chip-filter/chipfilter-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/chipfilter-usage-focus.png b/docs/content/component/chip-filter/chipfilter-usage-focus.png
deleted file mode 100644
index b32d8fdb2..000000000
Binary files a/docs/content/component/chip-filter/chipfilter-usage-focus.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/component-meta.json b/docs/content/component/chip-filter/component-meta.json
deleted file mode 100644
index 1ae6eff89..000000000
--- a/docs/content/component/chip-filter/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Chip Filter",
- "description": "여러개의 옵션 중 하나를 선택할 수 있는 컴포넌트입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Chips",
- "platform": {
- "ios": {
- "status": "todo",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipfilter--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=21160-39971&mode=design&t=43ulOY6lWYqUyGPF-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "mdx": "./overview.mdx",
- "storybook": {
- "height": "80px",
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-chips-chipfilter--basic&viewMode=story"
- }
- },
- "usage": {
- "status": "todo",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "todo",
- "mdx": "./style.mdx"
- }
- }
- }
-}
\ No newline at end of file
diff --git a/docs/content/component/chip-filter/overview.mdx b/docs/content/component/chip-filter/overview.mdx
deleted file mode 100644
index dfc610d4c..000000000
--- a/docs/content/component/chip-filter/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/chip-filter/overview
----
diff --git a/docs/content/component/chip-filter/style.mdx b/docs/content/component/chip-filter/style.mdx
deleted file mode 100644
index ac482df7a..000000000
--- a/docs/content/component/chip-filter/style.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-slug: /component/chip-filter/style
----
-
-## Chip Filter
-
-in progress
diff --git a/docs/content/component/chip-filter/thumbnail.png b/docs/content/component/chip-filter/thumbnail.png
deleted file mode 100644
index a47362587..000000000
Binary files a/docs/content/component/chip-filter/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/chip-filter/usage.mdx b/docs/content/component/chip-filter/usage.mdx
deleted file mode 100644
index 203e21da5..000000000
--- a/docs/content/component/chip-filter/usage.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
----
-slug: /component/chip-filter/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Label
-3. Prefix Icon
-4. Suffix Icon
-
-## 옵션
-
-
-
- 
-
-
- Selection
-
- Chip Filter는 selected, unselected 중 하나의 상태를 가질 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Chip Filter가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-
-
- 
-
-
- Icon
-
- Prefix Icon으로 Label을 보조하기 위한 모노크롬 아이콘을 사용할 수
- 있습니다. Suffix Icon으로 Chevron을 사용해 칩 버튼의 상호작용을 강조할 수
- 있습니다. 동시 사용은 권장하지 않습니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | ----------- | ------ |
-| is disabled | true, false | false |
-| prefix icon | icon | |
-| suffix icon | Icon | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Chip Filter와 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- Space 또는 Enter 키를 통해 Chip
- Filter의 액션을 실행시킬 수 있습니다.
-
-
-
-
-## 가이드라인
-
-### Do / Don't
-
-
-
-
-
- 
-
- 유저가 빠르게 원하는 액션을 선택할 수 있도록 Label을 간결하고 명료하게
- 작성합니다.
-
-
-
-
- 
-
-
- 불필요한 단어 사용을 지양합니다. Label은 1줄을 초과할 수 없습니다.
-
-
-
diff --git a/docs/content/component/chip-radio-group/anatomy.png b/docs/content/component/chip-radio-group/anatomy.png
deleted file mode 100644
index 94bf04a5d..000000000
Binary files a/docs/content/component/chip-radio-group/anatomy.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-guideline-do.png b/docs/content/component/chip-radio-group/chipradiogroup-guideline-do.png
deleted file mode 100644
index 3d04b738b..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-guideline-do.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-guideline-dont.png b/docs/content/component/chip-radio-group/chipradiogroup-guideline-dont.png
deleted file mode 100644
index 37e07b1dd..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-guideline-dont.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-options-disabled.png b/docs/content/component/chip-radio-group/chipradiogroup-options-disabled.png
deleted file mode 100644
index 6e590d718..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-options-icon.png b/docs/content/component/chip-radio-group/chipradiogroup-options-icon.png
deleted file mode 100644
index 444ff6ae0..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-options-icon.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-options-selection.png b/docs/content/component/chip-radio-group/chipradiogroup-options-selection.png
deleted file mode 100644
index a9da3d183..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-options-selection.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-options-size.png b/docs/content/component/chip-radio-group/chipradiogroup-options-size.png
deleted file mode 100644
index a98e52477..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-options-size.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-usage-click-touch.png b/docs/content/component/chip-radio-group/chipradiogroup-usage-click-touch.png
deleted file mode 100644
index 32e407505..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chipradiogroup-usage-focus.png b/docs/content/component/chip-radio-group/chipradiogroup-usage-focus.png
deleted file mode 100644
index 47ac038e4..000000000
Binary files a/docs/content/component/chip-radio-group/chipradiogroup-usage-focus.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/chiptogglebutton-usage-click-touch.png b/docs/content/component/chip-radio-group/chiptogglebutton-usage-click-touch.png
deleted file mode 100644
index a56aed509..000000000
Binary files a/docs/content/component/chip-radio-group/chiptogglebutton-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/component-meta.json b/docs/content/component/chip-radio-group/component-meta.json
deleted file mode 100644
index a197b0494..000000000
--- a/docs/content/component/chip-radio-group/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Chip Radio Group",
- "description": "두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 칩 형태의 컨트롤입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Chips",
- "platform": {
- "ios": {
- "status": "todo",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipradiogroup--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=53289-56237&mode=design&t=43ulOY6lWYqUyGPF-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-chips-chipradiogroup--basic&viewMode=story",
- "height": "80px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "todo",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/chip-radio-group/overview.mdx b/docs/content/component/chip-radio-group/overview.mdx
deleted file mode 100644
index ca025e71f..000000000
--- a/docs/content/component/chip-radio-group/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/chip-radio-group/overview
----
diff --git a/docs/content/component/chip-radio-group/style.mdx b/docs/content/component/chip-radio-group/style.mdx
deleted file mode 100644
index 9e910837c..000000000
--- a/docs/content/component/chip-radio-group/style.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
----
-slug: /component/chip-radio-group/style
----
-
-## Anatomy
-
-1. Root - Primitive.Root
-2. Chip - Primitive.Radio
-3. Label - Primitive.ItemLabel
-4. Prefix Icon
-5. Suffix Icon
-
-## Root
-
-## Visual Options
-
-| Property | Value |
-| -------- | ------------- |
-| size | small, medium |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ----------- | --------- | ----- |
-| Chip / Chip | Spacing | 8pt |
-
-## Chip
-
-| Property | Value |
-| ----------- | ----- |
-| prefix icon | Icon |
-| suffix icon | Icon |
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| hovered | isDisabled = False, isPressed = False, isHovered = True |
-| focused | isDisabled = False, isPressed = False, isFocused = True |
-| pressed | isDisabled = False, isPressed = True |
-| disabled | isDisabled = True |
-
-| State | Condition |
-| ---------- | ------------------ |
-| unselected | isSelected = False |
-| selected | isSelected = True |
-
-### 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| -------------------- | ------------------------------- | ------------- | ---------------------------- |
-| Enabled, Unselected | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| | Count | Color | $scale.color.gray-600 |
-| Hovered, Unselected | Root | Color | $semantic.color.gray-hover |
-| | | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| | Count | Color | $scale.color.gray-700 |
-| Pressed, Unselected | Root | Color | $semantic.color.gray-pressed |
-| | | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| Disabled, Unselected | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-400 |
-| Enabled, Selected | Root | Color | $scale.color.gray-800 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-00 |
-| Hovered, Selected | Root | Color | $scale.color.gray-700 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-00 |
-| Pressed, Selected | Root | Color | $scale.color.gray-700 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-00 |
-| Disabled, Selected | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-400 |
-
-### 디자인 결정 (Typography)
-
-#### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------------------------------------ |
-| Label, Count | Typography | $semantic.typography.body-m2-regular |
-
-#### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------------------------------------- |
-| Label, Count | Typography | $semantic.typography.caption1-regular |
-
-### 디자인 결정 (Layout)
-
-#### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 38pt |
-| | Horizontal Padding | 14pt |
-| | Corner Radius | Full |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
-
-#### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 32pt |
-| | Horizontal Padding | 12pt |
-| | Corner Radius | Full |
-| Prefix Icon | Size | 14pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
diff --git a/docs/content/component/chip-radio-group/thumbnail.png b/docs/content/component/chip-radio-group/thumbnail.png
deleted file mode 100644
index fbc748124..000000000
Binary files a/docs/content/component/chip-radio-group/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/chip-radio-group/usage.mdx b/docs/content/component/chip-radio-group/usage.mdx
deleted file mode 100644
index be85e7260..000000000
--- a/docs/content/component/chip-radio-group/usage.mdx
+++ /dev/null
@@ -1,140 +0,0 @@
----
-slug: /component/chip-radio-group/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Chip
-3. Label
-4. Prefix Icon
-5. Suffix Icon
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Chip Radio Group은 small, medium 2개의 사이즈를 가질 수 있습니다. medium이
- 가장 보편적으로 사용되며, 페이지 내의 중요도와 시각적 균형에 맞게 적절하게
- 사용합니다.
-
-
-
-
-
-
- 
-
-
- Selection
-
- Chip Radio Group은 selected, unselected 중 하나의 상태를 가질 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Chip Radio Group가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-
-
- 
-
-
- Icon
-
- Prefix Icon으로 Label을 보조하기 위한 모노크롬 아이콘을 사용할 수
- 있습니다. Suffix Icon으로 Chevron을 사용해 칩 버튼의 상호작용을 강조할 수
- 있습니다. 동시 사용은 권장하지 않습니다.
-
-
-
-
-### 옵션 테이블 (Chip Radio Group)
-
-| 속성 | 값 | 기본값 |
-| ----------- | ------------- | ------ |
-| size | small, medium | medium |
-| is disabled | true, false | false |
-
-### 옵션 테이블 (Chip Radio)
-
-| 속성 | 값 | 기본값 |
-| ----------- | ----------- | ------ |
-| label | text | |
-| is disabled | true, false | false |
-| prefix icon | icon | |
-| suffix icon | Icon | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Chip Radio Group과 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- ← 또는 → 키를 통해 Chip 간 Focus
- 이동이 가능합니다.
-
-
-
-
-## 가이드라인
-
-### Do / Don't
-
-
-
-
-
-
- 
-
-
- 유저가 빠르게 원하는 액션을 선택할 수 있도록 Label을 간결하고 명료하게
- 작성합니다.
-
-
-
-
- 
-
-
- 불필요한 단어 사용을 지양합니다. Label은 1줄을 초과할 수 없습니다.
-
-
-
diff --git a/docs/content/component/chip-toggle-button/anatomy.png b/docs/content/component/chip-toggle-button/anatomy.png
deleted file mode 100644
index 4f52749c7..000000000
Binary files a/docs/content/component/chip-toggle-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-guideline-do.png b/docs/content/component/chip-toggle-button/chiptogglebutton-guideline-do.png
deleted file mode 100644
index 64a4ef267..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-guideline-do.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-guideline-dont.png b/docs/content/component/chip-toggle-button/chiptogglebutton-guideline-dont.png
deleted file mode 100644
index 4970c5965..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-guideline-dont.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-options-disabled.png b/docs/content/component/chip-toggle-button/chiptogglebutton-options-disabled.png
deleted file mode 100644
index 5c062e563..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-options-icon.png b/docs/content/component/chip-toggle-button/chiptogglebutton-options-icon.png
deleted file mode 100644
index 940e39e32..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-options-icon.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-options-selection-1.png b/docs/content/component/chip-toggle-button/chiptogglebutton-options-selection-1.png
deleted file mode 100644
index 940e39e32..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-options-selection-1.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-options-selection.png b/docs/content/component/chip-toggle-button/chiptogglebutton-options-selection.png
deleted file mode 100644
index 7ca07ef74..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-options-selection.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-options-size-1.png b/docs/content/component/chip-toggle-button/chiptogglebutton-options-size-1.png
deleted file mode 100644
index 1c9e9358a..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-options-size-1.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-options-size.png b/docs/content/component/chip-toggle-button/chiptogglebutton-options-size.png
deleted file mode 100644
index c018366c0..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-options-size.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-usage-click-touch.png b/docs/content/component/chip-toggle-button/chiptogglebutton-usage-click-touch.png
deleted file mode 100644
index a56aed509..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/chiptogglebutton-usage-focus.png b/docs/content/component/chip-toggle-button/chiptogglebutton-usage-focus.png
deleted file mode 100644
index 0b229a470..000000000
Binary files a/docs/content/component/chip-toggle-button/chiptogglebutton-usage-focus.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/component-meta.json b/docs/content/component/chip-toggle-button/component-meta.json
deleted file mode 100644
index 36ce708de..000000000
--- a/docs/content/component/chip-toggle-button/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Chip Toggle Button",
- "description": "선택 여부를 켜거나 끌 수 있는 칩 형태의 버튼입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Chips",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/chip-toggle-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-chips-chiptogglebutton--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=52810-35657&mode=design&t=43ulOY6lWYqUyGPF-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-chips-chiptogglebutton--basic&viewMode=story",
- "height": "80px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "todo",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/chip-toggle-button/overview.mdx b/docs/content/component/chip-toggle-button/overview.mdx
deleted file mode 100644
index 5348d3417..000000000
--- a/docs/content/component/chip-toggle-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/chip-toggle-button/overview
----
diff --git a/docs/content/component/chip-toggle-button/style.mdx b/docs/content/component/chip-toggle-button/style.mdx
deleted file mode 100644
index c6b3488d2..000000000
--- a/docs/content/component/chip-toggle-button/style.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-slug: /component/chip-toggle-button/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Label - Primitive.Label
-3. Prefix Icon
-4. Suffix Icon
-
-## Visual Options
-
-| Property | Value |
-| ----------- | ------------- |
-| size | small, medium |
-| prefix icon | Icon |
-| suffix icon | Icon |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| hovered | isDisabled = False, isPressed = False, isHovered = True |
-| focused | isDisabled = False, isPressed = False, isFocused = True |
-| pressed | isDisabled = False, isPressed = True |
-| disabled | isDisabled = True |
-
-| State | Condition |
-| ---------- | ------------------ |
-| unselected | isSelected = False |
-| selected | isSelected = True |
-
-## 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| -------------------- | ------------------------------- | ------------- | ---------------------------- |
-| Enabled, Unselected | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| | Count | Color | $scale.color.gray-600 |
-| Hovered, Unselected | Root | Color | $semantic.color.gray-hover |
-| | | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| | Count | Color | $scale.color.gray-700 |
-| Pressed, Unselected | Root | Color | $semantic.color.gray-pressed |
-| | | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-900 |
-| Disabled, Unselected | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-400 |
-| Enabled, Selected | Root | Color | $scale.color.gray-800 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-00 |
-| Hovered, Selected | Root | Color | $scale.color.gray-700 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-00 |
-| Pressed, Selected | Root | Color | $scale.color.gray-700 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-00 |
-| Disabled, Selected | Root | Outline Color | $semantic.color.divider-2 |
-| | Label, Prefix Icon, Suffix Icon | Color | $scale.color.gray-400 |
-
-## 디자인 결정 (Typography)
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------------------------------------ |
-| Label, Count | Typography | $semantic.typography.body-m2-regular |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------------------------------------- |
-| Label, Count | Typography | $semantic.typography.caption1-regular |
-
-## 디자인 결정 (Layout)
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 38pt |
-| | Horizontal Padding | 14pt |
-| | Corner Radius | Full |
-| Prefix Icon | Size | 16pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 32pt |
-| | Horizontal Padding | 12pt |
-| | Corner Radius | Full |
-| Prefix Icon | Size | 14pt |
-| Suffix Icon | Size | 14pt |
-| Label / Icon | Padding | 4pt |
diff --git a/docs/content/component/chip-toggle-button/thumbnail.png b/docs/content/component/chip-toggle-button/thumbnail.png
deleted file mode 100644
index dd8fcc488..000000000
Binary files a/docs/content/component/chip-toggle-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/chip-toggle-button/usage.mdx b/docs/content/component/chip-toggle-button/usage.mdx
deleted file mode 100644
index 0da33ad28..000000000
--- a/docs/content/component/chip-toggle-button/usage.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-slug: /component/chip-toggle-button/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Label
-3. Prefix Icon
-4. Suffix Icon
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Chip Toggle Button은 small, medium 2개의 사이즈를 가질 수 있습니다.
- medium이 가장 보편적으로 사용되며, 페이지 내의 중요도와 시각적 균형에 맞게
- 적절하게 사용합니다.
-
-
-
-
-
-
- 
-
-
- Selection
-
- Chip Toggle Button는 selected, unselected 중 하나의 상태를 가질 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Chip Toggle Button이 존재하지만 지금은 사용할 수 없는
- 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이
- 가능할 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-
-
- 
-
-
- Icon
-
- Prefix icon으로 Label을 보조하기 위한 모노크롬 아이콘을 사용할 수
- 있습니다. Suffix icon으로 Chevron을 사용해 칩 버튼의 상호작용을 강조할 수
- 있습니다. 동시 사용은 권장하지 않습니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | ----------- | ------ |
-| is disabled | true, false | false |
-| prefix icon | icon | |
-| suffix icon | Icon | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Chip Toggle Button과 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- Space 또는 Enter 키를 통해 Chip
- Selected 상태를 전환할 수 있습니다.
-
-
-
-
-## 가이드라인
-
-### Do / Don't
-
-
-
-
-
-
- 
-
-
- 유저가 빠르게 원하는 액션을 선택할 수 있도록 Label을 간결하고 명료하게
- 작성합니다.
-
-
-
-
- 
-
-
- 불필요한 단어 사용을 지양합니다. Label은 1줄을 초과할 수 없습니다.
-
-
-
diff --git a/docs/content/component/dismissable-callout/anatomy.png b/docs/content/component/dismissable-callout/anatomy.png
deleted file mode 100644
index 01cbae8df..000000000
Binary files a/docs/content/component/dismissable-callout/anatomy.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/component-meta.json b/docs/content/component/dismissable-callout/component-meta.json
deleted file mode 100644
index 9877b58a2..000000000
--- a/docs/content/component/dismissable-callout/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Dismissable Callout",
- "description": "사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다. 사용자가 닫을 수 있습니다.",
- "thumbnail": "./thumbnail.png",
- "group": "Callouts",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/dismissable-callout"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-callouts-dismissablecallout--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=39212-32062&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-callouts-dismissablecallout--basic&viewMode=story",
- "height": "120px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline-do-outline.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline-do-outline.png
deleted file mode 100644
index f90528efc..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline-do-outline.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline-do-variant.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline-do-variant.png
deleted file mode 100644
index c37edbd25..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline-do-variant.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-important.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-important.png
deleted file mode 100644
index 3d41d4e9a..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-important.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-outline.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-outline.png
deleted file mode 100644
index 368f9398e..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-outline.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-promotion.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-promotion.png
deleted file mode 100644
index 50fbfa132..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-promotion.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-variant.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-variant.png
deleted file mode 100644
index 79c3a6513..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline-dont-variant.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline-short.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline-short.png
deleted file mode 100644
index 8e7d8345e..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline-short.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-guideline.png b/docs/content/component/dismissable-callout/dismissablecallout-guideline.png
deleted file mode 100644
index 4f186ac6e..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-guideline.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-options-danger.png b/docs/content/component/dismissable-callout/dismissablecallout-options-danger.png
deleted file mode 100644
index 05dfb587b..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-options-danger.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-options-info.png b/docs/content/component/dismissable-callout/dismissablecallout-options-info.png
deleted file mode 100644
index 67c12af7e..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-options-info.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-options-normal.png b/docs/content/component/dismissable-callout/dismissablecallout-options-normal.png
deleted file mode 100644
index c37edbd25..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-options-normal.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-options-outline.png b/docs/content/component/dismissable-callout/dismissablecallout-options-outline.png
deleted file mode 100644
index 3c2bb2034..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-options-outline.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-options-title-description.png b/docs/content/component/dismissable-callout/dismissablecallout-options-title-description.png
deleted file mode 100644
index 33dd38996..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-options-title-description.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-options-warning.png b/docs/content/component/dismissable-callout/dismissablecallout-options-warning.png
deleted file mode 100644
index 3418e3d91..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-options-warning.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-usage-click-touch.png b/docs/content/component/dismissable-callout/dismissablecallout-usage-click-touch.png
deleted file mode 100644
index 2c08e2ef4..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-usage-close.png b/docs/content/component/dismissable-callout/dismissablecallout-usage-close.png
deleted file mode 100644
index f21337825..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-usage-close.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-usage-focus.png b/docs/content/component/dismissable-callout/dismissablecallout-usage-focus.png
deleted file mode 100644
index 1806864b6..000000000
Binary files a/docs/content/component/dismissable-callout/dismissablecallout-usage-focus.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/overview.mdx b/docs/content/component/dismissable-callout/overview.mdx
deleted file mode 100644
index c12570429..000000000
--- a/docs/content/component/dismissable-callout/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/dismissable-callout/overview
----
diff --git a/docs/content/component/dismissable-callout/style.mdx b/docs/content/component/dismissable-callout/style.mdx
deleted file mode 100644
index a09e2db81..000000000
--- a/docs/content/component/dismissable-callout/style.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-slug: /component/dismissable-callout/style
----
-
-## Anatomy
-
-
-
-1. Root
-2. Title
-3. Description
-4. Close Button
-
-## Visual Options
-
-| Property | Value |
-| ----------- | -------------------------------------- |
-| variant | outline, normal, info, warning, danger |
-| title | text |
-| description | text |
-
-## 디자인 결정 (Color)
-
-### variant=outline
-
-| Part | Attribute | Value |
-| -------------------------------- | ------------- | --------------------- |
-| Root | Outline Color | $scale.color.gray-300 |
-| Title, Description, Close Button | Color | $scale.color.gray-900 |
-
-### variant=normal
-
-| Part | Attribute | Value |
-| -------------------------------- | --------- | --------------------- |
-| Root | Color | $scale.color.gray-100 |
-| Title, Description, Close Button | Color | $scale.color.gray-900 |
-
-### variant=info
-
-| Part | Attribute | Value |
-| -------------------------------- | --------- | -------------------------- |
-| Root | Color | $scale.color.blue-alpha-50 |
-| Title, Description, Close Button | Color | $scale.color.blue-950 |
-
-### variant=warning
-
-| Part | Attribute | Value |
-| -------------------------------- | --------- | ---------------------------- |
-| Root | Color | $scale.color.yellow-alpha-50 |
-| Title, Description, Close Button | Color | $scale.color.yellow-950 |
-
-### variant=danger
-
-| Part | Attribute | Value |
-| -------------------------------- | --------- | ------------------------- |
-| Root | Color | $scale.color.red-alpha-50 |
-| Title, Description, Close Button | Color | $scale.color.red-950 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----- | ---------- | ------------------------------------ |
-| Title | Typography | $semantic.typography.body-m2-bold |
-| Label | Typography | $semantic.typography.body-m2-regular |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ---------------------- | ---------------- | ----- |
-| Root | Vertical Padding | 14pt |
-| | Left Padding | 16pt |
-| | Right Padding | 14pt |
-| | Corner Radius | 10pt |
-| Content / Close Button | Spacing | 10pt |
-| Close Button | Size | 18pt |
diff --git a/docs/content/component/dismissable-callout/thumbnail.png b/docs/content/component/dismissable-callout/thumbnail.png
deleted file mode 100644
index ee25d0272..000000000
Binary files a/docs/content/component/dismissable-callout/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/dismissable-callout/usage.mdx b/docs/content/component/dismissable-callout/usage.mdx
deleted file mode 100644
index 4b411da79..000000000
--- a/docs/content/component/dismissable-callout/usage.mdx
+++ /dev/null
@@ -1,250 +0,0 @@
----
-slug: /component/dismissable-callout/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Title
-3. Description
-4. Close Button
-
-## 옵션
-
-
-
- 
-
-
- Outline
-
- Outline Variant는 안내 및 단순 정보를 전달합니다. Normal Variant보다
- 주목도를 낮추고 싶을 때, 혹은 면분할이 많은 화면에서 다른 gray 토큰과의
- 충돌을 방지하고자 할 때 사용합니다.
-
-
-
-
-
-
- 
-
-
- Normal
-
- Normal Variant는 시스템 안내 및 공지사항을 전달합니다. 특별한 강조나
- 경고가 필요하지 않을 때, 혹은 일상적인 상황을 제공합니다.
-
-
-
-
-
-
- 
-
-
- Info
-
- Info Variant는 특정 기능이나 서비스의 부가 설명을 제공하는 데 사용합니다.
- 이를 통해 유저는 해당 기능에 대한 추가 정보를 얻을 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Warning
-
- Warning Variant는 주로 경고나 주의사항을 전달합니다. 위험 요소가 낮으며
- 즉각적인 변화나 문제가 없는 경우, 조심해야 할 사항을 제공합니다.
-
-
-
-
-
-
- 
-
-
- Danger
-
- Danger Variant는 심각한 위험 상황이나 조심해야 할 사항을 제공합니다.
- 데이터가 삭제될 가능성이 있거나, 오류 상황에도 사용할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Title / Description
-
- Title은 Callout의 내용의 목적이나 핵심 메시지를 강조, 요약하여 전달합니다.
- Description은 유저에게 추가적인 컨텍스트와 부가 설명을 제공합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | -------------------------------------- | ------ |
-| variant | outline, normal, info, warning, danger | normal |
-| title | text | |
-| description | text | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Dismissable Callout과 상호작용할 수 있는 영역입니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- Tab키를 통해 Close Button에 Focus할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Dismiss
-
- Esc키, 또는 Close Button에 Focus된 상태에서
- Space 또는
- Enter키를 통해 Dismissable Callout을 닫을 수
- 있습니다.
-
-
-
-
-## 가이드라인
-
-
-
- 
-
-
-
- 필요할 때만, 아껴서 쓰기
-
-
- Dismissable Callout은 화면에서 많은 면적을 차지하고, 유저의 주의를 끌기
- 때문에 중요한 정보에만 절제하여 사용합니다. 과도한 사용은 Dismissable
- Callout의 강조 효과를 약화시킬 수 있습니다.
-
-
-
-
-
- 
-
-
- 간결한 문구
-
- Description은 2줄 이내로 간결하게 작성하여 유저가 빠르게 내용을 파악할 수
- 있도록 합니다.
-
-
-
-
-### Do / Don't
-
-
-
-
-
- 
-
-
- Gray 컬러가 많은 화면에서는 Outline Variant를 사용하여 다른 요소와의
- 충돌을 피합니다.
-
-
-
-
- 
-
-
- 면분할이 많은 화면에서의 사용을 주의합니다. 화면의 복잡도를 높여 유저에게
- 혼란을 줄 수 있습니다.
-
-
-
-
-
-
-
-
- 
-
- 의미에 맞는 Variant를 사용합니다.
-
-
-
- 
-
-
- 시각적인 효과만을 위해 특정 Variant를 사용하지 않습니다. 각 Variant는
- 목적에 맞는 컬러를 가지기 때문에, 이를 무시하고 사용할 경우 유저에게
- 혼란을 줄 수 있습니다.
-
-
-
-
-
-
-
-
- 
-
-
- 액션 수행을 위해 반드시 알아야 하는 정보를 전달할 때 사용하지 않습니다.
- 특히 위험 사항을 알리는 Warning과 Danger Variant는 유의하여 사용합니다.
-
-
-
-
- 
-
-
- 마케팅 및 프로모션 용도로 사용하지 않습니다. 해당 용도에는 Banner를
- 사용합니다.
-
-
-
diff --git a/docs/content/component/extended-floating-action-button/anatomy.png b/docs/content/component/extended-floating-action-button/anatomy.png
deleted file mode 100644
index 43dd980f2..000000000
Binary files a/docs/content/component/extended-floating-action-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/extended-floating-action-button/component-meta.json b/docs/content/component/extended-floating-action-button/component-meta.json
deleted file mode 100644
index 8eb15ad4e..000000000
--- a/docs/content/component/extended-floating-action-button/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Extended Floating Action Button",
- "alias": "Extended FAB",
- "description": "화면 계층 최상위에 위치해 액션을 일으킬 수 있는 확장된 형태의 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "FABs",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/extended-floating-action-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-fabs-extendedfab--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=52685-35469&t=Cjd6eNQ1wuKddYEt-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-fabs-extendedfab--basic&viewMode=story",
- "height": "100px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/extended-floating-action-button/extendedfab-options-icon-label.png b/docs/content/component/extended-floating-action-button/extendedfab-options-icon-label.png
deleted file mode 100644
index 6c8cf1cf5..000000000
Binary files a/docs/content/component/extended-floating-action-button/extendedfab-options-icon-label.png and /dev/null differ
diff --git a/docs/content/component/extended-floating-action-button/extendedfab-options-size.png b/docs/content/component/extended-floating-action-button/extendedfab-options-size.png
deleted file mode 100644
index e0d988493..000000000
Binary files a/docs/content/component/extended-floating-action-button/extendedfab-options-size.png and /dev/null differ
diff --git a/docs/content/component/extended-floating-action-button/extendedfab-options-variant.png b/docs/content/component/extended-floating-action-button/extendedfab-options-variant.png
deleted file mode 100644
index 94135e4a6..000000000
Binary files a/docs/content/component/extended-floating-action-button/extendedfab-options-variant.png and /dev/null differ
diff --git a/docs/content/component/extended-floating-action-button/extendedfab-usage-click-touch.png b/docs/content/component/extended-floating-action-button/extendedfab-usage-click-touch.png
deleted file mode 100644
index 00122d1bb..000000000
Binary files a/docs/content/component/extended-floating-action-button/extendedfab-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/extended-floating-action-button/extendedfab-usage-keyboard.png b/docs/content/component/extended-floating-action-button/extendedfab-usage-keyboard.png
deleted file mode 100644
index 0a09e5daf..000000000
Binary files a/docs/content/component/extended-floating-action-button/extendedfab-usage-keyboard.png and /dev/null differ
diff --git a/docs/content/component/extended-floating-action-button/overview.mdx b/docs/content/component/extended-floating-action-button/overview.mdx
deleted file mode 100644
index c80613367..000000000
--- a/docs/content/component/extended-floating-action-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/extended-floating-action-button/overview
----
diff --git a/docs/content/component/extended-floating-action-button/style.mdx b/docs/content/component/extended-floating-action-button/style.mdx
deleted file mode 100644
index 96c01db31..000000000
--- a/docs/content/component/extended-floating-action-button/style.mdx
+++ /dev/null
@@ -1,107 +0,0 @@
----
-slug: /component/extended-floating-action-button/style
----
-
-## Anatomy
-
-
-
-1. Root - ButtonPrimitive.Root
-2. Label - ButtonPrimitive.Label
-3. Icon
-
-## Visual Options
-
-| Property | Value |
-| -------- | ---------------------- |
-| size | medium, small |
-| variant | over paper, over image |
-| icon | Icon |
-| label | text |
-
-## Visually Represented States
-
-| State | Condition |
-| ------- | ----------------- |
-| enabled | isPressed = False |
-| pressed | isPressed = True |
-
-## 디자인 결정 (Color)
-
-### variant=over paper
-
-| State | Part | Attribute | Value |
-| ------- | ----------- | --------- | --------------------- |
-| Enabled | Root | Color | $scale.color.gray-900 |
-| | Label, Icon | Color | $scale.color.gray-00 |
-| Pressed | Root | Color | $scale.color.gray-700 |
-| | Label, Icon | Color | $scale.color.gray-00 |
-
-### variant=over image
-
-| State | Part | Attribute | Value |
-| ------- | ----------- | --------- | ------------------------------ |
-| Enabled | Root | Color | $semantic.color.paper-floating |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Pressed | Root | Color | $semantic.color.gray-pressed |
-| | Label, Icon | Color | $scale.color.gray-900 |
-
-## 디자인 결정 (Typography)
-
-### size=medium
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label2-bold |
-
-### size=small
-
-| Part | Attribute | Value |
-| ----- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-regular |
-
-## 디자인 결정 (Shadow)
-
-### size=medium
-
-| Part | Attribute | Value |
-| ---- | -------------------- | ------- |
-| Root | Shadow Offset X | 0pt |
-| | Shadow Offset Y | 2pt |
-| | Shadow Blur Radius | 6pt |
-| | Shadow Spread Radius | 0pt |
-| | Shadow Color | #000000 |
-| | Shadow Opacity | 0.16 |
-
-### size=small
-
-| Part | Attribute | Value |
-| ---- | -------------------- | ------- |
-| Root | Shadow Offset X | 0pt |
-| | Shadow Offset Y | 1pt |
-| | Shadow Blur Radius | 3pt |
-| | Shadow Spread Radius | 0pt |
-| | Shadow Color | #000000 |
-| | Shadow Opacity | 0.28 |
-
-## 디자인 결정 (Layout)
-
-### size=medium
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 46pt |
-| | Corner Radius | Full |
-| | Horizontal Padding | 18pt |
-| Icon | Size | 16pt |
-| Icon / Label | Spacing | 4pt |
-
-### size=small
-
-| Part | Attribute | Value |
-| ------------ | ------------------ | ----- |
-| Root | Height | 35pt |
-| | Corner Radius | Full |
-| | Horizontal Padding | 16pt |
-| Icon | Size | 16pt |
-| Icon / Label | Spacing | 4pt |
diff --git a/docs/content/component/extended-floating-action-button/thumbnail.png b/docs/content/component/extended-floating-action-button/thumbnail.png
deleted file mode 100644
index 97ce6ea00..000000000
Binary files a/docs/content/component/extended-floating-action-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/extended-floating-action-button/usage.mdx b/docs/content/component/extended-floating-action-button/usage.mdx
deleted file mode 100644
index 44797fed9..000000000
--- a/docs/content/component/extended-floating-action-button/usage.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
----
-slug: /component/extended-floating-action-button/usage
----
-
-## 구조도
-
-
-
-1. Root - ButtonPrimitive.Root
-2. Label - ButtonPrimitive.Label
-3. Icon
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Extended FAB는 small, medium 2개의 사이즈를 가질 수 있습니다. small이 가장
- 보편적으로 사용되며, 다른 사이즈는 페이지 내의 중요도가 높은 경우에
- 제한적으로 사용합니다.
-
-
-
-
-
-
- 
-
-
- Variant
-
- Over paper는 가장 보편적으로 사용됩니다. Over image는 이미지 캐러셀,
- 지도와 같이 시각적으로 채도나 복잡도가 높은 화면 위에서 사용합니다.
-
-
-
-
-
-
- 
-
-
- Icon / Label
-
- Icon과 Label을 통해 유저에게 FAB을 클릭하면 발생할 액션에 대한 힌트를
- 제공합니다. 목적과 컨텍스트에 맞는 의미 전달과 직관성을 고려하여 적절한
- Icon과 Label을 선택해야 합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ------- | ---------------------- | ---------- |
-| size | medium, small | small |
-| variant | over paper, over image | over paper |
-| icon | Icon | |
-| label | text | |
-
-## 상호작용
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Extended FAB와 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Action
-
- Space 또는 Enter키를 통해
- Extended FAB의 액션을 실행시킬 수 있습니다.
-
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/floating-action-button/anatomy.png b/docs/content/component/floating-action-button/anatomy.png
deleted file mode 100644
index 7dd0d4a24..000000000
Binary files a/docs/content/component/floating-action-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/floating-action-button/component-meta.json b/docs/content/component/floating-action-button/component-meta.json
deleted file mode 100644
index 3db3b7cbd..000000000
--- a/docs/content/component/floating-action-button/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Floating Action Button",
- "alias": "FAB",
- "description": "화면 계층 최상위에 위치해 액션을 일으킬 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "FABs",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/floating-action-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-fabs-fab--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=52668-36724&t=Cjd6eNQ1wuKddYEt-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-fabs-fab--basic&viewMode=story",
- "height": "100px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/floating-action-button/fab-options-icon.png b/docs/content/component/floating-action-button/fab-options-icon.png
deleted file mode 100644
index f47b036cc..000000000
Binary files a/docs/content/component/floating-action-button/fab-options-icon.png and /dev/null differ
diff --git a/docs/content/component/floating-action-button/fab-options-size.png b/docs/content/component/floating-action-button/fab-options-size.png
deleted file mode 100644
index 2642ab804..000000000
Binary files a/docs/content/component/floating-action-button/fab-options-size.png and /dev/null differ
diff --git a/docs/content/component/floating-action-button/fab-usage-click-touch.png b/docs/content/component/floating-action-button/fab-usage-click-touch.png
deleted file mode 100644
index a1a619a20..000000000
Binary files a/docs/content/component/floating-action-button/fab-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/floating-action-button/fab-usage-keyboard.png b/docs/content/component/floating-action-button/fab-usage-keyboard.png
deleted file mode 100644
index c4595a5df..000000000
Binary files a/docs/content/component/floating-action-button/fab-usage-keyboard.png and /dev/null differ
diff --git a/docs/content/component/floating-action-button/overview.mdx b/docs/content/component/floating-action-button/overview.mdx
deleted file mode 100644
index dea0426c5..000000000
--- a/docs/content/component/floating-action-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/floating-action-button/overview
----
diff --git a/docs/content/component/floating-action-button/style.mdx b/docs/content/component/floating-action-button/style.mdx
deleted file mode 100644
index 41460f5cc..000000000
--- a/docs/content/component/floating-action-button/style.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-slug: /component/floating-action-button/style
----
-
-## Anatomy
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - ButtonPrimitive.Root
-2. Icon : Button에 대한 정보를 전달하는 아이콘
-
-## Visual Options
-
-| Property | Value |
-| -------- | ----- |
-| icon | Icon |
-
-## Visually Represented States
-
-| State | Condition |
-| ------- | ----------------- |
-| enabled | isPressed = False |
-| pressed | isPressed = True |
-
-## 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| ------- | ---- | --------- | ------------------------------ |
-| Enabled | Root | Color | $semantic.color.paper-floating |
-| | Icon | Color | $scale.color.gray-900 |
-| Pressed | Root | Color | $semantic.color.gray-pressed |
-| | Icon | Color | $semantic.color.gray-900 |
-
-## 디자인 결정 (Shadow)
-
-### size=medium
-
-| Part | Attribute | Value |
-| ---- | -------------------- | ------- |
-| Root | Shadow Offset X | 0pt |
-| | Shadow Offset Y | 2pt |
-| | Shadow Blur Radius | 6pt |
-| | Shadow Spread Radius | 0pt |
-| | Shadow Color | #000000 |
-| | Shadow Opacity | 0.16 |
-
-### size=small
-
-| Part | Attribute | Value |
-| ---- | -------------------- | ------- |
-| Root | Shadow Offset X | 0pt |
-| | Shadow Offset Y | 1pt |
-| | Shadow Blur Radius | 3pt |
-| | Shadow Spread Radius | 0pt |
-| | Shadow Color | #000000 |
-| | Shadow Opacity | 0.28 |
-
-## 디자인 결정 (Layout)
-
-### size=medium
-
-| Part | Attribute | Value |
-| ---- | ------------- | ----- |
-| Root | Size | 48pt |
-| | Corner Radius | Full |
-| Icon | Size | 22pt |
-
-### size=small
-
-| Part | Attribute | Value |
-| ---- | ------------- | ----- |
-| Root | Size | 40pt |
-| | Corner Radius | Full |
-| Icon | Size | 20pt |
diff --git a/docs/content/component/floating-action-button/thumbnail.png b/docs/content/component/floating-action-button/thumbnail.png
deleted file mode 100644
index e82a37bb0..000000000
Binary files a/docs/content/component/floating-action-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/floating-action-button/usage.mdx b/docs/content/component/floating-action-button/usage.mdx
deleted file mode 100644
index 87b8193fb..000000000
--- a/docs/content/component/floating-action-button/usage.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-slug: /component/floating-action-button/usage
----
-
-## 구조도
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - ButtonPrimitive.Root
-2. Icon : Button에 대한 정보를 전달하는 아이콘
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- FAB는 small, medium 2개의 사이즈를 가질 수 있습니다. small이 가장
- 보편적으로 사용되며, 다른 사이즈는 페이지 내의 중요도가 높은 경우에
- 제한적으로 사용합니다.
-
-
-
-
-
-
- 
-
-
- Icon
-
- FAB는 icon을 통해 유저에게 FAB을 클릭하면 발생할 액션에 대한 힌트를
- 제공합니다. 목적과 컨텍스트에 맞는 의미 전달과 직관성을 고려하여 적절한
- 아이콘을 선택해야 합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ---- | ------------- | ------ |
-| size | medium, small | small |
-| icon | Icon | |
-
-## 상호작용
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 FAB와 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Action
-
- Space 또는 Enter키를 통해 FAB의
- 액션을 실행시킬 수 있습니다.
-
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/help-bubble/anatomy.png b/docs/content/component/help-bubble/anatomy.png
deleted file mode 100644
index dd068965e..000000000
Binary files a/docs/content/component/help-bubble/anatomy.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/component-meta.json b/docs/content/component/help-bubble/component-meta.json
deleted file mode 100644
index a4d585493..000000000
--- a/docs/content/component/help-bubble/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Help Bubble",
- "description": "특정 요소를 가리키며 간결하고 상황에 맞는 정보를 제공하는 컴포넌트입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/popover/primitive-meta.json",
- "platform": {
- "ios": {
- "status": "in-progress",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-helpbubble-helpbubbleanchor--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?node-id=21727%3A43114&t=NzUk3aVHeSCjDSvb-11"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-helpbubble-helpbubbletrigger--over-component&viewMode=story",
- "height": "260px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "in-progress",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/help-bubble/helpbubble-options-closeoninteractoutside.png b/docs/content/component/help-bubble/helpbubble-options-closeoninteractoutside.png
deleted file mode 100644
index 0c4c41fb4..000000000
Binary files a/docs/content/component/help-bubble/helpbubble-options-closeoninteractoutside.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/helpbubble-options-closetrigger.png b/docs/content/component/help-bubble/helpbubble-options-closetrigger.png
deleted file mode 100644
index 3eff4bb7d..000000000
Binary files a/docs/content/component/help-bubble/helpbubble-options-closetrigger.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/helpbubble-options-modal.png b/docs/content/component/help-bubble/helpbubble-options-modal.png
deleted file mode 100644
index dd30126f6..000000000
Binary files a/docs/content/component/help-bubble/helpbubble-options-modal.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/helpbubble-options-offset.png b/docs/content/component/help-bubble/helpbubble-options-offset.png
deleted file mode 100644
index ec3e83976..000000000
Binary files a/docs/content/component/help-bubble/helpbubble-options-offset.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/helpbubble-options-placement.png b/docs/content/component/help-bubble/helpbubble-options-placement.png
deleted file mode 100644
index c79c9345a..000000000
Binary files a/docs/content/component/help-bubble/helpbubble-options-placement.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/helpbubble-usage-click-touch.png b/docs/content/component/help-bubble/helpbubble-usage-click-touch.png
deleted file mode 100644
index 390dfc4fe..000000000
Binary files a/docs/content/component/help-bubble/helpbubble-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/helpbubble-usage-dismiss.png b/docs/content/component/help-bubble/helpbubble-usage-dismiss.png
deleted file mode 100644
index 147564158..000000000
Binary files a/docs/content/component/help-bubble/helpbubble-usage-dismiss.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/overview.mdx b/docs/content/component/help-bubble/overview.mdx
deleted file mode 100644
index 4c5a9b5ba..000000000
--- a/docs/content/component/help-bubble/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/help-bubble/overview
----
diff --git a/docs/content/component/help-bubble/style.mdx b/docs/content/component/help-bubble/style.mdx
deleted file mode 100644
index 9f8797665..000000000
--- a/docs/content/component/help-bubble/style.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-slug: /component/help-bubble/style
----
-
-## Anatomy
-
-
-
-1. Trigger - Primitive.Trigger
-2. Anchor - Primitive.Anchor
-3. Backdrop - Primitive.Backdrop
-4. Arrow - Primitive.Arrow
-5. Content - Primitive.Content
-6. Message - Primitive.Description
-7. Close Trigger - Primitive.CloseTrigger
-
-## Root
-
-### Visual Options
-
-| Property | Value |
-| ------------------ | ----------- |
-| show close trigger | false, true |
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | --------------- |
-| modal | isModal = True |
-| nonmodal | isModal = False |
-
-## 디자인 결정 (Color)
-
-### nonmodal
-
-| Part | Attribute | Value |
-| -------------- | --------- | --------------------- |
-| Arrow, Content | Color | $scale.color.gray-900 |
-| Message | Color | $scale.color.gray-00 |
-
-### modal
-
-| Part | Attribute | Value |
-| -------------- | --------- | --------------------------- |
-| Arrow, Content | Color | $static.color.static-white |
-| Message | Color | $static.color.static-black |
-| Backdrop | Color | $scale.color.gray-alpha-500 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ------- | ---------- | ---------------------------------- |
-| Message | Typography | $semantic.typography.caption1-bold |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ------------- | ------------------ | ----- |
-| Content | Horizontal Padding | 12pt |
-| | Vertical Padding | 8pt |
-| | Corner Radius | 6pt |
-| Close Trigger | Size | 18pt |
diff --git a/docs/content/component/help-bubble/thumbnail.png b/docs/content/component/help-bubble/thumbnail.png
deleted file mode 100644
index 9023773b5..000000000
Binary files a/docs/content/component/help-bubble/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/help-bubble/usage.mdx b/docs/content/component/help-bubble/usage.mdx
deleted file mode 100644
index c0f9607c0..000000000
--- a/docs/content/component/help-bubble/usage.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
----
-slug: /component/help-bubble/usage
----
-
-## 구조도
-
-
-
-1. Trigger
-2. Anchor
-3. Backdrop
-4. Arrow
-5. Content
-6. Message
-7. Close Trigger
-
-## 옵션
-
-
-
- 
-
-
- Placement
-
- Help Bubble은 Trigger를 기준으로 위치를 지정합니다. 다양한 Placement
- 옵션을 적절히 배치하여, 유저가 최대한 편리하게 정보를 이해하고 접근할 수
- 있도록 도와줍니다.
-
-
-
-
-
-
- 
-
-
- Offset
-
- Offset은 Help Bubble과 Trigger 사이의 거리 값입니다. 기본값은 8입니다.
-
-
-
-
-
-
- 
-
-
- Modal
-
- Modal 옵션은 유저의 화면을 일시적으로 멈춘 뒤 전달해야 하는 중요한 정보인
- 경우에 사용합니다. 다른 요소와 상호작용 할 수 없음을 Backdrop을 통해
- 전달합니다.
-
-
-
-
-
-
- 
-
-
- Close Trigger
-
- Help Bubble은 Close trigger를 가질 수 있습니다. 유저가 Help Bubble의
- 내용을 모두 읽었거나, 더 이상 필요하지 않을 때 Close trigger를 통해 닫을
- 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Close On Interact Outside
-
- Help Bubble 외부를 클릭하거나 터치, 또는 Tab키를 통해 다른 요소에 Focus 했을 때 Help
- Bubble을 닫을지 여부를 결정할 수 있습니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| placement | "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end" | "bottom-center" |
-| offset | number | 8pt |
-| cross offset | number | 0pt |
-| is modal | false, true | gray |
-| default open | false, true | false |
-| show close trigger | false, true | false |
-| close on interact outside | false, true | true |
-
-## 상호작용
-
-
-
- 
-
-
- Click, Touch는 Close Button 영역에만 작동합니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Dismiss
-
- Esc키를 통해 Help Bubble을 닫을 수 있습니다.
-
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/menu-floating-action-button/anatomy.png b/docs/content/component/menu-floating-action-button/anatomy.png
deleted file mode 100644
index a2356d5c0..000000000
Binary files a/docs/content/component/menu-floating-action-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/component-meta.json b/docs/content/component/menu-floating-action-button/component-meta.json
deleted file mode 100644
index 671109d9b..000000000
--- a/docs/content/component/menu-floating-action-button/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Menu Floating Action Button",
- "alias": "Menu FAB",
- "description": "화면 계층 최상위에 위치해 메뉴를 표시 여부를 결정할 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "group": "FABs",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/menu-floating-action-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-fabs-menufab--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=52685-35428&t=Cjd6eNQ1wuKddYEt-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-fabs-menufab--basic&viewMode=story",
- "height": "300px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/menu-floating-action-button/menufab-options-extended.png b/docs/content/component/menu-floating-action-button/menufab-options-extended.png
deleted file mode 100644
index 11f6ecf32..000000000
Binary files a/docs/content/component/menu-floating-action-button/menufab-options-extended.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/menufab-options-label.png b/docs/content/component/menu-floating-action-button/menufab-options-label.png
deleted file mode 100644
index c11792742..000000000
Binary files a/docs/content/component/menu-floating-action-button/menufab-options-label.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/menufab-usage-action.png b/docs/content/component/menu-floating-action-button/menufab-usage-action.png
deleted file mode 100644
index 12c089d35..000000000
Binary files a/docs/content/component/menu-floating-action-button/menufab-usage-action.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/menufab-usage-click-touch.png b/docs/content/component/menu-floating-action-button/menufab-usage-click-touch.png
deleted file mode 100644
index f80e6cffd..000000000
Binary files a/docs/content/component/menu-floating-action-button/menufab-usage-click-touch.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/menufab-usage-dismiss.png b/docs/content/component/menu-floating-action-button/menufab-usage-dismiss.png
deleted file mode 100644
index 97c6875d1..000000000
Binary files a/docs/content/component/menu-floating-action-button/menufab-usage-dismiss.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/menufab-usage-focus1.png b/docs/content/component/menu-floating-action-button/menufab-usage-focus1.png
deleted file mode 100644
index d17117856..000000000
Binary files a/docs/content/component/menu-floating-action-button/menufab-usage-focus1.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/menufab-usage-focus2.png b/docs/content/component/menu-floating-action-button/menufab-usage-focus2.png
deleted file mode 100644
index b06a3d1c8..000000000
Binary files a/docs/content/component/menu-floating-action-button/menufab-usage-focus2.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/overview.mdx b/docs/content/component/menu-floating-action-button/overview.mdx
deleted file mode 100644
index be95267bd..000000000
--- a/docs/content/component/menu-floating-action-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/menu-floating-action-button/overview
----
diff --git a/docs/content/component/menu-floating-action-button/style.mdx b/docs/content/component/menu-floating-action-button/style.mdx
deleted file mode 100644
index 08cd765a5..000000000
--- a/docs/content/component/menu-floating-action-button/style.mdx
+++ /dev/null
@@ -1,272 +0,0 @@
----
-slug: /component/menu-floating-action-button/style
----
-
-## Anatomy
-
-
-
-1. Trigger - ButtonPrimitive.Root
-2. Trigger Icon
-3. Trigger Label - ButtonPrimitive.Label
-4. Backdrop
-5. Menu
-6. Menu Item Group
-7. Menu Item - ButtonPrimitive.Root
-8. Menu Item Icon
-9. Menu Item Label - ButtonPrimitive.Label
-10. Primary Menu Item - ButtonPrimitive.Root
-
-## Root
-
-### Visually Represented States
-
-| State | Condition |
-| ------ | -------------- |
-| Closed | isOpen = false |
-| Open | isOpen = true |
-
-### 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| ------ | -------- | --------- | --------------------------- |
-| \* | Backdrop | Color | $semantic.color.overlay-dim |
-| Closed | Backdrop | Opacity | 0% |
-| | Menu | Opacity | 0% |
-| Open | Backdrop | Opacity | 100% |
-| | Menu | Opacity | 100% |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| -------------- | --------- | ----- |
-| Menu / Trigger | Spacing | 12pt |
-
-### 디자인 결정 (Transform)
-
-| State | Part | Attribute | Value |
-| ------ | ---- | --------- | ---------------- |
-| Closed | Menu | Transform | translateY(25pt) |
-| | | | scale(0.3) |
-| Open | Menu | Transform | translateY(0pt) |
-| | | | scale(1) |
-
-### 디자인 결정 (Motion)
-
-| From | To | Part | Property | Attribute | Value |
-| ------ | ------ | -------- | --------- | --------------- | -------------------------------------- |
-| Closed | Open | Backdrop | Opacity | Duration | 100ms |
-| | | | | Delay | 50ms |
-| | | Menu | Opacity | Duration | 150ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | | Transform | Duration | 200ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| Open | Closed | Backdrop | Opacity | Duration | 100ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | Menu | Opacity | Duration | 150ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | | Transform | Duration | 150ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-
-## Trigger
-
-### Visual Options
-
-| Property | Value |
-| ---------- | ----------- |
-| isExtended | false, true |
-| label | text |
-
-### Visually Represented States
-
-| State | Condition |
-| ------- | ----------------- |
-| Enabled | isPressed = false |
-| Pressed | isPressed = true |
-
-| State | Condition |
-| --------- | ---------------------------------- |
-| Shortened | isOpen = false, isExtended = false |
-| Extended | isOpen = false, isExtended = true |
-| Closed | isOpen = false |
-| Open | isOpen = true |
-
-### 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| --------------- | ----------- | --------- | ------------------------------- |
-| Closed, Enabled | Trigger | Color | $semantic.color.primary |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Closed, Pressed | Trigger | Color | $semantic.color.primary-pressed |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Open, Enabled | Trigger | Color | $semantic.color.paper-floating |
-| | Label, Icon | Color | $scale.color.gray-900 |
-| Open, Pressed | Trigger | Color | $semantic.color.gray-pressed |
-| | Label, Icon | Color | $scale.color.gray-900 |
-
-### 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label2-bold |
-
-### 디자인 결정 (Shadow)
-
-| Part | Attribute | Value |
-| ---- | -------------------- | ------- |
-| Root | Shadow Offset X | 0pt |
-| | Shadow Offset Y | 2pt |
-| | Shadow Blur Radius | 6pt |
-| | Shadow Spread Radius | 0pt |
-| | Shadow Color | #000000 |
-| | Shadow Opacity | 0.10 |
-
-### 디자인 결정 (Layout)
-
-| State | Part | Attribute | Value |
-| --------------- | ---------------------------- | ------------------ | ----- |
-| \* | Trigger | Margin | 16pt |
-| Shortened, Open | Trigger | Padding | 16pt |
-| | | Corner Radius | Full |
-| | Trigger Icon | Size | 24pt |
-| Extended | Trigger | Horizontal Padding | 18pt |
-| | | Vertical Padding | 12pt |
-| | | Corner Radius | Full |
-| | Trigger Icon | Size | 16pt |
-| | Trigger Icon / Trigger Label | Spacing | 4pt |
-
-### 디자인 결정 (Transform)
-
-| State | Part | Attribute | Value |
-| --------- | ------------- | --------- | --------------- |
-| Extended | Trigger Label | Transform | translateX(8pt) |
-| Shortened | Trigger Label | Transform | translateX(0pt) |
-| Open | Trigger Label | Transform | translateX(8pt) |
-| | Trigger Icon | Transform | rotate(45deg) |
-
-### 디자인 결정 (Motion)
-
-| From | To | Part | Property | Attribute | Value |
-| --------- | --------- | ------------- | --------- | --------------- | -------------------------------------- |
-| Shortened | Extended | Trigger | Layout | Duration | 250ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | Trigger Label | Opacity | Duration | 100ms |
-| | | | | Delay | 50ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| Extended | Shortened | Trigger | Layout | Duration | 250ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | Trigger Label | Opacity | Duration | 100ms |
-| | | | | Delay | 50ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| Extended | Open | Trigger | Layout | Duration | 200ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | Trigger Label | Opacity | Duration | 100ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| Open | Extended | Trigger | Layout | Duration | 150ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| | | Trigger Label | Opacity | Duration | 100ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| Shortened | Open | Trigger Icon | Transform | Duration | 200ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-| Oepn | Shortened | Trigger Icon | Transform | Duration | 200ms |
-| | | | | Timing Function | $scale.timing-function.standard-easing |
-
-## Menu
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ------------------------------------------------ | ------------------ | ----- |
-| Menu | Min Width | 180pt |
-| | Margin | 16pt |
-
-## Primary Menu Item
-
-### 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| ------- | ----------------- | --------- | ------------------------------ |
-| Enabled | Primary Menu Item | Color | $semantic.color.paper-floating |
-| Hovered | Primary Menu Item | Color | $scale.color.gray-alpha-50 |
-| Pressed | Primary Menu Item | Color | $scale.color.gray-alpha-50 |
-
-### 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ----------------------- | ---------- | ----------------------------------- |
-| Primary Menu Item Label | Typography | $semantic.typography.label2-regular |
-
-### 디자인 결정 (Shadow)
-
-| Part | Attribute | Value |
-| ----------------- | -------------------- | ------- |
-| Primary Menu Item | Shadow Offset X | 0pt |
-| | Shadow Offset Y | 2pt |
-| | Shadow Blur Radius | 6pt |
-| | Shadow Spread Radius | 0pt |
-| | Shadow Color | #000000 |
-| | Shadow Opacity | 0.10 |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ------------------------------------------------ | ------------------ | ----- |
-| Primary Menu Item | Horizontal Padding | 16pt |
-| | Vertical Padding | 12pt |
-| | Corner Radius | 14pt |
-| Primary Menu Item Icon / Primary Menu Item Label | Spacing | 10pt |
-| Menu Item Group / Primary Menu Item | Spacing | 8pt |
-
-## Menu Item
-
-### 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| ------- | --------------- | --------- | -------------------------- |
-| Enabled | Menu Item Label | Color | $scale.color.gray-900 |
-| Hovered | Menu Item | Color | $scale.color.gray-alpha-50 |
-| Hovered | Menu Item Label | Color | $scale.color.gray-900 |
-| Pressed | Menu Item | Color | $scale.color.gray-alpha-50 |
-| Pressed | Menu Item Label | Color | $scale.color.gray-900 |
-
-### 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| --------------- | ---------- | ----------------------------------- |
-| Menu Item Label | Typography | $semantic.typography.label2-regular |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| -------------------------------- | ------------------ | ----- |
-| Menu Item | Horizontal Padding | 16pt |
-| | Vertical Padding | 10pt |
-| Menu Item Icon | Size | 20pt |
-| Menu Item Icon / Menu Item Label | Spacing | 10pt |
-
-## Menu Item Group
-
-### 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| --------------- | --------- | ------------------------------ |
-| Menu Item Group | Color | $semantic.color.paper-floating |
-
-### 디자인 결정 (Shadow)
-
-| Part | Attribute | Value |
-| --------------- | -------------------- | ------- |
-| Menu Item Group | Shadow Offset X | 0pt |
-| | Shadow Offset Y | 2pt |
-| | Shadow Blur Radius | 6pt |
-| | Shadow Spread Radius | 0pt |
-| | Shadow Color | #000000 |
-| | Shadow Opacity | 0.10 |
-
-### 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| --------------- | ---------------- | ----- |
-| Menu Item Group | Corner Radius | 14pt |
-| | Vertical Padding | 8pt |
diff --git a/docs/content/component/menu-floating-action-button/thumbnail.png b/docs/content/component/menu-floating-action-button/thumbnail.png
deleted file mode 100644
index d21ba2f28..000000000
Binary files a/docs/content/component/menu-floating-action-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/menu-floating-action-button/usage.mdx b/docs/content/component/menu-floating-action-button/usage.mdx
deleted file mode 100644
index f76888b97..000000000
--- a/docs/content/component/menu-floating-action-button/usage.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
----
-slug: /component/menu-floating-action-button/usage
----
-
-## 구조도
-
-
-
-1. Button - ButtonPrimitive.Button
-2. Label - ButtonPrimitive.Label
-3. Icon
-4. Backdrop
-5. Menu
-6. Menu Item
-7. Menu Item Label
-8. Menu Item Group
-
-## 옵션
-
-
-
- 
-
-
- Extended
-
- Menu FAB는 Extended 옵션을 통해 Label을 보조적으로 표현할 수 있습니다.
- 주로 스크롤 인터랙션에 맞추어 제공합니다.
-
-
-
-
-
-
- 
-
-
- Label
-
- Label 옵션은 Icon을 보조하며, 유저가 Menu FAB를 클릭했을 시 발생할 액션에
- 대해 명확한 정보를 전달합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ---------- | ----------- | ------ |
-| isExtended | false, true | false |
-| label | text | |
-
-## 상호작용
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Menu FAB와 상호작용할 수 있습니다.
-
-
-
-### 키보드
-
-
-
- 
-
-
- Menu Open
-
- Trigger에 Focus된 상태에서 Space 또는
- Enter키를 통해 Menu를 열 수 있습니다. 이때 Focus가 Primary
- Menu Item으로 이동합니다.
-
-
-
-
-
-
- 
-
-
- Focus
-
- ↑ 또는 ↓키를 통해 Menu Item간
- Focus 이동이 가능합니다.
-
-
-
-
-
-
- 
-
-
- Action
-
- Menu Item에 Focus된 상태에서 Space 또는
- Enter키를 통해 Menu Item의 액션을 실행시킬 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Dismiss
-
- Esc키, 혹은 Trigger에 Focus된 상태에서
- Space 또는
- Enter키를 통해 Menu를 닫을 수 있습니다.
-
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/multiline-text-field/anatomy.png b/docs/content/component/multiline-text-field/anatomy.png
deleted file mode 100644
index 57d8cf671..000000000
Binary files a/docs/content/component/multiline-text-field/anatomy.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/component-meta.json b/docs/content/component/multiline-text-field/component-meta.json
deleted file mode 100644
index f4be408f9..000000000
--- a/docs/content/component/multiline-text-field/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Multiline Text Field",
- "description": "장문의 텍스트를 여러 줄에 걸쳐 입력할 수 있는 폼 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/text-field/primitive-meta.json",
- "group": "Text Fields",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/multiline-text-field"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-textfields-multilinetextfield--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?node-id=22954-53089&t=5IQyBHEofStvZOhU-11"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-textfields-multilinetextfield--basic&viewMode=story",
- "height": "300px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-keyboard-control-1.png b/docs/content/component/multiline-text-field/multilinetextfield-keyboard-control-1.png
deleted file mode 100644
index 7bfb520a2..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-keyboard-control-1.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-keyboard-control-2.png b/docs/content/component/multiline-text-field/multilinetextfield-keyboard-control-2.png
deleted file mode 100644
index d3e15b6c2..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-keyboard-control-2.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-options-description.png b/docs/content/component/multiline-text-field/multilinetextfield-options-description.png
deleted file mode 100644
index f901f8e83..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-options-description.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-options-disabled.png b/docs/content/component/multiline-text-field/multilinetextfield-options-disabled.png
deleted file mode 100644
index d1c88aa91..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-options-error.png b/docs/content/component/multiline-text-field/multilinetextfield-options-error.png
deleted file mode 100644
index 4121791fa..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-options-error.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-options-label.png b/docs/content/component/multiline-text-field/multilinetextfield-options-label.png
deleted file mode 100644
index 69b55f8c2..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-options-label.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-options-max-length.png b/docs/content/component/multiline-text-field/multilinetextfield-options-max-length.png
deleted file mode 100644
index ece36650a..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-options-max-length.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-options-read-only.png b/docs/content/component/multiline-text-field/multilinetextfield-options-read-only.png
deleted file mode 100644
index bcffa2e36..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-options-read-only.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-options-required-or-optional.png b/docs/content/component/multiline-text-field/multilinetextfield-options-required-or-optional.png
deleted file mode 100644
index 78ba30b8c..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-options-required-or-optional.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-overflow-1.png b/docs/content/component/multiline-text-field/multilinetextfield-overflow-1.png
deleted file mode 100644
index 6505ede51..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-overflow-1.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-overflow-2.png b/docs/content/component/multiline-text-field/multilinetextfield-overflow-2.png
deleted file mode 100644
index 37d3c78ea..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-overflow-2.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-read-only.png b/docs/content/component/multiline-text-field/multilinetextfield-read-only.png
deleted file mode 100644
index 588d9735b..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-read-only.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/multilinetextfield-touch-mouse-control.png b/docs/content/component/multiline-text-field/multilinetextfield-touch-mouse-control.png
deleted file mode 100644
index 12523ed02..000000000
Binary files a/docs/content/component/multiline-text-field/multilinetextfield-touch-mouse-control.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/overview.mdx b/docs/content/component/multiline-text-field/overview.mdx
deleted file mode 100644
index c1ea11051..000000000
--- a/docs/content/component/multiline-text-field/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/multiline-text-field/overview
----
diff --git a/docs/content/component/multiline-text-field/style.mdx b/docs/content/component/multiline-text-field/style.mdx
deleted file mode 100644
index 6575f553f..000000000
--- a/docs/content/component/multiline-text-field/style.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-slug: /component/multiline-text-field/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Label - Primitive.Label
-3. Required indicator
-4. Optional indicator
-5. Field - Primitive.Input
-6. Field text
-7. Placeholder
-8. Cursor
-9. Character count
-10. Max Length
-11. Description - Primitive.Description
-12. Error message - Primitive.ErrorMessage
-
-## Visual Options
-
-| Property | Value |
-| ------------------ | ------ |
-| label | text |
-| placeholder | text |
-| max length | number |
-| description | text |
-| error message | text |
-| required indicator | text |
-| optional indicator | text |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------- |
-| enabled | isDisabled = false, isReadOnly = false, isFocused = false |
-| focused | isDisabled = false, isReadOnly = false, isFocused = true |
-| readonly | isDisabled = false, isReadOnly = true |
-| disabled | isDisabled = true |
-
-| State | Condition |
-| ------- | ----------------- |
-| valid | isInvalid = false |
-| invalid | isInvalid = true |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ------------- | --------- | --------------------- |
-| Label, Cursor | Color | $scale.color.gray-900 |
-
-| State | Part | Attribute | Value |
-| -------- | --------------- | ------------- | ----------------------------- |
-| Enabled | Field | Color | $semantic.color.paper-default |
-| | | Outline Color | $scale.color.gray-400 |
-| | Field(invalid) | Color | $semantic.color.danger-low |
-| | | Outline Color | $semantic.color.danger |
-| | Field text | Color | $scale.color.gray-900 |
-| | Placeholder | Color | $scale.color.gray-600 |
-| | Charcter Count | Color | $scale.color.gray-600 |
-| | Max Length | Color | $scale.color.gray-600 |
-| | Description | Color | $scale.color.gray-600 |
-| | Error Message | Color | $semantic.color.danger |
-| Focused | Field | Color | $semantic.color.paper-default |
-| | | Outline Color | $scale.color.gray-900 |
-| | Field(invalid) | Color | $semantic.color.danger-low |
-| | | Outline Color | $semantic.color.danger |
-| | Field text | Color | $scale.color.gray-900 |
-| | Placeholder | Color | $scale.color.gray-600 |
-| | Character Count | Color | $scale.color.gray-900 |
-| | Max Length | Color | $scale.color.gray-600 |
-| | Description | Color | $scale.color.gray-600 |
-| | Error Message | Color | $semantic.color.danger |
-| Readonly | Field | Color | $scale.color.gray-50 |
-| | | Outline Color | $scale.color.gray-400 |
-| | Field text | Color | $scale.color.gray-900 |
-| | Placeholder | Color | $scale.color.gray-600 |
-| | Character Count | Color | $scale.color.gray-600 |
-| | Max Length | Color | $scale.color.gray-600 |
-| | Description | Color | $scale.color.gray-600 |
-| Disabled | Field | Color | $scale.color.gray-100 |
-| | | Outline Color | $scale.color.gray-400 |
-| | Field text | Color | $scale.color.gray-400 |
-| | Placeholder | Color | $scale.color.gray-400 |
-| | Character Count | Color | $scale.color.gray-300 |
-| | Max Length | Color | $scale.color.gray-300 |
-| | Description | Color | $scale.color.gray-400 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| -------------------------------------- | ---------- | ------------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-| Required Indicator, Optional Indicator | Typography | $semantic.typography.label3-regular |
-| Field Text, Placeholder | Typography | $semantic.typography.body-m1-regular |
-| Character Count | Typography | $semantic.typography.caption2-regular |
-| Description | Typography | $semantic.typography.label3-regular |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ---------------------------- | ------------------ | ----- |
-| Field | Corner Radius | 6pt |
-| | Horizontal Padding | 16pt |
-| | Vertical Padding | 12pt |
-| Character Count | Text Align | Right |
-| Field Text / Character Count | Vertical Spacing | 4pt |
-| Label / Required Indicator | Horizontal Spacing | 4pt |
-| Label / Field | Vertical Spacing | 12pt |
-| Field / Description | Vertical Spacing | 8pt |
diff --git a/docs/content/component/multiline-text-field/thumbnail.png b/docs/content/component/multiline-text-field/thumbnail.png
deleted file mode 100644
index bebf77c17..000000000
Binary files a/docs/content/component/multiline-text-field/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/multiline-text-field/usage.mdx b/docs/content/component/multiline-text-field/usage.mdx
deleted file mode 100644
index 16eda2836..000000000
--- a/docs/content/component/multiline-text-field/usage.mdx
+++ /dev/null
@@ -1,213 +0,0 @@
----
-slug: /component/multiline-text-field/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Label
-3. Required indicator
-4. Optional indicator
-5. Field
-6. Field text
-7. Placeholder
-8. Cursor
-9. Character count
-10. Max Length
-11. Description
-12. Error message
-
-## 옵션
-
-
-
- 
-
-
- Label과 Placeholder
-
- Label과 Placeholder는 Multiline Text Field가 사용자에게 요구하는 항목에
- 대한 설명을 제공합니다. 명시적 정보 전달을 위해 Label과 Placeholder를
- 표시하는 것을 권장합니다.
-
-
-
-
-
-
- 
-
-
- Description
-
- Description을 통해 사용자가 입력해야 하는 내용에 대한 추가 컨텍스트나
- 도움말을 제공할 수 있습니다. 특정 요구사항이나 힌트 텍스트를 전달합니다.
-
-
-
-
-
-
- 
-
-
- Error Message
-
- Multiline Text Field의 필수 요구 사항이 충족되지 않았거나, 잘못된 정보를
- 기입했을 경우 사용자에게 에러 메세지를 전달합니다.
-
-
-
-
-
-
- 
-
-
- Required or Optional
-
- Required or Optional indicator를 통해 사용자에게 입력값이 필수 또는 선택
- 사항인지 표시할 수 있습니다. 선택 사항인 경우 '선택' 이라는 힌트 텍스트를
- 제공하거나, 아예 표시하지 않습니다.
-
-
-
-
-
-
- 
-
-
- Max Length
-
- Multiline Text Field에 사용자가 입력할 수 있는 최대 글자 수를 표시합니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Text Field가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-
-
- 
-
-
- Read only
-
- Read only 상태는 읽기 전용 옵션입니다. 복사나 드래그는 가능하지만 상호
- 작용이나 텍스트 입력, 변경은 불가능한 상태입니다.
-
-
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ------------------ | ----------- | ------ | -------------------------------------------------- |
-| label | text | | |
-| placeholder | text | | |
-| max length | number | | |
-| description | text | | |
-| error message | text | | |
-| required indicator | text | | |
-| optional indicator | text | | |
-| is disabled | true, false | false | true일 경우, Text field가 유저와 상호작용하지 않음 |
-| is readonly | true, false | false | true일 경우, value를 변경할 수 없음 |
-| is required | true, false | false | true일 경우, value가 필수임을 나타냄 |
-| is invalid | true, false | false | true일 경우, value가 유효하지 않은 값임을 나타냄 |
-
-## 상호작용
-
-### 터치/마우스 상호작용
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Text Field를 동작시킬 수 있는 영역입니다.
-
-
-
-
-
- 
-
-
- Read only일 경우 드래그나 복사는 가능하지만 상호 작용이나 텍스트 입력,
- 변경은 불가능한 상태입니다.
-
-
-
-
-
-### 키보드 상호작용
-
-
-
- 
-
-
- Focused
-
- Tab키를 통해 focused, enabled 상태로 진입이
- 가능합니다.
-
-
-
-
-
-
- 
-
-
- Selected text
-
- 이미 작성한 텍스트가 있는 경우, Tab키를 통해 텍스트
- selected 상태로 진입 가능합니다.
-
-
-
-
-### Overflow
-
-
-
- 
-
-
- Label의 문구가 텍스트 필드의 Width보다 입력값이 길면 줄바꿈되어 보여집니다.
-
-
- 
-
-
- Description이 Width 공간보다 길면 줄바꿈되어 보여집니다.
-
-
diff --git a/docs/content/component/radio-group/anatomy.png b/docs/content/component/radio-group/anatomy.png
deleted file mode 100644
index 007aee11f..000000000
Binary files a/docs/content/component/radio-group/anatomy.png and /dev/null differ
diff --git a/docs/content/component/radio-group/component-meta.json b/docs/content/component/radio-group/component-meta.json
deleted file mode 100644
index c93aa5dfc..000000000
--- a/docs/content/component/radio-group/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Radio Group",
- "description": "두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 컨트롤입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/radio-group/primitive-meta.json",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/radio-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-radiogroup--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=51313-38807&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-radiogroup--basic&viewMode=story",
- "height": "180px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/radio-group/overview.mdx b/docs/content/component/radio-group/overview.mdx
deleted file mode 100644
index fa8f6d3f7..000000000
--- a/docs/content/component/radio-group/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/radio-group/overview
----
diff --git a/docs/content/component/radio-group/radio-behavior-1.png b/docs/content/component/radio-group/radio-behavior-1.png
deleted file mode 100644
index b4abd3923..000000000
Binary files a/docs/content/component/radio-group/radio-behavior-1.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-behavior-2.png b/docs/content/component/radio-group/radio-behavior-2.png
deleted file mode 100644
index eb506cf49..000000000
Binary files a/docs/content/component/radio-group/radio-behavior-2.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-behavior-3.png b/docs/content/component/radio-group/radio-behavior-3.png
deleted file mode 100644
index 768bf2cc8..000000000
Binary files a/docs/content/component/radio-group/radio-behavior-3.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-options-disabled.png b/docs/content/component/radio-group/radio-options-disabled.png
deleted file mode 100644
index 539de7f04..000000000
Binary files a/docs/content/component/radio-group/radio-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-options-label.png b/docs/content/component/radio-group/radio-options-label.png
deleted file mode 100644
index 67a77d477..000000000
Binary files a/docs/content/component/radio-group/radio-options-label.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-options-selection.png b/docs/content/component/radio-group/radio-options-selection.png
deleted file mode 100644
index 60d0619a1..000000000
Binary files a/docs/content/component/radio-group/radio-options-selection.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-options-size.png b/docs/content/component/radio-group/radio-options-size.png
deleted file mode 100644
index 528cb04c4..000000000
Binary files a/docs/content/component/radio-group/radio-options-size.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-style-overflow.png b/docs/content/component/radio-group/radio-style-overflow.png
deleted file mode 100644
index 6354d42fe..000000000
Binary files a/docs/content/component/radio-group/radio-style-overflow.png and /dev/null differ
diff --git a/docs/content/component/radio-group/radio-touch-mouse-control-1.png b/docs/content/component/radio-group/radio-touch-mouse-control-1.png
deleted file mode 100644
index 339e2b834..000000000
Binary files a/docs/content/component/radio-group/radio-touch-mouse-control-1.png and /dev/null differ
diff --git a/docs/content/component/radio-group/style.mdx b/docs/content/component/radio-group/style.mdx
deleted file mode 100644
index c5470e8d3..000000000
--- a/docs/content/component/radio-group/style.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
----
-slug: /component/radio-group/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Radio - Primitive.Radio
-3. Radio Control - Primitive.ItemControl
-4. Radio Control Icon
-5. Radio Label - Primitive.ItemLabel
-
-## Root
-
-### Visual Options
-
-| Property | Value | Description |
-| -------- | -------------------- | ----------- |
-| size | small, medium, large | |
-
-## Radio
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | ----------------------------------------------------------- |
-| enabled | isDisabled OFF, isHovered OFF, isFocused OFF, isPressed OFF |
-| hovered | isDisabled OFF, isPressed OFF, isHovered ON |
-| focused | isDisabled OFF, isPressed OFF, isFocused ON |
-| pressed | isDisabled OFF, isPressed ON |
-| disabled | isDisabled ON |
-
-| State | Condition |
-| ---------- | ----------------------------------- |
-| unselected | isIndeterminate OFF, isSelected OFF |
-| selected | isIndeterminate OFF, isSelected ON |
-
-| State | Condition |
-| ------- | ------------- |
-| invalid | isInvalid ON |
-| valid | isInvalid OFF |
-
-### 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| -------- | ---------------------------- | ------------- | ------------------------------- |
-| Enabled | Radio Control (unselected) | Color | None |
-| | | Outline Color | $scale.color.gray-300 |
-| | Radio Control (selected) | Color | $semantic.color.primary |
-| | | Outline Color | None |
-| | Radio Control Icon(selected) | Color | $semantic.color.on-primary |
-| | Radio Label | Color | $scale.color.gray-900 |
-| Hovered | Radio Control (unselected) | Color | $semantic.color.gray-hover |
-| | | Outline Color | $scale.color.gray-300 |
-| | Radio Control (selected) | Color | $semantic.color.primary-hover |
-| | | Outline Color | None |
-| | Radio Control Icon(selected) | Color | $semantic.color.on-primary |
-| | Radio Label | Color | $scale.color.gray-900 |
-| Pressed | Radio Control (unselected) | Color | $semantic.color.gray-pressed |
-| | | Outline Color | $scale.color.gray-300 |
-| | Radio Control (selected) | Color | $semantic.color.primary-pressed |
-| | | Outline Color | None |
-| | Radio Control Icon(selected) | Color | $semantic.color.on-primary |
-| | Radio Label | Color | $scale.color.gray-900 |
-| Disabled | Radio Control (unselected) | Color | $scale.color.gray-200 |
-| | | Outline Color | $scale.color.gray-300 |
-| | Radio Control (selected) | Color | None |
-| | | Outline Color | $scale.color.gray-200 |
-| | Radio Control Icon(selected) | Color | $scale.color.gray-200 |
-| | Radio Label | Color | $scale.color.gray-400 |
-
-### 디자인 결정 (Typography)
-
-#### Size=Large
-
-| Part | Attribute | Value |
-| ----------- | ---------- | ----------------------------------- |
-| Radio Label | Typography | $semantic.typography.label2-regular |
-
-#### Size=Medium
-
-| Part | Attribute | Value |
-| ----------- | ---------- | ----------------------------------- |
-| Radio Label | Typography | $semantic.typography.label3-regular |
-
-#### Size=Small
-
-| Part | Attribute | Value |
-| ----------- | ---------- | ------------------------------------- |
-| Radio Label | Typography | $semantic.typography.caption1-regular |
-
-### 디자인 결정 (Layout)
-
-#### Size=Large
-
-| Part | Attribute | Value |
-| --------------------------- | ---------- | ----- |
-| Radio | Min Height | 36pt |
-| Radio Control | Size | 24pt |
-| Radio Control Icon | Size | 10pt |
-| Radio Control / Radio Label | Spacing | 8pt |
-
-#### Size=Medium
-
-| Part | Attribute | Value |
-| --------------------------- | ---------- | ----- |
-| Radio | Min Height | 30pt |
-| Radio Control | Size | 20pt |
-| Radio Control Icon | Size | 8pt |
-| Radio Control / Radio Label | Spacing | 8pt |
-
-#### Size=Small
-
-| Part | Attribute | Value |
-| --------------------------- | ---------- | ----- |
-| Radio | Min Height | 27pt |
-| Radio Control | Size | 18pt |
-| Radio Control Icon | Size | 7pt |
-| Radio Control / Radio Label | Spacing | 8pt |
-
-### 디자인 결정 (Motion)
-
-| State | Part | Property | Attribute | Value |
-| ---------- | ------------------ | --------- | --------------- | -------------------------------------- |
-| Selected | Radio Control Icon | transform | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| Selected | Radio Control | opacity | Duration | 50ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-| Unselected | Radio Control | opacity | Duration | 50ms |
-| | | | Timing Function | $scale.timing-function.standard-easing |
-
-#### State=Selected
-
-| Part | Attribute | From | To |
-| ------------------ | --------- | -------- | -------- |
-| Radio Control Icon | transform | scale(0) | scale(1) |
-| Radio Control | opacity | 0 | 1 |
-
-#### State=Unselected
-
-| Part | Attribute | From | To |
-| ------------- | --------- | ---- | --- |
-| Radio Control | opacity | 1 | 0 |
diff --git a/docs/content/component/radio-group/thumbnail.png b/docs/content/component/radio-group/thumbnail.png
deleted file mode 100644
index 9b5a0c7b1..000000000
Binary files a/docs/content/component/radio-group/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/radio-group/usage.mdx b/docs/content/component/radio-group/usage.mdx
deleted file mode 100644
index d5d2e59de..000000000
--- a/docs/content/component/radio-group/usage.mdx
+++ /dev/null
@@ -1,155 +0,0 @@
----
-slug: /component/radio-group/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Radio
-3. Radio Control
-4. Radio Control Icon
-5. Radio Label
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Radio Group은 small, medium, large 3개의 사이즈를 가질 수 있습니다.
- medium이 가장 보편적으로 사용되며, 다른 사이즈는 페이지 내의 중요도를
- 나눠서 표현해야 할 때만 제한적으로 사용합니다.
-
-
-
-
-
-
- 
-
-
- Label
-
- Radio는 항상 Label을 가져야 합니다. Label이 설정되지 않은 Radio는 다른
- 컴포넌트와의 관계가 매우 명확하고, 사용자에게 충분한 맥락을 전달할 수
- 있을때만 사용합니다.
-
-
-
-
-
-
- 
-
-
- Selection
-
- Radio는 selected, unselected 중 하나의 상태를 가질 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Radio가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블 (Radio Group)
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | -------------------- | ------ | -------------------------------------------------------- |
-| size | small, medium, large | medium | |
-| is disabled | true, false | false | true일 경우, Radio Group 전체가 유저와 상호작용하지 않음 |
-| is readonly | true, false | false | true일 경우, isSelected를 변경할 수 없음 |
-| is required | true, false | false | true일 경우, isSelected = true가 필수임을 나타냄 |
-| is invalid | true, false | false | true일 경우, isSelected가 유효하지 않은 값임을 나타냄 |
-
-### 옵션 테이블 (Radio)
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | ----------- | ------ | --------------------------------------------- |
-| label | text | | |
-| is disabled | true, false | false | true일 경우, Radio가 유저와 상호작용하지 않음 |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Radio를 토글할 수 있습니다.
-
-
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- tab 키를 통해 Radio로 Focus를 옮길 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Selected ON/OFF
-
- Focus된 상태에서 space 키를 통해 ON / OFF를 전환할 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- 포커스 이동 시 Disabled 상태인 Radio는 인식하지 않습니다.
-
-
-
-
-### Overflow
-
-
-
- 
-
-
- Label이 2줄을 초과할 경우 개행 처리하며, Control은 Label 첫 번째 줄에 세로 중앙 정렬합니다.
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/range-slider/anatomy.png b/docs/content/component/range-slider/anatomy.png
deleted file mode 100644
index 6776693ff..000000000
Binary files a/docs/content/component/range-slider/anatomy.png and /dev/null differ
diff --git a/docs/content/component/range-slider/component-meta.json b/docs/content/component/range-slider/component-meta.json
deleted file mode 100644
index 08774f5c2..000000000
--- a/docs/content/component/range-slider/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Range Slider",
- "description": "범위 내 값을 조정할 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/slider/primitive-meta.json",
- "group": "Sliders",
- "platform": {
- "ios": {
- "status": "todo",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "todo",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-slider-rangeslider--docs"
- },
- "figma": {
- "status": "done",
- "path": ""
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-slider-rangeslider--basic&viewMode=story",
- "height": "80px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/range-slider/overview.mdx b/docs/content/component/range-slider/overview.mdx
deleted file mode 100644
index 6f50c8265..000000000
--- a/docs/content/component/range-slider/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/range-slider/overview
----
diff --git a/docs/content/component/range-slider/range-slider-interaction-drag.gif b/docs/content/component/range-slider/range-slider-interaction-drag.gif
deleted file mode 100644
index 27dea2b92..000000000
Binary files a/docs/content/component/range-slider/range-slider-interaction-drag.gif and /dev/null differ
diff --git a/docs/content/component/range-slider/range-slider-interaction-track.gif b/docs/content/component/range-slider/range-slider-interaction-track.gif
deleted file mode 100644
index 3f7389bae..000000000
Binary files a/docs/content/component/range-slider/range-slider-interaction-track.gif and /dev/null differ
diff --git a/docs/content/component/range-slider/range-slider-options-disabled.png b/docs/content/component/range-slider/range-slider-options-disabled.png
deleted file mode 100644
index 66eaa4a19..000000000
Binary files a/docs/content/component/range-slider/range-slider-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/range-slider/range-slider-options-markers.png b/docs/content/component/range-slider/range-slider-options-markers.png
deleted file mode 100644
index 4ba0580af..000000000
Binary files a/docs/content/component/range-slider/range-slider-options-markers.png and /dev/null differ
diff --git a/docs/content/component/range-slider/range-slider-usage-interaction.png b/docs/content/component/range-slider/range-slider-usage-interaction.png
deleted file mode 100644
index 07122323f..000000000
Binary files a/docs/content/component/range-slider/range-slider-usage-interaction.png and /dev/null differ
diff --git a/docs/content/component/range-slider/range-slider-usage-touch-click.png b/docs/content/component/range-slider/range-slider-usage-touch-click.png
deleted file mode 100644
index a55c61276..000000000
Binary files a/docs/content/component/range-slider/range-slider-usage-touch-click.png and /dev/null differ
diff --git a/docs/content/component/range-slider/style.mdx b/docs/content/component/range-slider/style.mdx
deleted file mode 100644
index 3e436c819..000000000
--- a/docs/content/component/range-slider/style.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
----
-slug: /component/range-slider/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Range - Primitive.Range
-3. Handle - Primitive.Handle
-4. Tick
-5. Track - Primitive.Track
-6. Marker Group
-7. Marker
-
-## Root
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | ------------------ |
-| enabled | isDisabled = False |
-| disabled | isDisabled = True |
-
-## Handle
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| focused | isDisabled = False, isDragging = False, isFocused = True |
-| dragging | isDisabled = False, isDragging = True |
-| disabled | isDisabled = True |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ----- | --------- | --------------------- |
-| Label | Color | $scale.color.gray-900 |
-
-| State | Part | Attribute | Value |
-| -------- | ------ | --------- | -------------------------- |
-| Enabled | Track | Color | $scale.color.gray-200 |
-| | Range | Color | $semantic.color.primary |
-| | Handle | Color | $static.color.static-white |
-| | Output | Color | $scale.color.gray-900 |
-| Disabled | Track | Color | $scale.color.gray-200 |
-| | Range | Color | $scale.color.gray-400 |
-| | Handle | Color | $static.color.static-white |
-| | Output | Color | $scale.color.gray-400 |
-
-## 디자인 결정 (Shadow)
-
-| State | Part | Attribute | Value |
-| -------- | ------ | -------------------- | ------- |
-| Enabled | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 4pt |
-| | | Shadow Blur Radius | 6pt |
-| | | Shadow Spread Radius | 0pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.15 |
-| Dragging | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 0pt |
-| | | Shadow Blur Radius | 0pt |
-| | | Shadow Spread Radius | 5pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.22 |
-| Focused | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 0pt |
-| | | Shadow Blur Radius | 0pt |
-| | | Shadow Spread Radius | 5pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.22 |
-| Disabled | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 4pt |
-| | | Shadow Blur Radius | 6pt |
-| | | Shadow Spread Radius | 0pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.15 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ------ | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-| Output | Typography | $semantic.typography.label3-regular |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| --------------- | ------------- | ----- |
-| Root | Min Width | 240pt |
-| Track | Height | 6pt |
-| | Corner Radius | Full |
-| Handle | Size | 28pt |
-| | Corner Radius | Full |
-| Handle / Marker | Spacing | 1pt |
-
-### 디자인 결정 (Motion)
-
-| State | Part | Property | Attribute | Value |
-| -------- | ------ | --------- | --------------- | ---------------------------------------- |
-| Dragging | Handle | transform | Duration | 120ms |
-| | | | Timing Function | $scale.timing-function.standard-entrance |
diff --git a/docs/content/component/range-slider/thumbnail.png b/docs/content/component/range-slider/thumbnail.png
deleted file mode 100644
index 6026f75af..000000000
Binary files a/docs/content/component/range-slider/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/range-slider/usage.mdx b/docs/content/component/range-slider/usage.mdx
deleted file mode 100644
index 653953fc9..000000000
--- a/docs/content/component/range-slider/usage.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-slug: /component/range-slider/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Range
-3. Handle
-4. Tick
-5. Track
-6. Marker Group
-7. Marker
-
-## 옵션
-
-
-
- 
-
-
- Marker
-
- Marker 옵션을 사용하여 Range Slider에 Marker와 Tick(눈금)을 표시할 수
- 있습니다. 이 옵션은 사용자가 각 값의 위치를 쉽게 파악하고 선택할 수 있도록
- 돕습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Range Slider가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | ----------- | ------ | ---------------------------------------------------- |
-| is disabled | true, false | false | True일 경우, Range Slider가 유저와 상호작용하지 않음 |
-| label | text | | |
-| min | number | 0 | |
-| max | number | 100 | |
-| step | number | 1 | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Range Slider와 상호작용할 수 있습니다.
-
-
-
-
-
- 
-
-
- Drag
-
- Handle을 드래그하여 값을 조정할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Track
-
- Track을 터치하면 해당 위치로 Handle이 이동합니다.
-
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/slider/anatomy.png b/docs/content/component/slider/anatomy.png
deleted file mode 100644
index ff7590b89..000000000
Binary files a/docs/content/component/slider/anatomy.png and /dev/null differ
diff --git a/docs/content/component/slider/component-meta.json b/docs/content/component/slider/component-meta.json
deleted file mode 100644
index ed3e93c3f..000000000
--- a/docs/content/component/slider/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Slider",
- "description": "범위 내 값을 조정할 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/slider/primitive-meta.json",
- "group": "Sliders",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/slider"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-slider-slider--docs"
- },
- "figma": {
- "status": "done",
- "path": ""
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-slider-slider--basic&viewMode=story",
- "height": "80px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/slider/overview.mdx b/docs/content/component/slider/overview.mdx
deleted file mode 100644
index d6a925535..000000000
--- a/docs/content/component/slider/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/slider/overview
----
diff --git a/docs/content/component/slider/slider-interacion-drag.gif b/docs/content/component/slider/slider-interacion-drag.gif
deleted file mode 100644
index 2b306f7e6..000000000
Binary files a/docs/content/component/slider/slider-interacion-drag.gif and /dev/null differ
diff --git a/docs/content/component/slider/slider-interaction-drag.gif b/docs/content/component/slider/slider-interaction-drag.gif
deleted file mode 100644
index 80342a4c8..000000000
Binary files a/docs/content/component/slider/slider-interaction-drag.gif and /dev/null differ
diff --git a/docs/content/component/slider/slider-interaction-track.gif b/docs/content/component/slider/slider-interaction-track.gif
deleted file mode 100644
index 3592b88ea..000000000
Binary files a/docs/content/component/slider/slider-interaction-track.gif and /dev/null differ
diff --git a/docs/content/component/slider/slider-options-disabled.png b/docs/content/component/slider/slider-options-disabled.png
deleted file mode 100644
index 0e88fca7b..000000000
Binary files a/docs/content/component/slider/slider-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/slider/slider-options-markers.png b/docs/content/component/slider/slider-options-markers.png
deleted file mode 100644
index d4840479e..000000000
Binary files a/docs/content/component/slider/slider-options-markers.png and /dev/null differ
diff --git a/docs/content/component/slider/slider-usage-interaction.png b/docs/content/component/slider/slider-usage-interaction.png
deleted file mode 100644
index 22f41b79a..000000000
Binary files a/docs/content/component/slider/slider-usage-interaction.png and /dev/null differ
diff --git a/docs/content/component/slider/slider-usage-touch-click.png b/docs/content/component/slider/slider-usage-touch-click.png
deleted file mode 100644
index c1e0b1164..000000000
Binary files a/docs/content/component/slider/slider-usage-touch-click.png and /dev/null differ
diff --git a/docs/content/component/slider/style.mdx b/docs/content/component/slider/style.mdx
deleted file mode 100644
index a210074dd..000000000
--- a/docs/content/component/slider/style.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
----
-slug: /component/slider/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Range - Primitive.Range
-3. Handle - Primitive.Handle
-4. Tick
-5. Track - Primitive.Track
-6. Marker Group
-7. Marker
-
-## Root
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | ------------------ |
-| enabled | isDisabled = False |
-| disabled | isDisabled = True |
-
-## Handle
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| focused | isDisabled = False, isDragging = False, isFocused = True |
-| dragging | isDisabled = False, isDragging = True |
-| disabled | isDisabled = True |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ----- | --------- | --------------------- |
-| Label | Color | $scale.color.gray-900 |
-
-| State | Part | Attribute | Value |
-| -------- | ------ | --------- | -------------------------- |
-| Enabled | Track | Color | $scale.color.gray-200 |
-| | Range | Color | $semantic.color.primary |
-| | Handle | Color | $static.color.static-white |
-| | Output | Color | $scale.color.gray-900 |
-| Disabled | Track | Color | $scale.color.gray-200 |
-| | Range | Color | $scale.color.gray-400 |
-| | Handle | Color | $static.color.static-white |
-| | Output | Color | $scale.color.gray-400 |
-
-## 디자인 결정 (Shadow)
-
-| State | Part | Attribute | Value |
-| -------- | ------ | -------------------- | ------- |
-| Enabled | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 4pt |
-| | | Shadow Blur Radius | 6pt |
-| | | Shadow Spread Radius | 0pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.15 |
-| Dragging | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 0pt |
-| | | Shadow Blur Radius | 0pt |
-| | | Shadow Spread Radius | 5pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.22 |
-| Focused | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 0pt |
-| | | Shadow Blur Radius | 0pt |
-| | | Shadow Spread Radius | 5pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.22 |
-| Disabled | Handle | Shadow Offset X | 0pt |
-| | | Shadow Offset Y | 4pt |
-| | | Shadow Blur Radius | 6pt |
-| | | Shadow Spread Radius | 0pt |
-| | | Shadow Color | #000000 |
-| | | Shadow Opacity | 0.15 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ------ | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-| Output | Typography | $semantic.typography.label3-regular |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| --------------- | ------------- | ----- |
-| Root | Min Width | 240pt |
-| Track | Height | 6pt |
-| | Corner Radius | Full |
-| Handle | Size | 28pt |
-| | Corner Radius | Full |
-| Handle / Marker | Spacing | 1pt |
-
-### 디자인 결정 (Motion)
-
-| State | Part | Property | Attribute | Value |
-| -------- | ------ | --------- | --------------- | ---------------------------------------- |
-| Dragging | Handle | transform | Duration | 120ms |
-| | | | Timing Function | $scale.timing-function.standard-entrance |
diff --git a/docs/content/component/slider/thumbnail.png b/docs/content/component/slider/thumbnail.png
deleted file mode 100644
index 5327ddaae..000000000
Binary files a/docs/content/component/slider/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/slider/usage.mdx b/docs/content/component/slider/usage.mdx
deleted file mode 100644
index fb27d1c4f..000000000
--- a/docs/content/component/slider/usage.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-slug: /component/slider/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Range
-3. Handle
-4. Tick
-5. Track
-6. Marker Group
-7. Marker
-
-## 옵션
-
-
-
- 
-
-
- Marker
-
- Marker 옵션을 사용하여 Slider에 Marker와 Tick(눈금)을 표시할 수 있습니다.
- 이 옵션은 사용자가 각 값의 위치를 쉽게 파악하고 선택할 수 있도록 돕습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Slider가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | ----------- | ------ | ---------------------------------------------- |
-| is disabled | true, false | false | True일 경우, Slider가 유저와 상호작용하지 않음 |
-| label | text | | |
-| min | number | 0 | |
-| max | number | 100 | |
-| step | number | 1 | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Slider와 상호작용할 수 있습니다.
-
-
-
-
-
- 
-
-
- Drag
-
- Handle을 드래그하여 값을 조정할 수 있습니다.
-
-
-
-
-
- 
-
-
- Track
-
- Track을 터치하면 해당 위치로 Handle이 이동합니다.
-
-
-
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/snackbar/anatomy.png b/docs/content/component/snackbar/anatomy.png
deleted file mode 100644
index cef8d4751..000000000
Binary files a/docs/content/component/snackbar/anatomy.png and /dev/null differ
diff --git a/docs/content/component/snackbar/component-meta.json b/docs/content/component/snackbar/component-meta.json
deleted file mode 100644
index 0007a2758..000000000
--- a/docs/content/component/snackbar/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Snackbar",
- "description": "사용자의 특정 액션에 대한 피드백을 제공합니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/snackbar/primitive-meta.json",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/snackbar"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-snackbar--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=39212-41093&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-snackbar--basic&viewMode=story",
- "height": "300px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/snackbar/overview.mdx b/docs/content/component/snackbar/overview.mdx
deleted file mode 100644
index ecd42fc2a..000000000
--- a/docs/content/component/snackbar/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/snackbar/overview
----
diff --git a/docs/content/component/snackbar/snackbar-guide-do.png b/docs/content/component/snackbar/snackbar-guide-do.png
deleted file mode 100644
index f29070bcf..000000000
Binary files a/docs/content/component/snackbar/snackbar-guide-do.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-guide-do2.png b/docs/content/component/snackbar/snackbar-guide-do2.png
deleted file mode 100644
index 9fd5490d0..000000000
Binary files a/docs/content/component/snackbar/snackbar-guide-do2.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-guide-dont.png b/docs/content/component/snackbar/snackbar-guide-dont.png
deleted file mode 100644
index 886aa6ccd..000000000
Binary files a/docs/content/component/snackbar/snackbar-guide-dont.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-guide-dont2.png b/docs/content/component/snackbar/snackbar-guide-dont2.png
deleted file mode 100644
index 84f623928..000000000
Binary files a/docs/content/component/snackbar/snackbar-guide-dont2.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-guideline-1.png b/docs/content/component/snackbar/snackbar-guideline-1.png
deleted file mode 100644
index f43967c54..000000000
Binary files a/docs/content/component/snackbar/snackbar-guideline-1.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-guideline-2.png b/docs/content/component/snackbar/snackbar-guideline-2.png
deleted file mode 100644
index f17c04595..000000000
Binary files a/docs/content/component/snackbar/snackbar-guideline-2.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-guideline-3.png b/docs/content/component/snackbar/snackbar-guideline-3.png
deleted file mode 100644
index c04094e54..000000000
Binary files a/docs/content/component/snackbar/snackbar-guideline-3.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-guideline.png b/docs/content/component/snackbar/snackbar-guideline.png
deleted file mode 100644
index f29070bcf..000000000
Binary files a/docs/content/component/snackbar/snackbar-guideline.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-keyboard-control-1.png b/docs/content/component/snackbar/snackbar-keyboard-control-1.png
deleted file mode 100644
index 000f300c3..000000000
Binary files a/docs/content/component/snackbar/snackbar-keyboard-control-1.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-keyboard-control-2.png b/docs/content/component/snackbar/snackbar-keyboard-control-2.png
deleted file mode 100644
index 1d80826dd..000000000
Binary files a/docs/content/component/snackbar/snackbar-keyboard-control-2.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-keyboard-control-3.png b/docs/content/component/snackbar/snackbar-keyboard-control-3.png
deleted file mode 100644
index da4c5f53c..000000000
Binary files a/docs/content/component/snackbar/snackbar-keyboard-control-3.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-keyboard-control-4.png b/docs/content/component/snackbar/snackbar-keyboard-control-4.png
deleted file mode 100644
index f3305b78c..000000000
Binary files a/docs/content/component/snackbar/snackbar-keyboard-control-4.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-layout-guide-max-width.png b/docs/content/component/snackbar/snackbar-layout-guide-max-width.png
deleted file mode 100644
index 5dd602551..000000000
Binary files a/docs/content/component/snackbar/snackbar-layout-guide-max-width.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-layout-guide-min-width.png b/docs/content/component/snackbar/snackbar-layout-guide-min-width.png
deleted file mode 100644
index e15f8fe6c..000000000
Binary files a/docs/content/component/snackbar/snackbar-layout-guide-min-width.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-options-default.png b/docs/content/component/snackbar/snackbar-options-default.png
deleted file mode 100644
index eae2fd11c..000000000
Binary files a/docs/content/component/snackbar/snackbar-options-default.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-options-message.png b/docs/content/component/snackbar/snackbar-options-message.png
deleted file mode 100644
index 3daf4f3ab..000000000
Binary files a/docs/content/component/snackbar/snackbar-options-message.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-options-success.png b/docs/content/component/snackbar/snackbar-options-success.png
deleted file mode 100644
index 1372920d6..000000000
Binary files a/docs/content/component/snackbar/snackbar-options-success.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-options-text.png b/docs/content/component/snackbar/snackbar-options-text.png
deleted file mode 100644
index fff7a1bc2..000000000
Binary files a/docs/content/component/snackbar/snackbar-options-text.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-options-warning.png b/docs/content/component/snackbar/snackbar-options-warning.png
deleted file mode 100644
index 40ae0ddca..000000000
Binary files a/docs/content/component/snackbar/snackbar-options-warning.png and /dev/null differ
diff --git a/docs/content/component/snackbar/snackbar-touch-mouse-control-1.png b/docs/content/component/snackbar/snackbar-touch-mouse-control-1.png
deleted file mode 100644
index dc0849711..000000000
Binary files a/docs/content/component/snackbar/snackbar-touch-mouse-control-1.png and /dev/null differ
diff --git a/docs/content/component/snackbar/style.mdx b/docs/content/component/snackbar/style.mdx
deleted file mode 100644
index ba247807a..000000000
--- a/docs/content/component/snackbar/style.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-slug: /component/snackbar/style
----
-
-## Anatomy
-
-
-
-1. Region - Primitive.Region
-2. Snackbar - Primitive.Snackbar
-3. Icon
-4. Message - Primitive.Title
-5. Action Button
-6. Action Label
-
-## Visual Options
-
-| Property | Value | Description |
-| ------------ | ------------------------- | ----------- |
-| type | default, success, warning | |
-| message | text | |
-| action label | text | |
-
-## Visually Represented States
-
-| State | Condition |
-| ------- | ----------------------------- |
-| visible | visibility = persist, active |
-| dismiss | visibility = dismissing, done |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ------------ | --------- | ----------------------- |
-| Snackbar | Color | $scale.color.gray-900 |
-| Message | Color | $scale.color.gray-00 |
-| Action Label | Color | $semantic.color.primary |
-
-### Type=Success
-
-| Part | Attribute | Value |
-| ---- | --------- | ----------------------- |
-| Icon | Color | $semantic.color.success |
-
-### Type=Warning
-
-| Part | Attribute | Value |
-| ---- | --------- | -------------------- |
-| Icon | Color | $scale.color.red-600 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------------------------------------ |
-| Message | Typography | $semantic.typography.body-l2-regular |
-| Action Label | Color | $semantic.typography.label3-bold |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| -------------- | ------------------ | ---------- |
-| Region | Width | Full Width |
-| | Horizontal Padding | 8pt |
-| Snackbar | Horizontal Padding | 16pt |
-| | Vertical Padding | 10pt |
-| | Width | Full Width |
-| | Max Width | 360pt |
-| Action Button | Horizontal Padding | 4pt |
-| | Vertical Padding | 3pt |
-| Icon | Size | 20pt |
-| Icon / Message | Spacing | 8pt |
-| Message | Text Alight | Start |
-
-## 디자인 결정 (Motion)
-
-| State | Part | Property | Attribute | Value |
-| ------- | -------- | -------- | --------------- | -------------------------------------- |
-| Visible | Snackbar | tranform | Duration | 300ms |
-| | | | Timing Function | $scale.timing-function.spring-entrance |
-| Visible | Snackbar | opacity | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.spring-entrance |
-| Dismiss | Snackbar | opacity | Duration | 100ms |
-| | | | Timing Function | $scale.timing-function.standard-exit |
-
-### State=Visible
-
-| Part | Attribute | From | To |
-| -------- | --------- | ---------- | -------- |
-| Snackbar | transform | scale(0.7) | scale(1) |
-| Snackbar | opacity | 0 | 1 |
-
-### State=Dismiss
-
-| Part | Attribute | From | To |
-| -------- | --------- | ---- | --- |
-| Snackbar | opacity | 1 | 0 |
diff --git a/docs/content/component/snackbar/thumbnail.png b/docs/content/component/snackbar/thumbnail.png
deleted file mode 100644
index a479c8071..000000000
Binary files a/docs/content/component/snackbar/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/snackbar/usage.mdx b/docs/content/component/snackbar/usage.mdx
deleted file mode 100644
index 2fe1f1c08..000000000
--- a/docs/content/component/snackbar/usage.mdx
+++ /dev/null
@@ -1,255 +0,0 @@
----
-slug: /component/snackbar/usage
----
-
-## 구조도
-
-
-
-1. Region
-2. Snackbar
-3. Icon
-4. Message
-5. Action Button
-6. Action Label
-
-## 옵션
-
-
-
- 
-
-
- Message
-
- Snackbar는 반드시 메세지를 포함해야합니다. 어떤 일이 일어났는지, 혹은
- 일어나고 있는지 가능한 간결하게 작성합니다.
-
-
-
-
-
-
- 
-
-
- Action
-
- Action Label은 메세지와 연관되어 가능한 간결한 텍스트로 동작을 제시해야
- 합니다. Action은 1개만 노출할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Default Type
-
- Default Type은 중립적인 텍스트 메세지를 전달합니다.
-
-
-
-
-
-
- 
-
-
- Success Type
-
- Success Type은 사용자가 긍정적인 액션을 했거나, 해당 액션이 성공적으로
- 완료되었을 때 사용합니다.
-
-
-
-
-
-
- 
-
-
- Warning Type
-
- Warning Type은 사용자의 액션에 대한 경고나 실패에 대한 메세지를 전달할 때
- 사용합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ------------------ | ------------------------- | ------- | ---- |
-| type | default, success, warning | default | |
-| message | text | | |
-| action label | text | | |
-| pauseOnInteraction | false, true | true | |
-
-## 상호작용
-
-### 터치 / 마우스
-
-
-
- 
-
-
- Click, Touch는 Action 영역에만 작동합니다.
-
-
-
-
-
-### 키보드
-
-
-
- 
-
-
- Focus
-
- Tab키를 통해 Root에 Focus할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Action focus
-
- Tab키를 통해 Action의 Focus를 이동할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Action
-
- Space 혹은 Enter키를 통해
- Action을 실행할 수 있습니다.
-
-
-
-
-
-
-### Max Width
-
-
-
- 
-
- Snackbar의 최대 너비는 343입니다.
-
-
-### Min Width
-
-
-
- 
-
- Snackbar의 최소 너비는 170입니다.
-
-
-## 가이드라인
-
-
-
- 
-
-
- Snackbar
-
- Snackbar는 유저의 액션(좋아요, 저장, 삭제 등)에 즉각적인 피드백을 줄 때,
- 혹은 앱 내 백그라운드 상태나 설정에 대한 알림일 때 사용합니다.
-
-
-
-
-
-
- 
-
-
- 간결한 문구
-
- 문구는 최대한 간결하게 작성하고, 불필요한 부가정보는 최소화합니다.
-
-
-
-
-
-
- 
-
-
- Bold
-
- 특정 부분을 강조하고 싶은 경우 메시지에 Bold를 사용할 수 있습니다. 혹은
- 유저가 조심해야 하거나 주의해야 하는 정보인 경우에도 사용할 수 있습니다.
- 텍스트 전체에 적용하기보단 부분적으로 사용할 것을 권장합니다.
-
-
-
-
-
-
- 
-
-
- 적절한 피드백 제공
-
- 로딩실패, 삭제 등의 유저액션에 대한 피드백인 경우 재시도, 되돌리기 같은
- 간단한 액션버튼을 제공합니다.
-
-
-
-
-
-### Do / Don't
-
-
-
-
-
- 
-
- Snackbar의 문구는 최대한 간결하게 작성합니다. 유저가 빠르게 원하는 정보만
- 얻을 수 있도록 합니다.
-
-
-
- 
-
- Snackbar의 문구는 2줄을 초과하지 않습니다. 불필요한 문장과 내용은
- 제거하며, 핵심 메세지만 전달합니다.
-
-
-
-
-
-
-
-
-
- 
- 상,하/좌,우 Margin은 해상도에 상관없이 8px로 사용합니다.
-
-
- 
- Snackbar가 하단의 주요 액션 버튼을 가리지 않도록합니다.
-
-
-
-
diff --git a/docs/content/component/spinner/component-meta.json b/docs/content/component/spinner/component-meta.json
deleted file mode 100644
index 1be2a49a3..000000000
--- a/docs/content/component/spinner/component-meta.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Spinner",
- "description": "작업의 진행 단계 결정 또는 완료 시점이 확정되지 않은 경우 사용할 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "KarrotSpinner",
- "path": "seedcatalog://components/spinner"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-spinner--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=21836-45250&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-spinner--basic&viewMode=story",
- "height": "80px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/spinner/overview.mdx b/docs/content/component/spinner/overview.mdx
deleted file mode 100644
index 6b8c05bb0..000000000
--- a/docs/content/component/spinner/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/spinner/overview
----
diff --git a/docs/content/component/spinner/spinner-options-color.png b/docs/content/component/spinner/spinner-options-color.png
deleted file mode 100644
index 8d279d396..000000000
Binary files a/docs/content/component/spinner/spinner-options-color.png and /dev/null differ
diff --git a/docs/content/component/spinner/spinner-options-size.png b/docs/content/component/spinner/spinner-options-size.png
deleted file mode 100644
index d51acd29b..000000000
Binary files a/docs/content/component/spinner/spinner-options-size.png and /dev/null differ
diff --git a/docs/content/component/spinner/spinner-style-anatomy.png b/docs/content/component/spinner/spinner-style-anatomy.png
deleted file mode 100644
index fd1c2d2fa..000000000
Binary files a/docs/content/component/spinner/spinner-style-anatomy.png and /dev/null differ
diff --git a/docs/content/component/spinner/spinner-usage-dont.png b/docs/content/component/spinner/spinner-usage-dont.png
deleted file mode 100644
index 5965f2ffc..000000000
Binary files a/docs/content/component/spinner/spinner-usage-dont.png and /dev/null differ
diff --git a/docs/content/component/spinner/spinner-usage-medium-size.png b/docs/content/component/spinner/spinner-usage-medium-size.png
deleted file mode 100644
index 3ddc0b98c..000000000
Binary files a/docs/content/component/spinner/spinner-usage-medium-size.png and /dev/null differ
diff --git a/docs/content/component/spinner/spinner-usage-placement.png b/docs/content/component/spinner/spinner-usage-placement.png
deleted file mode 100644
index 1d84bc9d3..000000000
Binary files a/docs/content/component/spinner/spinner-usage-placement.png and /dev/null differ
diff --git a/docs/content/component/spinner/spinner-usage-spinner-only.png b/docs/content/component/spinner/spinner-usage-spinner-only.png
deleted file mode 100644
index 173faa224..000000000
Binary files a/docs/content/component/spinner/spinner-usage-spinner-only.png and /dev/null differ
diff --git a/docs/content/component/spinner/style.mdx b/docs/content/component/spinner/style.mdx
deleted file mode 100644
index ae8ee247d..000000000
--- a/docs/content/component/spinner/style.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-slug: /component/spinner/style
----
-
-## Anatomy
-
-
-
-1. Root
-2. Track
-3. Indicator
-
-## Visual Options
-
-| Property | Value |
-| -------- | -------------------- |
-| size | small, medium |
-| variant | gray, white, primary |
-
-## 디자인 결정 (Color)
-
-### Variant=Gray
-
-| Part | Attribute | Value |
-| --------- | --------- | -------------------------- |
-| Indicator | Color | $scale.color.gray-400 |
-| Track | Color | $scale.color.gray-alpha-50 |
-
-### Variant=White
-
-| Part | Attribute | Value |
-| --------- | --------- | ------------------------------------ |
-| Indicator | Color | $static.color.static-white |
-| Track | Color | $static.color.static-white-alpha-200 |
-
-### Variant=Primary
-
-| Part | Attribute | Value |
-| --------- | --------- | --------------------------- |
-| Indicator | Color | $semantic.color.primary |
-| Track | Color | $semantic.color.primary-low |
-
-## 디자인 결정 (Layout)
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| --------- | --------- | ----- |
-| Indicator | Size | 40pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| --------- | --------- | ----- |
-| Indicator | Size | 24pt |
-
-## 디자인 결정 (Motion)
-
-### Part=Indicator, Property=head
-
-| Part | Property | Attribute | Value |
-| --------- | -------- | --------------- | ------------------------------ |
-| Indicator | head | Duration | 800ms |
-| | | Delay | 0ms |
-| | | Timing Function | cubic-bezier(0.35, 0, 0.65, 1) |
-
-#### Keyframe
-
-| Progress | Part | Property | Value |
-| ------------ | --------- | -------- | ----- |
-| 0% (0ms) | Indicator | head | 1% |
-| 100% (800ms) | Indicator | head | 100% |
-
-### Part=Indicator, Property=tail
-
-| Part | Property | Attribute | Value |
-| --------- | -------- | --------------- | -------------------------------- |
-| Indicator | tail | Duration | 900ms |
-| | | Delay | 300ms |
-| | | Timing Function | cubic-bezier(0.35, 0, 0.65, 0.6) |
-
-#### Keyframe
-
-| Progress | Part | Property | Value |
-| ------------- | --------- | -------- | ----- |
-| 0% (300ms) | Indicator | tail | 0% |
-| 100% (1200ms) | Indicator | tail | 99% |
-
-### Part=Root, Property=transform
-
-| Part | Property | Attribute | Value |
-| ---- | --------- | --------------- | ------------------------------------ |
-| Root | transform | Duration | 1200ms |
-| | | Delay | 0ms |
-| | | Timing Function | cubic-bezier(0.35, 0.25, 0.65, 0.75) |
-
-#### Keyframe
-
-| Progress | Part | Property | Value |
-| ------------- | ---- | --------- | -------------- |
-| 0% (0ms) | Root | transform | rotate(0deg) |
-| 100% (1200ms) | Root | transform | rotate(360deg) |
diff --git a/docs/content/component/spinner/thumbnail.png b/docs/content/component/spinner/thumbnail.png
deleted file mode 100644
index a2265b39e..000000000
Binary files a/docs/content/component/spinner/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/spinner/usage.mdx b/docs/content/component/spinner/usage.mdx
deleted file mode 100644
index 346d4d470..000000000
--- a/docs/content/component/spinner/usage.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
----
-slug: /component/spinner/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Track
-3. Indicator
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Spinner는 small, medium 2개의 사이즈를 가질 수 있습니다. medium은 화면
- 전체를 로딩할 때, 독립적인 요소로 쓰일 때 사용하며, small은 다른 요소와
- 나란히 쓰일 때, 컴포넌트 위에서 사용합니다.
-
-
-
-
-
-
- 
-
-
- Variant
-
- Spinner는 gray, primary, gray(on overlay) 3개의 Variant 옵션을 가질 수
- 있습니다. gray가 가장 보편적이며, primary는 화면 내에서 중요도가 높은
- 경우에만 사용합니다. white는 overlay 레이어 위에서만 사용합니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ------- | -------------------- | ------ |
-| size | small, medium | medium |
-| variant | gray, white, primary | gray |
-
-## 가이드라인
-
-
-
- 
-
-
- Spinner Only
-
- 화면 전체 단위를 로딩하는 경우, Medium Size를 사용합니다.
-
-
-
-
-
-
- 
-
-
- Sheet
-
- Bottomsheet, Dialog와 같은 Overlay 요소를 로딩하는 경우, Medium Size를
- 사용합니다.
-
-
-
-
-
-
- 
-
-
- Placement
-
- Spinner가 로딩하고있는 영역의 중앙에 배치합니다.
-
-
-
-
-
-
- 
-
-
- Don't
-
- 한 화면에 여러개의 Spinner를 표시하지 않습니다. 이는 유저의 행동을 방해할
- 수 있으며, 유저에게 필요 이상의 불안정한 상태를 제공합니다.
-
-
-
diff --git a/docs/content/component/switch/anatomy.png b/docs/content/component/switch/anatomy.png
deleted file mode 100644
index c153ba480..000000000
Binary files a/docs/content/component/switch/anatomy.png and /dev/null differ
diff --git a/docs/content/component/switch/component-meta.json b/docs/content/component/switch/component-meta.json
deleted file mode 100644
index 3395c655b..000000000
--- a/docs/content/component/switch/component-meta.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Switch",
- "description": "사용자가 개별 옵션을 켜거나 끌 수 있는 컨트롤입니다. 일반적으로 설정을 제어하기 위해 사용됩니다.",
- "thumbnail": "./thumbnail.png",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/switch"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-switch--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=51313-38966&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-switch--basic&viewMode=story",
- "height": "80px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/switch/overview.mdx b/docs/content/component/switch/overview.mdx
deleted file mode 100644
index 42a165ffc..000000000
--- a/docs/content/component/switch/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/switch/overview
----
diff --git a/docs/content/component/switch/style.mdx b/docs/content/component/switch/style.mdx
deleted file mode 100644
index 41da0beec..000000000
--- a/docs/content/component/switch/style.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
----
-slug: /component/switch/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Track - Primitive.Control
-3. Handle
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = false, isHovered = false, isFocused = false, isPressed = false |
-| hovered | isDisabled = false, isPressed = false, isHovered = true |
-| focused | isDisabled = false, isPressed = false, isFocused = true |
-| pressed | isDisabled = false, isPressed = true |
-| disabled | isDisabled = true |
-
-| State | Condition |
-| ---------- | ------------------ |
-| unselected | isSelected = false |
-| selected | isSelected = true |
-
-## 디자인 결정 (Color)
-
-| State | Part | Attribute | Value |
-| -------- | ------------------ | --------- | -------------------------- |
-| Enabled | Track (unselected) | Color | $scale.color.gray-500 |
-| | Track (selected) | Color | $semantic.color.primary |
-| | Handle | Color | $semantic.color.on-primary |
-| Hovered | Track (unselected) | Color | $scale.color.gray-500 |
-| | Track (selected) | Color | $semantic.color.primary |
-| | Handle | Color | $semantic.color.on-primary |
-| Pressed | Track (unselected) | Color | $scale.color.gray-500 |
-| | Track (selected) | Color | $semantic.color.primary |
-| | Handle | Color | $semantic.color.on-primary |
-| Disabled | Track | Opacity | 38% |
-| | Track (unselected) | Color | $scale.color.gray-500 |
-| | Track (selected) | Color | $semantic.color.primary |
-| | Handle | Opacity | 38% |
-| | | Color | $semantic.color.on-primary |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| ------ | ------------- | ----- |
-| Root | Height | 42pt |
-| | Width | 52pt |
-| Track | Height | 30pt |
-| | Width | 52pt |
-| | Corner Radius | Full |
-| Handle | Size | 26pt |
-| | Corner Radius | Full |
-
-## 디자인 결정 (Motion)
-
-| Part | Property | Attribute | Value |
-| ------ | -------- | --------------- | -------------------------------------- |
-| Track | color | Duration | 50ms |
-| | | Timing Function | $scale.timing-function.standard-easing |
-| | | Delay | 20ms |
-| Handle | position | Duration | 150ms |
-| | | Timing Function | $scale.timing-function.standard-easing |
diff --git a/docs/content/component/switch/switch-options-checkbox-vs-switch.png b/docs/content/component/switch/switch-options-checkbox-vs-switch.png
deleted file mode 100644
index cb3c2f0d0..000000000
Binary files a/docs/content/component/switch/switch-options-checkbox-vs-switch.png and /dev/null differ
diff --git a/docs/content/component/switch/switch-options-disabled.png b/docs/content/component/switch/switch-options-disabled.png
deleted file mode 100644
index 056c449d0..000000000
Binary files a/docs/content/component/switch/switch-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/switch/switch-options-selection.png b/docs/content/component/switch/switch-options-selection.png
deleted file mode 100644
index b7a90da3d..000000000
Binary files a/docs/content/component/switch/switch-options-selection.png and /dev/null differ
diff --git a/docs/content/component/switch/switch-style-anatomy.png b/docs/content/component/switch/switch-style-anatomy.png
deleted file mode 100644
index 15e6a3712..000000000
Binary files a/docs/content/component/switch/switch-style-anatomy.png and /dev/null differ
diff --git a/docs/content/component/switch/thumbnail.png b/docs/content/component/switch/thumbnail.png
deleted file mode 100644
index 694346484..000000000
Binary files a/docs/content/component/switch/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/switch/usage.mdx b/docs/content/component/switch/usage.mdx
deleted file mode 100644
index 245f99b2a..000000000
--- a/docs/content/component/switch/usage.mdx
+++ /dev/null
@@ -1,69 +0,0 @@
----
-slug: /component/switch/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Track
-3. Handle
-
-## 옵션
-
-
-
- 
-
-
- Selection
-
- Switch는 Checkbox와 달리 selected, unselected 2개의 상태만 가질 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Switch가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | ----------- | ------ | ----------------------------------------------------- |
-| is disabled | true, false | false | true일 경우, Switch가 유저와 상호작용하지 않음 |
-| is readonly | true, false | false | true일 경우, isSelected를 변경할 수 없음 |
-| is required | true, false | false | true일 경우, isSelected = true가 필수임을 나타냄 |
-| is invalid | true, false | false | true일 경우, isSelected가 유효하지 않은 값임을 나타냄 |
-
-## 상호작용
-
-## 가이드라인
-
-
-
- 
-
-
- Checkbox vs Switch
-
- Checkbox는 선택을 표현할 때 (예를 들어, 리스트에서 선택된 아이템을 표현할
- 때) 사용하고, Switch는 활성화/비활성화를 표현할 때 (예를 들어, 알림을 켜고
- 끌 때) 사용합니다. Checkbox는 Switch와 다르게 error 상태를 가질 수
- 있습니다.
-
-
-
diff --git a/docs/content/component/tabs/anatomy.png b/docs/content/component/tabs/anatomy.png
deleted file mode 100644
index 4343b0e4d..000000000
Binary files a/docs/content/component/tabs/anatomy.png and /dev/null differ
diff --git a/docs/content/component/tabs/component-meta.json b/docs/content/component/tabs/component-meta.json
deleted file mode 100644
index 26bc6924f..000000000
--- a/docs/content/component/tabs/component-meta.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Tabs",
- "description": "다른 탭 간에 전환과 이동을 쉽게 할 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/tabs/primitive-meta.json",
- "platform": {
- "ios": {
- "status": "todo",
- "alias": "",
- "path": ""
- },
- "android": {
- "status": "todo",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-tabs-tabs--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=39212-50702&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-tabs-tabs--basic&viewMode=story",
- "height": "300px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/tabs/overview.mdx b/docs/content/component/tabs/overview.mdx
deleted file mode 100644
index c69886ccb..000000000
--- a/docs/content/component/tabs/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/tabs/overview
----
diff --git a/docs/content/component/tabs/style.mdx b/docs/content/component/tabs/style.mdx
deleted file mode 100644
index 94ffac079..000000000
--- a/docs/content/component/tabs/style.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-slug: /component/tabs/style
----
-
-## Anatomy
-
-1. Root - Primitive.Root
-2. Tab List - Primitive.TabList
-3. Tab - Primitive.Tab
-4. Tab Dot
-5. Tab Label
-6. Panel Group - Primitive.PanelGroup
-7. Panel - Primitive.Panel
-8. Indicator
-9. Indicator Track
-
-## Root
-
-### Visual Options
-
-| Property | Value | Description |
-| -------- | --------- | --------------------------- |
-| layout | hug, fill | Tab의 각 너비를 결정합니다. |
-
-## Tabs
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| hovered | isDisabled = False, isPressed = False, isHovered = True |
-| focused | isDisabled = False, isPressed = False, isFocused = True |
-| pressed | isDisabled = False, isPressed = True |
-| disabled | isDisabled = True |
-
-## Tab
-
-### Visually Represented States
-
-| State | Condition |
-| -------- | -------------------------------------- |
-| enabled | isDisabled = False, isSelected = False |
-| selected | isDisabled = False, isSelected = True |
-| disabled | isDisabled = True |
-
-### Visual Options
-
-| Property | Value | Description |
-| -------- | ----------- | --------------------------------- |
-| dot | true, false | Tab의 dot 존재 여부를 결정합니다. |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| --------------- | --------- | ----------------------- |
-| Indicator | Color | $scale.color.gray-900 |
-| Indicator Track | Color | $scale.color.gray-300 |
-| Tab Dot | Color | $scale.color.carrot-500 |
-
-| State | Part | Attribute | Value |
-| -------- | ---------------------- | --------- | --------------------- |
-| Enabled | Tab Label (unselected) | Color | $scale.color.gray-600 |
-| | Tab Label (selected) | Color | $scale.color.gray-900 |
-| Hovered | Tab Label | Color | $scale.color.gray-900 |
-| Pressed | Tab Label | Color | $scale.color.gray-900 |
-| Disabled | Tab Label | Color | $scale.color.gray-300 |
-
-## 디자인 결정 (Typography)
-
-| Part | Attribute | Value |
-| --------- | ---------- | -------------------------------- |
-| Tab Label | Typography | $semantic.typography.label3-bold |
-
-## 디자인 결정 (Layout)
-
-| Part | Attribute | Value |
-| --------- | ------------------ | ----- |
-| Tab | Min Width | 54pt |
-| | Vertical Padding | 10pt |
-| | Horizontal Padding | 12pt |
-| Tab Dot | Width | 4pt |
-| | Height | 4pt |
-| | Border Radius | 100% |
-| | Spacing | 2pt |
-| Indicator | Border Bottom | 2pt |
-
-### layout=hug
-
-| Part | Attribute | Value |
-| -------- | ------------ | ----- |
-| Tab List | Left Padding | 16pt |
-
-### layout=fill
-
-| Part | Attribute | Value |
-| ---- | --------- | ----- |
-| Tab | flex | 1 |
diff --git a/docs/content/component/tabs/tabs-options-disabled.png b/docs/content/component/tabs/tabs-options-disabled.png
deleted file mode 100644
index a706f60ed..000000000
Binary files a/docs/content/component/tabs/tabs-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/tabs/tabs-options-selected.png b/docs/content/component/tabs/tabs-options-selected.png
deleted file mode 100644
index 09c701e02..000000000
Binary files a/docs/content/component/tabs/tabs-options-selected.png and /dev/null differ
diff --git a/docs/content/component/tabs/thumbnail.png b/docs/content/component/tabs/thumbnail.png
deleted file mode 100644
index 65fe6bbd9..000000000
Binary files a/docs/content/component/tabs/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/tabs/usage.mdx b/docs/content/component/tabs/usage.mdx
deleted file mode 100644
index dbfce3c07..000000000
--- a/docs/content/component/tabs/usage.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-slug: /component/tabs/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Tab List
-3. Tab
-4. Tab Label
-5. Panel Group
-6. Panel
-7. Indicator
-8. Indicator Track
-
-## 옵션
-
-
-
- 
-
-
- Selected
-
- 선택되어있는 Tabs의 컨텐츠가 화면에 표시됩니다. Indicator는 현재
- 선택되어있는 Tab을 나타냅니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Tab이 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다.
- 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을
- 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블 (Root)
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | ----------- | ------ | ------------------------------------------------- |
-| is disabled | true, false | false | true일 경우, Tabs 전체가 유저와 상호작용하지 않음 |
-| layout | hug, fill | hug | |
-
-### 옵션 테이블 (Tab)
-
-| 속성 | 값 | 기본값 | 설명 |
-| ----------- | ----------- | ------ | ------------------------------------------- |
-| label | text | | |
-| is disabled | true, false | false | true일 경우, Tab이 유저와 상호작용하지 않음 |
-| dot | true, false | false | Tab에 dot의 존재 여부를 결정 |
-
-## 상호작용
-
-Working In Progress
-
-## 가이드라인
-
-Working In Progress
diff --git a/docs/content/component/text-button/anatomy.png b/docs/content/component/text-button/anatomy.png
deleted file mode 100644
index 1f6b125ef..000000000
Binary files a/docs/content/component/text-button/anatomy.png and /dev/null differ
diff --git a/docs/content/component/text-button/component-meta.json b/docs/content/component/text-button/component-meta.json
deleted file mode 100644
index 8f1d9a9ab..000000000
--- a/docs/content/component/text-button/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Text Button",
- "description": "누르면 액션을 일으키는 텍스트 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/button/primitive-meta.json",
- "group": "Buttons",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "KarrotTextButton",
- "path": "seedcatalog://components/text-button"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-buttons-textbutton--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?node-id=46471%3A34309&t=0VmTcEW0PAehBNQf-11"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-buttons-textbutton--basic&viewMode=story",
- "height": "90px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
diff --git a/docs/content/component/text-button/overview.mdx b/docs/content/component/text-button/overview.mdx
deleted file mode 100644
index 6cad531bb..000000000
--- a/docs/content/component/text-button/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/text-button/overview
----
diff --git a/docs/content/component/text-button/style.mdx b/docs/content/component/text-button/style.mdx
deleted file mode 100644
index 68fed9c69..000000000
--- a/docs/content/component/text-button/style.mdx
+++ /dev/null
@@ -1,184 +0,0 @@
----
-slug: /component/text-button/style
----
-
-## Anatomy
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - Primitive.Root
-2. Label : Button에 대한 정보를 전달하는 라벨 - Primitive.Label
-3. Icon : Button에 대한 정보를 전달하는 아이콘
-
-## Visual Options
-
-| Property | Value |
-| -------- | ------------------------------------------------- |
-| size | small, medium, large |
-| variant | primary, secondary, secondary-low, accent, danger |
-| style | basic, underlined |
-| bold | true, false |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------------------------- |
-| enabled | isDisabled = False, isHovered = False, isFocused = False, isPressed = False |
-| hovered | isDisabled = False, isPressed = False, isHovered = True |
-| focused | isDisabled = False, isPressed = False, isFocused = True |
-| pressed | isDisabled = False, isPressed = True |
-| disabled | isDisabled = True |
-
-## 디자인 결정 (Color)
-
-### Variant=Primary
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | ------------------------------- |
-| Enabled | Root | Color | $semantic.color.primary |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Hovered | Root | Color | $semantic.color.primary-hover |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Pressed | Root | Color | $semantic.color.primary-pressed |
-| | Label, Icon | Color | $semantic.color.on-primary |
-| Disabled | Root | Color | $scale.color.gray-400 |
-| | Label, Icon | Color | $scale.color.gray-400 |
-
-### Variant=Secondary
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | ------------------------- |
-| Enabled | Root | Color | $semantic.color.secondary |
-| | Label, Icon | Color | $semantic.color.secondary |
-| Hovered | Root | Color | $scale.color.gray-700 |
-| | Label, Icon | Color | $scale.color.gray-700 |
-| Pressed | Root | Color | $scale.color.gray-700 |
-| | Label, Icon | Color | $scale.color.gray-700 |
-| Disabled | Root | Color | $scale.color.gray-400 |
-| | Label, Icon | Color | $scale.color.gray-400 |
-
-### Variant=Secondary Low
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | --------------------- |
-| Enabled | Root | Color | $scale.color.gray-600 |
-| | Label, Icon | Color | $scale.color.gray-600 |
-| Hovered | Root | Color | $scale.color.gray-700 |
-| | Label, Icon | Color | $scale.color.gray-700 |
-| Pressed | Root | Color | $scale.color.gray-700 |
-| | Label, Icon | Color | $scale.color.gray-700 |
-| Disabled | Root | Color | $scale.color.gray-400 |
-| | Label, Icon | Color | $scale.color.gray-400 |
-
-### Variant=Accent
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | ---------------------- |
-| Enabled | Root | Color | $semantic.color.accent |
-| | Label, Icon | Color | $semantic.color.accent |
-| Hovered | Root | Color | $scale.color.blue-400 |
-| | Label, Icon | Color | $scale.color.blue-400 |
-| Pressed | Root | Color | $scale.color.blue-400 |
-| | Label, Icon | Color | $scale.color.blue-400 |
-| Disabled | Root | Color | $scale.color.gray-400 |
-| | Label, Icon | Color | $scale.color.gray-400 |
-
-### Variant=Danger
-
-| State | Part | Attribute | Value |
-| -------- | ----------- | --------- | ---------------------- |
-| Enabled | Root | Color | $semantic.color.danger |
-| | Label, Icon | Color | $semantic.color.danger |
-| Hovered | Root | Color | $scale.color.red-400 |
-| | Label, Icon | Color | $scale.color.red-400 |
-| Pressed | Root | Color | $scale.color.red-400 |
-| | Label, Icon | Color | $scale.color.red-400 |
-| Disabled | Root | Color | $scale.color.gray-400 |
-| | Label, Icon | Color | $scale.color.gray-400 |
-
-## 디자인 결정 (Typography)
-
-### Size=Large, Bold=False
-
-| Part | Attribute | Value |
-| ----- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label1-regular |
-
-### Size=Medium, Bold=False
-
-| Part | Attribute | Value |
-| ----- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label2-regular |
-
-### Size=Small, Bold=False
-
-| Part | Attribute | Value |
-| ----- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-regular |
-
-### Size=Large, Bold=True
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-
-### Size=Medium, Bold=True
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label2-bold |
-
-### Size=Small, Bold=True
-
-| Part | Attribute | Value |
-| ----- | ---------- | -------------------------------- |
-| Label | Typography | $semantic.typography.label1-bold |
-
-### Style=Basic
-
-| Part | Attribute | Value |
-| ----- | --------------- | ----- |
-| Label | Text Decoration | none |
-
-### Style=Underlined
-
-| Part | Attribute | Value |
-| ----- | --------------------- | --------- |
-| Label | Text Decoration | underline |
-| Label | Text Underline Offset | 4pt |
-
-## 디자인 결정 (Layout)
-
-### Size=Large
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------ |
-| Root | Height | 28pt |
-| Label | Text Align | Center |
-| Icon | Size | 16pt |
-| Label / Icon | Spacing | 2pt |
-
-### Size=Medium
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------ |
-| Root | Height | 26pt |
-| Label | Text Align | Center |
-| Icon | Size | 14pt |
-| Label / Icon | Spacing | 2pt |
-
-### Size=Small
-
-| Part | Attribute | Value |
-| ------------ | ---------- | ------ |
-| Root | Height | 23pt |
-| Label | Text Align | Center |
-| Icon | Size | 14pt |
-| Label / Icon | Spacing | 1pt |
-
-## 디자인 결정 (Focus)
-
-| State | Part | Attribute | Value |
-| ------- | ---- | ------------- | --------------------- |
-| Focused | Root | Outline Color | $scale.color.blue-600 |
-| | | Outline Width | 2pt |
diff --git a/docs/content/component/text-button/textbutton-click-touch-control.png b/docs/content/component/text-button/textbutton-click-touch-control.png
deleted file mode 100644
index 5fc6a9e73..000000000
Binary files a/docs/content/component/text-button/textbutton-click-touch-control.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-guideline-1.png b/docs/content/component/text-button/textbutton-guideline-1.png
deleted file mode 100644
index 5d33f95ad..000000000
Binary files a/docs/content/component/text-button/textbutton-guideline-1.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-guideline-2.png b/docs/content/component/text-button/textbutton-guideline-2.png
deleted file mode 100644
index 4964bc5c9..000000000
Binary files a/docs/content/component/text-button/textbutton-guideline-2.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-guideline-3.png b/docs/content/component/text-button/textbutton-guideline-3.png
deleted file mode 100644
index e649b7b73..000000000
Binary files a/docs/content/component/text-button/textbutton-guideline-3.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-guideline-overflow.png b/docs/content/component/text-button/textbutton-guideline-overflow.png
deleted file mode 100644
index 3793d8bb6..000000000
Binary files a/docs/content/component/text-button/textbutton-guideline-overflow.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-keyboard-control.png b/docs/content/component/text-button/textbutton-keyboard-control.png
deleted file mode 100644
index 77df546e1..000000000
Binary files a/docs/content/component/text-button/textbutton-keyboard-control.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-mouse-control-1.png b/docs/content/component/text-button/textbutton-mouse-control-1.png
deleted file mode 100644
index f10648171..000000000
Binary files a/docs/content/component/text-button/textbutton-mouse-control-1.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-mouse-control-2.png b/docs/content/component/text-button/textbutton-mouse-control-2.png
deleted file mode 100644
index b08f291ff..000000000
Binary files a/docs/content/component/text-button/textbutton-mouse-control-2.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-options-bold.png b/docs/content/component/text-button/textbutton-options-bold.png
deleted file mode 100644
index 48196fdb6..000000000
Binary files a/docs/content/component/text-button/textbutton-options-bold.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-options-danger.png b/docs/content/component/text-button/textbutton-options-danger.png
deleted file mode 100644
index e58785467..000000000
Binary files a/docs/content/component/text-button/textbutton-options-danger.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-options-disabled.png b/docs/content/component/text-button/textbutton-options-disabled.png
deleted file mode 100644
index 19d37d455..000000000
Binary files a/docs/content/component/text-button/textbutton-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-options-size.png b/docs/content/component/text-button/textbutton-options-size.png
deleted file mode 100644
index 915551918..000000000
Binary files a/docs/content/component/text-button/textbutton-options-size.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-options-style.png b/docs/content/component/text-button/textbutton-options-style.png
deleted file mode 100644
index 919d0d889..000000000
Binary files a/docs/content/component/text-button/textbutton-options-style.png and /dev/null differ
diff --git a/docs/content/component/text-button/textbutton-options-variant.png b/docs/content/component/text-button/textbutton-options-variant.png
deleted file mode 100644
index 0b9ebf8b9..000000000
Binary files a/docs/content/component/text-button/textbutton-options-variant.png and /dev/null differ
diff --git a/docs/content/component/text-button/thumbnail.png b/docs/content/component/text-button/thumbnail.png
deleted file mode 100644
index 1003ea1e1..000000000
Binary files a/docs/content/component/text-button/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/text-button/usage.mdx b/docs/content/component/text-button/usage.mdx
deleted file mode 100644
index 1290298cb..000000000
--- a/docs/content/component/text-button/usage.mdx
+++ /dev/null
@@ -1,199 +0,0 @@
----
-slug: /component/text-button/usage
----
-
-## 구조도
-
-
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역
-2. Label : Button에 대한 정보를 전달하는 라벨
-3. Icon : Button에 대한 정보를 전달하는 아이콘
-
-## 옵션
-
-
-
- 
-
-
- Size
-
- Text Button은 small, medium, large 3개의 사이즈를 가질 수 있습니다.
- medium이 가장 보편적으로 사용되며, 페이지 내의 중요도와 시각적 균형에 맞게
- 적절하게 사용합니다.
-
-
-
-
-
-
- 
-
-
- Variant
-
- Variant의 중요도는 Primary로 갈수록 높아지며, Secondary로 갈수록
- 낮아집니다. 화면 내에서 액션의 중요도에 따라 버튼의 variant를 다르게
- 사용합니다.
-
-
-
-
-
-
- 
-
-
- Danger Variant
-
- Danger variant는 유저에게 위험 요소에 대한 경고를 전달할 때 사용합니다. 이
- 버튼으로 인해 파괴적 변화나 부정적인 행동이 일어날 수 있다는 시각적 인지를
- 제공합니다.
-
-
-
-
-
-
- 
-
-
- Style
-
- Basic, Underlined 2개의 스타일을 사용할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Bold
-
- Text Button이 전달하고자 하는 의미가 강조되어야 할 경우, Bold를 사용할 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Text Button이 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 |
-| ----------- | ------------------------------------------------- | ------- |
-| size | small, medium, large | medium |
-| variant | primary, secondary, secondary-low, accent, danger | primary |
-| style | basic, underlined | basic |
-| bold | true, false | false |
-| is disabled | true, false | false |
-
-## 상호작용
-
-### 터치 / 마우스 상호작용
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Text Button과 상호작용할 수 있는 영역입니다.
-
-
-
-
-
- 
-
-
- PC 환경에서 Text Button에 Hover 시 커서가 포인터 모양으로 바뀝니다.
-
-
-
-
-
- 
-
-
- Disabled 상태인 경우 상호작용이 불가능합니다.
-
-
-
-### 키보드 상호작용
-
-
-
- 
-
-
- Space 또는 Enter 키를 통해
- Button과 상호작용할 수 있습니다.
-
-
-
-
-
- 
-
-
- Label은 1줄을 초과할 수 없으며 좌우 Margin 각 16px을 유지한 범위 내에서만
- 텍스트가 노출될 수 있습니다. 범위를 초과한 텍스트 값은 입력될 수 없으며
- 말줄임 처리도 불가합니다.
-
-
-
-## 가이드라인
-
-
-
- 
-
-
- Prefix Icon
-
- 상황에 따라 Text Button의 Label을 보조하는 Prefix icon을 사용할 수
- 있습니다.
-
-
-
-
-
-
- 
-
-
- Underlined
-
- 특정 페이지나 링크로 이동을 유도하는 경우, Underlined 옵션 사용을
- 권장합니다.
-
-
-
-
-
-
- 
-
-
- Suffix Icon
-
- Suffix Icon에는 Chevron만 사용할 수 있습니다. 특정 기능이나 페이지로의
- 랜딩을 유도하는 역할을 합니다.
-
-
-
diff --git a/docs/content/component/text-field/anatomy.png b/docs/content/component/text-field/anatomy.png
deleted file mode 100644
index 42da537be..000000000
Binary files a/docs/content/component/text-field/anatomy.png and /dev/null differ
diff --git a/docs/content/component/text-field/component-meta.json b/docs/content/component/text-field/component-meta.json
deleted file mode 100644
index e834cdbc6..000000000
--- a/docs/content/component/text-field/component-meta.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "$schema": "../../../schema/component-meta.json",
- "name": "Text Field",
- "description": "텍스트를 한 줄에 입력할 수 있는 폼 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "../../primitive/text-field/primitive-meta.json",
- "group": "Text Fields",
- "platform": {
- "ios": {
- "status": "done",
- "alias": "",
- "path": "seedcatalog://components/text-field"
- },
- "android": {
- "status": "done",
- "path": ""
- },
- "react": {
- "status": "done",
- "path": "https://sprout-storybook.vercel.app/?path=/docs/components-textfields-textfield--docs"
- },
- "figma": {
- "status": "done",
- "path": "https://www.figma.com/file/ty7UxJ61CVPeVU2Gf1LJGQ/App-Components?type=design&node-id=22282-54232&t=WVhT3hdC8rK21W3o-4"
- },
- "docs": {
- "overview": {
- "status": "in-progress",
- "storybook": {
- "path": "https://sprout-storybook.vercel.app/iframe.html?args=&id=components-textfields-textfield--basic&viewMode=story",
- "height": "150px"
- },
- "mdx": "./overview.mdx"
- },
- "usage": {
- "status": "in-progress",
- "mdx": "./usage.mdx"
- },
- "style": {
- "status": "done",
- "mdx": "./style.mdx"
- }
- }
- }
-}
\ No newline at end of file
diff --git a/docs/content/component/text-field/overview.mdx b/docs/content/component/text-field/overview.mdx
deleted file mode 100644
index 07bc3f46a..000000000
--- a/docs/content/component/text-field/overview.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
----
-slug: /component/text-field/overview
----
diff --git a/docs/content/component/text-field/style.mdx b/docs/content/component/text-field/style.mdx
deleted file mode 100644
index ed864e5cb..000000000
--- a/docs/content/component/text-field/style.mdx
+++ /dev/null
@@ -1,217 +0,0 @@
----
-slug: /component/text-field/style
----
-
-## Anatomy
-
-
-
-1. Root - Primitive.Root
-2. Label - Primitive.Label
-3. Required indicator
-4. Optional indicator
-5. Field - Primitive.Input
-6. Field text
-7. Placeholder
-8. Cursor
-9. Prefix
-10. Suffix
-11. Description - Primitive.Description
-12. Error message - Primitive.ErrorMessage
-13. Character Count
-14. Max Length
-
-## Visual Options
-
-| Property | Value |
-| ------------- | -------------------- |
-| size | small, medium, large |
-| variant | outlined, underlined |
-| label | text |
-| placeholder | text |
-| prefix | text, button |
-| suffix | text, button |
-| max length | number |
-| description | text |
-| error message | text |
-
-## Visually Represented States
-
-| State | Condition |
-| -------- | --------------------------------------------------------- |
-| enabled | isDisabled = false, isReadOnly = false, isFocused = false |
-| focused | isDisabled = false, isReadOnly = false, isFocused = true |
-| readonly | isDisabled = false, isReadOnly = true |
-| disabled | isDisabled = true |
-
-| State | Condition |
-| ------- | ----------------- |
-| valid | isInvalid = false |
-| invalid | isInvalid = true |
-
-## 디자인 결정 (Color)
-
-| Part | Attribute | Value |
-| ----------------------------------------------------- | --------- | --------------------- |
-| Label, Required Indicator, Optional Indicator, Cursor | Color | $scale.color.gray-900 |
-
-| State | Part | Attribute | Value |
-| -------- | -------------- | ------------- | ----------------------------- |
-| Enabled | Field | Color | $semantic.color.paper-default |
-| | | Outline Color | $scale.color.gray-400 |
-| | Field(invalid) | Color | $semantic.color.danger-low |
-| | | Outline Color | $semantic.color.danger |
-| | Field text | Color | $scale.color.gray-900 |
-| | Placeholder | Color | $scale.color.gray-600 |
-| | Description | Color | $scale.color.gray-600 |
-| | Error Message | Color | $semantic.color.danger |
-| | Charcter Count | Color | $scale.color.gray-600 |
-| | Max Length | Color | $scale.color.gray-600 |
-| Focused | Field | Color | $semantic.color.paper-default |
-| | | Outline Color | $scale.color.gray-900 |
-| | Field(invalid) | Color | $semantic.color.danger-low |
-| | | Outline Color | $semantic.color.danger |
-| | Field text | Color | $scale.color.gray-900 |
-| | Placeholder | Color | $scale.color.gray-600 |
-| | Description | Color | $scale.color.gray-600 |
-| | Error Message | Color | $semantic.color.danger |
-| | Charcter Count | Color | $scale.color.gray-900 |
-| | Max Length | Color | $scale.color.gray-600 |
-| Readonly | Field | Color | $scale.color.gray-50 |
-| | | Outline Color | $scale.color.gray-400 |
-| | Field text | Color | $scale.color.gray-900 |
-| | Placeholder | Color | $scale.color.gray-600 |
-| | Description | Color | $scale.color.gray-600 |
-| | Charcter Count | Color | $scale.color.gray-600 |
-| | Max Length | Color | $scale.color.gray-600 |
-| Disabled | Field | Color | $scale.color.gray-100 |
-| | | Outline Color | $scale.color.gray-400 |
-| | Field text | Color | $scale.color.gray-400 |
-| | Placeholder | Color | $scale.color.gray-400 |
-| | Description | Color | $scale.color.gray-400 |
-| | Charcter Count | Color | $scale.color.gray-400 |
-| | Max Length | Color | $scale.color.gray-400 |
-
-## 디자인 결정 (Typography)
-
-### size=small
-
-| Part | Attribute | Value |
-| -------------------------------------- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-| Required Indicator, Optional Indicator | Typography | $semantic.typography.label3-regular |
-| Field Text, Placeholder | Typography | $semantic.typography.label3-regular |
-| Prefix, Suffix (string type) | Typography | $semantic.typography.label3-regular |
-| Description | Typography | $semantic.typography.label4-regular |
-
-### size=medium
-
-| Part | Attribute | Value |
-| -------------------------------------- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-| Required Indicator, Optional Indicator | Typography | $semantic.typography.label3-regular |
-| Field Text, Placeholder | Typography | $semantic.typography.label2-regular |
-| Description | Typography | $semantic.typography.label3-regular |
-| Prefix, Suffix (string type) | Typography | $semantic.typography.label3-regular |
-
-### size=large
-
-| Part | Attribute | Value |
-| -------------------------------------- | ---------- | ----------------------------------- |
-| Label | Typography | $semantic.typography.label3-bold |
-| Required Indicator, Optional Indicator | Typography | $semantic.typography.label3-regular |
-| Field Text, Placeholder | Typography | $semantic.typography.label1-regular |
-| Description | Typography | $semantic.typography.label3-regular |
-| Prefix, Suffix (string type) | Typography | $semantic.typography.label3-regular |
-
-## 디자인 결정 (Layout)
-
-### variant=outlined, size=small
-
-| Part | Attribute | Value |
-| ----------------------------- | ------------------ | ----- |
-| Field | Corner Radius | 6pt |
-| | Min Width | 280pt |
-| | Height | 42pt |
-| | Horizontal Padding | 12pt |
-| Prefix / Field Text | Spacing | 6pt |
-| Field Text / Suffix | Spacing | 6pt |
-| Label / Required Indicator | Spacing | 4pt |
-| Label / Field | Spacing | 12pt |
-| Field / Description | Spacing | 8pt |
-| Description / Character Count | Spacing | 14pt |
-
-### variant=outlined, size=medium
-
-| Part | Attribute | Value |
-| ----------------------------- | ------------------ | ----- |
-| Field | Corner Radius | 6pt |
-| | Min Width | 280pt |
-| | Height | 52pt |
-| | Horizontal Padding | 14pt |
-| Prefix / Field Text | Spacing | 8pt |
-| Field Text / Suffix | Spacing | 8pt |
-| Label / Required Indicator | Spacing | 4pt |
-| Label / Field | Spacing | 12pt |
-| Field / Description | Spacing | 8pt |
-| Description / Character Count | Spacing | 14pt |
-
-### variant=outlined, size=large
-
-| Part | Attribute | Value |
-| ----------------------------- | ------------------ | ----- |
-| Field | Corner Radius | 6pt |
-| | Min Width | 280pt |
-| | Height | 54pt |
-| | Horizontal Padding | 14pt |
-| Prefix / Field Text | Spacing | 8pt |
-| Field Text / Suffix | Spacing | 8pt |
-| Label / Required Indicator | Spacing | 4pt |
-| Label / Field | Spacing | 12pt |
-| Field / Description | Spacing | 8pt |
-| Description / Character Count | Spacing | 14pt |
-
-### variant=underlined, size=small
-
-| Part | Attribute | Value |
-| ----------------------------- | ------------------ | ----- |
-| Field | Corner Radius | 0pt |
-| | Min Width | 280pt |
-| | Height | 41pt |
-| | Horizontal Padding | 0pt |
-| Prefix / Field Text | Spacing | 8pt |
-| Field Text / Suffix | Spacing | 8pt |
-| Label / Required Indicator | Spacing | 4pt |
-| Label / Field | Spacing | 6pt |
-| Field / Description | Spacing | 8pt |
-| Description / Character Count | Spacing | 14pt |
-
-### variant=underlined, size=medium
-
-| Part | Attribute | Value |
-| ----------------------------- | ------------------ | ----- |
-| Field | Corner Radius | 0pt |
-| | Min Width | 280pt |
-| | Height | 43pt |
-| | Horizontal Padding | 0pt |
-| Prefix / Field Text | Spacing | 8pt |
-| Field Text / Suffix | Spacing | 8pt |
-| Label / Required Indicator | Spacing | 4pt |
-| Label / Field | Spacing | 8pt |
-| Field / Description | Spacing | 8pt |
-| Description / Character Count | Spacing | 14pt |
-
-### variant=underlined, size=large
-
-| Part | Attribute | Value |
-| ----------------------------- | ------------------ | ----- |
-| Field | Corner Radius | 0pt |
-| | Min Width | 280pt |
-| | Height | 45pt |
-| | Horizontal Padding | 0pt |
-| Prefix / Field Text | Spacing | 8pt |
-| Field Text / Suffix | Spacing | 8pt |
-| Label / Required Indicator | Spacing | 4pt |
-| Label / Field | Spacing | 8pt |
-| Field / Description | Spacing | 8pt |
-| Description / Character Count | Spacing | 14pt |
diff --git a/docs/content/component/text-field/textfield-guideline-1.png b/docs/content/component/text-field/textfield-guideline-1.png
deleted file mode 100644
index e7efaa708..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-1.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-2.png b/docs/content/component/text-field/textfield-guideline-2.png
deleted file mode 100644
index 93a03bd4a..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-2.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-3.png b/docs/content/component/text-field/textfield-guideline-3.png
deleted file mode 100644
index e772f69b7..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-3.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-do-1.png b/docs/content/component/text-field/textfield-guideline-do-1.png
deleted file mode 100644
index c142158b7..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-do-1.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-do-2.png b/docs/content/component/text-field/textfield-guideline-do-2.png
deleted file mode 100644
index 0eef44516..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-do-2.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-do-3.png b/docs/content/component/text-field/textfield-guideline-do-3.png
deleted file mode 100644
index 92f103a07..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-do-3.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-dont-1.png b/docs/content/component/text-field/textfield-guideline-dont-1.png
deleted file mode 100644
index 8ad2ab938..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-dont-1.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-dont-2.png b/docs/content/component/text-field/textfield-guideline-dont-2.png
deleted file mode 100644
index a8d2637ed..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-dont-2.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-guideline-dont-3.png b/docs/content/component/text-field/textfield-guideline-dont-3.png
deleted file mode 100644
index 04938d522..000000000
Binary files a/docs/content/component/text-field/textfield-guideline-dont-3.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-keyboard-control-1.png b/docs/content/component/text-field/textfield-keyboard-control-1.png
deleted file mode 100644
index fd33265f2..000000000
Binary files a/docs/content/component/text-field/textfield-keyboard-control-1.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-keyboard-control-2.png b/docs/content/component/text-field/textfield-keyboard-control-2.png
deleted file mode 100644
index d4631fa84..000000000
Binary files a/docs/content/component/text-field/textfield-keyboard-control-2.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-keyboard-control-3.png b/docs/content/component/text-field/textfield-keyboard-control-3.png
deleted file mode 100644
index c44872177..000000000
Binary files a/docs/content/component/text-field/textfield-keyboard-control-3.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-description.png b/docs/content/component/text-field/textfield-options-description.png
deleted file mode 100644
index dd98109fa..000000000
Binary files a/docs/content/component/text-field/textfield-options-description.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-disabled.png b/docs/content/component/text-field/textfield-options-disabled.png
deleted file mode 100644
index 8017d1788..000000000
Binary files a/docs/content/component/text-field/textfield-options-disabled.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-error.png b/docs/content/component/text-field/textfield-options-error.png
deleted file mode 100644
index 65bde17fb..000000000
Binary files a/docs/content/component/text-field/textfield-options-error.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-label.png b/docs/content/component/text-field/textfield-options-label.png
deleted file mode 100644
index 5d7a3ef2b..000000000
Binary files a/docs/content/component/text-field/textfield-options-label.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-max-length.png b/docs/content/component/text-field/textfield-options-max-length.png
deleted file mode 100644
index 2103ffb4b..000000000
Binary files a/docs/content/component/text-field/textfield-options-max-length.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-read-only.png b/docs/content/component/text-field/textfield-options-read-only.png
deleted file mode 100644
index e17a7021f..000000000
Binary files a/docs/content/component/text-field/textfield-options-read-only.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-required-or-optional.png b/docs/content/component/text-field/textfield-options-required-or-optional.png
deleted file mode 100644
index ca47182ea..000000000
Binary files a/docs/content/component/text-field/textfield-options-required-or-optional.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-size.png b/docs/content/component/text-field/textfield-options-size.png
deleted file mode 100644
index 2e502e8c8..000000000
Binary files a/docs/content/component/text-field/textfield-options-size.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-suffix.png b/docs/content/component/text-field/textfield-options-suffix.png
deleted file mode 100644
index 9fed77280..000000000
Binary files a/docs/content/component/text-field/textfield-options-suffix.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-options-variant.png b/docs/content/component/text-field/textfield-options-variant.png
deleted file mode 100644
index 19c3478d5..000000000
Binary files a/docs/content/component/text-field/textfield-options-variant.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-overflow-1.png b/docs/content/component/text-field/textfield-overflow-1.png
deleted file mode 100644
index 200d25a86..000000000
Binary files a/docs/content/component/text-field/textfield-overflow-1.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-overflow-2.png b/docs/content/component/text-field/textfield-overflow-2.png
deleted file mode 100644
index 10f5c0dd2..000000000
Binary files a/docs/content/component/text-field/textfield-overflow-2.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-read-only.png b/docs/content/component/text-field/textfield-read-only.png
deleted file mode 100644
index ad203d6d7..000000000
Binary files a/docs/content/component/text-field/textfield-read-only.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-touch-mouse-control.png b/docs/content/component/text-field/textfield-touch-mouse-control.png
deleted file mode 100644
index 884a036e6..000000000
Binary files a/docs/content/component/text-field/textfield-touch-mouse-control.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-typing-1.png b/docs/content/component/text-field/textfield-typing-1.png
deleted file mode 100644
index 3dbac1214..000000000
Binary files a/docs/content/component/text-field/textfield-typing-1.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-typing-2.png b/docs/content/component/text-field/textfield-typing-2.png
deleted file mode 100644
index c0e1fa388..000000000
Binary files a/docs/content/component/text-field/textfield-typing-2.png and /dev/null differ
diff --git a/docs/content/component/text-field/textfield-typing-3.png b/docs/content/component/text-field/textfield-typing-3.png
deleted file mode 100644
index 4627c9920..000000000
Binary files a/docs/content/component/text-field/textfield-typing-3.png and /dev/null differ
diff --git a/docs/content/component/text-field/thumbnail.png b/docs/content/component/text-field/thumbnail.png
deleted file mode 100644
index bc184edcb..000000000
Binary files a/docs/content/component/text-field/thumbnail.png and /dev/null differ
diff --git a/docs/content/component/text-field/usage.mdx b/docs/content/component/text-field/usage.mdx
deleted file mode 100644
index d2c49dbcf..000000000
--- a/docs/content/component/text-field/usage.mdx
+++ /dev/null
@@ -1,366 +0,0 @@
----
-slug: /component/text-field/usage
----
-
-## 구조도
-
-
-
-1. Root
-2. Label
-3. Required indicator
-4. Optional indicator
-5. Field
-6. Field text
-7. Placeholder
-8. Cursor
-9. Suffix
-10. Prefix
-11. Description
-12. Error message
-13. Character Count
-14. Max Length
-
-## 옵션
-
-
-
- 
-
-
- Label
-
- Label과 Placeholder는 Text Field가 사용자에게 요구하는 항목에 대한 설명을
- 제공합니다. 명시적 정보 전달을 위해 Label과 Placeholder를 표시하는 것을
- 권장합니다.
-
-
-
-
-
-
- 
-
-
- Variant
-
- Text Field는 Outlined, Underlined 2종류의 Variant를 가질 수 있습니다.
- Outlined가 보편적으로 사용되며, 주변 요소와의 조화를 고려해 컨테이너
- 스타일을 다르게 사용할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- Size
-
- Text Field는 small, medium, large 3개의 사이즈를 가질 수 있습니다.
- Medium이 기본값으로 가장 보편적으로 사용되며, 다른 크기는 주변 요소와의
- 균형 및 위계에 따라 제한적으로 사용합니다.
-
-
-
-
-
-
- 
-
-
- Description
-
- Description을 통해 사용자가 입력해야 하는 내용에 대한 추가 컨텍스트나
- 도움말을 제공할 수 있습니다. 특정 요구사항이나 힌트 텍스트를 전달합니다.
-
-
-
-
-
-
- 
-
-
- Error Message
-
- Text Field의 필수 요구 사항이 충족되지 않았거나, 잘못된 정보를 기입했을
- 경우 사용자에게 에러 메세지를 전달합니다.
-
-
-
-
-
-
- 
-
-
- Prefix / Suffix
-
- Prefix와 Suffix에는 텍스트와 버튼을 사용할 수 있습니다. 입력하는 내용과
- 컨텍스트에 따라 올바른 맥락으로 사용해야 합니다.
-
-
-
-
-
-
- 
-
-
- Required or Optional
-
- Required or Optional indicator를 통해 사용자에게 입력값이 필수 또는 선택
- 사항인지 표시할 수 있습니다. 선택 사항인 경우 '선택' 이라는 힌트 텍스트를
- 제공하거나, 아예 표시하지 않습니다.
-
-
-
-
-
-
- 
-
-
- Max Length
-
- Text Field에 사용자가 입력할 수 있는 최대 글자 수를 표시합니다.
-
-
-
-
-
-
- 
-
-
- Disabled
-
- Disabled 상태는 Text Field가 존재하지만 지금은 사용할 수 없는 상태를
- 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할
- 수도 있음을 사용자에게 알려줍니다.
-
-
-
-
-
-
- 
-
-
- Read only
-
- Read only 상태는 읽기 전용 옵션입니다. 복사나 드래그는 가능하지만 상호
- 작용이나 텍스트 입력, 변경은 불가능한 상태입니다.
-
-
-
-
-
-
-### 옵션 테이블
-
-| 속성 | 값 | 기본값 | 설명 |
-| ------------------ | -------------------- | -------- | -------------------------------------------------- |
-| variant | outlined, underlined | outlined |
-| label | text | | |
-| placeholder | text | | |
-| prefix | text, button | | |
-| suffix | text, button | | |
-| max length | number | |
-| description | text | | |
-| error message | text | | |
-| required indicator | text | | |
-| optional indicator | text | | |
-| is disabled | true, false | false | true일 경우, Text field가 유저와 상호작용하지 않음 |
-| is readonly | true, false | false | true일 경우, value를 변경할 수 없음 |
-| is required | true, false | false | true일 경우, value가 필수임을 나타냄 |
-| is invalid | true, false | false | true일 경우, value가 유효하지 않은 값임을 나타냄 |
-
-## 상호작용
-
-### 터치/마우스 상호작용
-
-
-
- 
-
-
- 마우스 클릭 또는 터치로 Text Field를 동작시킬 수 있는 영역입니다.
-
-
-
-
-
- 
-
-
- Read only일 경우 드래그나 복사는 가능하지만 상호 작용이나 텍스트 입력,
- 변경은 불가능한 상태입니다.
-
-
-
-
-
-### 키보드 상호작용
-
-
-
- 
-
-
- Focused
-
- Tab키를 통해 focused, enabled 상태로 진입이
- 가능합니다.
-
-
-
-
-
-
- 
-
-
- Selected text
-
- 이미 작성한 텍스트가 있는 경우, Tab키를 통해 텍스트
- selected 상태로 진입 가능합니다.
-
-
-
-
-### Typing
-
-
-
- 
-
-
- Typing text
-
- 넘치는 텍스트는 필드 좌측으로 밀려나 보이지 않게 됩니다.
-
-
-
-
-
-
- 
-
-
- Cursor
-
- 커서를 좌측으로 이동하면 텍스트는 필드 우측으로 밀려나게 됩니다.
-
-
-
-
-
-
- 
-
-
- 입력 완료
-
- 입력 완료 후 필드를 떠나면 우측으로 밀려난 텍스트는 텍스트 필드 영역을
- 기준으로 끝 처리 그라데이션되어 보여집니다.
-
-
-
-
-### Overflow
-
-
-
- 
-
-
- Label의 문구가 텍스트 필드의 Width보다 입력값이 길면 줄바꿈되어 보여집니다.
-
-
- 
-
-
- Description이 Width 공간보다 길면 줄바꿈되어 보여집니다.
-
-
-
-## 가이드라인
-
-
-
- 
-
-
- Label
-
- Label과 Placeholder는 Text Field가 사용자에게 요구하는 항목에 대한 설명을
- 제공합니다. 명시적 정보 전달을 위해 Label과 Placeholder를 표시하는 것을
- 권장합니다.
-
-
-
-
-
-
- 
-
-
- Suffix
-
- Suffix value를 통해 입력하는 값과 단위를 다양하게 활용할 수 있습니다.
-
-
-
-
-
-
- 
-
-
- 컴포넌트 결합
-
- 필요한 경우 다른 컴포넌트와 조합해 사용할 수 있습니다. 예를들어, Stepper Button과의 조합을 통해 모바일 환경에서도 쉽게 값을 조절할 수 있도록 돕습니다.
-
-
-
-
-
-
-### Do / Don't
-
-
-
-
- 
-
- 여러 개의 Text Field가 존재하고 Indicator 표시가 필요한 경우, 더 빈도가 적은 Indicator를 표시합니다.
-
-
-
- 
-
- 여러 개의 Text Field가 존재하고 Indicator 표시가 필요한 경우, 모든 Indicator를 표시하지 않습니다. 정보를 간결하게 전달할수록 이해하기 쉬운 정보가 됩니다.
-
-
-
-
-
-
-
- 
-
- Placeholder는 유저가 입력해야 하는 정보의 예시를 나타냅니다. 이는 힌트 역할을 하여 무엇을 입력해야 할지에 대한 명확한 이해를 돕습니다.
-
-
-
- 
-
- Placeholder를 정보의 예시가 아닌 설명으로 서술하지 않습니다.
-
-
-
-
\ No newline at end of file
diff --git a/docs/content/docs/design/components/action-chip.mdx b/docs/content/docs/design/components/action-chip.mdx
new file mode 100644
index 000000000..513e52b39
--- /dev/null
+++ b/docs/content/docs/design/components/action-chip.mdx
@@ -0,0 +1,29 @@
+---
+title: Action Chip
+description: TBD
+---
+
+## Overview
+
+### 옵션 테이블
+
+| 속성 | 값 | 기본값 |
+|--------------|-------------------|---------|
+| size | medium, small | medium |
+| layout | with text, icon only | with text |
+| disabled | true, false | false |
+| count | number | |
+| prefix icon | icon | |
+| suffix icon | Icon | |
+
+
+## 링크
+
+
+ }
+ title="React"
+ description="Action Chip 컴포넌트를 React로 사용하는 방법을 설명합니다."
+ href="/docs/react/components/action-chip"
+ />
+
\ No newline at end of file
diff --git a/docs/content/docs/design/components/index.mdx b/docs/content/docs/design/components/index.mdx
new file mode 100644
index 000000000..c84248c31
--- /dev/null
+++ b/docs/content/docs/design/components/index.mdx
@@ -0,0 +1,7 @@
+---
+title: 컴포넌트
+description: 컴포넌트는 사용자 인터페이스를 만들기 위한 상호작용 가능한 구성 요소입니다.
+index: true
+---
+
+
diff --git a/docs/content/docs/design/foundation/color/color-role.mdx b/docs/content/docs/design/foundation/color/color-role.mdx
new file mode 100644
index 000000000..2fbf5a134
--- /dev/null
+++ b/docs/content/docs/design/foundation/color/color-role.mdx
@@ -0,0 +1,78 @@
+---
+title: 역할 기반 색상
+description: 역할이 부여된 색상은 색상에 특정 기능적 역할(주요 액션, 오류, 정보 등)을 할당하여 사용자 인터페이스 전반에 걸쳐 일관성, 명확성, 접근성을 보장합니다.
+---
+
+## 카테고리
+
+역할 기반 색상 시스템은 **Foreground**, **Background**, **Stroke** 세 가지 기본 카테고리로 시작합니다.
+
+### Foreground
+
+Foreground 색상은 텍스트, 아이콘 및 배경 위에 나타나야 하는 다른 콘텐츠와 같은 요소에 사용됩니다. 이 색상들은 가독성과 접근성에 중요한 역할을 합니다.
+
+- $color.fg.[name]
+- 예시
+ - `$color.fg.brand`: 브랜드 특색을 나타내는 텍스트 또는 콘텐츠에 사용하는 기본 색상.
+ - `$color.fg.neutral`: 일반적인 텍스트 또는 콘텐츠에 사용하는 기본 색상.
+ - `$color.fg.neutral-subtle`: 보조 설명문과 같은 덜 강조된 콘텐츠에 사용.
+
+### Background
+
+Backgroun 색상은 컨테이너, 섹션 또는 일반적인 페이지 배경과 같은 UI 구성 요소의 시각적 공간이나 배경을 정의하는 데 사용됩니다. 이 색상들은 시각적 계층 구조를 만들고 UI의 다양한 부분을 구분하는 데 도움을 줍니다.
+
+- $color.bg.[name]
+- 예시:
+ - `$color.bg.layer-default`: 기본적인 배경 색상.
+ - `$color.bg.brand`: 브랜드 특색을 나타내는 배경 색상.
+
+### Stroke
+
+Stroke 색상은 경계, 구분선 또는 UI 요소 간의 구조적 구분을 제공하는 윤곽선에 사용됩니다. 이 색상들은 구성 요소 간의 명확한 구분을 만드는 데 중요합니다.
+
+- $color.stroke.[name]
+- 예시:
+ - `$color.stroke.neutral`: 경계에 사용되는 기본 스트로크 색상.
+ - `$color.stroke.neutral-muted`: 목록 항목 사이의 미세한 구분선과 같은 섬세한 구분선에 사용.
+ - `$color.stroke.field`: 입력 필드 주변의 경계에 사용.
+
+## 역할
+
+역할 기반 색상 시스템은 전경, 배경, 스트로크의 기본 카테고리에 더해 brand, neutral, positive와 같은 특적 **역할**을 포함합니다. 이러한 역할 키워드는 색상 간의 기능적, 의미적 차이를 표현할 수 있는 레이어를 추가합니다. 일부 역할은 여러 카테고리에 걸쳐 적용될 수 있으며(e.g., `fg.brand`, `bg.brand`, `stroke.brand`), 사용자 인터페이스 전반에 걸쳐 일관된 사용을 보장합니다.
+
+### Brand
+
+Brand 색상은 브랜드의 시각적 정체성을 나타내는 데 사용됩니다. 이러한 색상은 제품 전반에서 브랜드 일관성을 유지하며, 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.
+또한, 화면 내에서 주요 액션을 나타내는 데 사용될 수도 있습니다.
+
+### Neutral
+
+Neutral 색상은 일반적인 콘텐츠에 사용되는 기본 색상입니다. 주목도가 가장 높지는 않지만, 여전히 가시성이 필요한 요소에 사용됩니다.
+
+### Positive
+
+Positive 색상은 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. 이러한 색상은 사용자에게 긍정적인 피드백을 전달하여 더 직관적인 상호작용을 만듭니다
+
+### Negative
+
+Negative 색상은 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. 사용자에게 부정적인 상태나 문제를 명확히 전달하여 즉각적인 주의를 끌 수 있습니다.
+
+### Informative
+
+Informative 색상은 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. 이러한 색상은 정보 전달을 직관적으로 만들어 줍니다.
+
+### Magic
+
+Magic 색상은 특수 효과나 AI 기능 등 주목할 만한 상호작용 요소에 사용됩니다. 이러한 색상은 인터페이스 내에서 새롭고 독특한 경험을 제공할 때 유용합니다.
+
+### Layer
+
+레이어 색상은 인터페이스의 깊이와 계층 구조를 나타내는 데 사용됩니다. UI에서 다양한 레이어를 시각적으로 구분하는 데 도움을 줍니다.
+
+TODO: 레이어링 방식 설명 추가
+
+## Variant
+
+
+
+## 상태
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/color/color-system.mdx b/docs/content/docs/design/foundation/color/color-system.mdx
new file mode 100644
index 000000000..6fad975f1
--- /dev/null
+++ b/docs/content/docs/design/foundation/color/color-system.mdx
@@ -0,0 +1,12 @@
+---
+title: 색상 시스템
+description: SEED 색상 시스템은 접근성을 고려하며 제품의 계층, 상태, 브랜드를 표현할 수 있도록 돕습니다.
+---
+
+## 개요
+
+### 역할 기반 색상
+
+
+
+### 팔레트 색상
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/color/meta.json b/docs/content/docs/design/foundation/color/meta.json
new file mode 100644
index 000000000..e5e57a451
--- /dev/null
+++ b/docs/content/docs/design/foundation/color/meta.json
@@ -0,0 +1,4 @@
+{
+ "title": "색상",
+ "pages": ["color-system", "color-role", "palette"]
+}
diff --git a/docs/content/docs/design/foundation/color/palette.mdx b/docs/content/docs/design/foundation/color/palette.mdx
new file mode 100644
index 000000000..653e65558
--- /dev/null
+++ b/docs/content/docs/design/foundation/color/palette.mdx
@@ -0,0 +1,3 @@
+---
+title: 색상 팔레트
+---
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/design-token.mdx b/docs/content/docs/design/foundation/design-token.mdx
new file mode 100644
index 000000000..da7223f0a
--- /dev/null
+++ b/docs/content/docs/design/foundation/design-token.mdx
@@ -0,0 +1,42 @@
+---
+title: 디자인 토큰
+description: 디자인 토큰은 디자인 결정을 사람과 기계가 이해할 수 있는 방식으로 인코딩하는 방법입니다.
+---
+
+## 디자인 토큰이 무엇인가요?
+
+디자인 토큰은 디자인 결정을 데이터로 번역한 것입니다. UI의 세부 사항을 디자인과 엔지니어링 간에 전달하는 커뮤니케이션 도구이자 공통 언어입니다.
+
+디자인 토큰은 색상, 타이포그래피, 간격, 애니메이션 등 디자인 시스템을 구성하고 유지하는 데 필요한 값들에 이름을 부여하는 것으로 구성됩니다. RGB로 표현된 색상, 숫자 및 단위로 표현된 간격, cubic-bezier로 표현된 모션 등 디자인 정의를 가진 모든 값들이 디자인 토큰으로 표현될 수 있습니다.
+
+
+## SEED 디자인 토큰의 구성
+
+TODO: 이미지
+
+**Raw values**는 어떤 디스플레이 장치에 그릴 수 있는 실제 값을 의미합니다. `1px`, `1dp`, `1rem`, `1vw` 와 같이 크기를 나타내는 값, `#fff`, `rgba(123, 123, 123, 1)` 처럼 색상을 나타내는 값, `"Noto Sans KR"` 같은 폰트를 나타내는 값 등이 모두 해당됩니다.
+
+사실상 무한한 값들 중에 실제로 사용될 값을 제한하고 고유한 이름을 부여하는 것으로 디자인의 일관성과 재사용성을 얻을 수 있지만, 반대로 디자인의 유연성과 창의성을 크게 제한할 수 있습니다.
+
+SEED 디자인 토큰은 유연성을 위해 크게 2단계로 계층화하여 사용합니다.
+
+**Scale Token**은 Raw value Scale 하나에 이름을 부여한 것 입니다. Scale 의 이름을 통해 전체 디자인에 사용되는 값을 유한하게 유지합니다. Scale은 미리 정의한 단위를 통해 값의 세부사항(출력장치)을 숨겨 이를 통해 특정 플랫폼에 불가지론적인 디자인을 유지할 수 있게 합니다.
+
+**Semantic Token**은 Scale Token의 조합(Composition)으로 디자인 의도를 표현한 단위이며, 실제 디자인과 개발과정에서 주요 빌딩블럭으로 사용됩니다.
+
+시스템에 존재하는 Scale 과 Semantic 정의가 전체 디자인의 스킴을 결정하고, 뷰포트나 플랫폼 등 외부 환경에 맞게 Scale에 적절한 값을 주입하는 것으로 스키마 변경없이 유연하게 스킴을 재정의할 수 있습니다.
+
+
+## SEED 디자인 토큰의 예시
+
+### 색상 토큰
+
+TODO: 예시 이미지
+
+`fg.brand` 토큰과 `bg.brand` 토큰은 모든 서비스에서 배경과 텍스트에 동일한 브랜드 색상을 사용할 수 있도록 돕습니다.
+
+### 간격 토큰
+
+TODO: 예시 이미지
+
+화면 가장자리와 콘텐츠 사이의 간격을 나타내는 `global-gutter` 토큰은 모든 서비스에서 동일한 간격을 사용할 수 있도록 돕습니다.
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/iconography.mdx b/docs/content/docs/design/foundation/iconography.mdx
new file mode 100644
index 000000000..6e905149a
--- /dev/null
+++ b/docs/content/docs/design/foundation/iconography.mdx
@@ -0,0 +1,8 @@
+---
+title: 아이콘
+description: 아이콘은 작은 기호로 사용자에게 정보를 전달하거나 기능을 표현합니다.
+---
+
+import { Icons } from "@/components/icongraphy/icons";
+
+
diff --git a/docs/content/docs/design/foundation/international-design.mdx b/docs/content/docs/design/foundation/international-design.mdx
new file mode 100644
index 000000000..d219f9725
--- /dev/null
+++ b/docs/content/docs/design/foundation/international-design.mdx
@@ -0,0 +1,19 @@
+---
+title: 글로벌 디자인
+description: SEED 디자인은 전 세계에서 똑같이 유용하고 가치있는 경험을 제공할 수 있도록 돕습니다.
+---
+
+## 개요
+
+전 세계에는 약 200개의 나라와 6500개 이상의 언어가 존재합니다.
+문화는 우리의 사고방식에 깊이 자리잡고 있으며, 이는 사용자가 디지털 경험과 상호작용하고 이를 활용하는 방식에 큰 영향을 미칩니다.
+국제적인 디자인은 단순한 언어 번역을 넘어서는 복잡한 작업입니다.
+문화적 차이와 특성을 이해하는 것이 보다 풍부하고 글로벌한 디지털 경험을 만드는 첫걸음입니다.
+
+## 텍스트 길이
+
+콘텐츠를 다른 언어로 번역할 때, 번역된 텍스트의 길이는 원본과 크게 다를 수 있으며, 경우에 따라 최대 300%까지 길어질 수 있습니다.
+텍스트 길이는 글로벌 사용자 인터페이스를 설계할 때 주요한 도전 중 하나입니다.
+
+연구에 따르면, 짧은 텍스트일수록 번역에 더 취약하다는 점이 명확하게 나타났으며, 이는 사용자 인터페이스에 미치는 영향을 예측하는 데 도움이 될 수 있습니다.
+[W3의 국제화 관련 글](https://www.w3.org/International/articles/article-text-size.en)에 자세한 내용이 있습니다.
diff --git a/docs/content/docs/design/foundation/meta.json b/docs/content/docs/design/foundation/meta.json
new file mode 100644
index 000000000..57fc83b71
--- /dev/null
+++ b/docs/content/docs/design/foundation/meta.json
@@ -0,0 +1,4 @@
+{
+ "title": "파운데이션",
+ "pages": ["design-token", "color", "typography", "..."]
+}
diff --git a/docs/content/docs/design/foundation/motion.mdx b/docs/content/docs/design/foundation/motion.mdx
new file mode 100644
index 000000000..ffbf028de
--- /dev/null
+++ b/docs/content/docs/design/foundation/motion.mdx
@@ -0,0 +1,53 @@
+---
+title: 모션
+description: 모션은 유저 인터페이스의 표현력을 높이고 쉽게 사용할 수 있도록 도와줍니다.
+---
+
+## 매크로 / 마이크로 모션
+
+매크로 모션은 전체적인 레이아웃이나 페이지 전환과 같은 큰 규모의 모션을 의미합니다. 예를 들어 페이지 전환, 모달 팝업, 슬라이드 메뉴 등이 있습니다.
+
+마이크로 모션은 작은 규모의 모션을 의미합니다. 예를 들어 버튼 클릭, 입력창 포커스, 스크롤 등이 있습니다.
+
+마이크로 모션은 0.2초 이하의 시간을 가지며, 매크로 모션은 0.2초를 초과합니다.
+
+## Timing function
+
+### easing
+
+버튼 클릭, 입력창 포커스, 등의 기능적인 마이크로 모션에 사용합니다.
+
+### enter
+
+다이얼로그, 시트 등이 나타나는 매크로 모션에 사용합니다.
+
+### exit
+
+다이얼로그, 시트 등이 사라지는 매크로 모션에 사용합니다.
+
+### expressive
+
+enter, exit 모션에서 특히 강조되어야 하는 움직임에 사용합니다.
+
+### Easing Tokens
+
+| 이름 | 값 |
+| --- | --- |
+| `$timing-function.easing` | cubic-bezier(0.35, 0, 0.35, 1) |
+| `$timing-function.enter` | cubic-bezier(0, 0, 0.15, 1) |
+| `$timing-function.exit` | cubic-bezier(0.35, 0, 1, 1) |
+| `$timing-function.enter-expressive` | cubic-bezier(0.03, 0.4, 0.1, 1) |
+| `$timing-function.exit-expressive` | cubic-bezier(0.35, 0, 0.95, 0.55) |
+
+## Duration
+
+### Duration Tokens
+
+| 이름 | 값 |
+| --- | --- |
+| `$duration.50` | 50ms |
+| `$duration.100` | 100ms |
+| `$duration.150` | 150ms |
+| `$duration.200` | 200ms |
+| `$duration.250` | 250ms |
+| `$duration.300` | 300ms |
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/radius.mdx b/docs/content/docs/design/foundation/radius.mdx
new file mode 100644
index 000000000..1aac36df3
--- /dev/null
+++ b/docs/content/docs/design/foundation/radius.mdx
@@ -0,0 +1,18 @@
+---
+title: Radius
+description: Radius는 컴포넌트 혹은 콘텐츠 모서리의 둥글기를 표현합니다.
+---
+
+
+### Radius Tokens
+
+| 이름 | 값 |
+| --- | --- |
+| `$radius.x0.5` | 2px |
+| `$radius.x1` | 4px |
+| `$radius.x1.5` | 6px |
+| `$radius.x2` | 8px |
+| `$radius.x3` | 12px |
+| `$radius.x4` | 16px |
+| `$radius.x5` | 20px |
+| `$radius.x6` | 24px |
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/state.mdx b/docs/content/docs/design/foundation/state.mdx
new file mode 100644
index 000000000..8a035a28a
--- /dev/null
+++ b/docs/content/docs/design/foundation/state.mdx
@@ -0,0 +1,29 @@
+---
+title: 상태 표현
+description: 상태 표현은 컴포넌트 또는 상호작용 가능한 요소의 상태 또는 가능성을 사용자에게 전달합니다.
+---
+
+## 상태 표현의 유형
+
+UI 상태는 두 가지 유형이 있습니다.
+
+**상호작용 상태**는 사용자의 상호작용에 따라 변하는 상태를 나타냅니다. 예를 들어, 버튼을 터치하고 있으면 눌린 상태로 표시됩니다.
+**옵션 상태**는 컴포넌트에 적용된 옵션에 따른 상태를 나타냅니다. 예를 들어, 버튼에 disabled 옵션이 적용되면 비활성화 상태로 표시됩니다.
+
+상호작용 상태와 옵션 상태는 한 가지 상태가 다른 상태를 덮어쓸 수도 있고, 함께 적용될 수도 있습니다.
+
+### Enabled
+
+요소에 아무런 상호작용을 하지 않았을 때의 기본 상태입니다.
+
+### Pressed
+
+터치, 펜 등의 방식으로 요소를 누르고 있는 상호작용 상태입니다.
+
+### Selected
+
+요소가 선택되었거나 활성화된 옵션 상태입니다. 일반적으로 다른 상호작용 상태와 함께 표현됩니다.
+
+### Disabled
+
+요소가 비활성화된 옵션 상태입니다. 사용자의 상호작용을 받지 않고 있으나, 다른 조건에 따라 상호작용이 가능할 수 있음을 나타냅니다. 일반적으로 다른 상호작용 상태와 함께 표현되지 않습니다.
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/stroke.mdx b/docs/content/docs/design/foundation/stroke.mdx
new file mode 100644
index 000000000..40a3e6f9c
--- /dev/null
+++ b/docs/content/docs/design/foundation/stroke.mdx
@@ -0,0 +1,6 @@
+---
+title: 스트로크
+description: 스트로크는 요소의 경계, 혹은 요소와 요소 사이의 경계를 나타내는 선으로 사용됩니다.
+---
+
+TBD
\ No newline at end of file
diff --git a/docs/content/docs/design/foundation/typography.mdx b/docs/content/docs/design/foundation/typography.mdx
new file mode 100644
index 000000000..58ba03a07
--- /dev/null
+++ b/docs/content/docs/design/foundation/typography.mdx
@@ -0,0 +1,52 @@
+---
+title: 타이포그래피
+description: 타이포그래피는 콘텐츠를 명확하고 효율적으로 표현하기 위한 디자인 요소입니다.
+---
+
+## 폰트 크기
+
+TBD
+
+### 토큰
+
+| 이름 | 값 |
+| --- | --- |
+| `$font-size.25` | 11px |
+| `$font-size.50` | 12px |
+| `$font-size.75` | 13px |
+| `$font-size.100` | 14px |
+| `$font-size.200` | 16px |
+| `$font-size.300` | 18px |
+| `$font-size.400` | 20px |
+| `$font-size.500` | 22px |
+| `$font-size.600` | 24px |
+| `$font-size.700` | 26px |
+
+### 폰트 스케일링
+
+폰트 크기는 기기 설정에 따라 조정될 수 있습니다. 디자인 과정에서는 항상 텍스트 크기가 변경될 수 있다는 점을 염두에 두어야 합니다.
+SEED Figma의 Variable Mode에서 Platform을 변경하는 것으로 다양한 환경에서 폰트 크기가 어떻게 보일지 확인할 수 있습니다.
+
+## 폰트 굵기
+
+SEED 디자인 시스템은 regular, medium, bold 세 가지의 폰트 굵기를 사용합니다.
+
+### Regular
+
+TBD
+
+### Medium
+
+TBD
+
+### Bold
+
+TBD
+
+### 토큰
+
+| 이름 | 값 |
+| --- | --- |
+| `$font-weight.regular` | 400 |
+| `$font-weight.medium` | 500 |
+| `$font-weight.bold` | 700 |
\ No newline at end of file
diff --git a/docs/content/docs/design/index.mdx b/docs/content/docs/design/index.mdx
new file mode 100644
index 000000000..b4ed2a488
--- /dev/null
+++ b/docs/content/docs/design/index.mdx
@@ -0,0 +1,17 @@
+---
+title: 가치
+description: SEED 디자인 시스템이 지켜야 할 가치를 정의합니다.
+---
+
+
+## 언어
+
+SEED 디자인 시스템은 당근 앱을 위한 통합된 디자인 언어로서, 모든 직군과 사용자가 함께 소통할 수 있는 기반을 제공합니다. 특정 직무나 사용자 그룹에 국한되지 않고, 디자이너, 개발자, 기획자 등 모든 팀원이 동일한 언어와 원칙을 따라 일관된 사용자 경험을 만들어냅니다.
+
+## 모두를 위한
+
+당근은 누구나 사용할 수 있는 서비스입니다. SEED 디자인 시스템은 모든 사용자가 당근에 쉽게 접근하고 편리하게 이용할 수 있도록 다음과 같은 요소를 고려합니다:
+
+- 색상 대비 최적화: 텍스트와 배경의 색상 대비를 최적화해 저시력 사용자도 쉽게 내용을 읽을 수 있도록 합니다.
+- 터치 영역 최적화: 상호작용 가능한 요소들의 터치 영역을 충분히 확보해 다양한 디바이스에서의 사용성을 향상시킵니다.
+- 스크린 리더 지원: 스크린리더를 통해 서비스를 원활하게 이용할 수 있도록 ARIA 레이블 등 접근성 속성을 적용합니다.
diff --git a/docs/content/docs/design/meta.json b/docs/content/docs/design/meta.json
new file mode 100644
index 000000000..8ae830f57
--- /dev/null
+++ b/docs/content/docs/design/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "design",
+ "root": true,
+ "pages": ["index", "foundation", "components"]
+}
diff --git a/docs/content/docs/react/components/action-button.mdx b/docs/content/docs/react/components/action-button.mdx
new file mode 100644
index 000000000..b19ad9683
--- /dev/null
+++ b/docs/content/docs/react/components/action-button.mdx
@@ -0,0 +1,39 @@
+---
+title: Action Button
+---
+
+
+
+## 설치
+
+
+
+## 예제
+
+### Brand Solid
+
+
+
+### Neutral Solid
+
+
+
+### Brand Weak
+
+
+
+### Neutral Weak
+
+
+
+### Danger Solid
+
+
+
+### Icon Only
+
+
+
+### Prefix Icon
+
+
\ No newline at end of file
diff --git a/docs/content/docs/react/components/action-chip.mdx b/docs/content/docs/react/components/action-chip.mdx
new file mode 100644
index 000000000..f3888d7c9
--- /dev/null
+++ b/docs/content/docs/react/components/action-chip.mdx
@@ -0,0 +1,28 @@
+---
+title: Action Chip
+---
+
+
+
+
+## 설치
+
+
+
+## 예제
+
+### Medium
+
+
+
+### Small
+
+
+
+### Icon Only
+
+
+
+### Prefix Icon
+
+
\ No newline at end of file
diff --git a/docs/content/docs/react/components/badge.mdx b/docs/content/docs/react/components/badge.mdx
new file mode 100644
index 000000000..0782ec83f
--- /dev/null
+++ b/docs/content/docs/react/components/badge.mdx
@@ -0,0 +1,52 @@
+---
+title: Badge
+---
+
+
+
+
+## 설치
+
+
+
+## 예제
+
+### Medium
+
+
+
+### Small
+
+
+
+### Soft
+
+
+
+### Solid
+
+
+
+### Outlined
+
+
+
+### Neutral
+
+
+
+### Brand
+
+
+
+### Informative
+
+
+
+### Positive
+
+
+
+### Danger
+
+
\ No newline at end of file
diff --git a/docs/content/docs/react/components/checkbox.mdx b/docs/content/docs/react/components/checkbox.mdx
new file mode 100644
index 000000000..bf98cbfcd
--- /dev/null
+++ b/docs/content/docs/react/components/checkbox.mdx
@@ -0,0 +1,9 @@
+---
+title: Checkbox
+---
+
+
+
+### 설치
+
+
diff --git a/docs/content/docs/react/components/control-chip.mdx b/docs/content/docs/react/components/control-chip.mdx
new file mode 100644
index 000000000..dbcd6f09f
--- /dev/null
+++ b/docs/content/docs/react/components/control-chip.mdx
@@ -0,0 +1,27 @@
+---
+title: Control Chip
+---
+
+
+
+## 설치
+
+
+
+## 예제
+
+### Medium
+
+
+
+### Small
+
+
+
+### Icon Only
+
+
+
+### Prefix Icon
+
+
\ No newline at end of file
diff --git a/docs/content/docs/react/components/expand-button.mdx b/docs/content/docs/react/components/expand-button.mdx
new file mode 100644
index 000000000..c6b5fb939
--- /dev/null
+++ b/docs/content/docs/react/components/expand-button.mdx
@@ -0,0 +1,9 @@
+---
+title: Expand Button
+---
+
+
+
+## 설치
+
+
diff --git a/docs/content/docs/react/components/meta.json b/docs/content/docs/react/components/meta.json
new file mode 100644
index 000000000..1d28b0a6c
--- /dev/null
+++ b/docs/content/docs/react/components/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "Components",
+ "pages": ["..."],
+ "defaultOpen": true
+}
diff --git a/docs/content/docs/react/components/switch.mdx b/docs/content/docs/react/components/switch.mdx
new file mode 100644
index 000000000..d037104ee
--- /dev/null
+++ b/docs/content/docs/react/components/switch.mdx
@@ -0,0 +1,19 @@
+---
+title: Switch
+---
+
+
+
+### 설치
+
+
+
+## 예제
+
+### Medium
+
+
+
+### Small
+
+
\ No newline at end of file
diff --git a/docs/content/docs/react/components/tabs/chip-tabs.mdx b/docs/content/docs/react/components/tabs/chip-tabs.mdx
new file mode 100644
index 000000000..0a39cecaf
--- /dev/null
+++ b/docs/content/docs/react/components/tabs/chip-tabs.mdx
@@ -0,0 +1,23 @@
+---
+title: Chip Tabs
+---
+
+
+
+### 설치
+
+
+
+## 예제
+
+### Neutral Solid
+
+
+
+### Brand Weak
+
+
+
+### Stackflow
+
+
diff --git a/docs/content/docs/react/components/tabs/meta.json b/docs/content/docs/react/components/tabs/meta.json
new file mode 100644
index 000000000..eee8b7eed
--- /dev/null
+++ b/docs/content/docs/react/components/tabs/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "Tabs",
+ "pages": ["..."],
+ "defaultOpen": true
+}
diff --git a/docs/content/docs/react/components/tabs/tabs.mdx b/docs/content/docs/react/components/tabs/tabs.mdx
new file mode 100644
index 000000000..e23f69fe1
--- /dev/null
+++ b/docs/content/docs/react/components/tabs/tabs.mdx
@@ -0,0 +1,53 @@
+---
+title: Tabs
+---
+
+
+
+## 설치
+
+
+
+## 예제
+
+### Layout Fill
+
+
+
+### Layout Hug (Default)
+
+
+
+### Size Medium
+
+
+
+### Size Small (Default)
+
+
+
+### Swipeable
+
+
+
+### Disabled
+
+
+
+### Alert
+
+
+
+### Dynamic Height
+
+
+각 탭의 높이가 다를 때, 아래의 컨텐츠를 탭 아래에 바로 맞추기 위해서 사용하는 예시입니다.
+
+
+
+탭이 자주 바뀌고, 탭에 네트워크 요청이 많은 경우 캐싱을 잘 고려해주세요.
+
+
+
+
+### With Pull To Refresh
diff --git a/docs/content/docs/react/foundation/iconography/meta.json b/docs/content/docs/react/foundation/iconography/meta.json
new file mode 100644
index 000000000..1d5d79752
--- /dev/null
+++ b/docs/content/docs/react/foundation/iconography/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "Iconography",
+ "pages": ["..."],
+ "defaultOpen": true
+}
diff --git a/docs/content/docs/react/foundation/iconography/package.mdx b/docs/content/docs/react/foundation/iconography/package.mdx
new file mode 100644
index 000000000..a8811a218
--- /dev/null
+++ b/docs/content/docs/react/foundation/iconography/package.mdx
@@ -0,0 +1,10 @@
+---
+title: 리액트 아이콘 패키지
+description: 리액트 아이콘 패키지는 아이콘을 사용할 때 필요한 컴포넌트를 제공합니다.
+---
+
+## 설치
+
+```package-install
+npm install @daangn/react-icon
+```
diff --git a/docs/content/docs/react/foundation/iconography/upgrade.mdx b/docs/content/docs/react/foundation/iconography/upgrade.mdx
new file mode 100644
index 000000000..382d77926
--- /dev/null
+++ b/docs/content/docs/react/foundation/iconography/upgrade.mdx
@@ -0,0 +1,335 @@
+---
+title: 업그레이드 가이드
+description: 리뉴얼된 아이콘으로 업그레이드하는 방법을 안내해요.
+---
+
+import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
+
+## 업그레이드 방법
+
+현재 아이콘을 사용하고 있는 방법에 따라 적용할 수 있는 두 가지 방법이 있어요.
+
+### Codemod 스크립트
+
+아래 두 아이콘 패키지를 사용하고 있다면, 제공되는 codemod 스크립트를 사용해서 리뉴얼된 아이콘 패키지로 손쉽게 업그레이드할 수 있어요.
+
+- [`@seed-deesign/react-icon`](https://www.npmjs.com/package/@seed-design/react-icon)
+- deprecated: [`@seed-design/icon`](https://www.npmjs.com/package/@seed-design/icon)
+
+두 패키지는 [`@daangn/react-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-icon)으로 대체돼요.
+
+### 수동 업그레이드
+
+다음과 같은 경우에는 수동으로 업그레이드해야 해요.
+
+- PNG, SVG 등의 파일로 기존 아이콘을 사용하는 경우
+- 다음 패키지를 사용하는 경우
+ - [`@seed-design/vue2-icon`](https://www.npmjs.com/package/@seed-design/vue2-icon)
+ - [`@seed-design/vue3-icon`](https://www.npmjs.com/package/@seed-design/vue3-icon)
+ - 두 패키지는 각각 다음 패키지로 대체돼요.
+ - [`@daangn/vue2-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/vue2-icon)
+ - [`@daangn/vue3-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/vue3-icon)
+
+## 작업 순서
+
+
+
+많은 변경사항이 발생하게 되므로, 커밋하지 않은 변경사항이 없는지 확인하고 시작하는 것이 좋아요.
+
+
+
+
+
+
+
+### Codemod 스크립트
+
+
+
+
+
+실행 전
+
+```tsx
+import {
+ IconSellRegular,
+ IconListFill,
+ IconAddFill as AddIconAlias,
+} from "@seed-design/react-icon";
+import IconSellFill from "@seed-design/react-icon/IconSellFill";
+
+function App() {
+ console.log(IconSellRegular);
+
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+실행 후
+
+```tsx
+import {
+ IconPlusSquareLine,
+ IconDothorizline3VerticalFill,
+ IconPlusFill as AddIconAlias,
+} from "@daangn/react-icon";
+import IconPlusSquareFill from "@daangn/react-icon/IconPlusSquareFill";
+
+function App() {
+ console.log(IconPlusSquareLine);
+
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+
+
+
+
+
+
+
+
+#### 리뉴얼된 아이콘 패키지 설치
+
+[`@daangn/react-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-icon)을 설치해요.
+
+```package-install
+npm install @daangn/react-icon
+```
+
+
+
+
+
+#### Codemod 스크립트 실행
+
+경로 내의 코드를 일괄적으로 변환하는 codemod 스크립트를 실행해요.
+
+```shell
+npx @seed-design/codemod migrate-icons <...경로> <옵션>
+```
+
+```shell
+npx @seed-design/codemod migrate-icons src
+```
+
+
+
+- `--log`
+ - 로그를 파일로 저장해요.
+ - `./`에 `migrate-icons-combined.log`와 `migrate-icons-warnings.log` 파일이 생성돼요.
+- [`--extensions`](https://jscodeshift.com/run/cli/#--extensionsext)
+ - 변환할 파일 확장자를 지정해요.
+ - 이 옵션을 지정하지 않으면 경로 안의 `js`, `jsx`, `ts`, `tsx` 파일을 변환해요. (`d.ts` 제외)
+ - 예시: `--extensions="ts,tsx"`
+- [`--ignore-config`](https://jscodeshift.com/run/cli/#--ignore-configfile)
+ - 변환하지 않을 파일 패턴이 정의된 파일을 지정해요.
+ - 예시: `--ignore-config=".gitignore"`
+ - 이 옵션을 지정하지 않아도 jscodeshift에 의해 `node_modules`는 자동으로 무시돼요.
+
+
+
+
+
+```
+ERR /Users/seed/foo/bar.js Transformation error (Unexpected reserved word 'package'. (3:3))
+```
+
+codemod 스크립트 실행 중 파싱 오류가 발생할 수 있어요. 파싱 오류는 다음과 같은 이유로 발생해요.
+
+- `assert`를 사용한 [import assertion](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#import-attributes)과 같은, deprecated된 문법이 있는 경우
+- `package`와 같은 예약어를 변수 이름으로 사용한 경우 등
+
+
+
+
+
+
+
+#### 결과 확인
+
+문제 없이 모든 변환이 완료된 경우 다음과 같은 결과가 표시돼요.
+
+```
+All done.
+Results:
+0 errors // [!code highlight]
+439 unmodified
+1 skipped
+27 ok
+Time elapsed: 43.376seconds
+```
+
+파싱 오류 등으로 인해 코드 확인이 이루어지지 못한 파일의 수가 `errors`로 표시돼요. 에러가 있다면, 해당 파일에서 문제가 발생한 부분을 수정하고 다시 스크립트를 실행하거나, 해당 파일의 아이콘 마이그레이션을 직접 진행해주세요.
+
+```
+All done.
+Results:
+1 errors // [!code highlight]
+4149 unmodified
+3 skipped
+247 ok
+Time elapsed: 49.376seconds
+```
+
+
+
+
+
+#### 코드 포맷
+
+프로젝트에서 사용하는 포매터를 사용해서 코드를 포맷해요.
+
+
+
+
+
+#### 이전 패키지 제거
+
+이전 아이콘이 모두 대체된 경우, 이전 패키지를 제거해요.
+
+```package-install
+npm uninstall @seed-design/icon @seed-design/react-icon
+```
+
+
+
+
+
+#### 사이드 이펙트 확인
+
+[사이드 이펙트](#발생-가능한-사이드-이펙트)가 발생했는지 확인하여 의도한 대로 변경이 이루어졌는지 검토해요.
+
+
+
+
+
+
+
+
+
+### 수동 업그레이드
+
+
+
+
+
+#### 이전 패키지 제거
+
+다음 패키지를 사용하는 경우, 패키지를 제거해요.
+
+- [`@seed-design/vue2-icon`](https://www.npmjs.com/package/@seed-design/vue2-icon)
+- [`@seed-design/vue3-icon`](https://www.npmjs.com/package/@seed-design/vue3-icon)
+
+```package-install
+npm uninstall @seed-design/vue2-icon @seed-design/vue3-icon
+```
+
+
+
+
+
+#### 리뉴얼된 패키지 설치
+
+##### React
+
+```package-install
+npm install @daangn/react-icon
+```
+
+##### Vue 2
+
+```package-install
+npm install @daangn/vue2-icon
+```
+
+##### Vue 3
+
+```package-install
+npm install @daangn/vue3-icon
+```
+
+
+
+
+
+#### 아이콘 이름 변경
+
+[V2 V3 아이콘 맵핑](/docs/react/foundation/iconography/v2-v3-list) 문서를 참고하여 리뉴얼된 패키지를 사용하도록 코드를 수정해요.
+
+
+
+
+
+#### 사이드 이펙트 확인
+
+[사이드 이펙트](#발생-가능한-사이드-이펙트)가 발생했는지 확인하여 의도한 대로 변경이 이루어졌는지 검토해요.
+
+
+
+
+
+
+
+
+
+## 발생 가능한 사이드 이펙트
+
+### 정확히 대응되는 리뉴얼된 아이콘이 없는 경우
+
+- 이전 아이콘 중 아래 5개 아이콘은 리뉴얼된 아이콘 패키지에 시각적으로 정확히 대응되는 항목이 없어요.
+- codemod 스크립트 실행 시 **추천되는 아이콘으로 변환되지만**, 시각적인 차이가 크기 때문에 변경 후 확인이 필요해요.
+
+| 이전 아이콘 이름 | 리뉴얼된 아이콘 이름 |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `icon_bold` | [`icon_t_uppercase_serif`](/docs/design/foundation/iconography?icon=icon_t_uppercase_serif_fill) |
+| `icon_cobuying` | [`icon_shoppingbag2_stacked`](/docs/design/foundation/iconography?icon=icon_shoppingbag2_stacked_fill) |
+| `icon_delivery` | [`icon_truck`](/docs/design/foundation/iconography?icon=icon_truck_fill) |
+| `icon_suggest` | [`icon_lightbulb_dot5`](/docs/design/foundation/iconography?icon=icon_lightbulb_dot5_fill) |
+| `icon_write_story` | [`icon_horizline2_vertical_chatbubble_right`](/docs/design/foundation/iconography?icon=icon_horizline2_vertical_chatbubble_right_fill) |
+
+
+
+- codemod 스크립트 사용 시, 5개 아이콘이 사용된 경우 터미널에 메시지가 출력돼요.
+
+```
+REP ...을 ...로 변경했지만, 변경된 아이콘이 적절한지 확인이 필요해요
+```
+
+- codemod 스크립트를 `--log` flag와 함께 사용 시, 5개 아이콘이 사용된 내역이 `migrate-icons-warnings.log`에 기록돼요.
+- 다음을 활용하여 코드를 직접 검색할 수 있어요.
+
+
+
+```regex tab="정규 표현식"
+(IconBold|IconCobuying|IconDelivery|IconSuggest|IconWriteStory)(Thin|Regular|Fill)|(IconTUppercaseSerif|IconShoppingbag2Stacked|IconTruck|IconLightbulbDot5|IconHorizline2VerticalChatbubbleRight)(Line|Fill)
+```
+
+```shell tab="git grep"
+git grep -E '(IconBold|IconCobuying|IconDelivery|IconSuggest|IconWriteStory)(Thin|Regular|Fill)|(IconTUppercaseSerif|IconShoppingbag2Stacked|IconTruck|IconLightbulbDot5|IconHorizline2VerticalChatbubbleRight)(Line|Fill)'
+```
+
+
+
+
+
+### 여러 이전 아이콘이 하나의 리뉴얼된 아이콘으로 대체되는 경우
+
+**이전 아이콘과 리뉴얼된 아이콘은 `n:1`로 대응돼요.** 따라서, 같은 페이지에 표시되었던 서로 다른 두 아이콘이, 동일한 리뉴얼된 아이콘으로 대체되는 경우가 있어요. 의도한 목적대로 아이콘이 표시되는지 확인해요.
+
+- 한 이전 아이콘의 3개 variant 중 `thin` variant와 `regular` variant는 리뉴얼된 아이콘에서 모두 `line` variant로 대체돼요.
+ - 예를 들면, `icon_forward_thin`, `icon_forward_regular`는 모두 [`icon_arrow_right_line`](/docs/design/foundation/iconography?icon=icon_arrow_right_line)으로 대체돼요.
+ - 이전 아이콘의 `fill` variant는 리뉴얼된 아이콘에서도 `fill` variant로 대체돼요.
+- 완전히 다른 이전 아이콘이 하나의 리뉴얼된 아이콘으로 대체되는 경우도 있어요.
+ - 예를 들면, `icon_headphone_regular`, `icon_helpcenter_regular`, `icon_helper_regular`는 모두 [`icon_headset_line`](/docs/design/foundation/iconography?icon=icon_headset_line)으로 대체돼요.
diff --git a/docs/content/docs/react/foundation/iconography/v2-v3-list.mdx b/docs/content/docs/react/foundation/iconography/v2-v3-list.mdx
new file mode 100644
index 000000000..4f4ae2e1c
--- /dev/null
+++ b/docs/content/docs/react/foundation/iconography/v2-v3-list.mdx
@@ -0,0 +1,603 @@
+---
+title: V2 V3 아이콘 맵핑
+description: V2 아이콘과 V3 아이콘 맵핑 데이터입니다.
+---
+
+import { V3, V2 } from "@/components/mdx/icon";
+
+| V2 (이전 아이콘) | V3 (리뉴얼 아이콘) | 비고 |
+| ----------------------------------- | -------------------------------------------- | ---------------------- |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
+| | | 변경 후 확인이 필요함 |
diff --git a/docs/content/docs/react/foundation/meta.json b/docs/content/docs/react/foundation/meta.json
new file mode 100644
index 000000000..b44e1aa31
--- /dev/null
+++ b/docs/content/docs/react/foundation/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "Foundation",
+ "pages": ["..."],
+ "defaultOpen": true
+}
diff --git a/docs/content/docs/react/get-started/cli.mdx b/docs/content/docs/react/get-started/cli.mdx
new file mode 100644
index 000000000..1e94f392e
--- /dev/null
+++ b/docs/content/docs/react/get-started/cli.mdx
@@ -0,0 +1,136 @@
+---
+title: CLI
+---
+`@seed-design/cli` 패키지를 사용하여 seed-design을 더 쉽게 사용할 수 있어요.
+
+```sh copy
+Usage:
+ $ seed-design [options]
+
+Commands:
+ add [...components] add component
+ init initialize seed-design.json
+
+For more info, run any command with the `--help` flag:
+ $ seed-design add --help
+ $ seed-design init --help
+
+Options:
+ -v, --version Display version number
+ -h, --help Display this message
+```
+
+기본적으로 `add`, `init`과 같은 명령어를 제공하고 있지만,
+CLI가 없이도 수동으로 사용할 수 있는 매뉴얼도 제공하고 있어요.
+
+## init
+
+`seed-design.json` 파일을 생성하기 위한 명령어에요.
+
+
+
+
+
+
+### init 명령어 입력하기
+
+
+```sh
+npx @seed-design/cli@latest init
+```
+
+
+
+### seed-design 설정
+```sh
+◇ Would you like to use TypeScript (recommended)?
+│ Yes
+│
+◇ Are you using React Server Components?
+│ No
+│
+◇ Would you like to use CSS Modules? (If true, CSS import will be added in components)
+│ Yes
+│
+◇ Enter the path to your seed-design directory
+│ ./seed-design
+│
+◇ seed-design.json written to seed-design.json
+```
+
+
+
+
+
+아래 파일을 프로젝트 루트에 생성해주세요.
+
+```json title="seed-design.json"
+{
+ "rsc": false,
+ "tsx": true,
+ "css": true,
+ "path": "./seed-design"
+}
+```
+
+
+
+### 옵션들
+
+```sh copy
+Usage:
+ $ seed-design init
+
+Options:
+ -c, --cwd the working directory. defaults to the current directory. (default: /Users/jeonghyeonsu/Documents/GitHub/seed-design/examples/cli)
+ -h, --help Display this message
+```
+
+## add
+
+컴포넌트를 추가하기 위한 명령어에요.
+
+```sh copy
+yarn seed-design add [...components]
+```
+
+컴포넌트를 입력하지 않고 명령어를 입력하게 되면 받을 수 있는 모든 컴포넌트를 볼 수 있어요.
+
+```sh copy
+yarn seed-design add
+```
+
+```sh copy
+◆ Select all components to add
+│ ◻ box-button
+│ ◻ alert-dialog
+│ ◻ tabs
+│ ◻ callout
+│ ◻ switch
+│ ◻ checkbox
+│ ◻ text-field
+│ ◻ ...
+└
+```
+
+혹은 여러 컴포넌트를 입력해서 추가할 수도 있어요.
+
+```sh copy
+yarn seed-design add box-button alert-dialog
+```
+
+### 옵션들
+
+```sh copy
+Usage:
+ $ seed-design add [...components]
+
+Options:
+ -a, --all Add all components (default: false)
+ -c, --cwd the working directory. defaults to the current directory. (default: /Users/jeonghyeonsu/Documents/GitHub/seed-design/examples/cli)
+ -h, --help Display this message
+
+Examples:
+seed-design add box-button
+seed-design add alert-dialog
+```
diff --git a/docs/content/docs/react/get-started/installation/index.mdx b/docs/content/docs/react/get-started/installation/index.mdx
new file mode 100644
index 000000000..10e9fae07
--- /dev/null
+++ b/docs/content/docs/react/get-started/installation/index.mdx
@@ -0,0 +1,12 @@
+---
+title: Installation
+---
+
+seed-design 컴포넌트를 사용하기 위한 설정들에 대해서 알아봐요.
+
+### 프레임워크
+
+
+
+
+
diff --git a/docs/content/docs/react/get-started/installation/meta.json b/docs/content/docs/react/get-started/installation/meta.json
new file mode 100644
index 000000000..a83206b9a
--- /dev/null
+++ b/docs/content/docs/react/get-started/installation/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "Installation",
+ "pages": ["vite", "next"],
+ "defaultOpen": true
+}
diff --git a/docs/content/docs/react/get-started/installation/next.mdx b/docs/content/docs/react/get-started/installation/next.mdx
new file mode 100644
index 000000000..c4497e21e
--- /dev/null
+++ b/docs/content/docs/react/get-started/installation/next.mdx
@@ -0,0 +1,179 @@
+---
+title: Next.js
+---
+
+Next.js 프로젝트에서 seed-design 컴포넌트를 사용하기 위한 설정들에 대해서 알아봐요.
+
+
+ {/* Pages Router */}
+
+
+
+ ### 의존성 설치
+
+ 필요한 의존성들을 설치해요.
+
+ ```package-install
+ @seed-design/stylesheet @seed-design/recipe
+ ```
+
+
+
+
+ ### pages/_document.tsx 수정하기
+
+ Seed Design의 컬러 토큰은 `` 태그의 `data-seed`, `data-seed-scale-color` 속성을 통해 라이트/다크모드 전환을 해요.
+ Next.js에서 `_document.tsx` 파일을 생성하고 Seed Design의 컬러 토큰을 설정해요.
+
+
+
+ ```tsx title="pages/_document.tsx"
+ import { Html, Head, Main, NextScript } from "next/document";
+
+ export default function Document() {
+ return (
+ // [!code highlight]
+
+ // [!code highlight]
+
+
+
+
+
+
+ );
+ }
+ ```
+
+
+ ```tsx title="pages/_document.tsx"
+ import { Html, Head, Main, NextScript } from "next/document";
+
+ export default function Document() {
+ return (
+ // [!code highlight]
+
+ // [!code highlight]
+
+
+
+
+
+
+ );
+ }
+ ```
+
+
+ ```tsx title="pages/_document.tsx"
+ import { Html, Head, Main, NextScript } from "next/document";
+
+ export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ }
+ ```
+
+
+
+
+
+
+
+
+ ### token.css import하기
+
+ ```tsx title="pages/_app.tsx"
+ import "@seed-design/stylesheet/token.css"; // [!code highlight]
+
+ function MyApp({ Component, pageProps }) {
+ return ;
+ }
+ ```
+
+
+
+
+
+### seed-design.json 생성하기
+
+
+
+
+
+
+### init 명령어 입력하기
+
+
+```sh
+npx @seed-design/cli@latest init
+```
+
+
+
+### seed-design 설정
+```sh
+◇ Would you like to use TypeScript (recommended)?
+│ Yes
+│
+◇ Are you using React Server Components?
+│ No
+│
+◇ Would you like to use CSS Modules? (If true, CSS import will be added in components)
+│ Yes
+│
+◇ Enter the path to your seed-design directory
+│ ./seed-design
+│
+◇ seed-design.json written to seed-design.json
+```
+
+
+
+
+
+아래 파일을 프로젝트 루트에 생성해주세요.
+
+```json title="seed-design.json"
+{
+ "rsc": false,
+ "tsx": true,
+ "css": true,
+ "path": "./seed-design"
+}
+```
+
+
+
+
+
+
+
+
+### 컴포넌트를 한번 사용해볼까요?
+
+```sh
+npx @seed-design/cli@latest add box-button
+```
+
+
+
+
+
+
+
+{/* App Router */}
+
+준비중입니다...
+
+
+
diff --git a/docs/content/docs/react/get-started/installation/vite.mdx b/docs/content/docs/react/get-started/installation/vite.mdx
new file mode 100644
index 000000000..01b61a3d2
--- /dev/null
+++ b/docs/content/docs/react/get-started/installation/vite.mdx
@@ -0,0 +1,167 @@
+---
+title: Vite
+---
+
+vite 프로젝트에서 seed-design 컴포넌트를 사용하기 위한 설정들에 대해서 알아봐요.
+
+
+
+
+### 의존성 설치
+
+필요한 의존성들을 설치해요.
+
+```package-install
+@seed-design/stylesheet @seed-design/recipe
+```
+
+
+
+
+
+### index.html 수정하기
+
+Seed Design의 컬러 토큰은 `` 태그의 `data-seed`, `data-seed-scale-color`
+속성을 통해 라이트/다크모드 전환을 해요.
+
+
+
+ ```tsx title="index.html"
+
+
+ // [!code highlight]
+
+
+
+ ```
+
+
+ ```tsx title="index.html"
+
+
+ // [!code highlight]
+
+
+
+ ```
+
+
+ ```tsx title="index.html"
+
+
+ // [!code highlight]
+
+
+
+ ```
+
+
+
+
+
+
+### global.css import하기
+
+```ts title="index.tsx"
+import "@seed-design/stylesheet/token.css";
+```
+
+
+
+
+### seed-design.json 생성하기
+
+
+
+
+
+
+### init 명령어 입력하기
+
+
+```sh
+npx @seed-design/cli@latest init
+```
+
+
+
+### seed-design 설정
+```sh
+◇ Would you like to use TypeScript (recommended)?
+│ Yes
+│
+◇ Are you using React Server Components?
+│ No
+│
+◇ Would you like to use CSS Modules? (If true, CSS import will be added in components)
+│ Yes
+│
+◇ Enter the path to your seed-design directory
+│ ./seed-design
+│
+◇ seed-design.json written to seed-design.json
+```
+
+
+
+
+
+아래 파일을 프로젝트 루트에 생성해주세요.
+
+```json title="seed-design.json"
+{
+ "rsc": false,
+ "tsx": true,
+ "css": true,
+ "path": "./seed-design"
+}
+```
+
+
+
+
+
+
+
+### 컴포넌트를 한번 사용해볼까요?
+
+```sh
+npx @seed-design/cli@latest add box-button
+```
+
+
+
+
+
+
+### tsconfig.json 설정하기
+
+
+
+```json title="tsconfig.json"
+{
+ "compilerOptions": {
+ // your options
+ "paths": { // [!code highlight]
+ "seed-design/ui/*": [ // [!code highlight]
+ "./seed-design/ui/*" // [!code highlight]
+ ] // [!code highlight]
+ } // [!code highlight]
+ }
+}
+```
+
+
+
diff --git a/docs/content/docs/react/get-started/meta.json b/docs/content/docs/react/get-started/meta.json
new file mode 100644
index 000000000..b6d478164
--- /dev/null
+++ b/docs/content/docs/react/get-started/meta.json
@@ -0,0 +1,4 @@
+{
+ "title": "Get started",
+ "pages": ["installation", "cli", "seed-design"]
+}
diff --git a/docs/content/docs/react/get-started/seed-design.mdx b/docs/content/docs/react/get-started/seed-design.mdx
new file mode 100644
index 000000000..603d55e55
--- /dev/null
+++ b/docs/content/docs/react/get-started/seed-design.mdx
@@ -0,0 +1,133 @@
+---
+title: seed-design.json
+---
+
+[@seed-design/cli](./cli) 를 사용할 때 필요한 설정들을 명시할 파일이에요.
+
+## 설정
+
+`seed-design.json` 파일을 생성하기 위한 명령어에요.
+
+
+
+
+
+
+### init 명령어 입력하기
+
+
+```sh
+npx @seed-design/cli@latest init
+```
+
+
+
+### seed-design 설정
+```sh
+◇ Would you like to use TypeScript (recommended)?
+│ Yes
+│
+◇ Are you using React Server Components?
+│ No
+│
+◇ Would you like to use CSS Modules? (If true, CSS import will be added in components)
+│ Yes
+│
+◇ Enter the path to your seed-design directory
+│ ./seed-design
+│
+◇ seed-design.json written to seed-design.json
+```
+
+
+
+
+
+아래 파일을 프로젝트 루트에 생성해주세요.
+
+```json title="seed-design.json"
+{
+ "rsc": false,
+ "tsx": true,
+ "css": true,
+ "path": "./seed-design"
+}
+```
+
+
+
+## 옵션
+
+### path
+
+`path`는 생성되는 컴포넌트의 기본 경로를 설정해요.
+
+seed-design이 필요로 하는 폴더나 파일들은 `path`로 지정된 경로의 하위에 생겨요.
+`seed-design`의 root 폴더는 유저가 입력할 수 있게 하되, 그 내부에 생성되는 폴더나 파일들은 고정되는 형식이에요.
+
+```json title="seed-design.json"
+{
+ "path": "./seed-design"
+}
+```
+
+만약 위와 같이 설정했다면, `./seed-design` 폴더가 생성이 되고,
+그 안에 `ui`, `utils`, `hooks`와 같은 폴더들이 생기게 될거에요.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### rsc
+
+리액트 서버 컴포넌트를 사용할지 여부를 설정해요.
+
+`true`로 설정하면 컴포넌트에 `use client` 코드가 추가돼요.
+
+```json title="seed-design.json"
+{
+ "rsc": true | false (default: false)
+}
+```
+
+### tsx
+
+타입스크립트를 사용할지 여부를 설정해요.
+
+`true`로 설정하면 컴포넌트에 `.tsx` 확장자이고, `false`로 설정하면 `.jsx` 확장자로 생성돼요.
+
+```json title="seed-design.json"
+{
+ "tsx": true | false (default: true)
+}
+```
+
+### css
+
+CSS Modules를 사용할지 여부를 설정해요.
+
+`true`로 설정하면 컴포넌트에 CSS import 구문이 추가돼요.
+
+```json title="seed-design.json"
+{
+ "css": true | false (default: true)
+}
+```
+
+### $schema
+
+준비중이에요.
diff --git a/docs/content/docs/react/index.mdx b/docs/content/docs/react/index.mdx
new file mode 100644
index 000000000..7da3539c4
--- /dev/null
+++ b/docs/content/docs/react/index.mdx
@@ -0,0 +1,4 @@
+---
+title: V3
+---
+
diff --git a/docs/content/docs/react/meta.json b/docs/content/docs/react/meta.json
new file mode 100644
index 000000000..4ef11435e
--- /dev/null
+++ b/docs/content/docs/react/meta.json
@@ -0,0 +1,5 @@
+{
+ "title": "react",
+ "root": true,
+ "pages": ["index", "get-started", "foundation", "components"]
+}
diff --git a/docs/content/dummy.mdx b/docs/content/dummy.mdx
deleted file mode 100644
index fb86187c3..000000000
--- a/docs/content/dummy.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
----
-slug:
-title:
-description:
-thumbnail:
----
-
-# Dummy
diff --git a/docs/content/foundation/color/color-system/scale-token-1.png b/docs/content/foundation/color/color-system/scale-token-1.png
deleted file mode 100644
index 0ba73c8be..000000000
Binary files a/docs/content/foundation/color/color-system/scale-token-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/color-system/scale-token-2.png b/docs/content/foundation/color/color-system/scale-token-2.png
deleted file mode 100644
index b8a770936..000000000
Binary files a/docs/content/foundation/color/color-system/scale-token-2.png and /dev/null differ
diff --git a/docs/content/foundation/color/color-system/semantic-token-1.png b/docs/content/foundation/color/color-system/semantic-token-1.png
deleted file mode 100644
index 737d008aa..000000000
Binary files a/docs/content/foundation/color/color-system/semantic-token-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/color-system/semantic-token-2.png b/docs/content/foundation/color/color-system/semantic-token-2.png
deleted file mode 100644
index 56edf1578..000000000
Binary files a/docs/content/foundation/color/color-system/semantic-token-2.png and /dev/null differ
diff --git a/docs/content/foundation/color/color-system/static-token-1.png b/docs/content/foundation/color/color-system/static-token-1.png
deleted file mode 100644
index e22ef9f18..000000000
Binary files a/docs/content/foundation/color/color-system/static-token-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/color-system/system.png b/docs/content/foundation/color/color-system/system.png
deleted file mode 100644
index 0d17f5a1d..000000000
Binary files a/docs/content/foundation/color/color-system/system.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/combining-1.png b/docs/content/foundation/color/usage/combining-1.png
deleted file mode 100644
index ab7cea3ab..000000000
Binary files a/docs/content/foundation/color/usage/combining-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/combining-do-1.png b/docs/content/foundation/color/usage/combining-do-1.png
deleted file mode 100644
index 23336ee52..000000000
Binary files a/docs/content/foundation/color/usage/combining-do-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/combining-dont-1.png b/docs/content/foundation/color/usage/combining-dont-1.png
deleted file mode 100644
index bda7b4bde..000000000
Binary files a/docs/content/foundation/color/usage/combining-dont-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/gray-1.png b/docs/content/foundation/color/usage/gray-1.png
deleted file mode 100644
index 0ab8ac13f..000000000
Binary files a/docs/content/foundation/color/usage/gray-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/gray-2.png b/docs/content/foundation/color/usage/gray-2.png
deleted file mode 100644
index cdc91b37c..000000000
Binary files a/docs/content/foundation/color/usage/gray-2.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/gray-do-1.png b/docs/content/foundation/color/usage/gray-do-1.png
deleted file mode 100644
index 6837d2b7a..000000000
Binary files a/docs/content/foundation/color/usage/gray-do-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/gray-dont-1.png b/docs/content/foundation/color/usage/gray-dont-1.png
deleted file mode 100644
index 8c7aa1fd2..000000000
Binary files a/docs/content/foundation/color/usage/gray-dont-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/interactive-1.png b/docs/content/foundation/color/usage/interactive-1.png
deleted file mode 100644
index 691db7879..000000000
Binary files a/docs/content/foundation/color/usage/interactive-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/interactive-do-1.png b/docs/content/foundation/color/usage/interactive-do-1.png
deleted file mode 100644
index f9a7d69ed..000000000
Binary files a/docs/content/foundation/color/usage/interactive-do-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/interactive-dont-1.png b/docs/content/foundation/color/usage/interactive-dont-1.png
deleted file mode 100644
index 79a8477d6..000000000
Binary files a/docs/content/foundation/color/usage/interactive-dont-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/light-dark-1.png b/docs/content/foundation/color/usage/light-dark-1.png
deleted file mode 100644
index 81173a197..000000000
Binary files a/docs/content/foundation/color/usage/light-dark-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/light-dark-2.png b/docs/content/foundation/color/usage/light-dark-2.png
deleted file mode 100644
index c4ecf3a6d..000000000
Binary files a/docs/content/foundation/color/usage/light-dark-2.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/paper-1.png b/docs/content/foundation/color/usage/paper-1.png
deleted file mode 100644
index cf3ae45df..000000000
Binary files a/docs/content/foundation/color/usage/paper-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/paper-2.png b/docs/content/foundation/color/usage/paper-2.png
deleted file mode 100644
index c691d752d..000000000
Binary files a/docs/content/foundation/color/usage/paper-2.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/primary-1.png b/docs/content/foundation/color/usage/primary-1.png
deleted file mode 100644
index c9850e21a..000000000
Binary files a/docs/content/foundation/color/usage/primary-1.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/primary-2.png b/docs/content/foundation/color/usage/primary-2.png
deleted file mode 100644
index 55a8e5c40..000000000
Binary files a/docs/content/foundation/color/usage/primary-2.png and /dev/null differ
diff --git a/docs/content/foundation/color/usage/primary-3.png b/docs/content/foundation/color/usage/primary-3.png
deleted file mode 100644
index 29c9e9724..000000000
Binary files a/docs/content/foundation/color/usage/primary-3.png and /dev/null differ
diff --git a/docs/content/imageNotReady.png b/docs/content/imageNotReady.png
deleted file mode 100644
index c9e87026f..000000000
Binary files a/docs/content/imageNotReady.png and /dev/null differ
diff --git a/docs/content/ogimage.png b/docs/content/ogimage.png
deleted file mode 100644
index 25e6678eb..000000000
Binary files a/docs/content/ogimage.png and /dev/null differ
diff --git a/docs/content/overviewImageComingSoon.png b/docs/content/overviewImageComingSoon.png
deleted file mode 100644
index 72ce2fe90..000000000
Binary files a/docs/content/overviewImageComingSoon.png and /dev/null differ
diff --git a/docs/content/primitive/avatar/avatar-primitive-anatomy.png b/docs/content/primitive/avatar/avatar-primitive-anatomy.png
deleted file mode 100644
index 130e6536a..000000000
Binary files a/docs/content/primitive/avatar/avatar-primitive-anatomy.png and /dev/null differ
diff --git a/docs/content/primitive/avatar/primitive-meta.json b/docs/content/primitive/avatar/primitive-meta.json
deleted file mode 100644
index 5cc439710..000000000
--- a/docs/content/primitive/avatar/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Avatar",
- "description": "프로필 사진 또는 대체 이미지를 통해 사용자를 표현합니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/avatar/primitive.mdx b/docs/content/primitive/avatar/primitive.mdx
deleted file mode 100644
index 48e2e6ca5..000000000
--- a/docs/content/primitive/avatar/primitive.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
----
-slug: /primitive/avatar
----
-
-## Anatomy
-
-
-
-1. Root
-2. Image
-3. Fallback
-
-## States
-
-| State | Values | Default Value |
-| ------ | ---------------------------------------- | ------------- |
-| `load` | `loading`, `loaded`, `fallback`, `error` | `loading` |
-
-## Contexts
-
-| Context | Values | Default Value |
-| --------------- | -------- | ------------- |
-| `fallbackDelay` | `number` | `0` |
-
-## Actions
-
-| Action | From | Condition | To |
-| ------------------------------ | ------------------- | --------- | ------------------- |
-| `IMAGE_LOAD` | `load` = `loading` | | `load` = `loaded` |
-| `loading.after(fallbackDelay)` | `load` = `loading` | | `load` = `fallback` |
-| `IMAGE_ERROR` | `load` = `loading` | | `load` = `error` |
-| | `load` = `fallback` | | `load` = `error` |
-| `SRC_CHANGE` | `load` = `loaded` | | `load` = `loading` |
-| | `load` = `fallback` | | `load` = `loading` |
-| | `load` = `error` | | `load` = `error` |
-
-## Triggers
-
-### Web
-
-| Part | Event | Action |
-| ----- | ---------- | ------------- |
-| Image | `Load` | `IMAGE_LOAD` |
-| Image | `Error` | `IMAGE_ERROR` |
-| Image | src change | `SRC_CHANGE` |
diff --git a/docs/content/primitive/avatar/thumbnail.png b/docs/content/primitive/avatar/thumbnail.png
deleted file mode 100644
index 19224eb4c..000000000
Binary files a/docs/content/primitive/avatar/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/button/primitive-meta.json b/docs/content/primitive/button/primitive-meta.json
deleted file mode 100644
index 78f1a6d1e..000000000
--- a/docs/content/primitive/button/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Button",
- "description": "버튼은 누르면 액션을 발생시킬 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/button/primitive.mdx b/docs/content/primitive/button/primitive.mdx
deleted file mode 100644
index 60157b7c1..000000000
--- a/docs/content/primitive/button/primitive.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-slug: /primitive/button
----
-
-## Anatomy
-
-1. Root : Button 컴포넌트를 감싸는 컨테이너 영역
-2. Label : Button에 대한 정보를 전달하는 라벨
-
-## States
-
-| State | Values | Default Value |
-| ----------- | ----------------------------------- | ------------- |
-| `isPressed` | `idle`, `pressed:in`, `pressed:out` | `idle` |
-| `isHovered` | `true`, `false` | `false` |
-| `isFocused` | `true`, `false` | `false` |
-
-## Contexts
-
-| Context | Values | Default Value |
-| ------------ | --------------- | ------------- |
-| `isDisabled` | `true`, `false` | `false` |
-
-## Actions
-
-| Action | From | Condition | To |
-| ------------- | ----------------------- | ------------- | ----------------------- |
-| `PRESS_DOWN` | `press` = `idle` | `!isDisabled` | `press` = `pressed:in` |
-| `PRESS_UP` | `press` = `pressed:in` | `!isDisabled` | `press` = `idle` |
-| | `press` = `pressed:out` | `!isDisabled` | `press` = `idle` |
-| `HOVER_IN` | `press` = `pressed:in` | `!isDisabled` | `press` = `pressed:out` |
-| | `isHovered` = `false` | `!isDisabled` | `isHovered` = `true` |
-| `HOVER_OUT` | `press` = `pressed:out` | `!isDisabled` | `press` = `pressed:in` |
-| | `isHovered` = `true` | `!isDisabled` | `isHovered` = `true` |
-| `FOCUS_ENTER` | `isFocused` = `false` | `!isDisabled` | `isFocused` = `true` |
-| `FOCUS_EXIT` | `isFocused` = `true` | | `isFocused` = `false` |
-
-## Triggers
-
-### Web
-
-| Part | Event | Action |
-| ---- | -------------- | ----------- |
-| Root | `PointerOver` | `HOVER_IN` |
-| Root | `PointerDown` | `PRESS_IN` |
-| Root | `PointerUp` | `PRESS_OUT` |
-| Root | `PointerLeave` | `HOVER_OUT` |
-
-### iOS
-
-| Part | Event | Action |
-| ---- | ---------------- | ------------ |
-| Root | `touchDown` | `PRESS_DOWN` |
-| Root | `touchUpInside` | `PRESS_UP` |
-| Root | `touchUpOutside` | `PRESS_UP` |
diff --git a/docs/content/primitive/button/thumbnail.png b/docs/content/primitive/button/thumbnail.png
deleted file mode 100644
index 686c22b27..000000000
Binary files a/docs/content/primitive/button/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/checkbox/checkbox-primitive-anatomy.png b/docs/content/primitive/checkbox/checkbox-primitive-anatomy.png
deleted file mode 100644
index 90f4f2774..000000000
Binary files a/docs/content/primitive/checkbox/checkbox-primitive-anatomy.png and /dev/null differ
diff --git a/docs/content/primitive/checkbox/primitive-meta.json b/docs/content/primitive/checkbox/primitive-meta.json
deleted file mode 100644
index a72478533..000000000
--- a/docs/content/primitive/checkbox/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Checkbox",
- "description": "최소 1가지 이상의 옵션을 선택 또는 해제할 수 있는 컨트롤입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/checkbox/primitive.mdx b/docs/content/primitive/checkbox/primitive.mdx
deleted file mode 100644
index 7491798e8..000000000
--- a/docs/content/primitive/checkbox/primitive.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-slug: /primitive/checkbox
----
-
-## Anatomy
-
-
- 
-
-
-1. Root : Checkbox 컴포넌트를 감싸는 컨테이너 영역
-2. Control : Checkbox의 상태를 나타내는 시각 요소
-3. Label : Checkbox에 대한 정보를 전달하는 라벨
-
-## States
-
-| State | Values | Default Value | Description |
-| ---------- | ----------- | ------------- | ------------------------------------------------- |
-| isSelected | true, false | false | Checkbox가 선택되었을 시 True로 전환 |
-| isHovered | true, false | false | Checkbox 영역 내에 포인터가 존재할 시 True로 전환 |
-| isFocused | true, false | false | Checkbox에 Focus가 잡혀있을 때 True로 전환 |
-| isPressed | true, false | false | Checkbox 영역을 누르고 있을 때 True로 전환 |
-
-## Contexts
-
-| Context | Values | Default Value | Description |
-| --------------- | ----------- | ------------- | ----------------------------------------------------- |
-| isDisabled | true, false | false | True일 경우, Checkbox가 유저와 상호작용하지 않음 |
-| isReadonly | true, false | false | True일 경우, isSelected를 변경할 수 없음 |
-| isIndeterminate | true, false | false | True일 경우, isSelected를 결정할 수 없음을 나타냄 |
-| isRequired | true, false | false | True일 경우, isSelected = true가 필수임을 나타냄 |
-| isInvalid | true, false | false | True일 경우, isSelected가 유효하지 않은 값임을 나타냄 |
-
-## Actions
-
-| Action | From | Condition | To |
-| ---------------------- | ------------------ | -------------------------- | ------------------ |
-| TOGGLE | isSelected = false | !isDisabled && !isReadonly | isSelected = true |
-| | isSelected = true | !isDisabled && !isReadonly | isSelected = false |
-| FOCUS | isFocused = false | !isDisabled | isFocused = true |
-| BLUR | isFocused = true | | isFocused = true |
-| HOVER_IN | isHovered = false | !isDisabled | isHovered = true |
-| HOVER_OUT | isHovered = true | !isDisabled | isHovered = true |
-| PRESS_IN | isPressed = false | !isDisabled | isPressed = true |
-| PRESS_OUT | isPressed = true | !isDisabled | isPressed = true |
-| SET_IS_SELECTED(value) | \* | | isSelected = value |
-
-## Triggers
-
-| Part | Event | Action |
-| ------- | -------------- | --------- |
-| Root | PointerUp | TOGGLE |
-| Root | PointerOver | HOVER_IN |
-| Root | PointerDown | PRESS_IN |
-| Root | PointerUp | PRESS_OUT |
-| Root | PointerLeave | HOVER_OUT |
-| Control | Focus | FOCUS |
-| Control | Blur | BLUR |
-| Control | KeyUp(Space) | TOGGLE |
-| Control | KeyDown(Space) | PRESS_IN |
-| Control | KeyUp(Space) | PRESS_OUT |
diff --git a/docs/content/primitive/checkbox/thumbnail.png b/docs/content/primitive/checkbox/thumbnail.png
deleted file mode 100644
index 45bb2ed52..000000000
Binary files a/docs/content/primitive/checkbox/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/dialog/primitive-meta.json b/docs/content/primitive/dialog/primitive-meta.json
deleted file mode 100644
index 9394e0003..000000000
--- a/docs/content/primitive/dialog/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Dialog",
- "description": "사용자에게 중요한 정보를 전달하고, 필요하면 응답을 요구하는 컴포넌트입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/dialog/primitive.mdx b/docs/content/primitive/dialog/primitive.mdx
deleted file mode 100644
index 1069b7682..000000000
--- a/docs/content/primitive/dialog/primitive.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
----
-slug: /primitive/dialog
----
-
-## Anatomy
-
-1. Trigger
-2. Backdrop
-3. Container
-4. Content
-5. Title
-6. Description
-
-## States
-
-| State | Values | Default Value |
-| ------ | ----------- | ------------- |
-| isOpen | true, false | false |
-
-## Contexts
-
-| Context | Values | Default Value | Description |
-| ------------------- | ----------- | ------------- | -------------------------------------------------------------------- |
-| closeOnOutsideClick | true, false | false | True일 경우, Container 외 영역을 클릭/탭 했을 시 Alert Dialog가 닫힘 |
-| closeOnEsc | true, false | false | (키보드 동작에만 해당) True일 경우, ESC를 통해 Alert Dialog가 닫힘 |
-
-## Actions
-
-| Action | From | Condition | To |
-| ------- | ------------ | --------- | ------------ |
-| `OPEN` | isOpen=false | | isOpen=true |
-| `CLOSE` | isOpen=true | | isOpen=false |
-
-## Triggers
-
-### Web
-
-| Part | Event | Condition | Action |
-| --------- | -------------- | --------------------------- | ------- |
-| Trigger | `PointerDown` | | `OPEN` |
-| Backdrop | `PointerDown` | closeOnOutsideClick == true | `CLOSE` |
-| Container | `KeyDown(ESC)` | closeOnEsc == true | `CLOSE` |
diff --git a/docs/content/primitive/dialog/thumbnail.png b/docs/content/primitive/dialog/thumbnail.png
deleted file mode 100644
index 533cee47e..000000000
Binary files a/docs/content/primitive/dialog/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/popover/primitive-meta.json b/docs/content/primitive/popover/primitive-meta.json
deleted file mode 100644
index 2fd518a1f..000000000
--- a/docs/content/primitive/popover/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Popover",
- "description": "트리거 주위에 떠 있는 비모달 대화상자입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/popover/primitive.mdx b/docs/content/primitive/popover/primitive.mdx
deleted file mode 100644
index cd41b5ddf..000000000
--- a/docs/content/primitive/popover/primitive.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-slug: /primitive/popover
----
-
-## Anatomy
-
-1. Trigger
-2. Positioner
-3. Anchor
-4. Arrow
-5. Content
-6. Title
-7. Description
-8. Close Button
-
-## Working in progress
diff --git a/docs/content/primitive/popover/thumbnail.png b/docs/content/primitive/popover/thumbnail.png
deleted file mode 100644
index 9023773b5..000000000
Binary files a/docs/content/primitive/popover/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/radio-group/primitive-meta.json b/docs/content/primitive/radio-group/primitive-meta.json
deleted file mode 100644
index 987367b0c..000000000
--- a/docs/content/primitive/radio-group/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Radio Group",
- "description": "두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 컨트롤입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/radio-group/primitive.mdx b/docs/content/primitive/radio-group/primitive.mdx
deleted file mode 100644
index d4351a26f..000000000
--- a/docs/content/primitive/radio-group/primitive.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
----
-slug: /primitive/radio-group
----
-
-## Anatomy
-
-
-
-1. Root
-2. Label
-3. Radio
-4. Radio Control
-5. Radio Label
-
-## Root
-
-### States
-
-| State | Values | Default Value | Description |
-| ------------- | ------------ | ------------- | ---------------------------------- |
-| selectedValue | string, null | null | 선택된 Radio의 Value, 없을 시 null |
-
-### Contexts
-
-| Context | Values | Default Value | Description |
-| ----------- | -------------------- | ------------- | --------------------------------------------------------- |
-| isDisabled | true, false | false | true일 경우, Radio Group 전체가 유저와 상호작용 하지 않음 |
-| isReadonly | true, false | false | true일 경우, selectedValue를 변경할 수 없음 |
-| isRequired | true, false | false | true일 경우, selectedValue가 필수임을 나타냄 |
-| isInvalid | true, false | false | true일 경우, selectedValue가 유효하지 않은 값임을 나타냄 |
-| orientation | horizontal, vertical | vertical | 키보드로 접근할 때 Radio들의 정렬 방향 |
-
-## Radio
-
-### States
-
-| State | Values | Default Value | Description |
-| --------- | ----------- | ------------- | ---------------------------------------------- |
-| isHovered | true, false | false | Radio 영역 내에 포인터가 존재할 시 true로 전환 |
-| isFocused | true, false | false | Radio에 Focus가 잡혀있을 때 true로 전환 |
-| isPressed | true, false | false | Radio 영역을 누르고 있을 때 true로 전환 |
-
-### Contexts
-
-| Context | Values | Default Value | Description |
-| ---------- | ----------- | ------------- | --------------------------------------------- |
-| value | string | | |
-| isDisabled | true, false | false | true일 경우, Radio가 유저와 상호작용하지 않음 |
-
-### Derived States
-
-| State | Values | Statement | Description |
-| ---------- | ----------- | ------------------------------- | ----------- |
-| isDisabled | true, false | root.isDisabled \|\| isDisabled | |
-| isReadonly | true, false | root.isReadonly | |
-| isSelected | true, false | root.selectedValue == value | |
-
-## Actions
-
-| Action | From | Condition | To |
-| ---------------- | ---- | -------------------------------------- | ------------------------------- |
-| SELECT(radio) | - | !radio.isDisabled && !radio.isReadonly | root.selctedValue = radio.value |
-| FOCUS(radio) | - | !radio.isDisabled | radio.isFocused = true |
-| BLUR(radio) | - | | radio.isFocused = false |
-| HOVER_IN(radio) | - | !radio.isDisabled | radio.isHovered = true |
-| HOVER_OUT(radio) | - | !radio.isDisabled | radio.isHovered = false |
-| PRESS_IN(radio) | - | !radio.isDisabled | radio.isPressed = true |
-| PRESS_OUT(radio) | - | !radio.isDisabled | radio.isPressed = false |
-
-## Triggers
-
-### Web
-
-| Part | Event | Action |
-| ------------- | -------------- | ----------------- |
-| Radio | PointerUp | SELECT(radio) |
-| Radio | PointerDown | PRESS_DOWN(radio) |
-| Radio | PointerUp | PRESS_UP(radio) |
-| Radio | PointerOver | HOVER_IN(radio) |
-| Radio | PointerLeave | HOVER_OUT(radio) |
-| Radio Control | Focus | FOCUS(radio) |
-| Radio Control | Blur | BLUR(radio) |
-| Radio Control | KeyUp(Space) | SELECT(radio) |
-| Radio Control | KeyDown(Space) | PRESS_IN(radio) |
-| Radio Control | KeyUp(Space) | PRESS_OUT(radio) |
-
-### iOS
-
-| Part | Event | Action |
-| ----- | ---------------- | --------------- |
-| Radio | `touchUpInside` | `SELECT(radio)` |
-| Radio | `touchUpOutside` | `SELECT(radio)` |
diff --git a/docs/content/primitive/radio-group/radio-primitive-anatomy.png b/docs/content/primitive/radio-group/radio-primitive-anatomy.png
deleted file mode 100644
index 54d5ef777..000000000
Binary files a/docs/content/primitive/radio-group/radio-primitive-anatomy.png and /dev/null differ
diff --git a/docs/content/primitive/radio-group/thumbnail.png b/docs/content/primitive/radio-group/thumbnail.png
deleted file mode 100644
index 9b5a0c7b1..000000000
Binary files a/docs/content/primitive/radio-group/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/slider/primitive-meta.json b/docs/content/primitive/slider/primitive-meta.json
deleted file mode 100644
index e023e40d9..000000000
--- a/docs/content/primitive/slider/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Slider",
- "description": "범위 내 값을 조정할 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/slider/primitive.mdx b/docs/content/primitive/slider/primitive.mdx
deleted file mode 100644
index 6f61fd37d..000000000
--- a/docs/content/primitive/slider/primitive.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-slug: /primitive/slider
----
-
-## Anatomy
-
-1. Root
-2. Label
-3. Control
-4. Track
-5. Range
-6. Thumb
-7. Output
-
-## Working in progress
diff --git a/docs/content/primitive/slider/thumbnail.png b/docs/content/primitive/slider/thumbnail.png
deleted file mode 100644
index 5327ddaae..000000000
Binary files a/docs/content/primitive/slider/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/snackbar/anatomy.png b/docs/content/primitive/snackbar/anatomy.png
deleted file mode 100644
index 6b6faf56a..000000000
Binary files a/docs/content/primitive/snackbar/anatomy.png and /dev/null differ
diff --git a/docs/content/primitive/snackbar/primitive-meta.json b/docs/content/primitive/snackbar/primitive-meta.json
deleted file mode 100644
index 8a1d796ab..000000000
--- a/docs/content/primitive/snackbar/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Snackbar",
- "description": "간략한 메시지를 화면 하단에 제공합니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/snackbar/primitive.mdx b/docs/content/primitive/snackbar/primitive.mdx
deleted file mode 100644
index 023f82845..000000000
--- a/docs/content/primitive/snackbar/primitive.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-slug: /primitive/snackbar
----
-
-## Anatomy
-
-
-
-1. Region
-2. Snackbar
-3. Title
-4. Description
-5. Close Button
-
-## States
-
-| State | Values | Default Value |
-| --------- | ------------------------------------- | ------------- |
-| visiblity | inactive, persist, active, dismissing | inactive |
-| queue | SnackbarOption[] | [] |
-
-## Contexts
-
-| State | Values | Default Value |
-| ------------------ | ----------- | ------------- |
-| pauseOnInteraction | false, true | true |
-
-## Actions
-
-| Action | From | Condition | To |
-| ------- | -------- | --------- | ---------- |
-| PUSH | inactive | | active |
-| DISMISS | active | | dismissing |
-| | persist | | dismissing |
-| PAUSE | active | | persist |
-| RESUME | persist | | active |
-
-## Delays
-
-| From | Delay | Condition | To |
-| ---------- | ---------------------- | --------- | ---------- |
-| active | queue.head.timeout | | dismissing |
-| dismissing | queue.head.removeDelay | | inactive |
-
-## Entry Actions
-
-| From | Condition | To |
-| -------- | ---------------- | ------ |
-| inactive | queue.length > 0 | active |
-
-## Triggers
-
-| Part | Event | Condition | Action |
-| ------------ | ----- | ---------------------------- | ------- |
-| Snackbar | Focus | `pauseOnInteraction == true` | PAUSE |
-| Snackbar | Blur | | RESUME |
-| Close Button | Press | | DISMISS |
-
-## Interfaces
-
-```
-SnackbarOption {
- timeout: int
- removeDelay: int
-}
-```
diff --git a/docs/content/primitive/snackbar/thumbnail.png b/docs/content/primitive/snackbar/thumbnail.png
deleted file mode 100644
index a479c8071..000000000
Binary files a/docs/content/primitive/snackbar/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/tabs/primitive-meta.json b/docs/content/primitive/tabs/primitive-meta.json
deleted file mode 100644
index c4ec67935..000000000
--- a/docs/content/primitive/tabs/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Tabs",
- "description": "다른 탭 간에 전환과 이동을 쉽게 할 수 있는 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/tabs/primitive.mdx b/docs/content/primitive/tabs/primitive.mdx
deleted file mode 100644
index 953603021..000000000
--- a/docs/content/primitive/tabs/primitive.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-slug: /primitive/tabs
----
-
-## Anatomy
-
-1. Root
-2. Tab List
-3. Tab
-4. Panel Group
-5. Panel
-
-## Root
-
-### States
-
-| State | Values | Default Value | Description |
-| ------------- | ------------ | ------------- | ---------------------------------- |
-| selectedValue | string, null | null | 선택된 Radio의 Value, 없을 시 null |
-
-### Contexts
-
-| Context | Values | Default Value | Description |
-| ----------- | ----------- | ------------- | ----------------------------------------------------------- |
-| isDisabled | true, false | false | True일 경우, Tabs 전체가 유저와 상호작용 하지 않음 |
-| isSwipeable | true, false | true | True일 경우, 모바일에서 Panel Group이 스왑 기능이 활성화 됨 |
-
-## Tab
-
-### States
-
-| Context | Values | Default Value | Description |
-| --------- | ----------- | ------------- | -------------------------------------------- |
-| isHovered | true, false | false | Tab 영역 내에 포인터가 존재할 시 True로 전환 |
-| isFocused | true, false | false | Tab에 Focus가 잡혀있을 때 True로 전환 |
-| isPressed | true, false | false | Tab 영역을 누르고 있을 때 True로 전환 |
-
-### Contexts
-
-| Context | Values | Default Value | Description |
-| ---------- | ----------- | ------------- | ------------------------------------------- |
-| value | string | | |
-| isDisabled | true, false | false | True일 경우, Tab이 유저와 상호작용하지 않음 |
-
-### Derived States
-
-| State | Values | Statement | Description |
-| ---------- | ----------- | ------------------------------- | ----------- |
-| isDisabled | true, false | root.isDisabled \|\| isDisabled | |
-| isSelected | true, false | root.selectedValue == value | |
-
-## Actions
-
-| Action | From | Condition | To |
-| -------------- | ---- | ---------------------------------- | --------------------------------------------------------------- |
-| SELECT(tab) | - | !tab.isDisabled && !tab.isReadonly | root.selctedValue = tab.value, root.currentTabIndex = tab.value |
-| FOCUS(tab) | - | !tab.isDisabled | root.focusedValue = tab.value |
-| BLUR(tab) | - | | root.focusedValue = null |
-| HOVER_IN(tab) | - | !tab.isDisabled | root.hoveredValue = tab.value |
-| HOVER_OUT(tab) | - | !tab.isDisabled | root.hoveredValue = tab.value |
-| PRESS_IN(tab) | - | !tab.isDisabled | root.pressedValue = tab.value |
-| PRESS_OUT(tab) | - | !tab.isDisabled | root.pressedValue = tab.value |
-
-## Panel Group
-
-## Actions
-
-| Action | From | Condition | To |
-| ------------------------ | ---- | --------------------------------- | ---------------------------------------------------------- |
-| TOUCH_START(panel group) | - | root.isSwipeable | root.isSwiping = true, root.touchStartX = event.x |
-| TOUCH_MOVE(panel group) | - | root.isSwipeable | root.currentTabOffsetX = distance |
-| TOUCH_END(panel group) | - | root.isSwipeable && distance > 0 | root.isSwiping = false, root.selectedValue = tab.nextValue |
-| | - | root.isSwipeable && distance =< 0 | root.isSwiping = false, root.selectedValue = tab.prevValue |
-
-## Triggers
-
-### Web
-
-| Part | Event | Action |
-| ---- | -------------- | --------------- |
-| Tab | PointerUp | SELECT(tab) |
-| Tab | PointerDown | PRESS_DOWN(tab) |
-| Tab | PointerUp | PRESS_UP(tab) |
-| Tab | PointerOver | HOVER_IN(tab) |
-| Tab | PointerLeave | HOVER_OUT(tab) |
-| Tab | Focus | FOCUS(tab) |
-| Tab | Blur | BLUR(tab) |
-| Tab | KeyUp(Space) | SELECT(tab) |
-| Tab | KeyDown(Space) | PRESS_IN(tab) |
-| Tab | KeyUp(Space) | PRESS_OUT(tab) |
-
-### Mobile
-
-| Part | Event | Action |
-| ----------- | ---------- | ------------------------ |
-| Panel Group | TouchStart | TOUCH_START(panel group) |
-| Panel Group | TouchMove | TOUCH_MOVE(panel group) |
-| Panel Group | TouchEnd | TOUCH_END(panel group) |
diff --git a/docs/content/primitive/tabs/thumbnail.png b/docs/content/primitive/tabs/thumbnail.png
deleted file mode 100644
index 65fe6bbd9..000000000
Binary files a/docs/content/primitive/tabs/thumbnail.png and /dev/null differ
diff --git a/docs/content/primitive/text-field/primitive-meta.json b/docs/content/primitive/text-field/primitive-meta.json
deleted file mode 100644
index 6ed525e06..000000000
--- a/docs/content/primitive/text-field/primitive-meta.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "$schema": "../../../schema/primitive-meta.json",
- "name": "Text Field",
- "description": "텍스트를 입력할 수 있는 폼 요소입니다.",
- "thumbnail": "./thumbnail.png",
- "primitive": "./primitive.mdx"
-}
diff --git a/docs/content/primitive/text-field/primitive.mdx b/docs/content/primitive/text-field/primitive.mdx
deleted file mode 100644
index c3812fb94..000000000
--- a/docs/content/primitive/text-field/primitive.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-slug: /primitive/text-field
----
-
-## Anatomy
-
-
- 
-
-
-1. Root
-2. Label
-3. Input
-4. Description
-5. Error message
-
-## States
-
-| State | Values | Default Value |
-| --------- | ----------- | ------------- |
-| value | string | |
-| isFocused | true, false | false |
-
-## Contexts
-
-| Context | Values | Default Value | Description |
-| ---------- | ------------ | ------------- | ----------------------------------------------------------- |
-| isDisabled | true, false | false | true일 경우, Text field가 유저와 상호작용하지 않음 |
-| isReadonly | true, false | false | true일 경우, value를 변경할 수 없음 |
-| isRequired | true, false | false | true일 경우, value가 필수임을 나타냄 |
-| isInvalid | true, false | false | true일 경우, value가 유효하지 않은 값임을 나타냄 |
-| maxLength | number, null | null | null이 아닌 경우, value의 길이는 maxLength를 초과할 수 없음 |
-
-## Actions
-
-| Action | From | Condition | To |
-| ---------------- | ------------------ | ---------------------------- | ------------------ |
-| TOGGLE | isSelected = false | !isDisabled && !isReadonly | isSelected = true |
-| | isSelected = true | !isDisabled && !isReadonly | isSelected = false |
-| FOCUS | isFocused = false | !isDisabled | isFocused = true |
-| BLUR | isFocused = true | | isFocused = false |
-| SET_VALUE(value) | \* | value.length <= maxLength | value = value |
-
-## Triggers
-
-| Part | Event | Action |
-| ----- | ----- | ------ |
-| Field | Focus | FOCUS |
-| Field | Blur | BLUR |
diff --git a/docs/content/primitive/text-field/text-field-primitive-anatomy.png b/docs/content/primitive/text-field/text-field-primitive-anatomy.png
deleted file mode 100644
index 0d109cb6b..000000000
Binary files a/docs/content/primitive/text-field/text-field-primitive-anatomy.png and /dev/null differ
diff --git a/docs/content/primitive/text-field/thumbnail.png b/docs/content/primitive/text-field/thumbnail.png
deleted file mode 100644
index bc184edcb..000000000
Binary files a/docs/content/primitive/text-field/thumbnail.png and /dev/null differ
diff --git a/docs/gatsby-browser.tsx b/docs/gatsby-browser.tsx
deleted file mode 100644
index 603107088..000000000
--- a/docs/gatsby-browser.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import "./src/styles/global.css";
-
-import type { WrapPageElementBrowserArgs } from "gatsby";
-import { useEffect } from "react";
-
-import Layout from "./src/_Layout";
-import Root from "./src/_Root";
-
-export const wrapPageElement = ({
- element,
- props,
-}: WrapPageElementBrowserArgs) => {
- const pathname = props.location.pathname;
- const layoutType = pathname === "/" ? "main" : "document";
-
- useEffect(() => {
- if (window.location.hostname === "seed-design.pages.dev") {
- window.location.replace(`https://seed-design.io${pathname}`);
- }
- }, []);
-
- return (
-
- {element}
-
- );
-};
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
deleted file mode 100644
index 68dbe229f..000000000
--- a/docs/gatsby-config.js
+++ /dev/null
@@ -1,336 +0,0 @@
-const SITE_METADATA = Object.freeze({
- title: "SEED Design",
- siteUrl: process.env.URL || "https://seed-design.io",
-});
-
-const wrapESMPlugin = (name) =>
- function wrapESM(opts) {
- return async (...args) => {
- const mod = await import(name);
- const plugin = mod.default(opts);
- return plugin(...args);
- };
- };
-
-const GA_TRACKING_ID = "G-P6FY16FTPH";
-const CLARITY_PROJECT_ID = "h2qk60kqzg";
-
-module.exports = {
- siteMetadata: SITE_METADATA,
- graphqlTypegen: true,
- flags: {
- DEV_SSR: true,
- },
- plugins: [
- "gatsby-plugin-sharp",
- "gatsby-transformer-sharp",
- "gatsby-plugin-image",
- {
- resolve: "gatsby-plugin-seed-design",
- },
- {
- resolve: "gatsby-plugin-mdx",
- options: {
- gatsbyRemarkPlugins: [
- {
- resolve: "gatsby-remark-gifs",
- },
- {
- resolve: `gatsby-remark-images`,
- options: {
- maxWidth: 900,
- wrapperStyle: `z-index: 0;overflow: hidden;`,
- quality: 90,
- backgroundColor: "transparent",
- },
- },
- ],
- mdxOptions: {
- remarkPlugins: [require("remark-gfm")],
- rehypePlugins: [
- [wrapESMPlugin(`rehype-slug`)],
- [
- wrapESMPlugin(`rehype-autolink-headings`),
- {
- behavior: "append",
- content: {
- type: `element`,
- tagName: `span`,
- properties: { className: `heading-anchor-icon` },
- children: [
- {
- type: `text`,
- value: `#`,
- },
- ],
- },
- },
- ],
- ],
- },
- },
- },
- "gatsby-plugin-mdx-frontmatter",
- {
- resolve: `gatsby-transformer-json`,
- options: {
- typeName: ({ node }) => {
- if (node.base === "component-meta.json") {
- return "componentMetaJson";
- }
-
- if (node.base === "primitive-meta.json") {
- return "primitiveMetaJson";
- }
-
- return "Json";
- },
- },
- },
- {
- resolve: `gatsby-source-filesystem`,
- options: {
- name: `content`,
- path: `${__dirname}/content`,
- },
- },
- {
- resolve: "gatsby-plugin-typegen",
- options: {
- outputPath: `src/__generated__/gatsby-types.d.ts`,
- emitSchema: {
- "src/__generated__/gatsby-schema.graphql": true,
- },
- },
- },
- "gatsby-plugin-vanilla-extract",
- {
- resolve: "gatsby-plugin-sitemap",
- options: {
- query: `
- {
- allSitePage {
- nodes {
- path
- }
- }
- }
- `,
- resolveSiteUrl: () => SITE_METADATA.siteUrl,
- serialize: ({ path }) => {
- return {
- url: path,
- };
- },
- },
- },
- {
- resolve: "gatsby-plugin-web-font-loader",
- options: {
- custom: {
- families: ["Pretendard", "Roboto Mono"],
- urls: [
- "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css",
- "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap",
- ],
- },
- },
- },
- {
- resolve: "gatsby-plugin-local-search",
- options: {
- name: "pages",
- engine: "flexsearch",
- engineOptions: {
- tokenize: "full",
- },
- query: `
- {
- primitives: allPrimitiveMetaJson {
- nodes {
- name
- primitive {
- childMdx {
- frontmatter {
- slug
- }
- }
- }
- }
- }
-
- overviews: allComponentMetaJson(
- filter: {platform: {docs: {overview: {status: {ne: "todo"}}}}}
- ) {
- nodes {
- name
- platform {
- docs {
- overview {
- status
- mdx {
- childMdx {
- frontmatter {
- slug
- }
- }
- }
- }
- }
- }
- }
- }
-
- usages: allComponentMetaJson(
- filter: {platform: {docs: {usage: {status: {ne: "todo"}}}}}
- ) {
- nodes {
- name
- platform {
- docs {
- usage {
- status
- mdx {
- childMdx {
- frontmatter {
- slug
- }
- }
- }
- }
- }
- }
- }
- }
-
- styles: allComponentMetaJson(
- filter: {platform: {docs: {style: {status: {ne: "todo"}}}}}
- ) {
- nodes {
- name
- platform {
- docs {
- style {
- status
- mdx {
- childMdx {
- frontmatter {
- slug
- }
- }
- }
- }
- }
- }
- }
- }
- }
- `,
- ref: "slug",
- index: ["slug"],
- store: ["slug", "name", "status"],
- normalizer: ({ data }) => {
- const overviewMetas = data.overviews.nodes.map((node) => ({
- slug: node.platform.docs.overview.mdx.childMdx.frontmatter.slug,
- name: node.name,
- status: node.platform.docs.overview.status,
- }));
-
- const usageMetas = data.usages.nodes.map((node) => ({
- slug: node.platform.docs.usage.mdx.childMdx.frontmatter.slug,
- name: node.name,
- status: node.platform.docs.usage.status,
- }));
-
- const styleMetas = data.styles.nodes.map((node) => ({
- slug: node.platform.docs.style.mdx.childMdx.frontmatter.slug,
- name: node.name,
- status: node.platform.docs.style.status,
- }));
-
- const primitiveMetas = data.primitives.nodes.map((node) => ({
- slug: node.primitive.childMdx.frontmatter.slug,
- name: node.name,
- }));
-
- const foundationMetas = [
- {
- name: "Icon",
- slug: "/foundation/icon",
- },
- {
- name: "Typography",
- slug: "/foundation/typography",
- },
- {
- name: "Color / Color System",
- slug: "/foundation/color/color-system",
- },
- {
- name: "Color / Palette",
- slug: "/foundation/color/palette",
- },
- {
- name: "Color / Usage",
- slug: "/foundation/color/usage",
- },
- ];
-
- return [
- ...foundationMetas,
- ...overviewMetas,
- ...usageMetas,
- ...styleMetas,
- ...primitiveMetas,
- ];
- },
- },
- },
- {
- resolve: "gatsby-plugin-portal",
- options: {
- key: "portal",
- id: "portal",
- },
- },
- {
- resolve: `gatsby-plugin-gtag`,
- options: {
- trackingId: GA_TRACKING_ID,
- head: true,
- },
- },
- {
- resolve: `gatsby-plugin-clarity`,
- options: {
- clarity_project_id: CLARITY_PROJECT_ID,
- enable_on_dev_env: false,
- },
- },
- {
- resolve: `gatsby-plugin-manifest`,
- options: {
- icon: `src/assets/seed_favicon_black.svg`,
- icon_options: {
- purpose: `maskable`,
- },
- },
- },
- {
- resolve: `gatsby-plugin-manifest`,
- options: {
- icon: `src/assets/seed_favicon_white.svg`,
- icon_options: {
- purpose: `maskable`,
- },
- },
- },
- {
- resolve: `gatsby-source-filesystem`,
- options: {
- name: `assets`,
- path: `src/assets`,
- },
- },
- ],
-};
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
deleted file mode 100644
index 79e0c56ab..000000000
--- a/docs/gatsby-node.js
+++ /dev/null
@@ -1,129 +0,0 @@
-const path = require("path");
-
-const ComponentOverviewDocTemplate = path.resolve(
- `./src/templates/ComponentOverviewDoc.tsx`,
-);
-const ComponentUsageDocTemplate = path.resolve(
- `./src/templates/ComponentUsageDoc.tsx`,
-);
-const ComponentStyleDocTemplate = path.resolve(
- `./src/templates/ComponentStyleDoc.tsx`,
-);
-const PrimitiveDocTemplate = path.resolve(`./src/templates/PrimitiveDoc.tsx`);
-
-exports.onCreateWebpackConfig = ({ actions, plugins, reporter }) => {
- actions.setWebpackConfig({
- plugins: [
- plugins.provide({
- React: "react",
- }),
- ],
- });
-
- reporter.info(`Provided React in all files`);
-};
-
-exports.createPages = async ({ graphql, actions: { createPage } }) => {
- const result = await graphql(`
- fragment MdxContent on Mdx {
- frontmatter {
- slug
- }
- internal {
- contentFilePath
- }
- }
-
- query {
- allPrimitiveMetaJson {
- nodes {
- id
- primitive {
- childMdx {
- ...MdxContent
- }
- }
- }
- }
-
- allComponentMetaJson {
- nodes {
- id
- name
- platform {
- docs {
- overview {
- mdx {
- childMdx {
- ...MdxContent
- }
- }
- }
- usage {
- mdx {
- childMdx {
- ...MdxContent
- }
- }
- }
- style {
- mdx {
- childMdx {
- ...MdxContent
- }
- }
- }
- }
- }
- }
- }
- }
- `);
-
- const componentNodes = result.data.allComponentMetaJson.nodes;
- const primitiveNodes = result.data.allPrimitiveMetaJson.nodes;
-
- componentNodes.forEach((component) => {
- if (component.platform.docs.overview?.mdx) {
- createPage({
- path: component.platform.docs.overview.mdx.childMdx.frontmatter.slug,
- component: `${ComponentOverviewDocTemplate}?__contentFilePath=${component.platform.docs.overview.mdx.childMdx.internal.contentFilePath}`,
- context: {
- id: component.id,
- },
- });
- }
-
- if (component.platform.docs.usage.mdx) {
- createPage({
- path: component.platform.docs.usage.mdx.childMdx.frontmatter.slug,
- component: `${ComponentUsageDocTemplate}?__contentFilePath=${component.platform.docs.usage.mdx.childMdx.internal.contentFilePath}`,
- context: {
- id: component.id,
- },
- });
- }
-
- if (component.platform.docs.style.mdx) {
- createPage({
- path: component.platform.docs.style.mdx.childMdx.frontmatter.slug,
- component: `${ComponentStyleDocTemplate}?__contentFilePath=${component.platform.docs.style.mdx.childMdx.internal.contentFilePath}`,
- context: {
- id: component.id,
- },
- });
- }
- });
-
- primitiveNodes.forEach((component) => {
- if (!component.primitive) return;
-
- createPage({
- path: component.primitive.childMdx.frontmatter.slug,
- component: `${PrimitiveDocTemplate}?__contentFilePath=${component.primitive.childMdx.internal.contentFilePath}`,
- context: {
- id: component.id,
- },
- });
- });
-};
diff --git a/docs/gatsby-ssr.tsx b/docs/gatsby-ssr.tsx
deleted file mode 100644
index 8e1585cce..000000000
--- a/docs/gatsby-ssr.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import "./src/styles/global.css";
-
-import type { GatsbySSR, WrapPageElementNodeArgs } from "gatsby";
-
-import Layout from "./src/_Layout";
-import Root from "./src/_Root";
-
-const htmlAttributes: Record = {
- lang: "ko",
-};
-
-export const onRenderBody: GatsbySSR["onRenderBody"] = ({
- setHtmlAttributes,
-}) => {
- setHtmlAttributes(htmlAttributes);
-};
-
-export const wrapPageElement = ({
- element,
- props,
-}: WrapPageElementNodeArgs) => {
- const layoutType = props.location.pathname === "/" ? "main" : "document";
-
- return (
-
- {element}
-
- );
-};
diff --git a/docs/hooks/useThemeSync.ts b/docs/hooks/useThemeSync.ts
new file mode 100644
index 000000000..bfac8bdf0
--- /dev/null
+++ b/docs/hooks/useThemeSync.ts
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export const useThemeSync = () => {
+ React.useLayoutEffect(() => {
+ const theme = document.documentElement.style.getPropertyValue("color-scheme");
+ if (theme === "dark") {
+ document.documentElement.dataset.seedScaleColor = "dark";
+ } else {
+ document.documentElement.dataset.seedScaleColor = "light";
+ }
+ }, []);
+
+ React.useEffect(() => {
+ const observer = new MutationObserver(() => {
+ const theme = document.documentElement.style.getPropertyValue("color-scheme");
+ if (theme === "dark") {
+ document.documentElement.dataset.seedScaleColor = "dark";
+ } else {
+ document.documentElement.dataset.seedScaleColor = "light";
+ }
+ });
+
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["style"],
+ });
+ }, []);
+};
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
new file mode 100644
index 000000000..b0729516d
--- /dev/null
+++ b/docs/next.config.mjs
@@ -0,0 +1,16 @@
+import { createMDX } from "fumadocs-mdx/next";
+
+const withMDX = createMDX();
+
+/** @type {import('next').NextConfig} */
+const config = {
+ output: "export",
+ reactStrictMode: true,
+ transpilePackages: [
+ "@seed-design/react-checkbox",
+ "@seed-design/react-switch",
+ "@seed-design/react-tabs",
+ ],
+};
+
+export default withMDX(config);
diff --git a/docs/package.json b/docs/package.json
index 8932feab8..ff9dee462 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,101 +1,53 @@
{
- "name": "@seed-design/docs",
+ "name": "docs",
"version": "0.0.0",
"private": true,
- "description": "seed docs",
- "keywords": [
- "gatsby"
- ],
- "author": "junghyeonsu",
"scripts": {
- "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --verbose --log-pages",
- "build:storybook": "storybook build",
- "clean": "gatsby clean",
- "dev": "gatsby develop",
- "dev:storybook": "storybook dev -p 6006",
- "develop": "gatsby develop",
- "format": "eslint --fix . --ext .ts,.tsx,.json",
- "lint": "eslint . --ext .ts,.tsx,.json",
- "serve": "gatsby serve",
- "storybook": "storybook dev -p 6006",
- "typecheck": "tsc --noEmit",
- "validate:meta-data": "node scripts/validate-meta-data.mjs"
+ "build": "next build",
+ "dev": "next dev",
+ "start": "next start",
+ "postinstall": "fumadocs-mdx",
+ "generate:all": "yarn generate:registry && yarn generate:example",
+ "generate:registry": "vite-node scripts/generate-registry.ts",
+ "generate:example": "vite-node scripts/generate-example.ts"
},
"dependencies": {
- "@karrotmarket/karrot-ui-icon": "^0.0.0-20220907.1",
- "@mdx-js/mdx": "^2.1.5",
- "@mdx-js/react": "^2.1.5",
- "@seed-design/design-token": "workspace:^",
- "@seed-design/icon": "^0.3.14",
- "@seed-design/react-theming": "workspace:^",
- "@vanilla-extract/css": "^1.9.1",
- "@vanilla-extract/recipes": "^0.2.5",
- "clsx": "^1.2.1",
- "downshift": "^7.0.5",
- "framer-motion": "^10.16.12",
- "gatsby": "^5.9.1",
- "gatsby-plugin-clarity": "^1.0.1",
- "gatsby-plugin-gtag": "^1.0.13",
- "gatsby-plugin-image": "^3.11.0",
- "gatsby-plugin-local-search": "^2.0.1",
- "gatsby-plugin-manifest": "^5.11.0",
- "gatsby-plugin-mdx": "^5.11.0",
- "gatsby-plugin-mdx-frontmatter": "^0.0.4",
- "gatsby-plugin-portal": "^1.0.7",
- "gatsby-plugin-seed-design": "workspace:^",
- "gatsby-plugin-sharp": "^5.11.0",
- "gatsby-plugin-sitemap": "^6.11.0",
- "gatsby-plugin-typegen": "^3.1.0",
- "gatsby-plugin-vanilla-extract": "^4.0.1",
- "gatsby-plugin-web-font-loader": "^1.0.4",
- "gatsby-remark-gifs": "^1.2.0",
- "gatsby-remark-images": "^7.0.0",
- "gatsby-source-filesystem": "^5.0.0",
- "gatsby-transformer-json": "^5.0.0",
- "gatsby-transformer-sharp": "^5.0.0",
- "lodash": "^4.17.21",
- "react": "^18.1.0",
- "react-dom": "^18.1.0",
- "react-use-flexsearch": "^0.1.1",
- "rehype-autolink-headings": "^6.1.1",
- "rehype-slug": "^5.0.1",
- "remark-gfm": "^1"
+ "@daangn/icon-data": "0.0.0-alpha-20241022092935",
+ "@daangn/react-icon": "0.0.0-alpha-20241022090157",
+ "@seed-design/react-checkbox": "0.0.0-alpha-20241004093556",
+ "@seed-design/react-icon": "^0.7.3",
+ "@seed-design/react-tabs": "0.0.0-alpha-20241014145845",
+ "@seed-design/recipe": "0.0.0-alpha-20241014145845",
+ "@seed-design/stylesheet": "0.0.0-alpha-20241014145845",
+ "@stackflow/config": "^1.2.0",
+ "@stackflow/core": "^1.1.0",
+ "@stackflow/plugin-basic-ui": "^1.10.0",
+ "@stackflow/plugin-renderer-basic": "^1.1.13",
+ "@stackflow/react": "^1.4.0",
+ "change-case": "^5.4.4",
+ "fumadocs-core": "13.4.10",
+ "fumadocs-docgen": "^1.2.0",
+ "fumadocs-mdx": "10.0.2",
+ "fumadocs-ui": "13.4.10",
+ "next": "^14.2.8",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-error-boundary": "^4.1.2",
+ "shiki": "^1.22.0",
+ "simple-reveal": "^0.8.0",
+ "zustand": "^5.0.0"
},
"devDependencies": {
- "@babel/core": "^7.20.7",
- "@storybook/addon-a11y": "^7.0.0-beta.19",
- "@storybook/addon-actions": "^7.0.0-beta.19",
- "@storybook/addon-docs": "^7.0.0-beta.19",
- "@storybook/addon-essentials": "^7.0.0-beta.19",
- "@storybook/addon-interactions": "^7.0.0-beta.19",
- "@storybook/addon-links": "^7.0.0-beta.19",
- "@storybook/builder-vite": "^7.0.0-beta.19",
- "@storybook/react": "^7.0.0-beta.19",
- "@storybook/react-vite": "^7.0.0-beta.19",
- "@types/node": "^17.0.45",
- "@types/react": "^18.0.20",
- "@types/react-dom": "^18.0.6",
- "@typescript-eslint/eslint-plugin": "^5.39.0",
- "@typescript-eslint/parser": "^5.39.0",
- "@vanilla-extract/babel-plugin": "^1.2.0",
- "@vanilla-extract/vite-plugin": "^3.7.0",
- "@vanilla-extract/webpack-plugin": "^2.2.0",
- "awesome-ajv-errors": "^5.1.0",
- "babel-loader": "^8.3.0",
- "chalk": "^5.2.0",
- "eslint": "^8.24.0",
- "eslint-config-airbnb": "^19.0.4",
- "eslint-config-airbnb-typescript": "^17.0.0",
- "eslint-config-prettier": "^8.5.0",
- "eslint-plugin-json-format": "^2.0.1",
- "eslint-plugin-jsx-a11y": "^6.6.1",
- "eslint-plugin-prettier": "^4.2.1",
- "eslint-plugin-react": "^7.31.8",
- "eslint-plugin-simple-import-sort": "^7.0.0",
- "eslint-plugin-storybook": "^0.6.8",
- "prettier": "^2.7.1",
- "storybook": "^7.0.0-beta.19",
- "typescript": "^4.8.4",
- "vite": "^4.5.2"
+ "@types/mdx": "^2.0.13",
+ "@types/node": "22.5.4",
+ "@types/react": "^18.3.5",
+ "@types/react-dom": "^18.3.0",
+ "autoprefixer": "^10.4.20",
+ "chalk": "^5.3.0",
+ "postcss": "^8.4.45",
+ "tailwindcss": "^3.4.10",
+ "ts-pattern": "^5.5.0",
+ "typescript": "^5.5.4",
+ "vite-node": "^2.1.2"
}
}
diff --git a/docs/postcss.config.js b/docs/postcss.config.js
new file mode 100644
index 000000000..12a703d90
--- /dev/null
+++ b/docs/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/docs/public/__registry__/component/action-button.json b/docs/public/__registry__/component/action-button.json
new file mode 100644
index 000000000..0dd0d077e
--- /dev/null
+++ b/docs/public/__registry__/component/action-button.json
@@ -0,0 +1,12 @@
+{
+ "name": "action-button",
+ "dependencies": [
+ "@radix-ui/react-slot"
+ ],
+ "registries": [
+ {
+ "name": "action-button.tsx",
+ "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/actionButton.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n actionButton,\n type ActionButtonVariantProps,\n} from \"@seed-design/recipe/actionButton\";\n\nexport interface ActionButtonProps\n extends React.ButtonHTMLAttributes,\n ActionButtonVariantProps {\n prefixIcon?: React.ReactNode;\n\n suffixIcon?: React.ReactNode;\n\n asChild?: boolean;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/action-button\n */\nexport const ActionButton = React.forwardRef<\n HTMLButtonElement,\n ActionButtonProps\n>(\n (\n {\n className,\n variant = \"brandSolid\",\n size = \"medium\",\n children,\n prefixIcon,\n suffixIcon,\n layout = \"withText\",\n asChild = false,\n ...otherProps\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"button\";\n const classNames = actionButton({ variant, layout, size });\n return (\n \n {prefixIcon && (\n {prefixIcon}\n )}\n {layout === \"withText\" ? (\n {children}\n ) : (\n {children}\n )}\n {suffixIcon && (\n {suffixIcon}\n )}\n \n );\n },\n);\nActionButton.displayName = \"ActionButton\";\n"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/public/__registry__/component/action-chip.json b/docs/public/__registry__/component/action-chip.json
new file mode 100644
index 000000000..756286d47
--- /dev/null
+++ b/docs/public/__registry__/component/action-chip.json
@@ -0,0 +1,12 @@
+{
+ "name": "action-chip",
+ "dependencies": [
+ "@radix-ui/react-slot"
+ ],
+ "registries": [
+ {
+ "name": "action-chip.tsx",
+ "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport {\n actionChip,\n type ActionChipVariantProps,\n} from \"@seed-design/recipe/actionChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps\n extends React.ButtonHTMLAttributes,\n ActionChipVariantProps {\n prefixIcon?: React.ReactNode;\n\n suffixIcon?: React.ReactNode;\n\n asChild?: boolean;\n}\n\nexport const ActionChip = React.forwardRef(\n (\n {\n className,\n size = \"medium\",\n layout = \"withText\",\n children,\n prefixIcon,\n suffixIcon,\n asChild = false,\n ...otherProps\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"button\";\n const classNames = actionChip({ size, layout });\n return (\n \n {prefixIcon && (\n {prefixIcon}\n )}\n {layout === \"withText\" ? (\n {children}\n ) : (\n {children}\n )}\n {suffixIcon && (\n {suffixIcon}\n )}\n \n );\n },\n);\nActionChip.displayName = \"ActionChip\";\n"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/public/__registry__/component/alert-dialog.json b/docs/public/__registry__/component/alert-dialog.json
new file mode 100644
index 000000000..bc377c4c4
--- /dev/null
+++ b/docs/public/__registry__/component/alert-dialog.json
@@ -0,0 +1,12 @@
+{
+ "name": "alert-dialog",
+ "innerDependencies": [
+ "action-button"
+ ],
+ "registries": [
+ {
+ "name": "alert-dialog.tsx",
+ "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/dialog.css\";\n\nimport * as React from \"react\";\nimport { dialog } from \"@seed-design/recipe/dialog\";\n\nimport { ActionButton } from \"./action-button\";\n\nexport type AlertDialogProps = {\n title: string;\n description: string;\n onInteractOutside?: React.MouseEventHandler;\n};\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/alert-dialog\n */\nexport const AlertDialog: React.FC = ({\n title,\n description,\n onInteractOutside,\n}) => {\n const containerRef = React.useRef(null);\n const backdropRef = React.useRef(null);\n\n const popLock = React.useRef(false);\n\n const onClickOutside: React.MouseEventHandler = (e) => {\n onInteractOutside?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n };\n const onClickContent: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const classNames = dialog();\n\n return (\n \n \n \n
\n
{title}
\n
{description}
\n
\n
\n
+
+
+
+
{title}
+
{description}
+
+
+
+
+
+ {props.children}
+
+
+ );
+ },
+);
+ChipTabs.displayName = "ChipTabs";
+
+export const ChipTabTriggerList = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, children, ...otherProps }, ref) => {
+ const { api, classNames } = useChipTabsContext();
+ const { tabTriggerListProps, triggerSize } = api;
+ const { left } = triggerSize;
+ const { triggerList } = classNames;
+
+ const containerRef = React.useRef(null);
+ React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
+
+ React.useEffect(() => {
+ if (containerRef.current) {
+ containerRef.current?.scrollTo({
+ // NOTE: 27px is half of tab's min-width
+ left: left - 27,
+ behavior: "smooth",
+ });
+ }
+ }, [left]);
+
+ return (
+
+ {children}
+
+ );
+});
+ChipTabTriggerList.displayName = "ChipTabTriggerList";
+
+export interface ChipTabTriggerProps
+ extends Assign, TriggerProps> {}
+
+export const ChipTabTrigger = React.forwardRef<
+ HTMLButtonElement,
+ ChipTabTriggerProps
+>(({ className, children, value, isDisabled, ...otherProps }, ref) => {
+ const { api, variant } = useChipTabsContext();
+ const { getTabTriggerProps } = api;
+ const { label, root } = chipTab({
+ variant,
+ });
+ const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });
+
+ return (
+
+ );
+});
+ChipTabTrigger.displayName = "ChipTabTrigger";
+
+export const ChipTabContent = React.forwardRef<
+ HTMLDivElement,
+ Assign, ContentProps>
+>(({ className, children, value, ...otherProps }, ref) => {
+ const { api, classNames, shouldRender } = useChipTabsContext();
+ const { getTabContentProps } = api;
+ const { content } = classNames;
+ const tabContentProps = getTabContentProps({ value });
+ const isRender = shouldRender(value);
+
+ return (
+
+ {isRender && children}
+
+ );
+});
+ChipTabContent.displayName = "ChipTabContent";
diff --git a/docs/registry/component/control-chip.tsx b/docs/registry/component/control-chip.tsx
new file mode 100644
index 000000000..8a9577657
--- /dev/null
+++ b/docs/registry/component/control-chip.tsx
@@ -0,0 +1,86 @@
+import { Slot } from "@radix-ui/react-slot";
+import {
+ controlChip,
+ type ControlChipVariantProps,
+} from "@seed-design/recipe/controlChip";
+import clsx from "clsx";
+import * as React from "react";
+
+import "@seed-design/stylesheet/controlChip.css";
+import {
+ type UseCheckboxProps,
+ useCheckbox,
+} from "@seed-design/react-checkbox";
+import { visuallyHidden } from "../util/visuallyHidden";
+
+export interface ControlChipToggleProps
+ extends Omit, "size">,
+ UseCheckboxProps,
+ ControlChipVariantProps {
+ prefixIcon?: React.ReactNode;
+
+ suffixIcon?: React.ReactNode;
+}
+
+const ControlChipToggle = React.forwardRef<
+ HTMLInputElement,
+ ControlChipToggleProps
+>(
+ (
+ {
+ className,
+ size = "medium",
+ layout = "withText",
+ children,
+ prefixIcon,
+ suffixIcon,
+ ...otherProps
+ },
+ ref,
+ ) => {
+ const classNames = controlChip({ size, layout });
+ const { rootProps, hiddenInputProps, stateProps, restProps } =
+ useCheckbox(otherProps);
+ return (
+
+ );
+ },
+);
+ControlChipToggle.displayName = "ControlChip.Toggle";
+
+export const ControlChip = Object.assign(
+ () => {
+ console.warn(
+ "ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.",
+ );
+ },
+ {
+ Toggle: ControlChipToggle,
+ },
+);
diff --git a/docs/registry/component/expand-button.tsx b/docs/registry/component/expand-button.tsx
new file mode 100644
index 000000000..2b2989cf0
--- /dev/null
+++ b/docs/registry/component/expand-button.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import "@seed-design/stylesheet/expandButton.css";
+
+import * as React from "react";
+import clsx from "clsx";
+import { Slot } from "@radix-ui/react-slot";
+import {
+ expandButton,
+ type ExpandButtonVariantProps,
+} from "@seed-design/recipe/expandButton";
+
+export interface ExpandButtonProps
+ extends React.ButtonHTMLAttributes,
+ ExpandButtonVariantProps {
+ suffixIcon?: React.ReactNode;
+
+ asChild?: boolean;
+}
+
+/**
+ * @see https://v3.seed-design.io/docs/react/components/expand-button
+ */
+export const ExpandButton = React.forwardRef<
+ HTMLButtonElement,
+ ExpandButtonProps
+>(
+ (
+ { className, children, suffixIcon, asChild = false, ...otherProps },
+ ref,
+ ) => {
+ const Comp = asChild ? Slot : "button";
+ const classNames = expandButton({});
+ return (
+
+ {children}
+ {suffixIcon && (
+ {suffixIcon}
+ )}
+
+ );
+ },
+);
+ExpandButton.displayName = "ExpandButton";
diff --git a/docs/registry/component/progress-circle.tsx b/docs/registry/component/progress-circle.tsx
new file mode 100644
index 000000000..b6a060d02
--- /dev/null
+++ b/docs/registry/component/progress-circle.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import "@seed-design/stylesheet/progressCircle.css";
+
+import * as React from "react";
+import {
+ progressCircle,
+ type ProgressCircleVariant,
+} from "@seed-design/recipe/progressCircle";
+import clsx from "clsx";
+
+export interface ProgressCircleProps
+ extends React.ButtonHTMLAttributes,
+ ProgressCircleVariant {
+ /**
+ * The current value (controlled).
+ * @default 0
+ */
+ value?: number;
+
+ /**
+ * The smallest value allowed for the input.
+ * @default 0
+ */
+ minValue?: number;
+
+ /**
+ * The largest value allowed for the input.
+ * @default 100
+ */
+ maxValue?: number;
+}
+
+/**
+ * @see https://v3.seed-design.io/docs/react/components/progress-circle
+ */
+export const ProgressCircle = React.forwardRef<
+ HTMLDivElement,
+ ProgressCircleProps
+>(
+ (
+ {
+ className,
+ children,
+ size,
+ value = 0,
+ maxValue = 100,
+ minValue = 0,
+ indeterminate = false,
+ ...otherProps
+ },
+ ref,
+ ) => {
+ const classNames = progressCircle({ size, indeterminate });
+
+ // 110 is max value of strokeDasharray
+ const percent = ((value - minValue) / (maxValue - minValue)) * 110;
+
+ const indicatorPathStyle: React.CSSProperties = {
+ strokeDasharray: indeterminate ? undefined : `${percent}, 200`,
+ };
+
+ return (
+
+ );
+ },
+);
diff --git a/docs/registry/component/skeleton.tsx b/docs/registry/component/skeleton.tsx
new file mode 100644
index 000000000..dce504059
--- /dev/null
+++ b/docs/registry/component/skeleton.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+
+interface SkeletonProps {
+ width: number | string;
+ height: number | string;
+ borderRadius: "circle" | "rounded" | "square";
+ type?: "wave";
+}
+
+// TODO: Spec
+// TODO: Recipe
+export const Skeleton = React.forwardRef(
+ (props, ref) => {
+ const { width, height, borderRadius, type = "wave" } = props;
+ return (
+
+ );
+ },
+);
diff --git a/docs/registry/component/switch.tsx b/docs/registry/component/switch.tsx
new file mode 100644
index 000000000..42dfb259b
--- /dev/null
+++ b/docs/registry/component/switch.tsx
@@ -0,0 +1,31 @@
+import { type UseSwitchProps, useSwitch } from "@seed-design/react-switch";
+import { type SwitchVariantProps, switchStyle } from "@seed-design/recipe/switch";
+import clsx from "clsx";
+import * as React from "react";
+
+import type { Assign } from "../util/types";
+import { visuallyHidden } from "../util/visuallyHidden";
+
+import "@seed-design/stylesheet/switch.css";
+
+export interface SwitchProps
+ extends Assign, UseSwitchProps>,
+ SwitchVariantProps {}
+
+export const Switch = React.forwardRef(
+ ({ className, size = "medium", ...otherProps }, ref) => {
+ const { restProps, controlProps, hiddenInputProps, rootProps, thumbProps } =
+ useSwitch(otherProps);
+ const classNames = switchStyle({ size });
+
+ return (
+
+ );
+ },
+);
+Switch.displayName = "Switch";
diff --git a/docs/registry/component/tabs.tsx b/docs/registry/component/tabs.tsx
new file mode 100644
index 000000000..ea89c447c
--- /dev/null
+++ b/docs/registry/component/tabs.tsx
@@ -0,0 +1,346 @@
+"use client";
+
+import clsx from "clsx";
+import * as React from "react";
+import {
+ useTabs,
+ useSwipeable,
+ type UseTabsProps,
+ type TriggerProps,
+ type ContentProps,
+ useLazyContents,
+ type UseLazyContentsProps,
+} from "@seed-design/react-tabs";
+import { tabs } from "@seed-design/recipe/tabs";
+import { tab } from "@seed-design/recipe/tab";
+
+import "@seed-design/stylesheet/tabs.css";
+import "@seed-design/stylesheet/tab.css";
+
+type Assign = Omit & U;
+
+interface TabsContextValue {
+ api: ReturnType & ReturnType;
+ classNames: ReturnType;
+ shouldRender: (value: string) => boolean;
+
+ /**
+ * @default false
+ */
+ isSwipeable: boolean;
+
+ layout: "fill" | "hug";
+ size: "small" | "medium";
+}
+
+const TabsContext = React.createContext(null);
+
+const useTabsContext = () => {
+ const context = React.useContext(TabsContext);
+ if (!context) {
+ throw new Error("Tabs cannot be rendered outside the Tabs");
+ }
+ return context;
+};
+
+export interface TabsProps
+ extends Assign, UseTabsProps>,
+ Omit {
+ /**
+ * @default "hug"
+ */
+ layout?: "fill" | "hug";
+
+ /**
+ * @default "small"
+ */
+ size?: "small" | "medium";
+}
+
+export const Tabs = React.forwardRef(
+ (props, ref) => {
+ const {
+ className,
+ lazyMode,
+ isLazy,
+ isSwipeable = false,
+ layout = "hug",
+ size = "small",
+ } = props;
+ const useTabsProps = useTabs(props);
+ const useSwipeableProps = useSwipeable({
+ isSwipeable,
+ onSwipeLeftToRight: useTabsProps.movePrev,
+ onSwipeRightToLeft: useTabsProps.moveNext,
+ });
+ const classNames = tabs({
+ layout,
+ });
+ const { rootProps, value } = useTabsProps;
+ const { shouldRender } = useLazyContents({
+ currentValue: value,
+ lazyMode,
+ isLazy,
+ });
+ const api = {
+ ...useTabsProps,
+ ...useSwipeableProps,
+ };
+
+ return (
+
+
+ {props.children}
+
+
+ );
+ },
+);
+Tabs.displayName = "Tabs";
+
+export const TabTriggerList = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, children, ...otherProps }, ref) => {
+ const { api, classNames } = useTabsContext();
+ const { tabTriggerListProps, triggerSize } = api;
+ const { left } = triggerSize;
+ const { triggerList } = classNames;
+
+ const containerRef = React.useRef(null);
+ React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
+
+ React.useEffect(() => {
+ if (containerRef.current) {
+ containerRef.current?.scrollTo({
+ // NOTE: 27px is half of tab's min-width
+ left: left - 27,
+ behavior: "smooth",
+ });
+ }
+ }, [left]);
+
+ return (
+
+ {children}
+
+
+ );
+});
+TabTriggerList.displayName = "TabTriggerList";
+
+export interface TabTriggerProps
+ extends Assign, TriggerProps> {
+ /**
+ * @default false
+ */
+ alert?: boolean;
+}
+
+export const TabTrigger = React.forwardRef(
+ (
+ { className, children, value, isDisabled, alert = false, ...otherProps },
+ ref,
+ ) => {
+ const { api, layout, size } = useTabsContext();
+ const { getTabTriggerProps } = api;
+ const { label, notification, root } = tab({
+ size,
+ layout,
+ });
+ const { rootProps, notificationProps, labelProps } = getTabTriggerProps({
+ value,
+ isDisabled,
+ });
+
+ return (
+
+ );
+ },
+);
+TabTrigger.displayName = "TabTrigger";
+
+export const TabContentList = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, children, ...otherProps }, ref) => {
+ const { api, classNames, isSwipeable } = useTabsContext();
+ const {
+ tabContentListProps,
+ tabContentCameraProps,
+ getDragProps,
+ currentTabEnabledIndex,
+ swipeMoveX,
+ swipeStatus,
+ tabEnabledCount,
+ } = api;
+ const { contentList, contentCamera } = classNames;
+ const dragProps = getDragProps();
+
+ const getCameraTranslateX = () => {
+ const MODIFIER = 5;
+
+ const currentContentOffsetX = currentTabEnabledIndex * 100;
+
+ if (swipeMoveX > 0 && currentTabEnabledIndex === 0) {
+ return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;
+ }
+
+ if (swipeMoveX < 0 && currentTabEnabledIndex === tabEnabledCount - 1) {
+ return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;
+ }
+
+ return `calc(-${currentContentOffsetX}% + ${swipeMoveX}px)`;
+ };
+
+ return (
+
+ );
+});
+TabContentList.displayName = "TabContentList";
+
+export const TabContent = React.forwardRef<
+ HTMLDivElement,
+ Assign, ContentProps>
+>(({ className, children, value, ...otherProps }, ref) => {
+ const { api, classNames, shouldRender } = useTabsContext();
+ const { getTabContentProps } = api;
+ const { content } = classNames;
+ const tabContentProps = getTabContentProps({ value });
+ const isRender = shouldRender(value);
+
+ return (
+
+ {isRender && children}
+
+ );
+});
+TabContent.displayName = "TabContent";
+
+const TabIndicator = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...otherProps }, ref) => {
+ const { api, classNames, isSwipeable, layout } = useTabsContext();
+ const {
+ tabIndicatorProps,
+ triggerSize,
+ currentTabIndex,
+ swipeMoveX,
+ tabCount,
+ swipeStatus,
+ } = api;
+ const { indicator } = classNames;
+ const { left: triggerLeft, width: triggerWidth } = triggerSize;
+
+ const getLeft = () => {
+ const MODIFIER = layout === "hug" ? 10 : 5;
+ const GUTTER = layout === "fill" ? 16 : 0;
+
+ // 양끝 탭에서 스와이프로 인한 이동은 MODIFIER를 5배로 늘려서 완전 조금 이동하도록 함
+ if (
+ (swipeMoveX > 0 && currentTabIndex === 0) ||
+ (swipeMoveX < 0 && currentTabIndex === tabCount - 1)
+ ) {
+ return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / (MODIFIER * 5)}px)`;
+ }
+
+ return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / MODIFIER}px)`;
+ };
+
+ const getWidth = () => {
+ const GUTTER = 16;
+
+ if (layout === "hug") {
+ return triggerWidth;
+ }
+
+ return triggerWidth - GUTTER * 2;
+ };
+
+ const leftTransition =
+ isSwipeable && swipeStatus === "idle"
+ ? "left 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)"
+ : "";
+ const widthTransition = "width 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)";
+ const transitions = [leftTransition, widthTransition]
+ .filter(Boolean)
+ .join(", ");
+
+ return (
+
+ );
+});
+TabIndicator.displayName = "TabIndicator";
diff --git a/docs/registry/registry-component.ts b/docs/registry/registry-component.ts
new file mode 100644
index 000000000..9c10eab9f
--- /dev/null
+++ b/docs/registry/registry-component.ts
@@ -0,0 +1,54 @@
+import type { RegistryComponent } from "./schema";
+
+export const registryComponent: RegistryComponent = [
+ {
+ name: "alert-dialog",
+ innerDependencies: ["action-button"],
+ files: ["component/alert-dialog.tsx"],
+ },
+ {
+ name: "action-button",
+ dependencies: ["@radix-ui/react-slot"],
+ files: ["component/action-button.tsx"],
+ },
+ {
+ name: "action-chip",
+ dependencies: ["@radix-ui/react-slot"],
+ files: ["component/action-chip.tsx"],
+ },
+ {
+ name: "badge",
+ dependencies: ["@radix-ui/react-slot"],
+ files: ["component/badge.tsx"],
+ },
+ {
+ name: "control-chip",
+ dependencies: ["@radix-ui/react-slot"],
+ files: ["component/control-chip.tsx"],
+ },
+ {
+ name: "checkbox",
+ dependencies: ["@seed-design/react-checkbox"],
+ files: ["component/checkbox.tsx"],
+ },
+ {
+ name: "tabs",
+ dependencies: ["@seed-design/react-tabs"],
+ files: ["component/tabs.tsx"],
+ },
+ {
+ name: "chip-tabs",
+ dependencies: ["@seed-design/react-tabs"],
+ files: ["component/chip-tabs.tsx"],
+ },
+ {
+ name: "expand-button",
+ dependencies: ["@radix-ui/react-slot"],
+ files: ["component/expand-button.tsx"],
+ },
+ {
+ name: "switch",
+ dependencies: ["@seed-design/react-switch"],
+ files: ["component/switch.tsx"],
+ },
+];
diff --git a/docs/registry/schema.ts b/docs/registry/schema.ts
new file mode 100644
index 000000000..0f74fe53c
--- /dev/null
+++ b/docs/registry/schema.ts
@@ -0,0 +1,63 @@
+import { z } from "zod";
+
+export const registryComponentItemSchema = z.object({
+ /**
+ * @description 컴포넌트 이름
+ * @example chip-tabs, alert-dialog
+ */
+ name: z.string(),
+
+ description: z.string().optional(),
+
+ /**
+ * @description 컴포넌트 의존성
+ * @example @seed-design/react-tabs
+ */
+ dependencies: z.array(z.string()).optional(),
+
+ /**
+ * @description 컴포넌트 개발 의존성
+ */
+ devDependencies: z.array(z.string()).optional(),
+
+ /**
+ * @description 컴포넌트 내부의 Seed Design 컴포넌트 의존성
+ * @example action-button
+ */
+ innerDependencies: z.array(z.string()).optional(),
+
+ /**
+ * @description 컴포넌트 코드 스니펫 경로, 여러 파일이 될 수 있어서 배열로 정의
+ * @example component/alert-dialog.tsx
+ */
+ files: z.array(z.string()),
+});
+export const registryComponentSchema = z.array(registryComponentItemSchema);
+
+/**
+ * @description 머신이 생성한 registry component schema
+ */
+const omittedRegistryComponentSchema = registryComponentItemSchema.omit({
+ files: true,
+});
+export const registryComponentItemMachineGeneratedSchema =
+ omittedRegistryComponentSchema.extend({
+ registries: z.array(
+ z.object({
+ name: z.string(),
+ content: z.string(),
+ }),
+ ),
+ });
+export const registryComponentMachineGeneratedSchema = z.array(
+ registryComponentItemMachineGeneratedSchema,
+);
+
+export type RegistryComponentItem = z.infer;
+export type RegistryComponent = z.infer;
+export type RegistryComponentItemMachineGenerated = z.infer<
+ typeof registryComponentItemMachineGeneratedSchema
+>;
+export type RegistryComponentMachineGenerated = z.infer<
+ typeof registryComponentMachineGeneratedSchema
+>;
diff --git a/docs/registry/util/types.ts b/docs/registry/util/types.ts
new file mode 100644
index 000000000..7e0e3c9f9
--- /dev/null
+++ b/docs/registry/util/types.ts
@@ -0,0 +1 @@
+export type Assign = Omit & U;
diff --git a/docs/registry/util/visuallyHidden.ts b/docs/registry/util/visuallyHidden.ts
new file mode 100644
index 000000000..a31846088
--- /dev/null
+++ b/docs/registry/util/visuallyHidden.ts
@@ -0,0 +1,13 @@
+import type { CSSProperties } from "react";
+
+export const visuallyHidden: CSSProperties = {
+ border: 0,
+ clip: "rect(0 0 0 0)",
+ height: "1px",
+ margin: "-1px",
+ overflow: "hidden",
+ padding: 0,
+ position: "absolute",
+ whiteSpace: "nowrap",
+ width: "1px",
+};
diff --git a/docs/schema/component-meta.json b/docs/schema/component-meta.json
deleted file mode 100644
index d37c69d6f..000000000
--- a/docs/schema/component-meta.json
+++ /dev/null
@@ -1,243 +0,0 @@
-{
- "$schema": "http://json-schema.org/draft-07/schema#",
- "title": "Component Meta Schema for Seed Design System",
- "description": "컴포넌트 메타 정보들에 대한 스키마입니다.",
- "type": "object",
- "definitions": {
- "status": {
- "title": "진행 상태",
- "description": "진행 상태입니다. (todo, in-progress, done) 세 가지 중 하나를 선택해주세요.",
- "oneOf": [
- {
- "const": "todo",
- "title": "해야하는 작업",
- "description": "해야하는 작업"
- },
- {
- "const": "in-progress",
- "title": "진행중인 작업",
- "description": "진행중인 작업"
- },
- {
- "const": "done",
- "title": "완료된 작업",
- "description": "완료된 작업"
- }
- ],
- "default": "todo"
- }
- },
- "properties": {
- "name": {
- "type": "string",
- "title": "컴포넌트 이름"
- },
- "description": {
- "type": "string",
- "title": "컴포넌트 설명"
- },
- "thumbnail": {
- "type": "string",
- "pattern": "^.*.png$",
- "title": "컴포넌트 썸네일 이미지 경로",
- "description": "png 파일만 가능합니다."
- },
- "primitive": {
- "type": "string",
- "pattern": "^.*.json$",
- "title": "컴포넌트 primitive json 메타 파일 경로",
- "description": "json 파일만 가능합니다."
- },
- "platform": {
- "type": "object",
- "title": "컴포넌트의 플랫폼별 정보",
- "properties": {
- "ios": {
- "type": "object",
- "title": "iOS 플랫폼 정보",
- "properties": {
- "status": {
- "$ref": "#/definitions/status"
- },
- "alias": {
- "type": "string",
- "title": "컴포넌트 iOS alias",
- "description": "컴포넌트의 iOS alias를 입력해주세요. (optional)"
- },
- "path": {
- "type": "string",
- "oneOf": [
- {
- "pattern": "^seedcatalog://.*$"
- },
- {
- "pattern": "^$"
- }
- ],
- "title": "컴포넌트 iOS 경로",
- "description": "컴포넌트의 iOS Deep link를 입력해주세요."
- }
- },
- "required": ["status", "alias", "path"],
- "additionalProperties": false
- },
- "android": {
- "type": "object",
- "title": "Android 플랫폼 정보",
- "properties": {
- "status": {
- "$ref": "#/definitions/status"
- },
- "path": {
- "type": "string",
- "title": "컴포넌트 Android 경로",
- "description": "컴포넌트의 Android Deep link를 입력해주세요."
- }
- },
- "required": ["status", "path"],
- "additionalProperties": false
- },
- "react": {
- "type": "object",
- "title": "React 플랫폼 정보",
- "properties": {
- "status": {
- "$ref": "#/definitions/status"
- },
- "path": {
- "type": "string",
- "title": "컴포넌트 React Sprout 경로",
- "description": "컴포넌트의 React Sprout Storybook link를 입력해주세요.",
- "oneOf": [
- {
- "pattern": "^https://sprout-storybook.vercel.app/.*$"
- },
- {
- "pattern": "^$"
- }
- ]
- }
- },
- "required": ["status", "path"],
- "additionalProperties": false
- },
- "figma": {
- "type": "object",
- "title": "Figma 플랫폼 정보",
- "properties": {
- "status": {
- "$ref": "#/definitions/status"
- },
- "path": {
- "type": "string",
- "oneOf": [
- {
- "pattern": "^https://www.figma.com/file/.*$"
- },
- {
- "pattern": "^$"
- }
- ],
- "title": "컴포넌트 Figma 경로",
- "description": "컴포넌트의 Figma link를 입력해주세요."
- }
- },
- "required": ["status", "path"],
- "additionalProperties": false
- },
- "docs": {
- "type": "object",
- "title": "Seed Docs 플랫폼 정보",
- "properties": {
- "overview": {
- "type": "object",
- "title": "컴포넌트 Overview 정보",
- "description": "컴포넌트의 전반적인 내용이 들어가있습니다.",
- "properties": {
- "status": {
- "$ref": "#/definitions/status"
- },
- "storybook": {
- "type": "object",
- "title": "컴포넌트 Storybook 정보",
- "description": "컴포넌트의 Storybook에 대한 정보가 들어가있습니다.",
- "properties": {
- "path": {
- "type": "string",
- "oneOf": [
- {
- "pattern": "^https://sprout-storybook.vercel.app/.*$"
- },
- {
- "pattern": "^$"
- }
- ],
- "title": "컴포넌트 Storybook 경로",
- "description": "Iframe에 띄울 Storybook 경로를 입력해주세요."
- },
- "height": {
- "type": "string",
- "pattern": "^[0-9]+px$",
- "title": "Iframe 높이",
- "description": "Iframe의 높이를 입력해주세요. px 단위로 입력해주세요."
- }
- },
- "required": ["path", "height"]
- },
- "mdx": {
- "type": "string",
- "pattern": "overview.mdx$",
- "title": "컴포넌트 Overview MDX 문서 경로",
- "description": "컴포넌트의 Overview MDX 문서 경로를 입력해주세요."
- }
- },
- "required": ["status", "mdx"],
- "additionalProperties": false
- },
- "usage": {
- "type": "object",
- "title": "컴포넌트 Usage 정보",
- "description": "컴포넌트의 사용법에 대한 정보가 들어가있습니다.",
- "properties": {
- "status": {
- "$ref": "#/definitions/status"
- },
- "mdx": {
- "type": "string",
- "pattern": "usage.mdx$",
- "title": "컴포넌트 Usage MDX 문서 경로",
- "description": "컴포넌트의 Usage MDX 문서 경로를 입력해주세요."
- }
- },
- "required": ["status", "mdx"],
- "additionalProperties": false
- },
- "style": {
- "type": "object",
- "title": "컴포넌트 Style 정보",
- "description": "컴포넌트의 스타일 가이드에 대한 정보가 들어가있습니다.",
- "properties": {
- "status": {
- "$ref": "#/definitions/status"
- },
- "mdx": {
- "type": "string",
- "pattern": "style.mdx$",
- "title": "컴포넌트 Style MDX 문서 경로",
- "description": "컴포넌트의 Style MDX 문서 경로를 입력해주세요."
- }
- },
- "required": ["status", "mdx"],
- "additionalProperties": false
- }
- },
- "required": ["overview", "usage", "style"],
- "additionalProperties": false
- }
- },
- "required": ["ios", "android", "react", "figma", "docs"],
- "additionalProperties": false
- }
- },
- "required": ["name", "description", "thumbnail", "platform"]
-}
diff --git a/docs/schema/primitive-meta.json b/docs/schema/primitive-meta.json
deleted file mode 100644
index 7f98495f8..000000000
--- a/docs/schema/primitive-meta.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "$schema": "http://json-schema.org/draft-07/schema#",
- "$id": "https://raw.githubusercontent.com/daangn/seed-design/main/docs/schema/primitive-meta.json",
- "title": "Component Meta Schema for Seed Design System",
- "description": "Seed Design System의 컴포넌트 메타 정보 스키마입니다.",
- "type": "object",
- "properties": {
- "name": {
- "type": "string",
- "title": "컴포넌트 이름"
- },
- "description": {
- "type": "string",
- "title": "컴포넌트 설명"
- },
- "thumbnail": {
- "type": "string",
- "pattern": "^.*.png$",
- "title": "컴포넌트 썸네일 이미지 경로",
- "description": "png 파일만 가능합니다."
- },
- "primitive": {
- "type": "string",
- "pattern": "^.*.mdx$",
- "title": "컴포넌트 primitive mdx 파일 경로",
- "description": "mdx 파일만 가능합니다."
- }
- },
- "required": ["name", "description", "thumbnail", "primitive"]
-}
diff --git a/docs/scripts/generate-example.ts b/docs/scripts/generate-example.ts
new file mode 100644
index 000000000..6a5456709
--- /dev/null
+++ b/docs/scripts/generate-example.ts
@@ -0,0 +1,27 @@
+import path from "node:path";
+import fs from "node:fs";
+
+const EXAMPLE_PATH = path.join(process.cwd(), "components", "example");
+
+// read files from path and then generate the index.json containing key-value pairs of the file name and the file content
+const files = fs.readdirSync(EXAMPLE_PATH);
+
+const example = Object.fromEntries(
+ files
+ .filter((file) => file.endsWith(".tsx"))
+ .map((file) => {
+ const filePath = path.join(EXAMPLE_PATH, file);
+ const content = fs.readFileSync(filePath, "utf8");
+
+ return [
+ file.replace(".tsx", ""),
+ content.replace('"use client";', "").trim(),
+ ];
+ }),
+);
+
+const exampleJson = JSON.stringify(example, null, 2);
+
+const targetPath = path.join(EXAMPLE_PATH, "index.json");
+
+fs.writeFileSync(targetPath, exampleJson, "utf8");
diff --git a/docs/scripts/generate-registry.ts b/docs/scripts/generate-registry.ts
new file mode 100644
index 000000000..2ad7b6133
--- /dev/null
+++ b/docs/scripts/generate-registry.ts
@@ -0,0 +1,108 @@
+import chalk from "chalk";
+import { existsSync, promises as fs, readFileSync } from "fs";
+import path, { basename } from "node:path";
+
+import { match } from "ts-pattern";
+
+import { registryComponent } from "../registry/registry-component.js";
+import {
+ type RegistryComponent,
+ registryComponentItemMachineGeneratedSchema,
+} from "../registry/schema.js";
+
+const GENERATED_REGISTRY_PATH = path.join(
+ process.cwd(),
+ "public",
+ "__registry__",
+);
+const REGISTRY_PATH = path.join(process.cwd(), "registry");
+
+type RegistryType = "component";
+
+interface GenerateRegistryIndexProps {
+ registry: RegistryComponent;
+ type: RegistryType;
+}
+async function generateRegistryIndex({
+ registry,
+ type,
+}: GenerateRegistryIndexProps) {
+ const metadatasJson = JSON.stringify(registry, null, 2);
+ const targetFolder = path.join(GENERATED_REGISTRY_PATH, type);
+ const targetPath = path.join(targetFolder, "index.json");
+
+ if (!existsSync(targetFolder)) {
+ await fs.mkdir(targetFolder, { recursive: true });
+ }
+
+ await fs.writeFile(targetPath, metadatasJson, "utf8");
+}
+
+interface GenerateRegistryProps {
+ registry: RegistryComponent;
+ type: RegistryType;
+}
+async function generateRegistry({ registry, type }: GenerateRegistryProps) {
+ const targetPath = path.join(GENERATED_REGISTRY_PATH, type);
+
+ if (!existsSync(targetPath)) {
+ await fs.mkdir(targetPath, { recursive: true });
+ }
+
+ for (const item of registry) {
+ const registries = item.files
+ ?.map((file) => {
+ const filePath = path.join(REGISTRY_PATH, file);
+
+ if (!existsSync(filePath)) {
+ console.log(
+ chalk.red(
+ `[Generate Registry] ${chalk.bgRed(item.name)} file file does not exist!`,
+ ),
+ );
+ return null;
+ }
+
+ const content = readFileSync(filePath, "utf8");
+
+ return {
+ name: basename(file),
+ content,
+ };
+ })
+ .filter(Boolean);
+
+ const removeFiles = {
+ ...item,
+ files: undefined,
+ };
+
+ const payload = {
+ ...removeFiles,
+ registries,
+ };
+
+ const parsedPayload = match(type)
+ .with("component", () =>
+ registryComponentItemMachineGeneratedSchema.parse(payload),
+ )
+ .exhaustive();
+
+ await fs.writeFile(
+ path.join(targetPath, `${item.name}.json`),
+ JSON.stringify(parsedPayload, null, 2),
+ "utf8",
+ );
+ }
+}
+
+function main() {
+ console.log(chalk.gray("Generate Component Registry..."));
+
+ generateRegistryIndex({ registry: registryComponent, type: "component" });
+ generateRegistry({ registry: registryComponent, type: "component" });
+
+ console.log(chalk.green("Component Registry Generated !"));
+}
+
+main();
diff --git a/docs/scripts/validate-meta-data.mjs b/docs/scripts/validate-meta-data.mjs
deleted file mode 100644
index 6067d975d..000000000
--- a/docs/scripts/validate-meta-data.mjs
+++ /dev/null
@@ -1,102 +0,0 @@
-import Ajv from "ajv";
-import { prettify } from "awesome-ajv-errors";
-import chalk from "chalk";
-import fs from "node:fs/promises";
-import path from "node:path";
-
-import componentMetaSchema from "../schema/component-meta.json" assert { type: "json" };
-import primitiveMetaSchema from "../schema/primitive-meta.json" assert { type: "json" };
-
-const ajv = new Ajv();
-
-// ---------실행 부분 시작--------- //
-
-console.log();
-console.log(chalk.bold("---------------------------------------------"));
-console.log(chalk.bold("Validating meta.json files..."));
-
-await validateJsonInDir({
- dir: path.resolve("./content/component"),
- validate: ajv.compile(componentMetaSchema),
- type: "component",
-});
-await validateJsonInDir({
- dir: path.resolve("./content/primitive"),
- validate: ajv.compile(primitiveMetaSchema),
- type: "primitive",
-});
-
-console.log(chalk.bold("Finished validating meta.json files"));
-console.log(chalk.bold("---------------------------------------------"));
-console.log();
-
-// ---------구현 부분 시작--------- //
-
-async function validateJsonInDir({ dir, validate, type }) {
- try {
- const filesOrFolders = await fs.readdir(dir);
-
- for (const fileOrFolder of filesOrFolders) {
- const filePath = path.join(dir, fileOrFolder);
-
- const stats = await fs.stat(filePath);
-
- if (!stats.isDirectory()) {
- continue;
- }
-
- const subfiles = await fs.readdir(filePath);
-
- for (const subfile of subfiles) {
- if (path.extname(subfile) !== ".json") {
- continue;
- }
-
- const data = await fs.readFile(path.join(filePath, subfile), "utf8");
-
- const json = JSON.parse(data);
- const isValid = validate(json);
- const fileName = `${json.name.replaceAll(" ", "-").toLowerCase()}.json`;
-
- if (!isValid) {
- if (type === "component") {
- console.log(
- `${chalk.bgBlue(`[${type}]`)} ${fileName}: ${chalk.red.bold(
- "invalid",
- )}`,
- );
- }
-
- if (type === "primitive") {
- console.log(
- `${chalk.bgYellow(`[${type}]`)} ${fileName}: ${chalk.red.bold(
- "invalid",
- )}`,
- );
- }
-
- console.error(prettify(validate, { data: json }));
- process.exit(1);
- } else {
- if (type === "component") {
- console.log(
- `${chalk.bgBlue(`[${type}]`)} ${fileName}: ${chalk.green.bold(
- "valid",
- )}`,
- );
- }
-
- if (type === "primitive") {
- console.log(
- `${chalk.bgYellow(`[${type}]`)} ${fileName}: ${chalk.green.bold(
- "valid",
- )}`,
- );
- }
- }
- }
- }
- } catch (err) {
- console.error(err);
- }
-}
diff --git a/docs/seed-tailwind-theme.mjs b/docs/seed-tailwind-theme.mjs
new file mode 100644
index 000000000..e5878bf68
--- /dev/null
+++ b/docs/seed-tailwind-theme.mjs
@@ -0,0 +1,229 @@
+export default {
+ extend: {
+ colors: {
+ seed: {
+ palette: {
+ gray: {
+ 0: "var(--seed-v3-color-palette-gray-00)",
+ 100: "var(--seed-v3-color-palette-gray-100)",
+ 200: "var(--seed-v3-color-palette-gray-200)",
+ 300: "var(--seed-v3-color-palette-gray-300)",
+ 400: "var(--seed-v3-color-palette-gray-400)",
+ 500: "var(--seed-v3-color-palette-gray-500)",
+ 600: "var(--seed-v3-color-palette-gray-600)",
+ 700: "var(--seed-v3-color-palette-gray-700)",
+ 800: "var(--seed-v3-color-palette-gray-800)",
+ 900: "var(--seed-v3-color-palette-gray-900)",
+ },
+ blue: {
+ 100: "var(--seed-v3-color-palette-blue-100)",
+ 200: "var(--seed-v3-color-palette-blue-200)",
+ 300: "var(--seed-v3-color-palette-blue-300)",
+ 400: "var(--seed-v3-color-palette-blue-400)",
+ 500: "var(--seed-v3-color-palette-blue-500)",
+ 600: "var(--seed-v3-color-palette-blue-600)",
+ 700: "var(--seed-v3-color-palette-blue-700)",
+ 800: "var(--seed-v3-color-palette-blue-800)",
+ 900: "var(--seed-v3-color-palette-blue-900)",
+ 1000: "var(--seed-v3-color-palette-blue-1000)",
+ },
+ carrot: {
+ 100: "var(--seed-v3-color-palette-carrot-100)",
+ 200: "var(--seed-v3-color-palette-carrot-200)",
+ 300: "var(--seed-v3-color-palette-carrot-300)",
+ 400: "var(--seed-v3-color-palette-carrot-400)",
+ 500: "var(--seed-v3-color-palette-carrot-500)",
+ 600: "var(--seed-v3-color-palette-carrot-600)",
+ 700: "var(--seed-v3-color-palette-carrot-700)",
+ 800: "var(--seed-v3-color-palette-carrot-800)",
+ 900: "var(--seed-v3-color-palette-carrot-900)",
+ 1000: "var(--seed-v3-color-palette-carrot-1000)",
+ },
+ green: {
+ 100: "var(--seed-v3-color-palette-green-100)",
+ 200: "var(--seed-v3-color-palette-green-200)",
+ 300: "var(--seed-v3-color-palette-green-300)",
+ 400: "var(--seed-v3-color-palette-green-400)",
+ 500: "var(--seed-v3-color-palette-green-500)",
+ 600: "var(--seed-v3-color-palette-green-600)",
+ 700: "var(--seed-v3-color-palette-green-700)",
+ 800: "var(--seed-v3-color-palette-green-800)",
+ 900: "var(--seed-v3-color-palette-green-900)",
+ 1000: "var(--seed-v3-color-palette-green-1000)",
+ },
+ purple: {
+ 100: "var(--seed-v3-color-palette-purple-100)",
+ 200: "var(--seed-v3-color-palette-purple-200)",
+ 300: "var(--seed-v3-color-palette-purple-300)",
+ 400: "var(--seed-v3-color-palette-purple-400)",
+ 500: "var(--seed-v3-color-palette-purple-500)",
+ 600: "var(--seed-v3-color-palette-purple-600)",
+ 700: "var(--seed-v3-color-palette-purple-700)",
+ 800: "var(--seed-v3-color-palette-purple-800)",
+ 900: "var(--seed-v3-color-palette-purple-900)",
+ 1000: "var(--seed-v3-color-palette-purple-1000)",
+ },
+ red: {
+ 100: "var(--seed-v3-color-palette-red-100)",
+ 200: "var(--seed-v3-color-palette-red-200)",
+ 300: "var(--seed-v3-color-palette-red-300)",
+ 400: "var(--seed-v3-color-palette-red-400)",
+ 500: "var(--seed-v3-color-palette-red-500)",
+ 600: "var(--seed-v3-color-palette-red-600)",
+ 700: "var(--seed-v3-color-palette-red-700)",
+ 800: "var(--seed-v3-color-palette-red-800)",
+ 900: "var(--seed-v3-color-palette-red-900)",
+ 1000: "var(--seed-v3-color-palette-red-1000)",
+ },
+ yellow: {
+ 100: "var(--seed-v3-color-palette-yellow-100)",
+ 200: "var(--seed-v3-color-palette-yellow-200)",
+ 300: "var(--seed-v3-color-palette-yellow-300)",
+ 400: "var(--seed-v3-color-palette-yellow-400)",
+ 500: "var(--seed-v3-color-palette-yellow-500)",
+ 600: "var(--seed-v3-color-palette-yellow-600)",
+ 700: "var(--seed-v3-color-palette-yellow-700)",
+ 800: "var(--seed-v3-color-palette-yellow-800)",
+ 900: "var(--seed-v3-color-palette-yellow-900)",
+ 1000: "var(--seed-v3-color-palette-yellow-1000)",
+ },
+ "static-black": {
+ DEFAULT: "var(--seed-v3-color-palette-static-black)",
+ "alpha-50": "var(--seed-v3-color-palette-static-black-alpha-50)",
+ "alpha-200": "var(--seed-v3-color-palette-static-black-alpha-200)",
+ "alpha-500": "var(--seed-v3-color-palette-static-black-alpha-500)",
+ },
+ "static-white": {
+ DEFAULT: "var(--seed-v3-color-palette-static-white)",
+ "alpha-50": "var(--seed-v3-color-palette-static-white-alpha-50)",
+ "alpha-200": "var(--seed-v3-color-palette-static-white-alpha-200)",
+ },
+ },
+ fg: {
+ brand: {
+ contrast: "var(--seed-v3-color-fg-brand-contrast)",
+ DEFAULT: "var(--seed-v3-color-fg-brand)",
+ },
+ danger: {
+ contrast: "var(--seed-v3-color-fg-danger-contrast)",
+ DEFAULT: "var(--seed-v3-color-fg-danger)",
+ },
+ disabled: "var(--seed-v3-color-fg-disabled)",
+ informative: {
+ contrast: "var(--seed-v3-color-fg-informative-contrast)",
+ DEFAULT: "var(--seed-v3-color-fg-informative)",
+ },
+ magic: {
+ contrast: "var(--seed-v3-color-fg-magic-contrast)",
+ DEFAULT: "var(--seed-v3-color-fg-magic)",
+ },
+ neutral: {
+ inverted: "var(--seed-v3-color-fg-neutral-inverted)",
+ muted: "var(--seed-v3-color-fg-neutral-muted)",
+ subtle: "var(--seed-v3-color-fg-neutral-subtle)",
+ DEFAULT: "var(--seed-v3-color-fg-neutral)",
+ },
+ placeholder: "var(--seed-v3-color-fg-placeholder)",
+ positive: {
+ contrast: "var(--seed-v3-color-fg-positive-contrast)",
+ DEFAULT: "var(--seed-v3-color-fg-positive)",
+ },
+ warning: {
+ contrast: "var(--seed-v3-color-fg-warning-contrast)",
+ },
+ },
+ bg: {
+ brand: {
+ solid: {
+ pressed: "var(--seed-v3-color-bg-brand-solid-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-brand-solid)",
+ },
+ weak: {
+ pressed: "var(--seed-v3-color-bg-brand-weak-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-brand-weak)",
+ },
+ },
+ danger: {
+ solid: {
+ pressed: "var(--seed-v3-color-bg-danger-solid-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-danger-solid)",
+ },
+ weak: {
+ pressed: "var(--seed-v3-color-bg-danger-weak-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-danger-weak)",
+ },
+ },
+ disabled: "var(--seed-v3-color-bg-disabled)",
+ informative: {
+ solid: {
+ pressed: "var(--seed-v3-color-bg-informative-solid-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-informative-solid)",
+ },
+ weak: {
+ pressed: "var(--seed-v3-color-bg-informative-weak-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-informative-weak)",
+ },
+ },
+ layer: {
+ basement: "var(--seed-v3-color-bg-layer-basement)",
+ default: {
+ pressed: "var(--seed-v3-color-bg-layer-default-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-layer-default)",
+ },
+ fill: "var(--seed-v3-color-bg-layer-fill)",
+ floating: {
+ pressed: "var(--seed-v3-color-bg-layer-floating-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-layer-floating)",
+ },
+ },
+ neutral: {
+ solid: {
+ pressed: "var(--seed-v3-color-bg-neutral-solid-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-neutral-solid)",
+ },
+ weak: {
+ pressed: "var(--seed-v3-color-bg-neutral-weak-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-neutral-weak)",
+ },
+ },
+ overlay: {
+ muted: "var(--seed-v3-color-bg-overlay-muted)",
+ DEFAULT: "var(--seed-v3-color-bg-overlay)",
+ },
+ positive: {
+ solid: {
+ pressed: "var(--seed-v3-color-bg-positive-solid-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-positive-solid)",
+ },
+ weak: {
+ pressed: "var(--seed-v3-color-bg-positive-weak-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-positive-weak)",
+ },
+ },
+ warning: {
+ solid: "var(--seed-v3-color-bg-warning-solid)",
+ weak: {
+ pressed: "var(--seed-v3-color-bg-warning-weak-pressed)",
+ DEFAULT: "var(--seed-v3-color-bg-warning-weak)",
+ },
+ },
+ },
+ stroke: {
+ brand: "var(--seed-v3-color-stroke-brand)",
+ control: "var(--seed-v3-color-stroke-control)",
+ danger: "var(--seed-v3-color-stroke-danger)",
+ field: {
+ focused: "var(--seed-v3-color-stroke-field-focused)",
+ DEFAULT: "var(--seed-v3-color-stroke-field)",
+ },
+ neutral: {
+ muted: "var(--seed-v3-color-stroke-neutral-muted)",
+ DEFAULT: "var(--seed-v3-color-stroke-neutral)",
+ },
+ "on-image": "var(--seed-v3-color-stroke-on-image)",
+ positive: "var(--seed-v3-color-stroke-positive)",
+ },
+ },
+ },
+ },
+};
diff --git a/docs/source.config.ts b/docs/source.config.ts
new file mode 100644
index 000000000..d37c0fb3e
--- /dev/null
+++ b/docs/source.config.ts
@@ -0,0 +1,10 @@
+import { defineDocs, defineConfig } from "fumadocs-mdx/config";
+import { remarkInstall } from "fumadocs-docgen";
+
+export const { docs, meta } = defineDocs();
+
+export default defineConfig({
+ mdxOptions: {
+ remarkPlugins: [remarkInstall],
+ },
+});
diff --git a/docs/src/@types/react-use-flexsearch.d.ts b/docs/src/@types/react-use-flexsearch.d.ts
deleted file mode 100644
index bd9190104..000000000
--- a/docs/src/@types/react-use-flexsearch.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable no-unused-vars */
-type Status = "todo" | "in-progress" | "done";
-interface QueryResultItem {
- name: string;
- status?: Status;
- slug: string;
-}
-
-declare module "react-use-flexsearch" {
- export function useFlexSearch(
- query: string,
- index: any,
- store: any,
- options?: any,
- ): QueryResultItem[];
-}
diff --git a/docs/src/_Layout.tsx b/docs/src/_Layout.tsx
deleted file mode 100644
index 33043f110..000000000
--- a/docs/src/_Layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import type { PropsWithChildren } from "react";
-
-import Header from "./components/Header";
-import MdxComponents from "./components/mdx/MdxComponents";
-import Sidebar, { MobileSidebar } from "./components/sidebar/Sidebar";
-import * as t from "./styles/token.css";
-
-interface LayoutProps {
- type: "document" | "main";
-}
-
-const Layout = ({ children, type }: PropsWithChildren) => {
- switch (type) {
- case "document":
- return (
-
-
-
-
- {children}
-
-
- );
-
- case "main":
- return (
-
-
-
- {children}
-
- );
- }
-};
-
-export default Layout;
diff --git a/docs/src/_Root.tsx b/docs/src/_Root.tsx
deleted file mode 100644
index 05a0b1e3a..000000000
--- a/docs/src/_Root.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-import Searchbar from "./components/Searchbar";
-import { SearchbarProvider } from "./contexts/SearchbarContext";
-import { SidebarProvider } from "./contexts/SidebarContext";
-
-const Providers = ({ children }: PropsWithChildren) => {
- return (
-
- {children}
-
- );
-};
-
-const Root = ({ children }: PropsWithChildren) => {
- return (
-
-
- {children}
-
- );
-};
-
-export default Root;
diff --git a/docs/src/__generated__/gatsby-schema.graphql b/docs/src/__generated__/gatsby-schema.graphql
deleted file mode 100644
index af2357400..000000000
--- a/docs/src/__generated__/gatsby-schema.graphql
+++ /dev/null
@@ -1,2454 +0,0 @@
-"""
-Define parent-child relations between types. This is used to add `child*` and `children*` convenience fields like `childImageSharp`.
-"""
-directive @childOf(
- """
- A list of mime-types this type is a child of. Usually these are the mime-types handled by a transformer plugin.
- """
- mimeTypes: [String!]! = []
-
- """
- A list of types this type is a child of. Usually these are the types handled by a transformer plugin.
- """
- types: [String!]! = []
-) on OBJECT
-
-"""Add date formatting options."""
-directive @dateformat(difference: String, formatString: String, fromNow: Boolean, locale: String) on FIELD_DEFINITION
-
-"""Do not infer field types from field values."""
-directive @dontInfer on OBJECT
-
-"""Link to File node by relative path."""
-directive @fileByRelativePath(from: String) on FIELD_DEFINITION
-
-"""Infer field types from field values."""
-directive @infer on OBJECT
-
-"""Link to node by foreign-key relation."""
-directive @link(by: String! = "id", from: String, on: String) on FIELD_DEFINITION
-
-directive @mdx on FIELD_DEFINITION
-
-"""Define the mime-types handled by this type."""
-directive @mimeTypes(
- """The mime-types handled by this type."""
- types: [String!]! = []
-) on OBJECT
-
-"""
-DEPRECATED: Use interface inheritance instead, i.e. "interface Foo implements Node".
-
-Adds root query fields for an interface. All implementing types must also implement the Node interface.
-"""
-directive @nodeInterface on INTERFACE
-
-"""Proxy resolver from another field."""
-directive @proxy(from: String!, fromNode: Boolean! = false) on FIELD_DEFINITION
-
-input AVIFOptions {
- lossless: Boolean
- quality: Int
- speed: Int
-}
-
-input BlurredOptions {
- """
- Force the output format for the low-res preview. Default is to use the same format as the input. You should rarely need to change this
- """
- toFormat: ImageFormat
-
- """Width of the generated low-res preview. Default is 20px"""
- width: Int
-}
-
-input BooleanQueryOperatorInput {
- eq: Boolean
- in: [Boolean]
- ne: Boolean
- nin: [Boolean]
-}
-
-"""
-A date string, such as 2007-12-03, compliant with the ISO 8601 standard for representation of dates and times using the Gregorian calendar.
-"""
-scalar Date
-
-input DateQueryOperatorInput {
- eq: Date
- gt: Date
- gte: Date
- in: [Date]
- lt: Date
- lte: Date
- ne: Date
- nin: [Date]
-}
-
-type Directory implements Node {
- absolutePath: String!
- accessTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- atime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- atimeMs: Float!
- base: String!
- birthTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- birthtime: Date @deprecated(reason: "Use `birthTime` instead")
- birthtimeMs: Float @deprecated(reason: "Use `birthTime` instead")
- changeTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- children: [Node!]!
- ctime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- ctimeMs: Float!
- dev: Int!
- dir: String!
- ext: String!
- extension: String!
- gid: Int!
- id: ID!
- ino: Float!
- internal: Internal!
- mode: Int!
- modifiedTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- mtime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- mtimeMs: Float!
- name: String!
- nlink: Int!
- parent: Node
- prettySize: String!
- rdev: Int!
- relativeDirectory: String!
- relativePath: String!
- root: String!
- size: Int!
- sourceInstanceName: String!
- uid: Int!
-}
-
-type DirectoryConnection {
- distinct(field: DirectoryFieldSelector!): [String!]!
- edges: [DirectoryEdge!]!
- group(field: DirectoryFieldSelector!, limit: Int, skip: Int): [DirectoryGroupConnection!]!
- max(field: DirectoryFieldSelector!): Float
- min(field: DirectoryFieldSelector!): Float
- nodes: [Directory!]!
- pageInfo: PageInfo!
- sum(field: DirectoryFieldSelector!): Float
- totalCount: Int!
-}
-
-type DirectoryEdge {
- next: Directory
- node: Directory!
- previous: Directory
-}
-
-input DirectoryFieldSelector {
- absolutePath: FieldSelectorEnum
- accessTime: FieldSelectorEnum
- atime: FieldSelectorEnum
- atimeMs: FieldSelectorEnum
- base: FieldSelectorEnum
- birthTime: FieldSelectorEnum
- birthtime: FieldSelectorEnum
- birthtimeMs: FieldSelectorEnum
- changeTime: FieldSelectorEnum
- children: NodeFieldSelector
- ctime: FieldSelectorEnum
- ctimeMs: FieldSelectorEnum
- dev: FieldSelectorEnum
- dir: FieldSelectorEnum
- ext: FieldSelectorEnum
- extension: FieldSelectorEnum
- gid: FieldSelectorEnum
- id: FieldSelectorEnum
- ino: FieldSelectorEnum
- internal: InternalFieldSelector
- mode: FieldSelectorEnum
- modifiedTime: FieldSelectorEnum
- mtime: FieldSelectorEnum
- mtimeMs: FieldSelectorEnum
- name: FieldSelectorEnum
- nlink: FieldSelectorEnum
- parent: NodeFieldSelector
- prettySize: FieldSelectorEnum
- rdev: FieldSelectorEnum
- relativeDirectory: FieldSelectorEnum
- relativePath: FieldSelectorEnum
- root: FieldSelectorEnum
- size: FieldSelectorEnum
- sourceInstanceName: FieldSelectorEnum
- uid: FieldSelectorEnum
-}
-
-input DirectoryFilterInput {
- absolutePath: StringQueryOperatorInput
- accessTime: DateQueryOperatorInput
- atime: DateQueryOperatorInput
- atimeMs: FloatQueryOperatorInput
- base: StringQueryOperatorInput
- birthTime: DateQueryOperatorInput
- birthtime: DateQueryOperatorInput
- birthtimeMs: FloatQueryOperatorInput
- changeTime: DateQueryOperatorInput
- children: NodeFilterListInput
- ctime: DateQueryOperatorInput
- ctimeMs: FloatQueryOperatorInput
- dev: IntQueryOperatorInput
- dir: StringQueryOperatorInput
- ext: StringQueryOperatorInput
- extension: StringQueryOperatorInput
- gid: IntQueryOperatorInput
- id: StringQueryOperatorInput
- ino: FloatQueryOperatorInput
- internal: InternalFilterInput
- mode: IntQueryOperatorInput
- modifiedTime: DateQueryOperatorInput
- mtime: DateQueryOperatorInput
- mtimeMs: FloatQueryOperatorInput
- name: StringQueryOperatorInput
- nlink: IntQueryOperatorInput
- parent: NodeFilterInput
- prettySize: StringQueryOperatorInput
- rdev: IntQueryOperatorInput
- relativeDirectory: StringQueryOperatorInput
- relativePath: StringQueryOperatorInput
- root: StringQueryOperatorInput
- size: IntQueryOperatorInput
- sourceInstanceName: StringQueryOperatorInput
- uid: IntQueryOperatorInput
-}
-
-type DirectoryGroupConnection {
- distinct(field: DirectoryFieldSelector!): [String!]!
- edges: [DirectoryEdge!]!
- field: String!
- fieldValue: String
- group(field: DirectoryFieldSelector!, limit: Int, skip: Int): [DirectoryGroupConnection!]!
- max(field: DirectoryFieldSelector!): Float
- min(field: DirectoryFieldSelector!): Float
- nodes: [Directory!]!
- pageInfo: PageInfo!
- sum(field: DirectoryFieldSelector!): Float
- totalCount: Int!
-}
-
-input DirectorySortInput {
- absolutePath: SortOrderEnum
- accessTime: SortOrderEnum
- atime: SortOrderEnum
- atimeMs: SortOrderEnum
- base: SortOrderEnum
- birthTime: SortOrderEnum
- birthtime: SortOrderEnum
- birthtimeMs: SortOrderEnum
- changeTime: SortOrderEnum
- children: NodeSortInput
- ctime: SortOrderEnum
- ctimeMs: SortOrderEnum
- dev: SortOrderEnum
- dir: SortOrderEnum
- ext: SortOrderEnum
- extension: SortOrderEnum
- gid: SortOrderEnum
- id: SortOrderEnum
- ino: SortOrderEnum
- internal: InternalSortInput
- mode: SortOrderEnum
- modifiedTime: SortOrderEnum
- mtime: SortOrderEnum
- mtimeMs: SortOrderEnum
- name: SortOrderEnum
- nlink: SortOrderEnum
- parent: NodeSortInput
- prettySize: SortOrderEnum
- rdev: SortOrderEnum
- relativeDirectory: SortOrderEnum
- relativePath: SortOrderEnum
- root: SortOrderEnum
- size: SortOrderEnum
- sourceInstanceName: SortOrderEnum
- uid: SortOrderEnum
-}
-
-input DuotoneGradient {
- highlight: String!
- opacity: Int
- shadow: String!
-}
-
-enum FieldSelectorEnum {
- SELECT
-}
-
-type File implements Node {
- absolutePath: String!
- accessTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- atime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- atimeMs: Float!
- base: String!
- birthTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- birthtime: Date @deprecated(reason: "Use `birthTime` instead")
- birthtimeMs: Float @deprecated(reason: "Use `birthTime` instead")
- blksize: Int
- blocks: Int
- changeTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
-
- """
- Returns the first child node of type componentMetaJson or null if there are no children of given type on this node
- """
- childComponentMetaJson: componentMetaJson
-
- """
- Returns the first child node of type ImageSharp or null if there are no children of given type on this node
- """
- childImageSharp: ImageSharp
-
- """
- Returns the first child node of type Mdx or null if there are no children of given type on this node
- """
- childMdx: Mdx
-
- """
- Returns the first child node of type primitiveMetaJson or null if there are no children of given type on this node
- """
- childPrimitiveMetaJson: primitiveMetaJson
- children: [Node!]!
-
- """Returns all children nodes filtered by type componentMetaJson"""
- childrenComponentMetaJson: [componentMetaJson]
-
- """Returns all children nodes filtered by type ImageSharp"""
- childrenImageSharp: [ImageSharp]
-
- """Returns all children nodes filtered by type Mdx"""
- childrenMdx: [Mdx]
-
- """Returns all children nodes filtered by type primitiveMetaJson"""
- childrenPrimitiveMetaJson: [primitiveMetaJson]
- ctime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- ctimeMs: Float!
- dev: Int!
- dir: String!
- ext: String!
- extension: String!
- gid: Int!
- id: ID!
- ino: Float!
- internal: Internal!
- mode: Int!
- modifiedTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- mtime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date!
- mtimeMs: Float!
- name: String!
- nlink: Int!
- parent: Node
- prettySize: String!
-
- """Copy file to static directory and return public url to it"""
- publicURL: String
- rdev: Int!
- relativeDirectory: String!
- relativePath: String!
- root: String!
- size: Int!
- sourceInstanceName: String!
- uid: Int!
-}
-
-type FileConnection {
- distinct(field: FileFieldSelector!): [String!]!
- edges: [FileEdge!]!
- group(field: FileFieldSelector!, limit: Int, skip: Int): [FileGroupConnection!]!
- max(field: FileFieldSelector!): Float
- min(field: FileFieldSelector!): Float
- nodes: [File!]!
- pageInfo: PageInfo!
- sum(field: FileFieldSelector!): Float
- totalCount: Int!
-}
-
-type FileEdge {
- next: File
- node: File!
- previous: File
-}
-
-input FileFieldSelector {
- absolutePath: FieldSelectorEnum
- accessTime: FieldSelectorEnum
- atime: FieldSelectorEnum
- atimeMs: FieldSelectorEnum
- base: FieldSelectorEnum
- birthTime: FieldSelectorEnum
- birthtime: FieldSelectorEnum
- birthtimeMs: FieldSelectorEnum
- blksize: FieldSelectorEnum
- blocks: FieldSelectorEnum
- changeTime: FieldSelectorEnum
- childComponentMetaJson: componentMetaJsonFieldSelector
- childImageSharp: ImageSharpFieldSelector
- childMdx: MdxFieldSelector
- childPrimitiveMetaJson: primitiveMetaJsonFieldSelector
- children: NodeFieldSelector
- childrenComponentMetaJson: componentMetaJsonFieldSelector
- childrenImageSharp: ImageSharpFieldSelector
- childrenMdx: MdxFieldSelector
- childrenPrimitiveMetaJson: primitiveMetaJsonFieldSelector
- ctime: FieldSelectorEnum
- ctimeMs: FieldSelectorEnum
- dev: FieldSelectorEnum
- dir: FieldSelectorEnum
- ext: FieldSelectorEnum
- extension: FieldSelectorEnum
- gid: FieldSelectorEnum
- id: FieldSelectorEnum
- ino: FieldSelectorEnum
- internal: InternalFieldSelector
- mode: FieldSelectorEnum
- modifiedTime: FieldSelectorEnum
- mtime: FieldSelectorEnum
- mtimeMs: FieldSelectorEnum
- name: FieldSelectorEnum
- nlink: FieldSelectorEnum
- parent: NodeFieldSelector
- prettySize: FieldSelectorEnum
- publicURL: FieldSelectorEnum
- rdev: FieldSelectorEnum
- relativeDirectory: FieldSelectorEnum
- relativePath: FieldSelectorEnum
- root: FieldSelectorEnum
- size: FieldSelectorEnum
- sourceInstanceName: FieldSelectorEnum
- uid: FieldSelectorEnum
-}
-
-input FileFilterInput {
- absolutePath: StringQueryOperatorInput
- accessTime: DateQueryOperatorInput
- atime: DateQueryOperatorInput
- atimeMs: FloatQueryOperatorInput
- base: StringQueryOperatorInput
- birthTime: DateQueryOperatorInput
- birthtime: DateQueryOperatorInput
- birthtimeMs: FloatQueryOperatorInput
- blksize: IntQueryOperatorInput
- blocks: IntQueryOperatorInput
- changeTime: DateQueryOperatorInput
- childComponentMetaJson: componentMetaJsonFilterInput
- childImageSharp: ImageSharpFilterInput
- childMdx: MdxFilterInput
- childPrimitiveMetaJson: primitiveMetaJsonFilterInput
- children: NodeFilterListInput
- childrenComponentMetaJson: componentMetaJsonFilterListInput
- childrenImageSharp: ImageSharpFilterListInput
- childrenMdx: MdxFilterListInput
- childrenPrimitiveMetaJson: primitiveMetaJsonFilterListInput
- ctime: DateQueryOperatorInput
- ctimeMs: FloatQueryOperatorInput
- dev: IntQueryOperatorInput
- dir: StringQueryOperatorInput
- ext: StringQueryOperatorInput
- extension: StringQueryOperatorInput
- gid: IntQueryOperatorInput
- id: StringQueryOperatorInput
- ino: FloatQueryOperatorInput
- internal: InternalFilterInput
- mode: IntQueryOperatorInput
- modifiedTime: DateQueryOperatorInput
- mtime: DateQueryOperatorInput
- mtimeMs: FloatQueryOperatorInput
- name: StringQueryOperatorInput
- nlink: IntQueryOperatorInput
- parent: NodeFilterInput
- prettySize: StringQueryOperatorInput
- publicURL: StringQueryOperatorInput
- rdev: IntQueryOperatorInput
- relativeDirectory: StringQueryOperatorInput
- relativePath: StringQueryOperatorInput
- root: StringQueryOperatorInput
- size: IntQueryOperatorInput
- sourceInstanceName: StringQueryOperatorInput
- uid: IntQueryOperatorInput
-}
-
-type FileGroupConnection {
- distinct(field: FileFieldSelector!): [String!]!
- edges: [FileEdge!]!
- field: String!
- fieldValue: String
- group(field: FileFieldSelector!, limit: Int, skip: Int): [FileGroupConnection!]!
- max(field: FileFieldSelector!): Float
- min(field: FileFieldSelector!): Float
- nodes: [File!]!
- pageInfo: PageInfo!
- sum(field: FileFieldSelector!): Float
- totalCount: Int!
-}
-
-input FileSortInput {
- absolutePath: SortOrderEnum
- accessTime: SortOrderEnum
- atime: SortOrderEnum
- atimeMs: SortOrderEnum
- base: SortOrderEnum
- birthTime: SortOrderEnum
- birthtime: SortOrderEnum
- birthtimeMs: SortOrderEnum
- blksize: SortOrderEnum
- blocks: SortOrderEnum
- changeTime: SortOrderEnum
- childComponentMetaJson: componentMetaJsonSortInput
- childImageSharp: ImageSharpSortInput
- childMdx: MdxSortInput
- childPrimitiveMetaJson: primitiveMetaJsonSortInput
- children: NodeSortInput
- childrenComponentMetaJson: componentMetaJsonSortInput
- childrenImageSharp: ImageSharpSortInput
- childrenMdx: MdxSortInput
- childrenPrimitiveMetaJson: primitiveMetaJsonSortInput
- ctime: SortOrderEnum
- ctimeMs: SortOrderEnum
- dev: SortOrderEnum
- dir: SortOrderEnum
- ext: SortOrderEnum
- extension: SortOrderEnum
- gid: SortOrderEnum
- id: SortOrderEnum
- ino: SortOrderEnum
- internal: InternalSortInput
- mode: SortOrderEnum
- modifiedTime: SortOrderEnum
- mtime: SortOrderEnum
- mtimeMs: SortOrderEnum
- name: SortOrderEnum
- nlink: SortOrderEnum
- parent: NodeSortInput
- prettySize: SortOrderEnum
- publicURL: SortOrderEnum
- rdev: SortOrderEnum
- relativeDirectory: SortOrderEnum
- relativePath: SortOrderEnum
- root: SortOrderEnum
- size: SortOrderEnum
- sourceInstanceName: SortOrderEnum
- uid: SortOrderEnum
-}
-
-input FloatQueryOperatorInput {
- eq: Float
- gt: Float
- gte: Float
- in: [Float]
- lt: Float
- lte: Float
- ne: Float
- nin: [Float]
-}
-
-scalar GatsbyImageData
-
-input GatsbyImageDataQueryOperatorInput {
- eq: GatsbyImageData
- in: [GatsbyImageData]
- ne: GatsbyImageData
- nin: [GatsbyImageData]
-}
-
-enum GatsbyImageFormat {
- AUTO
- AVIF
- JPG
- NO_CHANGE
- PNG
- WEBP
-}
-
-enum GatsbyImageLayout {
- CONSTRAINED
- FIXED
- FULL_WIDTH
-}
-
-enum GatsbyImagePlaceholder {
- BLURRED
- DOMINANT_COLOR
- NONE
- TRACED_SVG
-}
-
-enum ImageCropFocus {
- ATTENTION
- CENTER
- EAST
- ENTROPY
- NORTH
- NORTHEAST
- NORTHWEST
- SOUTH
- SOUTHEAST
- SOUTHWEST
- WEST
-}
-
-enum ImageFit {
- CONTAIN
- COVER
- FILL
- INSIDE
- OUTSIDE
-}
-
-enum ImageFormat {
- AUTO
- AVIF
- JPG
- NO_CHANGE
- PNG
- WEBP
-}
-
-enum ImageLayout {
- CONSTRAINED
- FIXED
- FULL_WIDTH
-}
-
-enum ImagePlaceholder {
- BLURRED
- DOMINANT_COLOR
- NONE
- TRACED_SVG
-}
-
-type ImageSharp implements Node {
- children: [Node!]!
- fixed(background: String = "rgba(0,0,0,1)", base64Width: Int, cropFocus: ImageCropFocus = ATTENTION, duotone: DuotoneGradient = {}, fit: ImageFit = COVER, grayscale: Boolean = false, height: Int, jpegProgressive: Boolean = true, jpegQuality: Int, pngCompressionSpeed: Int = 4, pngQuality: Int, quality: Int, rotate: Int = 0, toFormat: ImageFormat = NO_CHANGE, toFormatBase64: ImageFormat = NO_CHANGE, traceSVG: Potrace = {}, trim: Float = 0, webpQuality: Int, width: Int): ImageSharpFixed
- fluid(
- background: String = "rgba(0,0,0,1)"
- base64Width: Int
- cropFocus: ImageCropFocus = ATTENTION
- duotone: DuotoneGradient = {}
- fit: ImageFit = COVER
- grayscale: Boolean = false
- jpegProgressive: Boolean = true
- jpegQuality: Int
- maxHeight: Int
- maxWidth: Int
- pngCompressionSpeed: Int = 4
- pngQuality: Int
- quality: Int
- rotate: Int = 0
- sizes: String = ""
-
- """
- A list of image widths to be generated. Example: [ 200, 340, 520, 890 ]
- """
- srcSetBreakpoints: [Int] = []
- toFormat: ImageFormat = NO_CHANGE
- toFormatBase64: ImageFormat = NO_CHANGE
- traceSVG: Potrace = {}
- trim: Float = 0
- webpQuality: Int
- ): ImageSharpFluid
- gatsbyImageData(
- """
- If set along with width or height, this will set the value of the other dimension to match the provided aspect ratio, cropping the image if needed.
- If neither width or height is provided, height will be set based on the intrinsic width of the source image.
- """
- aspectRatio: Float
-
- """Options to pass to sharp when generating AVIF images."""
- avifOptions: AVIFOptions
-
- """
- Background color applied to the wrapper. Also passed to sharp to use as a background when "letterboxing" an image to another aspect ratio.
- """
- backgroundColor: String
-
- """
- Options for the low-resolution placeholder image. Set placeholder to "BLURRED" to use this
- """
- blurredOptions: BlurredOptions
-
- """
- Specifies the image widths to generate. For FIXED and CONSTRAINED images it is better to allow these to be determined automatically,
- based on the image size. For FULL_WIDTH images this can be used to override the default, which is [750, 1080, 1366, 1920].
- It will never generate any images larger than the source.
- """
- breakpoints: [Int]
-
- """
- The image formats to generate. Valid values are "AUTO" (meaning the same format as the source image), "JPG", "PNG", "WEBP" and "AVIF".
- The default value is [AUTO, WEBP], and you should rarely need to change this. Take care if you specify JPG or PNG when you do
- not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying
- both PNG and JPG is not supported and will be ignored.
- """
- formats: [ImageFormat]
-
- """
- The display height of the generated image for layout = FIXED, and the maximum display height of the largest image for layout = CONSTRAINED.
- The image will be cropped if the aspect ratio does not match the source image. If omitted, it is calculated from the supplied width,
- matching the aspect ratio of the source image.
- """
- height: Int
-
- """Options to pass to sharp when generating JPG images."""
- jpgOptions: JPGOptions
-
- """
- The layout for the image.
- FIXED: A static image sized, that does not resize according to the screen width
- FULL_WIDTH: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen.
- CONSTRAINED: Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size.
- """
- layout: ImageLayout = CONSTRAINED
-
- """
- A list of image pixel densities to generate. It will never generate images larger than the source, and will always include a 1x image.
- Default is [ 1, 2 ] for FIXED images, meaning 1x and 2x and [0.25, 0.5, 1, 2] for CONSTRAINED. In this case, an image with a constrained layout
- and width = 400 would generate images at 100, 200, 400 and 800px wide. Ignored for FULL_WIDTH images, which use breakpoints instead
- """
- outputPixelDensities: [Float]
-
- """
- Format of generated placeholder image, displayed while the main image loads.
- BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)
- DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.
- TRACED_SVG: a low-resolution traced SVG of the image.
- NONE: no placeholder. Set "background" to use a fixed background color.
- """
- placeholder: ImagePlaceholder
-
- """Options to pass to sharp when generating PNG images."""
- pngOptions: PNGOptions
-
- """The default quality. This is overridden by any format-specific options"""
- quality: Int
-
- """
- The "sizes" property, passed to the img tag. This describes the display size of the image.
- This does not affect the generated images, but is used by the browser to decide which images to download.
- You should usually leave this blank, and a suitable value will be calculated. The exception is if a FULL_WIDTH image
- does not actually span the full width of the screen, in which case you should pass the correct size here.
- """
- sizes: String
-
- """
- Options for traced placeholder SVGs. You also should set placeholder to "TRACED_SVG".
- """
- tracedSVGOptions: Potrace
-
- """
- Options to pass to sharp to control cropping and other image manipulations.
- """
- transformOptions: TransformOptions
-
- """Options to pass to sharp when generating WebP images."""
- webpOptions: WebPOptions
-
- """
- The display width of the generated image for layout = FIXED, and the maximum display width of the largest image for layout = CONSTRAINED.
- Ignored if layout = FLUID.
- """
- width: Int
- ): GatsbyImageData!
- id: ID!
- internal: Internal!
- original: ImageSharpOriginal
- parent: Node
- resize(background: String = "rgba(0,0,0,1)", base64: Boolean = false, cropFocus: ImageCropFocus = ATTENTION, duotone: DuotoneGradient = {}, fit: ImageFit = COVER, grayscale: Boolean = false, height: Int, jpegProgressive: Boolean = true, jpegQuality: Int, pngCompressionLevel: Int = 9, pngCompressionSpeed: Int = 4, pngQuality: Int, quality: Int, rotate: Int = 0, toFormat: ImageFormat = NO_CHANGE, traceSVG: Potrace = {}, trim: Float = 0, webpQuality: Int, width: Int): ImageSharpResize
-}
-
-type ImageSharpConnection {
- distinct(field: ImageSharpFieldSelector!): [String!]!
- edges: [ImageSharpEdge!]!
- group(field: ImageSharpFieldSelector!, limit: Int, skip: Int): [ImageSharpGroupConnection!]!
- max(field: ImageSharpFieldSelector!): Float
- min(field: ImageSharpFieldSelector!): Float
- nodes: [ImageSharp!]!
- pageInfo: PageInfo!
- sum(field: ImageSharpFieldSelector!): Float
- totalCount: Int!
-}
-
-type ImageSharpEdge {
- next: ImageSharp
- node: ImageSharp!
- previous: ImageSharp
-}
-
-input ImageSharpFieldSelector {
- children: NodeFieldSelector
- fixed: ImageSharpFixedFieldSelector
- fluid: ImageSharpFluidFieldSelector
- gatsbyImageData: FieldSelectorEnum
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- original: ImageSharpOriginalFieldSelector
- parent: NodeFieldSelector
- resize: ImageSharpResizeFieldSelector
-}
-
-input ImageSharpFilterInput {
- children: NodeFilterListInput
- fixed: ImageSharpFixedFilterInput
- fluid: ImageSharpFluidFilterInput
- gatsbyImageData: GatsbyImageDataQueryOperatorInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- original: ImageSharpOriginalFilterInput
- parent: NodeFilterInput
- resize: ImageSharpResizeFilterInput
-}
-
-input ImageSharpFilterListInput {
- elemMatch: ImageSharpFilterInput
-}
-
-type ImageSharpFixed {
- aspectRatio: Float
- base64: String
- height: Float!
- originalName: String
- src: String!
- srcSet: String!
- srcSetWebp: String
- srcWebp: String
- tracedSVG: String
- width: Float!
-}
-
-input ImageSharpFixedFieldSelector {
- aspectRatio: FieldSelectorEnum
- base64: FieldSelectorEnum
- height: FieldSelectorEnum
- originalName: FieldSelectorEnum
- src: FieldSelectorEnum
- srcSet: FieldSelectorEnum
- srcSetWebp: FieldSelectorEnum
- srcWebp: FieldSelectorEnum
- tracedSVG: FieldSelectorEnum
- width: FieldSelectorEnum
-}
-
-input ImageSharpFixedFilterInput {
- aspectRatio: FloatQueryOperatorInput
- base64: StringQueryOperatorInput
- height: FloatQueryOperatorInput
- originalName: StringQueryOperatorInput
- src: StringQueryOperatorInput
- srcSet: StringQueryOperatorInput
- srcSetWebp: StringQueryOperatorInput
- srcWebp: StringQueryOperatorInput
- tracedSVG: StringQueryOperatorInput
- width: FloatQueryOperatorInput
-}
-
-input ImageSharpFixedSortInput {
- aspectRatio: SortOrderEnum
- base64: SortOrderEnum
- height: SortOrderEnum
- originalName: SortOrderEnum
- src: SortOrderEnum
- srcSet: SortOrderEnum
- srcSetWebp: SortOrderEnum
- srcWebp: SortOrderEnum
- tracedSVG: SortOrderEnum
- width: SortOrderEnum
-}
-
-type ImageSharpFluid {
- aspectRatio: Float!
- base64: String
- originalImg: String
- originalName: String
- presentationHeight: Int!
- presentationWidth: Int!
- sizes: String!
- src: String!
- srcSet: String!
- srcSetWebp: String
- srcWebp: String
- tracedSVG: String
-}
-
-input ImageSharpFluidFieldSelector {
- aspectRatio: FieldSelectorEnum
- base64: FieldSelectorEnum
- originalImg: FieldSelectorEnum
- originalName: FieldSelectorEnum
- presentationHeight: FieldSelectorEnum
- presentationWidth: FieldSelectorEnum
- sizes: FieldSelectorEnum
- src: FieldSelectorEnum
- srcSet: FieldSelectorEnum
- srcSetWebp: FieldSelectorEnum
- srcWebp: FieldSelectorEnum
- tracedSVG: FieldSelectorEnum
-}
-
-input ImageSharpFluidFilterInput {
- aspectRatio: FloatQueryOperatorInput
- base64: StringQueryOperatorInput
- originalImg: StringQueryOperatorInput
- originalName: StringQueryOperatorInput
- presentationHeight: IntQueryOperatorInput
- presentationWidth: IntQueryOperatorInput
- sizes: StringQueryOperatorInput
- src: StringQueryOperatorInput
- srcSet: StringQueryOperatorInput
- srcSetWebp: StringQueryOperatorInput
- srcWebp: StringQueryOperatorInput
- tracedSVG: StringQueryOperatorInput
-}
-
-input ImageSharpFluidSortInput {
- aspectRatio: SortOrderEnum
- base64: SortOrderEnum
- originalImg: SortOrderEnum
- originalName: SortOrderEnum
- presentationHeight: SortOrderEnum
- presentationWidth: SortOrderEnum
- sizes: SortOrderEnum
- src: SortOrderEnum
- srcSet: SortOrderEnum
- srcSetWebp: SortOrderEnum
- srcWebp: SortOrderEnum
- tracedSVG: SortOrderEnum
-}
-
-type ImageSharpGroupConnection {
- distinct(field: ImageSharpFieldSelector!): [String!]!
- edges: [ImageSharpEdge!]!
- field: String!
- fieldValue: String
- group(field: ImageSharpFieldSelector!, limit: Int, skip: Int): [ImageSharpGroupConnection!]!
- max(field: ImageSharpFieldSelector!): Float
- min(field: ImageSharpFieldSelector!): Float
- nodes: [ImageSharp!]!
- pageInfo: PageInfo!
- sum(field: ImageSharpFieldSelector!): Float
- totalCount: Int!
-}
-
-type ImageSharpOriginal {
- height: Float
- src: String
- width: Float
-}
-
-input ImageSharpOriginalFieldSelector {
- height: FieldSelectorEnum
- src: FieldSelectorEnum
- width: FieldSelectorEnum
-}
-
-input ImageSharpOriginalFilterInput {
- height: FloatQueryOperatorInput
- src: StringQueryOperatorInput
- width: FloatQueryOperatorInput
-}
-
-input ImageSharpOriginalSortInput {
- height: SortOrderEnum
- src: SortOrderEnum
- width: SortOrderEnum
-}
-
-type ImageSharpResize {
- aspectRatio: Float
- height: Int
- originalName: String
- src: String
- tracedSVG: String
- width: Int
-}
-
-input ImageSharpResizeFieldSelector {
- aspectRatio: FieldSelectorEnum
- height: FieldSelectorEnum
- originalName: FieldSelectorEnum
- src: FieldSelectorEnum
- tracedSVG: FieldSelectorEnum
- width: FieldSelectorEnum
-}
-
-input ImageSharpResizeFilterInput {
- aspectRatio: FloatQueryOperatorInput
- height: IntQueryOperatorInput
- originalName: StringQueryOperatorInput
- src: StringQueryOperatorInput
- tracedSVG: StringQueryOperatorInput
- width: IntQueryOperatorInput
-}
-
-input ImageSharpResizeSortInput {
- aspectRatio: SortOrderEnum
- height: SortOrderEnum
- originalName: SortOrderEnum
- src: SortOrderEnum
- tracedSVG: SortOrderEnum
- width: SortOrderEnum
-}
-
-input ImageSharpSortInput {
- children: NodeSortInput
- fixed: ImageSharpFixedSortInput
- fluid: ImageSharpFluidSortInput
- gatsbyImageData: SortOrderEnum
- id: SortOrderEnum
- internal: InternalSortInput
- original: ImageSharpOriginalSortInput
- parent: NodeSortInput
- resize: ImageSharpResizeSortInput
-}
-
-input IntQueryOperatorInput {
- eq: Int
- gt: Int
- gte: Int
- in: [Int]
- lt: Int
- lte: Int
- ne: Int
- nin: [Int]
-}
-
-type Internal {
- content: String
- contentDigest: String!
- contentFilePath: String
- description: String
- fieldOwners: [String]
- ignoreType: Boolean
- mediaType: String
- owner: String!
- type: String!
-}
-
-input InternalFieldSelector {
- content: FieldSelectorEnum
- contentDigest: FieldSelectorEnum
- contentFilePath: FieldSelectorEnum
- description: FieldSelectorEnum
- fieldOwners: FieldSelectorEnum
- ignoreType: FieldSelectorEnum
- mediaType: FieldSelectorEnum
- owner: FieldSelectorEnum
- type: FieldSelectorEnum
-}
-
-input InternalFilterInput {
- content: StringQueryOperatorInput
- contentDigest: StringQueryOperatorInput
- contentFilePath: StringQueryOperatorInput
- description: StringQueryOperatorInput
- fieldOwners: StringQueryOperatorInput
- ignoreType: BooleanQueryOperatorInput
- mediaType: StringQueryOperatorInput
- owner: StringQueryOperatorInput
- type: StringQueryOperatorInput
-}
-
-input InternalSortInput {
- content: SortOrderEnum
- contentDigest: SortOrderEnum
- contentFilePath: SortOrderEnum
- description: SortOrderEnum
- fieldOwners: SortOrderEnum
- ignoreType: SortOrderEnum
- mediaType: SortOrderEnum
- owner: SortOrderEnum
- type: SortOrderEnum
-}
-
-input JPGOptions {
- progressive: Boolean = true
- quality: Int
-}
-
-"""
-The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
-"""
-scalar JSON
-
-input JSONQueryOperatorInput {
- eq: JSON
- glob: JSON
- in: [JSON]
- ne: JSON
- nin: [JSON]
- regex: JSON
-}
-
-type LocalSearchPages implements Node {
- children: [Node!]!
-
- """The search engine used to create the index."""
- engine: String!
- id: ID!
-
- """The search index created using the selected engine."""
- index: String!
- internal: Internal!
-
- """The name of the index."""
- name: String!
- parent: Node
-
- """
- Save the index to the site's static directory and return a public URL to it.
- """
- publicIndexURL: String!
-
- """
- Save the store to the site's static directory and return a public URL to it.
- """
- publicStoreURL: String!
-
- """A JSON object used to map search results to their data."""
- store: JSON!
-}
-
-type LocalSearchPagesConnection {
- distinct(field: LocalSearchPagesFieldSelector!): [String!]!
- edges: [LocalSearchPagesEdge!]!
- group(field: LocalSearchPagesFieldSelector!, limit: Int, skip: Int): [LocalSearchPagesGroupConnection!]!
- max(field: LocalSearchPagesFieldSelector!): Float
- min(field: LocalSearchPagesFieldSelector!): Float
- nodes: [LocalSearchPages!]!
- pageInfo: PageInfo!
- sum(field: LocalSearchPagesFieldSelector!): Float
- totalCount: Int!
-}
-
-type LocalSearchPagesEdge {
- next: LocalSearchPages
- node: LocalSearchPages!
- previous: LocalSearchPages
-}
-
-input LocalSearchPagesFieldSelector {
- children: NodeFieldSelector
- engine: FieldSelectorEnum
- id: FieldSelectorEnum
- index: FieldSelectorEnum
- internal: InternalFieldSelector
- name: FieldSelectorEnum
- parent: NodeFieldSelector
- publicIndexURL: FieldSelectorEnum
- publicStoreURL: FieldSelectorEnum
- store: FieldSelectorEnum
-}
-
-input LocalSearchPagesFilterInput {
- children: NodeFilterListInput
- engine: StringQueryOperatorInput
- id: StringQueryOperatorInput
- index: StringQueryOperatorInput
- internal: InternalFilterInput
- name: StringQueryOperatorInput
- parent: NodeFilterInput
- publicIndexURL: StringQueryOperatorInput
- publicStoreURL: StringQueryOperatorInput
- store: JSONQueryOperatorInput
-}
-
-type LocalSearchPagesGroupConnection {
- distinct(field: LocalSearchPagesFieldSelector!): [String!]!
- edges: [LocalSearchPagesEdge!]!
- field: String!
- fieldValue: String
- group(field: LocalSearchPagesFieldSelector!, limit: Int, skip: Int): [LocalSearchPagesGroupConnection!]!
- max(field: LocalSearchPagesFieldSelector!): Float
- min(field: LocalSearchPagesFieldSelector!): Float
- nodes: [LocalSearchPages!]!
- pageInfo: PageInfo!
- sum(field: LocalSearchPagesFieldSelector!): Float
- totalCount: Int!
-}
-
-input LocalSearchPagesSortInput {
- children: NodeSortInput
- engine: SortOrderEnum
- id: SortOrderEnum
- index: SortOrderEnum
- internal: InternalSortInput
- name: SortOrderEnum
- parent: NodeSortInput
- publicIndexURL: SortOrderEnum
- publicStoreURL: SortOrderEnum
- store: SortOrderEnum
-}
-
-type Mdx implements Node {
- body: String
- children: [Node!]!
- excerpt(pruneLength: Int = 140): String
- frontmatter: MdxFrontmatter
- id: ID!
- internal: Internal!
- parent: Node
- tableOfContents(maxDepth: Int): JSON
-}
-
-type MdxConnection {
- distinct(field: MdxFieldSelector!): [String!]!
- edges: [MdxEdge!]!
- group(field: MdxFieldSelector!, limit: Int, skip: Int): [MdxGroupConnection!]!
- max(field: MdxFieldSelector!): Float
- min(field: MdxFieldSelector!): Float
- nodes: [Mdx!]!
- pageInfo: PageInfo!
- sum(field: MdxFieldSelector!): Float
- totalCount: Int!
-}
-
-type MdxEdge {
- next: Mdx
- node: Mdx!
- previous: Mdx
-}
-
-input MdxFieldSelector {
- body: FieldSelectorEnum
- children: NodeFieldSelector
- excerpt: FieldSelectorEnum
- frontmatter: MdxFrontmatterFieldSelector
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- parent: NodeFieldSelector
- tableOfContents: FieldSelectorEnum
-}
-
-input MdxFilterInput {
- body: StringQueryOperatorInput
- children: NodeFilterListInput
- excerpt: StringQueryOperatorInput
- frontmatter: MdxFrontmatterFilterInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- parent: NodeFilterInput
- tableOfContents: JSONQueryOperatorInput
-}
-
-input MdxFilterListInput {
- elemMatch: MdxFilterInput
-}
-
-type MdxFrontmatter {
- slug: String
-}
-
-input MdxFrontmatterFieldSelector {
- slug: FieldSelectorEnum
-}
-
-input MdxFrontmatterFilterInput {
- slug: StringQueryOperatorInput
-}
-
-input MdxFrontmatterSortInput {
- slug: SortOrderEnum
-}
-
-type MdxGroupConnection {
- distinct(field: MdxFieldSelector!): [String!]!
- edges: [MdxEdge!]!
- field: String!
- fieldValue: String
- group(field: MdxFieldSelector!, limit: Int, skip: Int): [MdxGroupConnection!]!
- max(field: MdxFieldSelector!): Float
- min(field: MdxFieldSelector!): Float
- nodes: [Mdx!]!
- pageInfo: PageInfo!
- sum(field: MdxFieldSelector!): Float
- totalCount: Int!
-}
-
-input MdxSortInput {
- body: SortOrderEnum
- children: NodeSortInput
- excerpt: SortOrderEnum
- frontmatter: MdxFrontmatterSortInput
- id: SortOrderEnum
- internal: InternalSortInput
- parent: NodeSortInput
- tableOfContents: SortOrderEnum
-}
-
-"""Node Interface"""
-interface Node {
- children: [Node!]!
- id: ID!
- internal: Internal!
- parent: Node
-}
-
-input NodeFieldSelector {
- children: NodeFieldSelector
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- parent: NodeFieldSelector
-}
-
-input NodeFilterInput {
- children: NodeFilterListInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- parent: NodeFilterInput
-}
-
-input NodeFilterListInput {
- elemMatch: NodeFilterInput
-}
-
-input NodeSortInput {
- children: NodeSortInput
- id: SortOrderEnum
- internal: InternalSortInput
- parent: NodeSortInput
-}
-
-input PNGOptions {
- compressionSpeed: Int = 4
- quality: Int
-}
-
-type PageInfo {
- currentPage: Int!
- hasNextPage: Boolean!
- hasPreviousPage: Boolean!
- itemCount: Int!
- pageCount: Int!
- perPage: Int
- totalCount: Int!
-}
-
-input Potrace {
- alphaMax: Float
- background: String
- blackOnWhite: Boolean
- color: String
- optCurve: Boolean
- optTolerance: Float
- threshold: Int
- turdSize: Float
- turnPolicy: PotraceTurnPolicy
-}
-
-enum PotraceTurnPolicy {
- TURNPOLICY_BLACK
- TURNPOLICY_LEFT
- TURNPOLICY_MAJORITY
- TURNPOLICY_MINORITY
- TURNPOLICY_RIGHT
- TURNPOLICY_WHITE
-}
-
-type Query {
- allComponentMetaJson(filter: componentMetaJsonFilterInput, limit: Int, skip: Int, sort: [componentMetaJsonSortInput]): componentMetaJsonConnection!
- allDirectory(filter: DirectoryFilterInput, limit: Int, skip: Int, sort: [DirectorySortInput]): DirectoryConnection!
- allFile(filter: FileFilterInput, limit: Int, skip: Int, sort: [FileSortInput]): FileConnection!
- allImageSharp(filter: ImageSharpFilterInput, limit: Int, skip: Int, sort: [ImageSharpSortInput]): ImageSharpConnection!
- allLocalSearchPages(filter: LocalSearchPagesFilterInput, limit: Int, skip: Int, sort: [LocalSearchPagesSortInput]): LocalSearchPagesConnection!
- allMdx(filter: MdxFilterInput, limit: Int, skip: Int, sort: [MdxSortInput]): MdxConnection!
- allPrimitiveMetaJson(filter: primitiveMetaJsonFilterInput, limit: Int, skip: Int, sort: [primitiveMetaJsonSortInput]): primitiveMetaJsonConnection!
- allSite(filter: SiteFilterInput, limit: Int, skip: Int, sort: [SiteSortInput]): SiteConnection!
- allSiteBuildMetadata(filter: SiteBuildMetadataFilterInput, limit: Int, skip: Int, sort: [SiteBuildMetadataSortInput]): SiteBuildMetadataConnection!
- allSiteFunction(filter: SiteFunctionFilterInput, limit: Int, skip: Int, sort: [SiteFunctionSortInput]): SiteFunctionConnection!
- allSitePage(filter: SitePageFilterInput, limit: Int, skip: Int, sort: [SitePageSortInput]): SitePageConnection!
- componentMetaJson(_schema: StringQueryOperatorInput, alias: StringQueryOperatorInput, children: NodeFilterListInput, description: StringQueryOperatorInput, group: StringQueryOperatorInput, id: StringQueryOperatorInput, internal: InternalFilterInput, name: StringQueryOperatorInput, parent: NodeFilterInput, platform: componentMetaJsonPlatformFilterInput, primitive: FileFilterInput, thumbnail: FileFilterInput): componentMetaJson
- directory(absolutePath: StringQueryOperatorInput, accessTime: DateQueryOperatorInput, atime: DateQueryOperatorInput, atimeMs: FloatQueryOperatorInput, base: StringQueryOperatorInput, birthTime: DateQueryOperatorInput, birthtime: DateQueryOperatorInput, birthtimeMs: FloatQueryOperatorInput, changeTime: DateQueryOperatorInput, children: NodeFilterListInput, ctime: DateQueryOperatorInput, ctimeMs: FloatQueryOperatorInput, dev: IntQueryOperatorInput, dir: StringQueryOperatorInput, ext: StringQueryOperatorInput, extension: StringQueryOperatorInput, gid: IntQueryOperatorInput, id: StringQueryOperatorInput, ino: FloatQueryOperatorInput, internal: InternalFilterInput, mode: IntQueryOperatorInput, modifiedTime: DateQueryOperatorInput, mtime: DateQueryOperatorInput, mtimeMs: FloatQueryOperatorInput, name: StringQueryOperatorInput, nlink: IntQueryOperatorInput, parent: NodeFilterInput, prettySize: StringQueryOperatorInput, rdev: IntQueryOperatorInput, relativeDirectory: StringQueryOperatorInput, relativePath: StringQueryOperatorInput, root: StringQueryOperatorInput, size: IntQueryOperatorInput, sourceInstanceName: StringQueryOperatorInput, uid: IntQueryOperatorInput): Directory
- file(absolutePath: StringQueryOperatorInput, accessTime: DateQueryOperatorInput, atime: DateQueryOperatorInput, atimeMs: FloatQueryOperatorInput, base: StringQueryOperatorInput, birthTime: DateQueryOperatorInput, birthtime: DateQueryOperatorInput, birthtimeMs: FloatQueryOperatorInput, blksize: IntQueryOperatorInput, blocks: IntQueryOperatorInput, changeTime: DateQueryOperatorInput, childComponentMetaJson: componentMetaJsonFilterInput, childImageSharp: ImageSharpFilterInput, childMdx: MdxFilterInput, childPrimitiveMetaJson: primitiveMetaJsonFilterInput, children: NodeFilterListInput, childrenComponentMetaJson: componentMetaJsonFilterListInput, childrenImageSharp: ImageSharpFilterListInput, childrenMdx: MdxFilterListInput, childrenPrimitiveMetaJson: primitiveMetaJsonFilterListInput, ctime: DateQueryOperatorInput, ctimeMs: FloatQueryOperatorInput, dev: IntQueryOperatorInput, dir: StringQueryOperatorInput, ext: StringQueryOperatorInput, extension: StringQueryOperatorInput, gid: IntQueryOperatorInput, id: StringQueryOperatorInput, ino: FloatQueryOperatorInput, internal: InternalFilterInput, mode: IntQueryOperatorInput, modifiedTime: DateQueryOperatorInput, mtime: DateQueryOperatorInput, mtimeMs: FloatQueryOperatorInput, name: StringQueryOperatorInput, nlink: IntQueryOperatorInput, parent: NodeFilterInput, prettySize: StringQueryOperatorInput, publicURL: StringQueryOperatorInput, rdev: IntQueryOperatorInput, relativeDirectory: StringQueryOperatorInput, relativePath: StringQueryOperatorInput, root: StringQueryOperatorInput, size: IntQueryOperatorInput, sourceInstanceName: StringQueryOperatorInput, uid: IntQueryOperatorInput): File
- imageSharp(children: NodeFilterListInput, fixed: ImageSharpFixedFilterInput, fluid: ImageSharpFluidFilterInput, gatsbyImageData: GatsbyImageDataQueryOperatorInput, id: StringQueryOperatorInput, internal: InternalFilterInput, original: ImageSharpOriginalFilterInput, parent: NodeFilterInput, resize: ImageSharpResizeFilterInput): ImageSharp
- localSearchPages(children: NodeFilterListInput, engine: StringQueryOperatorInput, id: StringQueryOperatorInput, index: StringQueryOperatorInput, internal: InternalFilterInput, name: StringQueryOperatorInput, parent: NodeFilterInput, publicIndexURL: StringQueryOperatorInput, publicStoreURL: StringQueryOperatorInput, store: JSONQueryOperatorInput): LocalSearchPages
- mdx(body: StringQueryOperatorInput, children: NodeFilterListInput, excerpt: StringQueryOperatorInput, frontmatter: MdxFrontmatterFilterInput, id: StringQueryOperatorInput, internal: InternalFilterInput, parent: NodeFilterInput, tableOfContents: JSONQueryOperatorInput): Mdx
- primitiveMetaJson(_schema: StringQueryOperatorInput, children: NodeFilterListInput, description: StringQueryOperatorInput, id: StringQueryOperatorInput, internal: InternalFilterInput, name: StringQueryOperatorInput, parent: NodeFilterInput, primitive: FileFilterInput, thumbnail: FileFilterInput): primitiveMetaJson
- site(buildTime: DateQueryOperatorInput, children: NodeFilterListInput, flags: SiteFlagsFilterInput, graphqlTypegen: SiteGraphqlTypegenFilterInput, id: StringQueryOperatorInput, internal: InternalFilterInput, jsxRuntime: StringQueryOperatorInput, parent: NodeFilterInput, pathPrefix: StringQueryOperatorInput, polyfill: BooleanQueryOperatorInput, siteMetadata: SiteSiteMetadataFilterInput, trailingSlash: StringQueryOperatorInput): Site
- siteBuildMetadata(buildTime: DateQueryOperatorInput, children: NodeFilterListInput, id: StringQueryOperatorInput, internal: InternalFilterInput, parent: NodeFilterInput): SiteBuildMetadata
- siteFunction(absoluteCompiledFilePath: StringQueryOperatorInput, children: NodeFilterListInput, functionRoute: StringQueryOperatorInput, id: StringQueryOperatorInput, internal: InternalFilterInput, matchPath: StringQueryOperatorInput, originalAbsoluteFilePath: StringQueryOperatorInput, originalRelativeFilePath: StringQueryOperatorInput, parent: NodeFilterInput, pluginName: StringQueryOperatorInput, relativeCompiledFilePath: StringQueryOperatorInput): SiteFunction
- sitePage(children: NodeFilterListInput, component: StringQueryOperatorInput, componentChunkName: StringQueryOperatorInput, id: StringQueryOperatorInput, internal: InternalFilterInput, internalComponentName: StringQueryOperatorInput, matchPath: StringQueryOperatorInput, pageContext: JSONQueryOperatorInput, parent: NodeFilterInput, path: StringQueryOperatorInput): SitePage
-}
-
-type Site implements Node {
- buildTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date
- children: [Node!]!
- flags: SiteFlags
- graphqlTypegen: SiteGraphqlTypegen
- id: ID!
- internal: Internal!
- jsxRuntime: String
- parent: Node
- pathPrefix: String
- polyfill: Boolean
- siteMetadata: SiteSiteMetadata
- trailingSlash: String
-}
-
-type SiteBuildMetadata implements Node {
- buildTime(
- """
- Returns the difference between this date and the current time. Defaults to "milliseconds" but you can also pass in as the measurement "years", "months", "weeks", "days", "hours", "minutes", and "seconds".
- """
- difference: String
-
- """
- Format the date using Moment.js' date tokens, e.g. `date(formatString: "YYYY MMMM DD")`. See https://momentjs.com/docs/#/displaying/format/ for documentation for different tokens.
- """
- formatString: String
-
- """Returns a string generated with Moment.js' `fromNow` function"""
- fromNow: Boolean
-
- """Configures the locale Moment.js will use to format the date."""
- locale: String
- ): Date
- children: [Node!]!
- id: ID!
- internal: Internal!
- parent: Node
-}
-
-type SiteBuildMetadataConnection {
- distinct(field: SiteBuildMetadataFieldSelector!): [String!]!
- edges: [SiteBuildMetadataEdge!]!
- group(field: SiteBuildMetadataFieldSelector!, limit: Int, skip: Int): [SiteBuildMetadataGroupConnection!]!
- max(field: SiteBuildMetadataFieldSelector!): Float
- min(field: SiteBuildMetadataFieldSelector!): Float
- nodes: [SiteBuildMetadata!]!
- pageInfo: PageInfo!
- sum(field: SiteBuildMetadataFieldSelector!): Float
- totalCount: Int!
-}
-
-type SiteBuildMetadataEdge {
- next: SiteBuildMetadata
- node: SiteBuildMetadata!
- previous: SiteBuildMetadata
-}
-
-input SiteBuildMetadataFieldSelector {
- buildTime: FieldSelectorEnum
- children: NodeFieldSelector
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- parent: NodeFieldSelector
-}
-
-input SiteBuildMetadataFilterInput {
- buildTime: DateQueryOperatorInput
- children: NodeFilterListInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- parent: NodeFilterInput
-}
-
-type SiteBuildMetadataGroupConnection {
- distinct(field: SiteBuildMetadataFieldSelector!): [String!]!
- edges: [SiteBuildMetadataEdge!]!
- field: String!
- fieldValue: String
- group(field: SiteBuildMetadataFieldSelector!, limit: Int, skip: Int): [SiteBuildMetadataGroupConnection!]!
- max(field: SiteBuildMetadataFieldSelector!): Float
- min(field: SiteBuildMetadataFieldSelector!): Float
- nodes: [SiteBuildMetadata!]!
- pageInfo: PageInfo!
- sum(field: SiteBuildMetadataFieldSelector!): Float
- totalCount: Int!
-}
-
-input SiteBuildMetadataSortInput {
- buildTime: SortOrderEnum
- children: NodeSortInput
- id: SortOrderEnum
- internal: InternalSortInput
- parent: NodeSortInput
-}
-
-type SiteConnection {
- distinct(field: SiteFieldSelector!): [String!]!
- edges: [SiteEdge!]!
- group(field: SiteFieldSelector!, limit: Int, skip: Int): [SiteGroupConnection!]!
- max(field: SiteFieldSelector!): Float
- min(field: SiteFieldSelector!): Float
- nodes: [Site!]!
- pageInfo: PageInfo!
- sum(field: SiteFieldSelector!): Float
- totalCount: Int!
-}
-
-type SiteEdge {
- next: Site
- node: Site!
- previous: Site
-}
-
-input SiteFieldSelector {
- buildTime: FieldSelectorEnum
- children: NodeFieldSelector
- flags: SiteFlagsFieldSelector
- graphqlTypegen: SiteGraphqlTypegenFieldSelector
- host: FieldSelectorEnum
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- jsxRuntime: FieldSelectorEnum
- parent: NodeFieldSelector
- pathPrefix: FieldSelectorEnum
- polyfill: FieldSelectorEnum
- port: FieldSelectorEnum
- siteMetadata: SiteSiteMetadataFieldSelector
- trailingSlash: FieldSelectorEnum
-}
-
-input SiteFilterInput {
- buildTime: DateQueryOperatorInput
- children: NodeFilterListInput
- flags: SiteFlagsFilterInput
- graphqlTypegen: SiteGraphqlTypegenFilterInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- jsxRuntime: StringQueryOperatorInput
- parent: NodeFilterInput
- pathPrefix: StringQueryOperatorInput
- polyfill: BooleanQueryOperatorInput
- siteMetadata: SiteSiteMetadataFilterInput
- trailingSlash: StringQueryOperatorInput
-}
-
-type SiteFlags {
- DEV_SSR: Boolean
-}
-
-input SiteFlagsFieldSelector {
- DEV_SSR: FieldSelectorEnum
-}
-
-input SiteFlagsFilterInput {
- DEV_SSR: BooleanQueryOperatorInput
-}
-
-input SiteFlagsSortInput {
- DEV_SSR: SortOrderEnum
-}
-
-type SiteFunction implements Node {
- absoluteCompiledFilePath: String!
- children: [Node!]!
- functionRoute: String!
- id: ID!
- internal: Internal!
- matchPath: String
- originalAbsoluteFilePath: String!
- originalRelativeFilePath: String!
- parent: Node
- pluginName: String!
- relativeCompiledFilePath: String!
-}
-
-type SiteFunctionConnection {
- distinct(field: SiteFunctionFieldSelector!): [String!]!
- edges: [SiteFunctionEdge!]!
- group(field: SiteFunctionFieldSelector!, limit: Int, skip: Int): [SiteFunctionGroupConnection!]!
- max(field: SiteFunctionFieldSelector!): Float
- min(field: SiteFunctionFieldSelector!): Float
- nodes: [SiteFunction!]!
- pageInfo: PageInfo!
- sum(field: SiteFunctionFieldSelector!): Float
- totalCount: Int!
-}
-
-type SiteFunctionEdge {
- next: SiteFunction
- node: SiteFunction!
- previous: SiteFunction
-}
-
-input SiteFunctionFieldSelector {
- absoluteCompiledFilePath: FieldSelectorEnum
- children: NodeFieldSelector
- functionRoute: FieldSelectorEnum
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- matchPath: FieldSelectorEnum
- originalAbsoluteFilePath: FieldSelectorEnum
- originalRelativeFilePath: FieldSelectorEnum
- parent: NodeFieldSelector
- pluginName: FieldSelectorEnum
- relativeCompiledFilePath: FieldSelectorEnum
-}
-
-input SiteFunctionFilterInput {
- absoluteCompiledFilePath: StringQueryOperatorInput
- children: NodeFilterListInput
- functionRoute: StringQueryOperatorInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- matchPath: StringQueryOperatorInput
- originalAbsoluteFilePath: StringQueryOperatorInput
- originalRelativeFilePath: StringQueryOperatorInput
- parent: NodeFilterInput
- pluginName: StringQueryOperatorInput
- relativeCompiledFilePath: StringQueryOperatorInput
-}
-
-type SiteFunctionGroupConnection {
- distinct(field: SiteFunctionFieldSelector!): [String!]!
- edges: [SiteFunctionEdge!]!
- field: String!
- fieldValue: String
- group(field: SiteFunctionFieldSelector!, limit: Int, skip: Int): [SiteFunctionGroupConnection!]!
- max(field: SiteFunctionFieldSelector!): Float
- min(field: SiteFunctionFieldSelector!): Float
- nodes: [SiteFunction!]!
- pageInfo: PageInfo!
- sum(field: SiteFunctionFieldSelector!): Float
- totalCount: Int!
-}
-
-input SiteFunctionSortInput {
- absoluteCompiledFilePath: SortOrderEnum
- children: NodeSortInput
- functionRoute: SortOrderEnum
- id: SortOrderEnum
- internal: InternalSortInput
- matchPath: SortOrderEnum
- originalAbsoluteFilePath: SortOrderEnum
- originalRelativeFilePath: SortOrderEnum
- parent: NodeSortInput
- pluginName: SortOrderEnum
- relativeCompiledFilePath: SortOrderEnum
-}
-
-type SiteGraphqlTypegen {
- documentSearchPaths: [String]
- generateOnBuild: Boolean
- typesOutputPath: String
-}
-
-input SiteGraphqlTypegenFieldSelector {
- documentSearchPaths: FieldSelectorEnum
- generateOnBuild: FieldSelectorEnum
- typesOutputPath: FieldSelectorEnum
-}
-
-input SiteGraphqlTypegenFilterInput {
- documentSearchPaths: StringQueryOperatorInput
- generateOnBuild: BooleanQueryOperatorInput
- typesOutputPath: StringQueryOperatorInput
-}
-
-input SiteGraphqlTypegenSortInput {
- documentSearchPaths: SortOrderEnum
- generateOnBuild: SortOrderEnum
- typesOutputPath: SortOrderEnum
-}
-
-type SiteGroupConnection {
- distinct(field: SiteFieldSelector!): [String!]!
- edges: [SiteEdge!]!
- field: String!
- fieldValue: String
- group(field: SiteFieldSelector!, limit: Int, skip: Int): [SiteGroupConnection!]!
- max(field: SiteFieldSelector!): Float
- min(field: SiteFieldSelector!): Float
- nodes: [Site!]!
- pageInfo: PageInfo!
- sum(field: SiteFieldSelector!): Float
- totalCount: Int!
-}
-
-type SitePage implements Node {
- children: [Node!]!
- component: String!
- componentChunkName: String!
- id: ID!
- internal: Internal!
- internalComponentName: String!
- matchPath: String
- pageContext: JSON
- parent: Node
- path: String!
-}
-
-type SitePageConnection {
- distinct(field: SitePageFieldSelector!): [String!]!
- edges: [SitePageEdge!]!
- group(field: SitePageFieldSelector!, limit: Int, skip: Int): [SitePageGroupConnection!]!
- max(field: SitePageFieldSelector!): Float
- min(field: SitePageFieldSelector!): Float
- nodes: [SitePage!]!
- pageInfo: PageInfo!
- sum(field: SitePageFieldSelector!): Float
- totalCount: Int!
-}
-
-type SitePageEdge {
- next: SitePage
- node: SitePage!
- previous: SitePage
-}
-
-input SitePageFieldSelector {
- children: NodeFieldSelector
- component: FieldSelectorEnum
- componentChunkName: FieldSelectorEnum
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- internalComponentName: FieldSelectorEnum
- matchPath: FieldSelectorEnum
- pageContext: FieldSelectorEnum
- parent: NodeFieldSelector
- path: FieldSelectorEnum
-}
-
-input SitePageFilterInput {
- children: NodeFilterListInput
- component: StringQueryOperatorInput
- componentChunkName: StringQueryOperatorInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- internalComponentName: StringQueryOperatorInput
- matchPath: StringQueryOperatorInput
- pageContext: JSONQueryOperatorInput
- parent: NodeFilterInput
- path: StringQueryOperatorInput
-}
-
-type SitePageGroupConnection {
- distinct(field: SitePageFieldSelector!): [String!]!
- edges: [SitePageEdge!]!
- field: String!
- fieldValue: String
- group(field: SitePageFieldSelector!, limit: Int, skip: Int): [SitePageGroupConnection!]!
- max(field: SitePageFieldSelector!): Float
- min(field: SitePageFieldSelector!): Float
- nodes: [SitePage!]!
- pageInfo: PageInfo!
- sum(field: SitePageFieldSelector!): Float
- totalCount: Int!
-}
-
-input SitePageSortInput {
- children: NodeSortInput
- component: SortOrderEnum
- componentChunkName: SortOrderEnum
- id: SortOrderEnum
- internal: InternalSortInput
- internalComponentName: SortOrderEnum
- matchPath: SortOrderEnum
- pageContext: SortOrderEnum
- parent: NodeSortInput
- path: SortOrderEnum
-}
-
-type SiteSiteMetadata {
- description: String
- siteUrl: String
- title: String
-}
-
-input SiteSiteMetadataFieldSelector {
- description: FieldSelectorEnum
- siteUrl: FieldSelectorEnum
- title: FieldSelectorEnum
-}
-
-input SiteSiteMetadataFilterInput {
- description: StringQueryOperatorInput
- siteUrl: StringQueryOperatorInput
- title: StringQueryOperatorInput
-}
-
-input SiteSiteMetadataSortInput {
- description: SortOrderEnum
- siteUrl: SortOrderEnum
- title: SortOrderEnum
-}
-
-input SiteSortInput {
- buildTime: SortOrderEnum
- children: NodeSortInput
- flags: SiteFlagsSortInput
- graphqlTypegen: SiteGraphqlTypegenSortInput
- host: SortOrderEnum
- id: SortOrderEnum
- internal: InternalSortInput
- jsxRuntime: SortOrderEnum
- parent: NodeSortInput
- pathPrefix: SortOrderEnum
- polyfill: SortOrderEnum
- port: SortOrderEnum
- siteMetadata: SiteSiteMetadataSortInput
- trailingSlash: SortOrderEnum
-}
-
-enum SortOrderEnum {
- ASC
- DESC
-}
-
-input StringQueryOperatorInput {
- eq: String
- glob: String
- in: [String]
- ne: String
- nin: [String]
- regex: String
-}
-
-input TransformOptions {
- cropFocus: ImageCropFocus = ATTENTION
- duotone: DuotoneGradient = {}
- fit: ImageFit = COVER
- grayscale: Boolean = false
- rotate: Int = 0
- trim: Float = 0
-}
-
-input WebPOptions {
- quality: Int
-}
-
-type componentMetaJson implements Node {
- _schema: String
- alias: String
- children: [Node!]!
- description: String
- group: String
- id: ID!
- internal: Internal!
- name: String
- parent: Node
- platform: componentMetaJsonPlatform
- primitive: File
- thumbnail: File
-}
-
-type componentMetaJsonConnection {
- distinct(field: componentMetaJsonFieldSelector!): [String!]!
- edges: [componentMetaJsonEdge!]!
- group(field: componentMetaJsonFieldSelector!, limit: Int, skip: Int): [componentMetaJsonGroupConnection!]!
- max(field: componentMetaJsonFieldSelector!): Float
- min(field: componentMetaJsonFieldSelector!): Float
- nodes: [componentMetaJson!]!
- pageInfo: PageInfo!
- sum(field: componentMetaJsonFieldSelector!): Float
- totalCount: Int!
-}
-
-type componentMetaJsonEdge {
- next: componentMetaJson
- node: componentMetaJson!
- previous: componentMetaJson
-}
-
-input componentMetaJsonFieldSelector {
- _schema: FieldSelectorEnum
- alias: FieldSelectorEnum
- children: NodeFieldSelector
- description: FieldSelectorEnum
- group: FieldSelectorEnum
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- name: FieldSelectorEnum
- parent: NodeFieldSelector
- platform: componentMetaJsonPlatformFieldSelector
- primitive: FileFieldSelector
- thumbnail: FileFieldSelector
-}
-
-input componentMetaJsonFilterInput {
- _schema: StringQueryOperatorInput
- alias: StringQueryOperatorInput
- children: NodeFilterListInput
- description: StringQueryOperatorInput
- group: StringQueryOperatorInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- name: StringQueryOperatorInput
- parent: NodeFilterInput
- platform: componentMetaJsonPlatformFilterInput
- primitive: FileFilterInput
- thumbnail: FileFilterInput
-}
-
-input componentMetaJsonFilterListInput {
- elemMatch: componentMetaJsonFilterInput
-}
-
-type componentMetaJsonGroupConnection {
- distinct(field: componentMetaJsonFieldSelector!): [String!]!
- edges: [componentMetaJsonEdge!]!
- field: String!
- fieldValue: String
- group(field: componentMetaJsonFieldSelector!, limit: Int, skip: Int): [componentMetaJsonGroupConnection!]!
- max(field: componentMetaJsonFieldSelector!): Float
- min(field: componentMetaJsonFieldSelector!): Float
- nodes: [componentMetaJson!]!
- pageInfo: PageInfo!
- sum(field: componentMetaJsonFieldSelector!): Float
- totalCount: Int!
-}
-
-type componentMetaJsonPlatform {
- android: componentMetaJsonPlatformAndroid
- docs: componentMetaJsonPlatformDocs
- figma: componentMetaJsonPlatformFigma
- ios: componentMetaJsonPlatformIos
- react: componentMetaJsonPlatformReact
-}
-
-type componentMetaJsonPlatformAndroid {
- path: String
- status: String
-}
-
-input componentMetaJsonPlatformAndroidFieldSelector {
- path: FieldSelectorEnum
- status: FieldSelectorEnum
-}
-
-input componentMetaJsonPlatformAndroidFilterInput {
- path: StringQueryOperatorInput
- status: StringQueryOperatorInput
-}
-
-input componentMetaJsonPlatformAndroidSortInput {
- path: SortOrderEnum
- status: SortOrderEnum
-}
-
-type componentMetaJsonPlatformDocs {
- overview: componentMetaJsonPlatformDocsOverview
- style: componentMetaJsonPlatformDocsStyle
- usage: componentMetaJsonPlatformDocsUsage
-}
-
-input componentMetaJsonPlatformDocsFieldSelector {
- overview: componentMetaJsonPlatformDocsOverviewFieldSelector
- style: componentMetaJsonPlatformDocsStyleFieldSelector
- usage: componentMetaJsonPlatformDocsUsageFieldSelector
-}
-
-input componentMetaJsonPlatformDocsFilterInput {
- overview: componentMetaJsonPlatformDocsOverviewFilterInput
- style: componentMetaJsonPlatformDocsStyleFilterInput
- usage: componentMetaJsonPlatformDocsUsageFilterInput
-}
-
-type componentMetaJsonPlatformDocsOverview {
- mdx: File
- status: String
- storybook: componentMetaJsonPlatformDocsOverviewStorybook
-}
-
-input componentMetaJsonPlatformDocsOverviewFieldSelector {
- mdx: FileFieldSelector
- status: FieldSelectorEnum
- storybook: componentMetaJsonPlatformDocsOverviewStorybookFieldSelector
-}
-
-input componentMetaJsonPlatformDocsOverviewFilterInput {
- mdx: FileFilterInput
- status: StringQueryOperatorInput
- storybook: componentMetaJsonPlatformDocsOverviewStorybookFilterInput
-}
-
-input componentMetaJsonPlatformDocsOverviewSortInput {
- mdx: FileSortInput
- status: SortOrderEnum
- storybook: componentMetaJsonPlatformDocsOverviewStorybookSortInput
-}
-
-type componentMetaJsonPlatformDocsOverviewStorybook {
- height: String
- path: String
-}
-
-input componentMetaJsonPlatformDocsOverviewStorybookFieldSelector {
- height: FieldSelectorEnum
- path: FieldSelectorEnum
-}
-
-input componentMetaJsonPlatformDocsOverviewStorybookFilterInput {
- height: StringQueryOperatorInput
- path: StringQueryOperatorInput
-}
-
-input componentMetaJsonPlatformDocsOverviewStorybookSortInput {
- height: SortOrderEnum
- path: SortOrderEnum
-}
-
-input componentMetaJsonPlatformDocsSortInput {
- overview: componentMetaJsonPlatformDocsOverviewSortInput
- style: componentMetaJsonPlatformDocsStyleSortInput
- usage: componentMetaJsonPlatformDocsUsageSortInput
-}
-
-type componentMetaJsonPlatformDocsStyle {
- mdx: File
- status: String
-}
-
-input componentMetaJsonPlatformDocsStyleFieldSelector {
- mdx: FileFieldSelector
- status: FieldSelectorEnum
-}
-
-input componentMetaJsonPlatformDocsStyleFilterInput {
- mdx: FileFilterInput
- status: StringQueryOperatorInput
-}
-
-input componentMetaJsonPlatformDocsStyleSortInput {
- mdx: FileSortInput
- status: SortOrderEnum
-}
-
-type componentMetaJsonPlatformDocsUsage {
- mdx: File
- status: String
-}
-
-input componentMetaJsonPlatformDocsUsageFieldSelector {
- mdx: FileFieldSelector
- status: FieldSelectorEnum
-}
-
-input componentMetaJsonPlatformDocsUsageFilterInput {
- mdx: FileFilterInput
- status: StringQueryOperatorInput
-}
-
-input componentMetaJsonPlatformDocsUsageSortInput {
- mdx: FileSortInput
- status: SortOrderEnum
-}
-
-input componentMetaJsonPlatformFieldSelector {
- android: componentMetaJsonPlatformAndroidFieldSelector
- docs: componentMetaJsonPlatformDocsFieldSelector
- figma: componentMetaJsonPlatformFigmaFieldSelector
- ios: componentMetaJsonPlatformIosFieldSelector
- react: componentMetaJsonPlatformReactFieldSelector
-}
-
-type componentMetaJsonPlatformFigma {
- path: String
- status: String
-}
-
-input componentMetaJsonPlatformFigmaFieldSelector {
- path: FieldSelectorEnum
- status: FieldSelectorEnum
-}
-
-input componentMetaJsonPlatformFigmaFilterInput {
- path: StringQueryOperatorInput
- status: StringQueryOperatorInput
-}
-
-input componentMetaJsonPlatformFigmaSortInput {
- path: SortOrderEnum
- status: SortOrderEnum
-}
-
-input componentMetaJsonPlatformFilterInput {
- android: componentMetaJsonPlatformAndroidFilterInput
- docs: componentMetaJsonPlatformDocsFilterInput
- figma: componentMetaJsonPlatformFigmaFilterInput
- ios: componentMetaJsonPlatformIosFilterInput
- react: componentMetaJsonPlatformReactFilterInput
-}
-
-type componentMetaJsonPlatformIos {
- alias: String
- path: String
- status: String
-}
-
-input componentMetaJsonPlatformIosFieldSelector {
- alias: FieldSelectorEnum
- path: FieldSelectorEnum
- status: FieldSelectorEnum
-}
-
-input componentMetaJsonPlatformIosFilterInput {
- alias: StringQueryOperatorInput
- path: StringQueryOperatorInput
- status: StringQueryOperatorInput
-}
-
-input componentMetaJsonPlatformIosSortInput {
- alias: SortOrderEnum
- path: SortOrderEnum
- status: SortOrderEnum
-}
-
-type componentMetaJsonPlatformReact {
- path: String
- status: String
-}
-
-input componentMetaJsonPlatformReactFieldSelector {
- path: FieldSelectorEnum
- status: FieldSelectorEnum
-}
-
-input componentMetaJsonPlatformReactFilterInput {
- path: StringQueryOperatorInput
- status: StringQueryOperatorInput
-}
-
-input componentMetaJsonPlatformReactSortInput {
- path: SortOrderEnum
- status: SortOrderEnum
-}
-
-input componentMetaJsonPlatformSortInput {
- android: componentMetaJsonPlatformAndroidSortInput
- docs: componentMetaJsonPlatformDocsSortInput
- figma: componentMetaJsonPlatformFigmaSortInput
- ios: componentMetaJsonPlatformIosSortInput
- react: componentMetaJsonPlatformReactSortInput
-}
-
-input componentMetaJsonSortInput {
- _schema: SortOrderEnum
- alias: SortOrderEnum
- children: NodeSortInput
- description: SortOrderEnum
- group: SortOrderEnum
- id: SortOrderEnum
- internal: InternalSortInput
- name: SortOrderEnum
- parent: NodeSortInput
- platform: componentMetaJsonPlatformSortInput
- primitive: FileSortInput
- thumbnail: FileSortInput
-}
-
-type primitiveMetaJson implements Node {
- _schema: String
- children: [Node!]!
- description: String
- id: ID!
- internal: Internal!
- name: String
- parent: Node
- primitive: File
- thumbnail: File
-}
-
-type primitiveMetaJsonConnection {
- distinct(field: primitiveMetaJsonFieldSelector!): [String!]!
- edges: [primitiveMetaJsonEdge!]!
- group(field: primitiveMetaJsonFieldSelector!, limit: Int, skip: Int): [primitiveMetaJsonGroupConnection!]!
- max(field: primitiveMetaJsonFieldSelector!): Float
- min(field: primitiveMetaJsonFieldSelector!): Float
- nodes: [primitiveMetaJson!]!
- pageInfo: PageInfo!
- sum(field: primitiveMetaJsonFieldSelector!): Float
- totalCount: Int!
-}
-
-type primitiveMetaJsonEdge {
- next: primitiveMetaJson
- node: primitiveMetaJson!
- previous: primitiveMetaJson
-}
-
-input primitiveMetaJsonFieldSelector {
- _schema: FieldSelectorEnum
- children: NodeFieldSelector
- description: FieldSelectorEnum
- id: FieldSelectorEnum
- internal: InternalFieldSelector
- name: FieldSelectorEnum
- parent: NodeFieldSelector
- primitive: FileFieldSelector
- thumbnail: FileFieldSelector
-}
-
-input primitiveMetaJsonFilterInput {
- _schema: StringQueryOperatorInput
- children: NodeFilterListInput
- description: StringQueryOperatorInput
- id: StringQueryOperatorInput
- internal: InternalFilterInput
- name: StringQueryOperatorInput
- parent: NodeFilterInput
- primitive: FileFilterInput
- thumbnail: FileFilterInput
-}
-
-input primitiveMetaJsonFilterListInput {
- elemMatch: primitiveMetaJsonFilterInput
-}
-
-type primitiveMetaJsonGroupConnection {
- distinct(field: primitiveMetaJsonFieldSelector!): [String!]!
- edges: [primitiveMetaJsonEdge!]!
- field: String!
- fieldValue: String
- group(field: primitiveMetaJsonFieldSelector!, limit: Int, skip: Int): [primitiveMetaJsonGroupConnection!]!
- max(field: primitiveMetaJsonFieldSelector!): Float
- min(field: primitiveMetaJsonFieldSelector!): Float
- nodes: [primitiveMetaJson!]!
- pageInfo: PageInfo!
- sum(field: primitiveMetaJsonFieldSelector!): Float
- totalCount: Int!
-}
-
-input primitiveMetaJsonSortInput {
- _schema: SortOrderEnum
- children: NodeSortInput
- description: SortOrderEnum
- id: SortOrderEnum
- internal: InternalSortInput
- name: SortOrderEnum
- parent: NodeSortInput
- primitive: FileSortInput
- thumbnail: FileSortInput
-}
\ No newline at end of file
diff --git a/docs/src/__generated__/gatsby-types.d.ts b/docs/src/__generated__/gatsby-types.d.ts
deleted file mode 100644
index c56cb9da7..000000000
--- a/docs/src/__generated__/gatsby-types.d.ts
+++ /dev/null
@@ -1,3375 +0,0 @@
-/* eslint-disable */
-
-
-declare namespace GatsbyTypes {
-
-type Maybe = T | null;
-type InputMaybe = T | null;
-type Exact = { [K in keyof T]: T[K] };
-type MakeOptional = Omit & { [SubKey in K]?: Maybe };
-type MakeMaybe = Omit & { [SubKey in K]: Maybe };
-/** All built-in and custom scalars, mapped to their actual values */
-type Scalars = {
- /** The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `"4"`) or integer (such as `4`) input value will be accepted as an ID. */
- ID: string;
- /** The `String` scalar type represents textual data, represented as UTF-8 character sequences. The String type is most often used by GraphQL to represent free-form human-readable text. */
- String: string;
- /** The `Boolean` scalar type represents `true` or `false`. */
- Boolean: boolean;
- /** The `Int` scalar type represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1. */
- Int: number;
- /** The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point). */
- Float: number;
- /** A date string, such as 2007-12-03, compliant with the ISO 8601 standard for representation of dates and times using the Gregorian calendar. */
- Date: string;
- GatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData;
- /** The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf). */
- JSON: any;
-};
-
-type AVIFOptions = {
- readonly lossless: InputMaybe;
- readonly quality: InputMaybe;
- readonly speed: InputMaybe;
-};
-
-type BlurredOptions = {
- /** Force the output format for the low-res preview. Default is to use the same format as the input. You should rarely need to change this */
- readonly toFormat: InputMaybe;
- /** Width of the generated low-res preview. Default is 20px */
- readonly width: InputMaybe;
-};
-
-type BooleanQueryOperatorInput = {
- readonly eq: InputMaybe;
- readonly in: InputMaybe>>;
- readonly ne: InputMaybe;
- readonly nin: InputMaybe>>;
-};
-
-type DateQueryOperatorInput = {
- readonly eq: InputMaybe;
- readonly gt: InputMaybe;
- readonly gte: InputMaybe;
- readonly in: InputMaybe>>;
- readonly lt: InputMaybe;
- readonly lte: InputMaybe;
- readonly ne: InputMaybe;
- readonly nin: InputMaybe>>;
-};
-
-type Directory = Node & {
- readonly absolutePath: Scalars['String'];
- readonly accessTime: Scalars['Date'];
- readonly atime: Scalars['Date'];
- readonly atimeMs: Scalars['Float'];
- readonly base: Scalars['String'];
- readonly birthTime: Scalars['Date'];
- /** @deprecated Use `birthTime` instead */
- readonly birthtime: Maybe;
- /** @deprecated Use `birthTime` instead */
- readonly birthtimeMs: Maybe;
- readonly changeTime: Scalars['Date'];
- readonly children: ReadonlyArray;
- readonly ctime: Scalars['Date'];
- readonly ctimeMs: Scalars['Float'];
- readonly dev: Scalars['Int'];
- readonly dir: Scalars['String'];
- readonly ext: Scalars['String'];
- readonly extension: Scalars['String'];
- readonly gid: Scalars['Int'];
- readonly id: Scalars['ID'];
- readonly ino: Scalars['Float'];
- readonly internal: Internal;
- readonly mode: Scalars['Int'];
- readonly modifiedTime: Scalars['Date'];
- readonly mtime: Scalars['Date'];
- readonly mtimeMs: Scalars['Float'];
- readonly name: Scalars['String'];
- readonly nlink: Scalars['Int'];
- readonly parent: Maybe;
- readonly prettySize: Scalars['String'];
- readonly rdev: Scalars['Int'];
- readonly relativeDirectory: Scalars['String'];
- readonly relativePath: Scalars['String'];
- readonly root: Scalars['String'];
- readonly size: Scalars['Int'];
- readonly sourceInstanceName: Scalars['String'];
- readonly uid: Scalars['Int'];
-};
-
-
-type Directory_accessTimeArgs = {
- difference: InputMaybe;
- formatString: InputMaybe;
- fromNow: InputMaybe;
- locale: InputMaybe;
-};
-
-
-type Directory_atimeArgs = {
- difference: InputMaybe;
- formatString: InputMaybe;
- fromNow: InputMaybe;
- locale: InputMaybe;
-};
-
-
-type Directory_birthTimeArgs = {
- difference: InputMaybe;
- formatString: InputMaybe;
- fromNow: InputMaybe;
- locale: InputMaybe;
-};
-
-
-type Directory_changeTimeArgs = {
- difference: InputMaybe;
- formatString: InputMaybe;
- fromNow: InputMaybe;
- locale: InputMaybe;
-};
-
-
-type Directory_ctimeArgs = {
- difference: InputMaybe;
- formatString: InputMaybe;
- fromNow: InputMaybe;
- locale: InputMaybe;
-};
-
-
-type Directory_modifiedTimeArgs = {
- difference: InputMaybe;
- formatString: InputMaybe;
- fromNow: InputMaybe;
- locale: InputMaybe;
-};
-
-
-type Directory_mtimeArgs = {
- difference: InputMaybe;
- formatString: InputMaybe;
- fromNow: InputMaybe;
- locale: InputMaybe;
-};
-
-type DirectoryConnection = {
- readonly distinct: ReadonlyArray;
- readonly edges: ReadonlyArray;
- readonly group: ReadonlyArray;
- readonly max: Maybe;
- readonly min: Maybe;
- readonly nodes: ReadonlyArray;
- readonly pageInfo: PageInfo;
- readonly sum: Maybe;
- readonly totalCount: Scalars['Int'];
-};
-
-
-type DirectoryConnection_distinctArgs = {
- field: DirectoryFieldSelector;
-};
-
-
-type DirectoryConnection_groupArgs = {
- field: DirectoryFieldSelector;
- limit: InputMaybe;
- skip: InputMaybe;
-};
-
-
-type DirectoryConnection_maxArgs = {
- field: DirectoryFieldSelector;
-};
-
-
-type DirectoryConnection_minArgs = {
- field: DirectoryFieldSelector;
-};
-
-
-type DirectoryConnection_sumArgs = {
- field: DirectoryFieldSelector;
-};
-
-type DirectoryEdge = {
- readonly next: Maybe;
- readonly node: Directory;
- readonly previous: Maybe;
-};
-
-type DirectoryFieldSelector = {
- readonly absolutePath: InputMaybe;
- readonly accessTime: InputMaybe;
- readonly atime: InputMaybe;
- readonly atimeMs: InputMaybe;
- readonly base: InputMaybe;
- readonly birthTime: InputMaybe;
- readonly birthtime: InputMaybe;
- readonly birthtimeMs: InputMaybe;
- readonly changeTime: InputMaybe;
- readonly children: InputMaybe;
- readonly ctime: InputMaybe;
- readonly ctimeMs: InputMaybe;
- readonly dev: InputMaybe;
- readonly dir: InputMaybe;
- readonly ext: InputMaybe;
- readonly extension: InputMaybe;
- readonly gid: InputMaybe;
- readonly id: InputMaybe