@spectrabrain/eds 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -6,7 +6,7 @@ type ButtonIconName = "ArrowLeft" | "ArrowRight" | "Check" | "ChevronDown" | "Ch
 
 /** 버튼 크기입니다. */
 type ButtonSize = "xs" | "sm" | "md";
-/** 행동의 의미입니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
+/** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
 type ButtonRole = "brand" | "neutral" | "critical";
 /** 시각 위계입니다. role마다 허용 조합이 다르며 ButtonProps가 조합을 강제합니다. link는 neutral 탐색 전용입니다. */
 type ButtonVariant = "solid" | "weak" | "outline" | "ghost" | "link";
@@ -14,27 +14,32 @@ type ButtonVariant = "solid" | "weak" | "outline" | "ghost" | "link";
 type ButtonLayout = "textOnly" | "iconFirst" | "iconLast" | "iconBoth" | "iconOnly";
 /** native button branch의 type입니다. 폼 제출은 "submit", 그 밖의 행동은 "button"입니다. */
 type NativeButtonType = "button" | "submit" | "reset";
-/**
- * 허용되는 role·variant 조합입니다. 화면의 핵심 행동(저장·생성·확인)은 brand/solid, 일반 주요 행동(검색·조회)은 neutral/solid,
- * 취소·닫기·수정은 neutral/outline, 부담이 낮은 반복 행동(초기화·갱신)은 neutral/weak, 되돌리기 어려운 삭제·초기화는 critical/weak입니다.
- */
+/** 허용되는 role·variant 조합입니다. 행동별 선택은 QUICKSTART.md의 Button 조합표를 따릅니다. */
 type ButtonVisualProps = {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "brand";
+    /** role 안의 시각 위계입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "solid" | "outline";
 } | {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "neutral";
+    /** role 안의 시각 위계입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "solid" | "weak" | "outline" | "ghost";
 } | {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "critical";
+    /** role 안의 시각 위계입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "weak";
 };
 /** neutral/link 조합입니다. 페이지나 콘텐츠로 이동하는 탐색에만 사용하며 상태 변경이나 일반 CTA에는 쓰지 않습니다. */
 type LinkVisualProps = {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "neutral";
+    /** 페이지·콘텐츠 이동 전용 variant이며 href가 필수입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "link";
 };
 type ReactIconSlot = {
-    /** label 앞의 custom ReactElement 슬롯입니다. startIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추고 stroke 두께는 lucide 기본값 2에 맞춥니다. */
+    /** label 앞의 custom ReactElement 슬롯입니다. startIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추며, 이름으로 지정한 아이콘과 같아 보이려면 lucide 기본 stroke를 그대로 둡니다. */
     readonly startIcon?: ReactElement;
     readonly startIconName?: never;
 } | {
@@ -43,7 +48,7 @@ type ReactIconSlot = {
     readonly startIconName?: ButtonIconName;
 };
 type ReactEndIconSlot = {
-    /** label 뒤의 custom ReactElement 슬롯입니다. endIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추고 stroke 두께는 lucide 기본값 2에 맞춥니다. */
+    /** label 뒤의 custom ReactElement 슬롯입니다. endIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추며, 이름으로 지정한 아이콘과 같아 보이려면 lucide 기본 stroke를 그대로 둡니다. */
     readonly endIcon?: ReactElement;
     readonly endIconName?: never;
 } | {
@@ -52,11 +57,11 @@ type ReactEndIconSlot = {
     readonly endIconName?: ButtonIconName;
 };
 type TextSlotProps = {
-    /** 버튼 label입니다. icon-only 버튼은 children 대신 icon 또는 iconName을 지정합니다. */
+    /** 버튼 label이며 한 줄로 표시합니다. 렌더링할 내용이 없으면(빈 문자열·공백·null) render 오류이므로, icon-only는 children 대신 icon 또는 iconName을 씁니다. */
     readonly children: ReactNode;
     readonly icon?: never;
     readonly iconName?: never;
-    /** 선택적 accessible name입니다. 지정하면 비어 있지 않아야 합니다. */
+    /** 선택적 accessible name입니다. 공백뿐인 문자열은 render 오류이므로, 값이 없을 수 있으면 `""`로 대체하지 말고 prop을 생략합니다. */
     readonly "aria-label"?: string;
 } & ReactIconSlot & ReactEndIconSlot;
 type IconOnlySlotProps = {
@@ -65,7 +70,7 @@ type IconOnlySlotProps = {
     readonly startIconName?: never;
     readonly endIcon?: never;
     readonly endIconName?: never;
-    /** icon-only 버튼의 accessible name입니다. 접근성 이름을 제공할 때 비어 있지 않은 값을 지정합니다. */
+    /** icon-only 버튼의 accessible name입니다. 아이콘은 aria-hidden이므로 항상 비어 있지 않은 값(또는 aria-labelledby)을 지정합니다. 공백뿐인 문자열은 render 오류입니다. */
     readonly "aria-label"?: string;
 } & ({
     /** icon-only용 custom ReactElement입니다. children·start/end 슬롯과 함께 쓰지 않습니다. */
@@ -85,7 +90,7 @@ type SharedProps = {
     readonly disabled?: boolean;
     /** 비동기 처리 중 상태입니다. aria-busy를 적용하고 상호작용을 막으며 label·아이콘 공간과 accessible name을 유지합니다. "저장 중…" 같은 별도 문구 대신 사용합니다. */
     readonly loading?: boolean;
-    /** 배치·컨테이너 보정에만 사용합니다. 문서에 없는 색·상태·variant를 className으로 우회하지 않습니다. */
+    /** 바깥 배치(margin·정렬·grid 위치)에만 사용합니다. 문서에 없는 색·상태·variant를 className으로 우회하지 않습니다. */
     readonly className?: string;
     /** 지원하지 않습니다. 공개 스타일 override를 제공하지 않습니다. */
     readonly style?: never;
@@ -95,15 +100,12 @@ type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children
     readonly type: NativeButtonType;
 };
 type NativeLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href" | "role" | "style" | "type" | "aria-label" | "aria-busy"> & {
-    /** 이동할 주소입니다. neutral/link branch에서 필수이며, 상태 변경이나 일반 CTA를 link로 표현하지 않습니다. */
+    /** 이동할 주소입니다. neutral/link branch에서 필수이며, 상태 변경이나 일반 CTA를 link로 표현하지 않습니다. 공백뿐인 주소는 render 오류이므로 주소가 없을 수 있으면 Button을 렌더링하지 않거나 native button branch를 씁니다. */
     readonly href: string;
 };
 type NativeButtonBranchProps = SharedProps & NativeButtonProps & ButtonVisualProps & SlotProps;
 type LinkBranchProps = SharedProps & NativeLinkProps & LinkVisualProps & SlotProps;
-/**
- * Button의 공개 props입니다. native button branch(type 필수)와 neutral/link branch(href 필수)의 union입니다.
- * 허용 조합과 접근성 계약의 기계 판독 원천은 @spectrabrain/eds/components/Button/spec.json입니다.
- */
+/** Button의 공개 props입니다. native button branch(type 필수)와 neutral/link branch(href 필수)의 union입니다. */
 type ButtonProps = NativeButtonBranchProps | LinkBranchProps;
 /** Button의 호출 시그니처입니다. ref는 branch에 따라 HTMLButtonElement 또는 HTMLAnchorElement입니다. */
 interface ButtonComponent {
@@ -118,8 +120,8 @@ interface ButtonComponent {
     }): ReactElement | null;
 }
 /**
- * EDS Button입니다. EDS에 같은 역할의 컴포넌트가 있으면 자체 구현보다 먼저 사용합니다.
- * 사용 맥락과 role·variant 선택 기준은 @spectrabrain/eds/components/Button/README.md, 기계 판독 계약은 spec.json을 참고합니다.
+ * EDS Button입니다. role·variant를 고를 때 package root의 dist/components/Button/README.md를,
+ * 허용 조합·아이콘 이름·접근성 동작을 확인할 때 dist/components/Button/spec.json을 읽습니다.
  */
 declare const Button: ButtonComponent;
 

package/dist/index.d.ts

@@ -6,7 +6,7 @@ type ButtonIconName = "ArrowLeft" | "ArrowRight" | "Check" | "ChevronDown" | "Ch
 
 /** 버튼 크기입니다. */
 type ButtonSize = "xs" | "sm" | "md";
-/** 행동의 의미입니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
+/** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
 type ButtonRole = "brand" | "neutral" | "critical";
 /** 시각 위계입니다. role마다 허용 조합이 다르며 ButtonProps가 조합을 강제합니다. link는 neutral 탐색 전용입니다. */
 type ButtonVariant = "solid" | "weak" | "outline" | "ghost" | "link";
@@ -14,27 +14,32 @@ type ButtonVariant = "solid" | "weak" | "outline" | "ghost" | "link";
 type ButtonLayout = "textOnly" | "iconFirst" | "iconLast" | "iconBoth" | "iconOnly";
 /** native button branch의 type입니다. 폼 제출은 "submit", 그 밖의 행동은 "button"입니다. */
 type NativeButtonType = "button" | "submit" | "reset";
-/**
- * 허용되는 role·variant 조합입니다. 화면의 핵심 행동(저장·생성·확인)은 brand/solid, 일반 주요 행동(검색·조회)은 neutral/solid,
- * 취소·닫기·수정은 neutral/outline, 부담이 낮은 반복 행동(초기화·갱신)은 neutral/weak, 되돌리기 어려운 삭제·초기화는 critical/weak입니다.
- */
+/** 허용되는 role·variant 조합입니다. 행동별 선택은 QUICKSTART.md의 Button 조합표를 따릅니다. */
 type ButtonVisualProps = {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "brand";
+    /** role 안의 시각 위계입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "solid" | "outline";
 } | {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "neutral";
+    /** role 안의 시각 위계입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "solid" | "weak" | "outline" | "ghost";
 } | {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "critical";
+    /** role 안의 시각 위계입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "weak";
 };
 /** neutral/link 조합입니다. 페이지나 콘텐츠로 이동하는 탐색에만 사용하며 상태 변경이나 일반 CTA에는 쓰지 않습니다. */
 type LinkVisualProps = {
+    /** 행동의 의미를 나타내는 시각 prop입니다. ARIA role이 아니며 DOM에 전달되지 않습니다. brand는 화면의 핵심 행동, neutral은 일반·보조 행동, critical은 되돌리기 어려운 행동입니다. */
     readonly role: "neutral";
+    /** 페이지·콘텐츠 이동 전용 variant이며 href가 필수입니다. 행동별 조합은 QUICKSTART.md의 Button 조합표를 따릅니다. */
     readonly variant: "link";
 };
 type ReactIconSlot = {
-    /** label 앞의 custom ReactElement 슬롯입니다. startIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추고 stroke 두께는 lucide 기본값 2에 맞춥니다. */
+    /** label 앞의 custom ReactElement 슬롯입니다. startIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추며, 이름으로 지정한 아이콘과 같아 보이려면 lucide 기본 stroke를 그대로 둡니다. */
     readonly startIcon?: ReactElement;
     readonly startIconName?: never;
 } | {
@@ -43,7 +48,7 @@ type ReactIconSlot = {
     readonly startIconName?: ButtonIconName;
 };
 type ReactEndIconSlot = {
-    /** label 뒤의 custom ReactElement 슬롯입니다. endIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추고 stroke 두께는 lucide 기본값 2에 맞춥니다. */
+    /** label 뒤의 custom ReactElement 슬롯입니다. endIconName과 함께 쓰지 않습니다. 크기는 Button이 맞추며, 이름으로 지정한 아이콘과 같아 보이려면 lucide 기본 stroke를 그대로 둡니다. */
     readonly endIcon?: ReactElement;
     readonly endIconName?: never;
 } | {
@@ -52,11 +57,11 @@ type ReactEndIconSlot = {
     readonly endIconName?: ButtonIconName;
 };
 type TextSlotProps = {
-    /** 버튼 label입니다. icon-only 버튼은 children 대신 icon 또는 iconName을 지정합니다. */
+    /** 버튼 label이며 한 줄로 표시합니다. 렌더링할 내용이 없으면(빈 문자열·공백·null) render 오류이므로, icon-only는 children 대신 icon 또는 iconName을 씁니다. */
     readonly children: ReactNode;
     readonly icon?: never;
     readonly iconName?: never;
-    /** 선택적 accessible name입니다. 지정하면 비어 있지 않아야 합니다. */
+    /** 선택적 accessible name입니다. 공백뿐인 문자열은 render 오류이므로, 값이 없을 수 있으면 `""`로 대체하지 말고 prop을 생략합니다. */
     readonly "aria-label"?: string;
 } & ReactIconSlot & ReactEndIconSlot;
 type IconOnlySlotProps = {
@@ -65,7 +70,7 @@ type IconOnlySlotProps = {
     readonly startIconName?: never;
     readonly endIcon?: never;
     readonly endIconName?: never;
-    /** icon-only 버튼의 accessible name입니다. 접근성 이름을 제공할 때 비어 있지 않은 값을 지정합니다. */
+    /** icon-only 버튼의 accessible name입니다. 아이콘은 aria-hidden이므로 항상 비어 있지 않은 값(또는 aria-labelledby)을 지정합니다. 공백뿐인 문자열은 render 오류입니다. */
     readonly "aria-label"?: string;
 } & ({
     /** icon-only용 custom ReactElement입니다. children·start/end 슬롯과 함께 쓰지 않습니다. */
@@ -85,7 +90,7 @@ type SharedProps = {
     readonly disabled?: boolean;
     /** 비동기 처리 중 상태입니다. aria-busy를 적용하고 상호작용을 막으며 label·아이콘 공간과 accessible name을 유지합니다. "저장 중…" 같은 별도 문구 대신 사용합니다. */
     readonly loading?: boolean;
-    /** 배치·컨테이너 보정에만 사용합니다. 문서에 없는 색·상태·variant를 className으로 우회하지 않습니다. */
+    /** 바깥 배치(margin·정렬·grid 위치)에만 사용합니다. 문서에 없는 색·상태·variant를 className으로 우회하지 않습니다. */
     readonly className?: string;
     /** 지원하지 않습니다. 공개 스타일 override를 제공하지 않습니다. */
     readonly style?: never;
@@ -95,15 +100,12 @@ type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children
     readonly type: NativeButtonType;
 };
 type NativeLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href" | "role" | "style" | "type" | "aria-label" | "aria-busy"> & {
-    /** 이동할 주소입니다. neutral/link branch에서 필수이며, 상태 변경이나 일반 CTA를 link로 표현하지 않습니다. */
+    /** 이동할 주소입니다. neutral/link branch에서 필수이며, 상태 변경이나 일반 CTA를 link로 표현하지 않습니다. 공백뿐인 주소는 render 오류이므로 주소가 없을 수 있으면 Button을 렌더링하지 않거나 native button branch를 씁니다. */
     readonly href: string;
 };
 type NativeButtonBranchProps = SharedProps & NativeButtonProps & ButtonVisualProps & SlotProps;
 type LinkBranchProps = SharedProps & NativeLinkProps & LinkVisualProps & SlotProps;
-/**
- * Button의 공개 props입니다. native button branch(type 필수)와 neutral/link branch(href 필수)의 union입니다.
- * 허용 조합과 접근성 계약의 기계 판독 원천은 @spectrabrain/eds/components/Button/spec.json입니다.
- */
+/** Button의 공개 props입니다. native button branch(type 필수)와 neutral/link branch(href 필수)의 union입니다. */
 type ButtonProps = NativeButtonBranchProps | LinkBranchProps;
 /** Button의 호출 시그니처입니다. ref는 branch에 따라 HTMLButtonElement 또는 HTMLAnchorElement입니다. */
 interface ButtonComponent {
@@ -118,8 +120,8 @@ interface ButtonComponent {
     }): ReactElement | null;
 }
 /**
- * EDS Button입니다. EDS에 같은 역할의 컴포넌트가 있으면 자체 구현보다 먼저 사용합니다.
- * 사용 맥락과 role·variant 선택 기준은 @spectrabrain/eds/components/Button/README.md, 기계 판독 계약은 spec.json을 참고합니다.
+ * EDS Button입니다. role·variant를 고를 때 package root의 dist/components/Button/README.md를,
+ * 허용 조합·아이콘 이름·접근성 동작을 확인할 때 dist/components/Button/spec.json을 읽습니다.
  */
 declare const Button: ButtonComponent;
 

package/dist/index.js

@@ -414,6 +414,276 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#FDE047",
     "cssVariable": "--eds-color-stroke-warning-weak"
   },
+  "radius-1": {
+    "name": "radius-1",
+    "type": "dimension",
+    "value": {
+      "value": 2,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-1"
+  },
+  "radius-10": {
+    "name": "radius-10",
+    "type": "dimension",
+    "value": {
+      "value": 999,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-10"
+  },
+  "radius-2": {
+    "name": "radius-2",
+    "type": "dimension",
+    "value": {
+      "value": 4,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-2"
+  },
+  "radius-3": {
+    "name": "radius-3",
+    "type": "dimension",
+    "value": {
+      "value": 6,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-3"
+  },
+  "radius-4": {
+    "name": "radius-4",
+    "type": "dimension",
+    "value": {
+      "value": 8,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-4"
+  },
+  "radius-5": {
+    "name": "radius-5",
+    "type": "dimension",
+    "value": {
+      "value": 10,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-5"
+  },
+  "radius-6": {
+    "name": "radius-6",
+    "type": "dimension",
+    "value": {
+      "value": 12,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-6"
+  },
+  "radius-7": {
+    "name": "radius-7",
+    "type": "dimension",
+    "value": {
+      "value": 14,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-7"
+  },
+  "radius-8": {
+    "name": "radius-8",
+    "type": "dimension",
+    "value": {
+      "value": 16,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-8"
+  },
+  "radius-9": {
+    "name": "radius-9",
+    "type": "dimension",
+    "value": {
+      "value": 20,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-9"
+  },
+  "radius-none": {
+    "name": "radius-none",
+    "type": "dimension",
+    "value": {
+      "value": 0,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-radius-none"
+  },
+  "spacing-0.5": {
+    "name": "spacing-0.5",
+    "type": "dimension",
+    "value": {
+      "value": 2,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-0\\.5"
+  },
+  "spacing-1": {
+    "name": "spacing-1",
+    "type": "dimension",
+    "value": {
+      "value": 4,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-1"
+  },
+  "spacing-1.5": {
+    "name": "spacing-1.5",
+    "type": "dimension",
+    "value": {
+      "value": 6,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-1\\.5"
+  },
+  "spacing-10": {
+    "name": "spacing-10",
+    "type": "dimension",
+    "value": {
+      "value": 40,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-10"
+  },
+  "spacing-11": {
+    "name": "spacing-11",
+    "type": "dimension",
+    "value": {
+      "value": 44,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-11"
+  },
+  "spacing-12": {
+    "name": "spacing-12",
+    "type": "dimension",
+    "value": {
+      "value": 48,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-12"
+  },
+  "spacing-2": {
+    "name": "spacing-2",
+    "type": "dimension",
+    "value": {
+      "value": 8,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-2"
+  },
+  "spacing-2.5": {
+    "name": "spacing-2.5",
+    "type": "dimension",
+    "value": {
+      "value": 10,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-2\\.5"
+  },
+  "spacing-3": {
+    "name": "spacing-3",
+    "type": "dimension",
+    "value": {
+      "value": 12,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-3"
+  },
+  "spacing-3.5": {
+    "name": "spacing-3.5",
+    "type": "dimension",
+    "value": {
+      "value": 14,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-3\\.5"
+  },
+  "spacing-4": {
+    "name": "spacing-4",
+    "type": "dimension",
+    "value": {
+      "value": 16,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-4"
+  },
+  "spacing-4.5": {
+    "name": "spacing-4.5",
+    "type": "dimension",
+    "value": {
+      "value": 18,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-4\\.5"
+  },
+  "spacing-5": {
+    "name": "spacing-5",
+    "type": "dimension",
+    "value": {
+      "value": 20,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-5"
+  },
+  "spacing-6": {
+    "name": "spacing-6",
+    "type": "dimension",
+    "value": {
+      "value": 24,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-6"
+  },
+  "spacing-7": {
+    "name": "spacing-7",
+    "type": "dimension",
+    "value": {
+      "value": 28,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-7"
+  },
+  "spacing-7.5": {
+    "name": "spacing-7.5",
+    "type": "dimension",
+    "value": {
+      "value": 30,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-7\\.5"
+  },
+  "spacing-8": {
+    "name": "spacing-8",
+    "type": "dimension",
+    "value": {
+      "value": 32,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-8"
+  },
+  "spacing-9": {
+    "name": "spacing-9",
+    "type": "dimension",
+    "value": {
+      "value": 36,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-9"
+  },
+  "spacing-none": {
+    "name": "spacing-none",
+    "type": "dimension",
+    "value": {
+      "value": 0,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-spacing-none"
+  },
   "typography-body1-fontFamily": {
     "name": "typography-body1-fontFamily",
     "type": "fontFamily",
@@ -1216,6 +1486,36 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-stroke-positive-weak",
   "color-stroke-warning-primary",
   "color-stroke-warning-weak",
+  "radius-1",
+  "radius-10",
+  "radius-2",
+  "radius-3",
+  "radius-4",
+  "radius-5",
+  "radius-6",
+  "radius-7",
+  "radius-8",
+  "radius-9",
+  "radius-none",
+  "spacing-0.5",
+  "spacing-1",
+  "spacing-1.5",
+  "spacing-10",
+  "spacing-11",
+  "spacing-12",
+  "spacing-2",
+  "spacing-2.5",
+  "spacing-3",
+  "spacing-3.5",
+  "spacing-4",
+  "spacing-4.5",
+  "spacing-5",
+  "spacing-6",
+  "spacing-7",
+  "spacing-7.5",
+  "spacing-8",
+  "spacing-9",
+  "spacing-none",
   "typography-body1-fontFamily",
   "typography-body1-fontSize",
   "typography-body1-fontWeight",
@@ -1306,7 +1606,7 @@ function cssVar(name) {
   if (!tokenNames.includes(name)) {
     throw new Error("Unknown semantic token: " + name);
   }
-  return "var(--eds-" + name + ")";
+  return "var(" + tokenMap[name].cssVariable + ")";
 }
 var buttonIcons = {
   ArrowLeft: lucideReact.ArrowLeft,