@x-plat/design-system 0.4.6 → 0.5.1

package/dist/tokens/index.js

@@ -12,123 +12,7 @@ var gridColumns = {
 };
 
 // src/tokens/colors.ts
-var colors = {
-  xplat: {
-    red: {
-      50: "#FFF0F0",
-      100: "#FFDDDE",
-      200: "#FFC1C2",
-      300: "#FF9698",
-      400: "#FF5A5D",
-      500: "#FF272B",
-      600: "#F80409",
-      700: "#D40105",
-      800: "#AE0609",
-      900: "#900C0F"
-    },
-    green: {
-      50: "#E5F6EA",
-      100: "#C1E7CC",
-      200: "#98D8AC",
-      300: "#6CCA8B",
-      400: "#47BE72",
-      500: "#10B259",
-      600: "#00A34F",
-      700: "#009143",
-      800: "#007F38",
-      900: "#006024"
-    },
-    orange: {
-      50: "#FFF8EC",
-      100: "#FFF0D3",
-      200: "#FFDDA5",
-      300: "#FFC46D",
-      400: "#FF9F32",
-      500: "#FF820A",
-      600: "#FF6900",
-      700: "#CC4B02",
-      800: "#A13A0B",
-      900: "#82320C"
-    },
-    yellow: {
-      50: "#FFFDE7",
-      100: "#FFFAC1",
-      200: "#FFF186",
-      300: "#FFE041",
-      400: "#FFCC0D",
-      500: "#F0B100",
-      600: "#D18800",
-      700: "#A66002",
-      800: "#894B0A",
-      900: "#743D0F"
-    },
-    blue: {
-      50: "#F1F4FD",
-      100: "#DFE7FA",
-      200: "#C5D4F8",
-      300: "#9EB8F2",
-      400: "#7093EA",
-      500: "#4D6DE3",
-      600: "#3950D7",
-      700: "#303EC5",
-      800: "#2D35A0",
-      900: "#29317F"
-    },
-    lightblue: {
-      50: "#EEFAFF",
-      100: "#D9F4FF",
-      200: "#BBEDFF",
-      300: "#8DE3FF",
-      400: "#57D0FF",
-      500: "#30B6FF",
-      600: "#1999F7",
-      700: "#1280E3",
-      800: "#1566B8",
-      900: "#175791"
-    },
-    purple: {
-      50: "#FBF6FE",
-      100: "#F5EAFD",
-      200: "#EDD8FC",
-      300: "#E0BAF8",
-      400: "#CD8DF3",
-      500: "#B961EB",
-      600: "#A541DC",
-      700: "#9230C5",
-      800: "#782B9E",
-      900: "#62247F"
-    },
-    pink: {
-      50: "#FFF4FE",
-      100: "#FFE7FD",
-      200: "#FFCFFA",
-      300: "#FEA9F1",
-      400: "#FD75E7",
-      500: "#F553DA",
-      600: "#D821B6",
-      700: "#B31892",
-      800: "#921676",
-      900: "#781761"
-    },
-    neutral: {
-      50: "#FAFAFA",
-      100: "#F5F5F5",
-      200: "#E5E5E5",
-      300: "#D4D4D4",
-      400: "#A1A1A1",
-      500: "#737373",
-      600: "#525252",
-      700: "#404040",
-      800: "#262626",
-      900: "#171717"
-    },
-    black: "#000000",
-    white: "#FFFFFF"
-  },
-  test: {
-    default: "#ffffff"
-  }
-};
+import { primitive, semantic } from "@x-plat/tokens-core";
 
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -2410,9 +2294,9 @@ var BookIcon = () => /* @__PURE__ */ jsx127(
 );
 var BookIcon_default = BookIcon;
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 import { jsx as jsx128 } from "react/jsx-runtime";
-var BookOpenIcon = () => /* @__PURE__ */ jsx128(
+var BookmarkIcon = () => /* @__PURE__ */ jsx128(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2420,14 +2304,14 @@ var BookOpenIcon = () => /* @__PURE__ */ jsx128(
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none",
-    children: /* @__PURE__ */ jsx128("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.66699 1.75C7.74978 1.75013 8.78903 2.18063 9.55469 2.94629C9.71947 3.11114 9.86728 3.28969 10 3.47754C10.1329 3.28956 10.2813 3.11125 10.4463 2.94629C11.212 2.18059 12.2502 1.75009 13.333 1.75H18.333C18.7472 1.75 19.083 2.08579 19.083 2.5V15C19.083 15.4142 18.7472 15.75 18.333 15.75H12.5C12.0359 15.75 11.5909 15.9345 11.2627 16.2627C10.9345 16.5909 10.75 17.0359 10.75 17.5L10.7461 17.5771C10.7364 17.6716 10.7094 17.761 10.668 17.8418C10.6473 17.8821 10.623 17.9204 10.5957 17.9561C10.4586 18.1348 10.2427 18.25 10 18.25L9.92285 18.2461C9.903 18.2441 9.88363 18.2399 9.86426 18.2363C9.86104 18.2357 9.85769 18.236 9.85449 18.2354C9.83874 18.2323 9.82398 18.2257 9.80859 18.2217C9.777 18.2133 9.74564 18.2056 9.71582 18.1934C9.69645 18.1854 9.67868 18.1745 9.66016 18.165C9.63759 18.1535 9.61492 18.1426 9.59375 18.1289C9.57353 18.1158 9.55495 18.1008 9.53613 18.0859C9.5185 18.072 9.50067 18.0584 9.48438 18.043C9.46761 18.0271 9.45274 18.0096 9.4375 17.9922C9.42115 17.9735 9.40508 17.9548 9.39062 17.9346C9.3792 17.9186 9.36954 17.9016 9.35938 17.8848C9.34577 17.8622 9.3325 17.8395 9.32129 17.8154C9.31153 17.7945 9.30373 17.7729 9.2959 17.751C9.28823 17.7295 9.2811 17.7079 9.27539 17.6855C9.26017 17.626 9.25 17.5643 9.25 17.5C9.25 17.036 9.06534 16.5909 8.7373 16.2627C8.40925 15.9347 7.96388 15.7501 7.5 15.75H1.66699C1.25278 15.75 0.916016 15.4142 0.916016 15V2.5C0.916016 2.08579 1.25278 1.75 1.66699 1.75H6.66699ZM2.41699 14.25H7.5C8.1248 14.2501 8.7316 14.4305 9.25 14.7617V5.83301C9.24991 5.14825 8.97818 4.49117 8.49414 4.00684C8.00979 3.52248 7.35196 3.25013 6.66699 3.25H2.41699V14.25ZM13.333 3.25C12.648 3.25009 11.9912 3.52244 11.5068 4.00684C11.0224 4.49123 10.7501 5.14798 10.75 5.83301V14.7617C11.2686 14.4303 11.8749 14.25 12.5 14.25H17.583V3.25H13.333Z", fill: "currentColor" })
+    children: /* @__PURE__ */ jsx128("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.167 1.75C14.8078 1.75013 15.4229 2.00491 15.876 2.45801C16.3289 2.91118 16.584 3.52624 16.584 4.16699V17.5C16.584 17.7808 16.4263 18.0384 16.1768 18.167C15.9271 18.2954 15.626 18.2734 15.3975 18.1104L10 14.2539L4.60254 18.1104C4.37419 18.2733 4.07377 18.2951 3.82422 18.167C3.57442 18.0384 3.41602 17.7809 3.41602 17.5V4.16699C3.41602 3.52605 3.67179 2.91122 4.125 2.45801C4.57819 2.00495 5.19316 1.75 5.83398 1.75H14.167ZM5.83398 3.25C5.59098 3.25 5.35743 3.3468 5.18555 3.51855C5.01364 3.69046 4.91699 3.92388 4.91699 4.16699V16.042L9.56445 12.7227L9.66602 12.6621C9.91127 12.54 10.2084 12.5597 10.4365 12.7227L15.084 16.042V4.16699C15.084 3.92407 14.9871 3.69042 14.8154 3.51855C14.6436 3.34676 14.4099 3.25013 14.167 3.25H5.83398Z", fill: "currentColor" })
   }
 );
-var BookOpenIcon_default = BookOpenIcon;
+var BookmarkIcon_default = BookmarkIcon;
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 import { jsx as jsx129 } from "react/jsx-runtime";
-var BookmarkIcon = () => /* @__PURE__ */ jsx129(
+var BookOpenIcon = () => /* @__PURE__ */ jsx129(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2435,10 +2319,10 @@ var BookmarkIcon = () => /* @__PURE__ */ jsx129(
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none",
-    children: /* @__PURE__ */ jsx129("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.167 1.75C14.8078 1.75013 15.4229 2.00491 15.876 2.45801C16.3289 2.91118 16.584 3.52624 16.584 4.16699V17.5C16.584 17.7808 16.4263 18.0384 16.1768 18.167C15.9271 18.2954 15.626 18.2734 15.3975 18.1104L10 14.2539L4.60254 18.1104C4.37419 18.2733 4.07377 18.2951 3.82422 18.167C3.57442 18.0384 3.41602 17.7809 3.41602 17.5V4.16699C3.41602 3.52605 3.67179 2.91122 4.125 2.45801C4.57819 2.00495 5.19316 1.75 5.83398 1.75H14.167ZM5.83398 3.25C5.59098 3.25 5.35743 3.3468 5.18555 3.51855C5.01364 3.69046 4.91699 3.92388 4.91699 4.16699V16.042L9.56445 12.7227L9.66602 12.6621C9.91127 12.54 10.2084 12.5597 10.4365 12.7227L15.084 16.042V4.16699C15.084 3.92407 14.9871 3.69042 14.8154 3.51855C14.6436 3.34676 14.4099 3.25013 14.167 3.25H5.83398Z", fill: "currentColor" })
+    children: /* @__PURE__ */ jsx129("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.66699 1.75C7.74978 1.75013 8.78903 2.18063 9.55469 2.94629C9.71947 3.11114 9.86728 3.28969 10 3.47754C10.1329 3.28956 10.2813 3.11125 10.4463 2.94629C11.212 2.18059 12.2502 1.75009 13.333 1.75H18.333C18.7472 1.75 19.083 2.08579 19.083 2.5V15C19.083 15.4142 18.7472 15.75 18.333 15.75H12.5C12.0359 15.75 11.5909 15.9345 11.2627 16.2627C10.9345 16.5909 10.75 17.0359 10.75 17.5L10.7461 17.5771C10.7364 17.6716 10.7094 17.761 10.668 17.8418C10.6473 17.8821 10.623 17.9204 10.5957 17.9561C10.4586 18.1348 10.2427 18.25 10 18.25L9.92285 18.2461C9.903 18.2441 9.88363 18.2399 9.86426 18.2363C9.86104 18.2357 9.85769 18.236 9.85449 18.2354C9.83874 18.2323 9.82398 18.2257 9.80859 18.2217C9.777 18.2133 9.74564 18.2056 9.71582 18.1934C9.69645 18.1854 9.67868 18.1745 9.66016 18.165C9.63759 18.1535 9.61492 18.1426 9.59375 18.1289C9.57353 18.1158 9.55495 18.1008 9.53613 18.0859C9.5185 18.072 9.50067 18.0584 9.48438 18.043C9.46761 18.0271 9.45274 18.0096 9.4375 17.9922C9.42115 17.9735 9.40508 17.9548 9.39062 17.9346C9.3792 17.9186 9.36954 17.9016 9.35938 17.8848C9.34577 17.8622 9.3325 17.8395 9.32129 17.8154C9.31153 17.7945 9.30373 17.7729 9.2959 17.751C9.28823 17.7295 9.2811 17.7079 9.27539 17.6855C9.26017 17.626 9.25 17.5643 9.25 17.5C9.25 17.036 9.06534 16.5909 8.7373 16.2627C8.40925 15.9347 7.96388 15.7501 7.5 15.75H1.66699C1.25278 15.75 0.916016 15.4142 0.916016 15V2.5C0.916016 2.08579 1.25278 1.75 1.66699 1.75H6.66699ZM2.41699 14.25H7.5C8.1248 14.2501 8.7316 14.4305 9.25 14.7617V5.83301C9.24991 5.14825 8.97818 4.49117 8.49414 4.00684C8.00979 3.52248 7.35196 3.25013 6.66699 3.25H2.41699V14.25ZM13.333 3.25C12.648 3.25009 11.9912 3.52244 11.5068 4.00684C11.0224 4.49123 10.7501 5.14798 10.75 5.83301V14.7617C11.2686 14.4303 11.8749 14.25 12.5 14.25H17.583V3.25H13.333Z", fill: "currentColor" })
   }
 );
-var BookmarkIcon_default = BookmarkIcon;
+var BookOpenIcon_default = BookOpenIcon;
 
 // src/tokens/svg/file/ClipboardIcon.tsx
 import { jsx as jsx130 } from "react/jsx-runtime";
@@ -5317,9 +5201,9 @@ var UserPlusIcon = () => /* @__PURE__ */ jsxs178(
 );
 var UserPlusIcon_default = UserPlusIcon;
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 import { jsx as jsx281, jsxs as jsxs179 } from "react/jsx-runtime";
-var UserXIcon = () => /* @__PURE__ */ jsxs179(
+var UsersIcon = () => /* @__PURE__ */ jsxs179(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5328,17 +5212,18 @@ var UserXIcon = () => /* @__PURE__ */ jsxs179(
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx281("path", { d: "M10.001 11.75C11.0837 11.7502 12.1221 12.1807 12.8877 12.9463C13.6532 13.712 14.0839 14.7503 14.084 15.833V17.5C14.084 17.9141 13.748 18.2497 13.334 18.25C12.9198 18.25 12.584 17.9142 12.584 17.5V15.833C12.5839 15.1481 12.3114 14.4912 11.8271 14.0068C11.3429 13.5226 10.6858 13.2502 10.001 13.25H4.16699C3.48208 13.2501 2.82519 13.5226 2.34082 14.0068C1.85643 14.4912 1.58407 15.148 1.58398 15.833V17.5C1.58398 17.9141 1.24797 18.2497 0.833984 18.25C0.419771 18.25 0.0830079 17.9142 0.0830078 17.5V15.833C0.083094 14.7502 0.514577 13.712 1.28027 12.9463C2.04595 12.1807 3.08426 11.7501 4.16699 11.75H10.001Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx281("path", { d: "M18.6367 6.13672C18.9296 5.84399 19.4044 5.84388 19.6973 6.13672C19.9898 6.42958 19.9899 6.90445 19.6973 7.19727L18.1436 8.75L19.6973 10.3037C19.9897 10.5966 19.99 11.0715 19.6973 11.3643C19.4045 11.6569 18.9296 11.6567 18.6367 11.3643L17.083 9.81055L15.5303 11.3643C15.2375 11.6568 14.7625 11.6568 14.4697 11.3643C14.1769 11.0715 14.1771 10.5966 14.4697 10.3037L16.0225 8.75L14.4697 7.19727C14.1769 6.90441 14.177 6.42962 14.4697 6.13672C14.7626 5.84383 15.2374 5.84383 15.5303 6.13672L17.083 7.68945L18.6367 6.13672Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx281("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.08301 1.75C9.33806 1.75 11.1668 3.57799 11.167 5.83301C11.167 8.08817 9.33817 9.91699 7.08301 9.91699C4.82799 9.91682 3 8.08806 3 5.83301C3.00018 3.5781 4.8281 1.75018 7.08301 1.75ZM7.08301 3.25C5.65653 3.25018 4.50018 4.40653 4.5 5.83301C4.5 7.25963 5.65642 8.41682 7.08301 8.41699C8.50974 8.41699 9.66699 7.25974 9.66699 5.83301C9.66682 4.40642 8.50963 3.25 7.08301 3.25Z", fill: "currentColor" })
+      /* @__PURE__ */ jsx281("path", { d: "M10.834 11.75C11.9168 11.7501 12.956 12.1806 13.7217 12.9463C14.487 13.7119 14.9169 14.7504 14.917 15.833V17.5C14.917 17.9141 14.581 18.2497 14.167 18.25C13.7529 18.2498 13.417 17.9141 13.417 17.5V15.833C13.4169 15.1483 13.1452 14.4912 12.6611 14.0068C12.1768 13.5225 11.519 13.2501 10.834 13.25H4.16699C3.48208 13.2501 2.82519 13.5226 2.34082 14.0068C1.85643 14.4912 1.58407 15.148 1.58398 15.833V17.5C1.58398 17.9141 1.24797 18.2497 0.833984 18.25C0.419771 18.25 0.0830079 17.9142 0.0830078 17.5V15.833C0.083094 14.7502 0.514577 13.712 1.28027 12.9463C2.04595 12.1807 3.08426 11.7501 4.16699 11.75H10.834Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx281("path", { d: "M15.9404 12.4209C16.044 12.0199 16.4535 11.7783 16.8545 11.8818C17.7302 12.1081 18.5064 12.6192 19.0605 13.334C19.6147 14.049 19.9163 14.9284 19.917 15.833V17.5C19.9169 17.9139 19.5809 18.2497 19.167 18.25C18.7529 18.25 18.4171 17.9141 18.417 17.5V15.834L18.4082 15.6201C18.3667 15.1243 18.1816 14.6487 17.875 14.2529C17.5245 13.8009 17.0333 13.4781 16.4795 13.335C16.0785 13.2314 15.837 12.8219 15.9404 12.4209Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx281("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.5 1.75C9.75483 1.75026 11.5838 3.57816 11.584 5.83301C11.584 8.08801 9.75494 9.91673 7.5 9.91699C5.24499 9.91682 3.41699 8.08806 3.41699 5.83301C3.41717 3.5781 5.2451 1.75018 7.5 1.75ZM7.5 3.25C6.07352 3.25018 4.91717 4.40653 4.91699 5.83301C4.91699 7.25963 6.07341 8.41682 7.5 8.41699C8.92651 8.41673 10.084 7.25958 10.084 5.83301C10.0838 4.40658 8.9264 3.25026 7.5 3.25Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx281("path", { d: "M12.6074 2.42285C12.7101 2.02173 13.1184 1.77939 13.5195 1.88184C14.3976 2.10679 15.1766 2.61793 15.7324 3.33398C16.2882 4.05014 16.5908 4.93138 16.5908 5.83789C16.5907 6.74433 16.2882 7.62574 15.7324 8.3418C15.1766 9.05767 14.3975 9.56807 13.5195 9.79297C13.1186 9.89542 12.7103 9.65377 12.6074 9.25293C12.5047 8.85166 12.7472 8.44258 13.1484 8.33984C13.7037 8.19746 14.1963 7.87464 14.5479 7.42188C14.8994 6.96892 15.0907 6.41126 15.0908 5.83789C15.0908 5.26453 14.8993 4.70692 14.5479 4.25391C14.1963 3.80105 13.7037 3.47737 13.1484 3.33496C12.7474 3.23227 12.5051 2.82394 12.6074 2.42285Z", fill: "currentColor" })
     ]
   }
 );
-var UserXIcon_default = UserXIcon;
+var UsersIcon_default = UsersIcon;
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 import { jsx as jsx282, jsxs as jsxs180 } from "react/jsx-runtime";
-var UsersIcon = () => /* @__PURE__ */ jsxs180(
+var UserXIcon = () => /* @__PURE__ */ jsxs180(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5347,14 +5232,13 @@ var UsersIcon = () => /* @__PURE__ */ jsxs180(
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx282("path", { d: "M10.834 11.75C11.9168 11.7501 12.956 12.1806 13.7217 12.9463C14.487 13.7119 14.9169 14.7504 14.917 15.833V17.5C14.917 17.9141 14.581 18.2497 14.167 18.25C13.7529 18.2498 13.417 17.9141 13.417 17.5V15.833C13.4169 15.1483 13.1452 14.4912 12.6611 14.0068C12.1768 13.5225 11.519 13.2501 10.834 13.25H4.16699C3.48208 13.2501 2.82519 13.5226 2.34082 14.0068C1.85643 14.4912 1.58407 15.148 1.58398 15.833V17.5C1.58398 17.9141 1.24797 18.2497 0.833984 18.25C0.419771 18.25 0.0830079 17.9142 0.0830078 17.5V15.833C0.083094 14.7502 0.514577 13.712 1.28027 12.9463C2.04595 12.1807 3.08426 11.7501 4.16699 11.75H10.834Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx282("path", { d: "M15.9404 12.4209C16.044 12.0199 16.4535 11.7783 16.8545 11.8818C17.7302 12.1081 18.5064 12.6192 19.0605 13.334C19.6147 14.049 19.9163 14.9284 19.917 15.833V17.5C19.9169 17.9139 19.5809 18.2497 19.167 18.25C18.7529 18.25 18.4171 17.9141 18.417 17.5V15.834L18.4082 15.6201C18.3667 15.1243 18.1816 14.6487 17.875 14.2529C17.5245 13.8009 17.0333 13.4781 16.4795 13.335C16.0785 13.2314 15.837 12.8219 15.9404 12.4209Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx282("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.5 1.75C9.75483 1.75026 11.5838 3.57816 11.584 5.83301C11.584 8.08801 9.75494 9.91673 7.5 9.91699C5.24499 9.91682 3.41699 8.08806 3.41699 5.83301C3.41717 3.5781 5.2451 1.75018 7.5 1.75ZM7.5 3.25C6.07352 3.25018 4.91717 4.40653 4.91699 5.83301C4.91699 7.25963 6.07341 8.41682 7.5 8.41699C8.92651 8.41673 10.084 7.25958 10.084 5.83301C10.0838 4.40658 8.9264 3.25026 7.5 3.25Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx282("path", { d: "M12.6074 2.42285C12.7101 2.02173 13.1184 1.77939 13.5195 1.88184C14.3976 2.10679 15.1766 2.61793 15.7324 3.33398C16.2882 4.05014 16.5908 4.93138 16.5908 5.83789C16.5907 6.74433 16.2882 7.62574 15.7324 8.3418C15.1766 9.05767 14.3975 9.56807 13.5195 9.79297C13.1186 9.89542 12.7103 9.65377 12.6074 9.25293C12.5047 8.85166 12.7472 8.44258 13.1484 8.33984C13.7037 8.19746 14.1963 7.87464 14.5479 7.42188C14.8994 6.96892 15.0907 6.41126 15.0908 5.83789C15.0908 5.26453 14.8993 4.70692 14.5479 4.25391C14.1963 3.80105 13.7037 3.47737 13.1484 3.33496C12.7474 3.23227 12.5051 2.82394 12.6074 2.42285Z", fill: "currentColor" })
+      /* @__PURE__ */ jsx282("path", { d: "M10.001 11.75C11.0837 11.7502 12.1221 12.1807 12.8877 12.9463C13.6532 13.712 14.0839 14.7503 14.084 15.833V17.5C14.084 17.9141 13.748 18.2497 13.334 18.25C12.9198 18.25 12.584 17.9142 12.584 17.5V15.833C12.5839 15.1481 12.3114 14.4912 11.8271 14.0068C11.3429 13.5226 10.6858 13.2502 10.001 13.25H4.16699C3.48208 13.2501 2.82519 13.5226 2.34082 14.0068C1.85643 14.4912 1.58407 15.148 1.58398 15.833V17.5C1.58398 17.9141 1.24797 18.2497 0.833984 18.25C0.419771 18.25 0.0830079 17.9142 0.0830078 17.5V15.833C0.083094 14.7502 0.514577 13.712 1.28027 12.9463C2.04595 12.1807 3.08426 11.7501 4.16699 11.75H10.001Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx282("path", { d: "M18.6367 6.13672C18.9296 5.84399 19.4044 5.84388 19.6973 6.13672C19.9898 6.42958 19.9899 6.90445 19.6973 7.19727L18.1436 8.75L19.6973 10.3037C19.9897 10.5966 19.99 11.0715 19.6973 11.3643C19.4045 11.6569 18.9296 11.6567 18.6367 11.3643L17.083 9.81055L15.5303 11.3643C15.2375 11.6568 14.7625 11.6568 14.4697 11.3643C14.1769 11.0715 14.1771 10.5966 14.4697 10.3037L16.0225 8.75L14.4697 7.19727C14.1769 6.90441 14.177 6.42962 14.4697 6.13672C14.7626 5.84383 15.2374 5.84383 15.5303 6.13672L17.083 7.68945L18.6367 6.13672Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx282("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.08301 1.75C9.33806 1.75 11.1668 3.57799 11.167 5.83301C11.167 8.08817 9.33817 9.91699 7.08301 9.91699C4.82799 9.91682 3 8.08806 3 5.83301C3.00018 3.5781 4.8281 1.75018 7.08301 1.75ZM7.08301 3.25C5.65653 3.25018 4.50018 4.40653 4.5 5.83301C4.5 7.25963 5.65642 8.41682 7.08301 8.41699C8.50974 8.41699 9.66699 7.25974 9.66699 5.83301C9.66682 4.40642 8.50963 3.25 7.08301 3.25Z", fill: "currentColor" })
     ]
   }
 );
-var UsersIcon_default = UsersIcon;
+var UserXIcon_default = UserXIcon;
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx
 import { jsx as jsx283, jsxs as jsxs181 } from "react/jsx-runtime";
@@ -5597,6 +5481,9 @@ var WindIcon = () => /* @__PURE__ */ jsxs188(
   }
 );
 var WindIcon_default = WindIcon;
+
+// src/tokens/index.ts
+import { cssVar } from "@x-plat/tokens-core";
 export {
   ActivityIcon_default as ActivityIcon,
   AirplayIcon_default as AirplayIcon,
@@ -5895,6 +5782,8 @@ export {
   ZoomInIcon_default as ZoomInIcon,
   ZoomOutIcon_default as ZoomOutIcon,
   breakpoints,
-  colors,
-  gridColumns
+  cssVar,
+  gridColumns,
+  primitive,
+  semantic
 };

package/guidelines/Guidelines.md

@@ -0,0 +1,57 @@
+# @x-plat/design-system Guidelines
+
+React 기반 디자인 시스템 라이브러리이다. Figma Make Kit과 1:1 대응한다.
+
+---
+
+## 핵심 규칙
+
+1. **컴포넌트에 `color`, `className`, `style` prop이 없다.** 색상과 스타일은 내부 semantic 토큰으로 고정한다.
+2. **레이아웃 조절은 래퍼 `<div>`로 감싸서 래퍼에만 스타일을 적용한다.**
+3. **CSS로 DS 컴포넌트 스타일을 오버라이드하지 않는다.**
+
+```tsx
+// 올바른 방법
+<div className="button-wrapper">
+  <Button type="primary">저장</Button>
+</div>
+
+// 금지
+<Button style={{ marginBottom: "1rem" }}>저장</Button>
+```
+
+---
+
+## 읽기 순서
+
+아래 순서로 읽는다.
+
+1. **[설치 및 설정](./setup.md)** - CSS/컴포넌트 import, ToastProvider 설정
+2. **파운데이션**
+   - [컬러](./foundations/color.md) - 4레이어 semantic 토큰
+   - [스페이싱](./foundations/spacing.md) - space, radius, stroke
+   - [타이포그래피](./foundations/typography.md) - font, size, weight
+   - [아이콘](./foundations/icons.md) - import, 크기/색상, 카테고리
+3. **컴포넌트**
+   - [Button](./components/button.md)
+   - [Input](./components/input.md) - Input, PasswordInput, TextArea
+   - [Select](./components/select.md)
+   - [Table](./components/table.md)
+   - [피드백](./components/feedback.md) - Alert, Toast, Badge
+   - [오버레이](./components/overlay.md) - Modal, Drawer, PopOver, Tooltip
+   - [폼 컨트롤](./components/form.md) - CheckBox, Radio, Switch
+   - [Chip & Tag](./components/chip-tag.md)
+   - [내비게이션](./components/navigation.md) - Tab, CardTab, Breadcrumb, Pagination, Steps
+   - [DatePicker](./components/datepicker.md) - Calendar, DatePicker 4종
+   - [Accordion](./components/accordion.md)
+   - [Avatar](./components/avatar.md)
+   - [Card](./components/card.md)
+   - [Chart](./components/chart.md)
+   - [데이터 표시](./components/data-display.md) - Divider, EmptyState, Skeleton, Spinner
+   - [Dropdown](./components/dropdown.md)
+   - [파일 & 미디어](./components/file-media.md) - FileUpload, ImageSelector, Video
+   - [Swiper](./components/swiper.md)
+   - [HtmlTypeWriter](./components/html-typewriter.md)
+4. **컴포지션**
+   - [Grid](./composition/grid.md) - Grid 시스템, 위젯 패턴
+   - [Layout](./composition/layout.md) - Layout, Header, SideBar

package/guidelines/components/accordion.md

@@ -0,0 +1,72 @@
+# Accordion
+
+접이식 패널을 표시한다. 단일/다중 모드를 지원하며, controlled/uncontrolled 모두 가능하다.
+
+```tsx
+import { Accordion } from "@xplat/design-system";
+```
+
+## Props
+
+### 공통
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| items `*` | `AccordionItemData[]` | — | 아코디언 아이템 배열 |
+| multiple | `boolean` | `false` | 다중 열기 허용 |
+
+### AccordionItemData
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| key `*` | `string` | 고유 식별자 |
+| title `*` | `ReactNode` | 헤더 영역 |
+| content `*` | `ReactNode` | 본문 영역 |
+
+### 단일 모드 (multiple 미지정 또는 false)
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| activeKey | `string \| null` | 열린 아이템 key (controlled) |
+| defaultActiveKey | `string` | 초기 열린 아이템 key (uncontrolled) |
+| onChange | `(key: string \| null) => void` | 변경 콜백 |
+
+### 다중 모드 (multiple={true})
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| activeKeys | `string[]` | 열린 아이템 key 목록 (controlled) |
+| defaultActiveKeys | `string[]` | 초기 열린 아이템 key 목록 (uncontrolled) |
+| onChange | `(keys: string[]) => void` | 변경 콜백 |
+
+---
+
+## 사용 예시
+
+### 단일 모드 (uncontrolled)
+
+```tsx
+<Accordion
+  defaultActiveKey="faq-1"
+  items={[
+    { key: "faq-1", title: "질문 1", content: "답변 1" },
+    { key: "faq-2", title: "질문 2", content: "답변 2" },
+  ]}
+/>
+```
+
+### 다중 모드 (controlled)
+
+```tsx
+const [openKeys, setOpenKeys] = useState<string[]>([]);
+
+<Accordion
+  multiple
+  activeKeys={openKeys}
+  onChange={setOpenKeys}
+  items={[
+    { key: "a", title: "섹션 A", content: <div>내용 A</div> },
+    { key: "b", title: "섹션 B", content: <div>내용 B</div> },
+  ]}
+/>
+```

package/guidelines/components/avatar.md

@@ -0,0 +1,35 @@
+# Avatar
+
+프로필 이미지 또는 이니셜을 표시한다. `src`가 있으면 이미지를 렌더하고, 없으면 `name` 기반 이니셜을 표시한다. 둘 다 없으면 기본 사람 아이콘을 표시한다.
+
+```tsx
+import { Avatar } from "@xplat/design-system";
+```
+
+## Props
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| src | `string` | — | 이미지 URL |
+| alt | `string` | name 또는 `"avatar"` | 이미지 alt 텍스트 |
+| name | `string` | — | 이니셜 생성용 이름 (예: `"홍 길동"` → `"홍길"`) |
+| size | `"sm" \| "md" \| "lg"` | `"md"` | 크기 |
+
+## 색상 자동 배정
+
+`name`의 첫 글자 charCode 기반으로 8가지 categorical color 중 하나를 자동 배정한다. 같은 이름은 항상 같은 색상이 된다.
+
+---
+
+## 사용 예시
+
+```tsx
+// 이미지
+<Avatar src="/profile.jpg" name="김철수" size="lg" />
+
+// 이니셜 (이미지 없음)
+<Avatar name="홍 길동" size="md" />
+
+// 기본 아이콘 (이름도 없음)
+<Avatar size="sm" />
+```

package/guidelines/components/button.md

@@ -0,0 +1,58 @@
+# Button
+
+## Type
+
+| type | 용도 |
+|------|------|
+| primary | 주요 액션 |
+| secondary | 보조 액션 |
+| danger | 삭제/위험 액션 |
+| ghost | 텍스트만 표시 |
+
+## Size
+
+| size | 높이 |
+|------|------|
+| sm | 32px |
+| md | 40px |
+| lg | 48px |
+
+## 상태
+
+| 상태 | 설명 |
+|------|------|
+| default | 기본 |
+| hover | 마우스 오버 |
+| pressed (`:active`) | 클릭 중 |
+| focused (`:focus-visible`) | 키보드 포커스 |
+| disabled | 비활성화 |
+
+---
+
+## 올바른 예시
+
+```tsx
+<Button type="primary" size="md">확인</Button>
+<Button type="secondary" size="lg">취소</Button>
+<Button type="danger">삭제</Button>
+<Button type="primary" disabled>비활성</Button>
+```
+
+## 잘못된 예시
+
+```tsx
+// 금지: style prop 사용
+<Button style={{ backgroundColor: "red" }}>삭제</Button>
+
+// 금지: className 사용
+<Button className="custom-btn">확인</Button>
+```
+
+---
+
+## 유사 컴포넌트 구분
+
+| 목적 | 사용할 것 |
+|------|----------|
+| 페이지/외부 링크 이동 | `<a>` 또는 라우터 Link |
+| 액션 실행 | Button |

package/guidelines/components/card.md

@@ -0,0 +1,28 @@
+# Card
+
+콘텐츠를 카드 형태로 감싸는 컨테이너이다.
+
+```tsx
+import { Card } from "@xplat/design-system";
+```
+
+## Props
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children `*` | `ReactNode` | — | 카드 본문 |
+| title | `string` | — | 카드 상단 제목 |
+
+---
+
+## 사용 예시
+
+```tsx
+<Card title="매출 현황">
+  <p>이번 달 매출: 1,200만원</p>
+</Card>
+
+<Card>
+  <p>제목 없는 카드</p>
+</Card>
+```

package/guidelines/components/chart.md

@@ -0,0 +1,58 @@
+# Chart
+
+SVG 기반 차트를 렌더한다. line, bar, pie, doughnut 4가지 타입을 지원한다.
+
+```tsx
+import { Chart } from "@xplat/design-system";
+```
+
+## Props
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| type `*` | `"line" \| "bar" \| "pie" \| "doughnut"` | — | 차트 타입 |
+| data `*` | `Record<string, number[]>` | — | 데이터셋 (key: 시리즈 이름, value: 값 배열) |
+| labels `*` | `string[]` | — | x축 라벨 배열 |
+| tooltip | `boolean` | `true` | 호버 시 툴팁 표시 |
+
+## 색상
+
+primitive 팔레트 기반으로 시리즈별 색상을 자동 배정한다. line/bar는 `LINE_BAR_PALETTES`, pie/doughnut는 `PIE_PALETTES`를 사용한다.
+
+---
+
+## 사용 예시
+
+### Line
+
+```tsx
+<Chart
+  type="line"
+  labels={["1월", "2월", "3월", "4월"]}
+  data={{
+    매출: [100, 200, 150, 300],
+    비용: [80, 120, 100, 200],
+  }}
+/>
+```
+
+### Bar
+
+```tsx
+<Chart
+  type="bar"
+  labels={["서울", "부산", "대구"]}
+  data={{ 방문자: [500, 300, 200] }}
+/>
+```
+
+### Pie / Doughnut
+
+```tsx
+<Chart
+  type="doughnut"
+  labels={["모바일", "데스크톱", "태블릿"]}
+  data={{ 점유율: [60, 30, 10] }}
+  tooltip={false}
+/>
+```

package/guidelines/components/chip-tag.md

@@ -0,0 +1,49 @@
+# Chip & Tag
+
+## Chip
+
+읽기 전용 라벨이다. 삭제 기능이 없다.
+
+```tsx
+<Chip type="primary">진행중</Chip>
+<Chip type="success">완료</Chip>
+<Chip type="error">실패</Chip>
+```
+
+| type | 용도 |
+|------|------|
+| primary | 기본 강조 |
+| secondary | 보조 |
+| neutral | 중립 |
+| success | 성공 |
+| error | 에러 |
+| warning | 경고 |
+| info | 정보 |
+
+---
+
+## Tag
+
+제거 가능한 태그이다. `onClose`로 삭제를 처리한다.
+
+```tsx
+<Tag onClose={() => handleRemove("react")}>React</Tag>
+<Tag type="categorical" colorIndex={1} onClose={handleRemove}>TypeScript</Tag>
+<Tag disabled>삭제 불가</Tag>
+```
+
+| Prop | 설명 |
+|------|------|
+| type | `"neutral" \| "categorical"` |
+| onClose | 삭제 콜백 |
+| colorIndex | categorical 타입의 색상 인덱스 |
+| disabled | 비활성화 |
+
+---
+
+## 의사결정
+
+| 상황 | 사용할 것 |
+|------|----------|
+| 상태/분류 라벨 (삭제 불필요) | Chip |
+| 사용자가 제거할 수 있는 태그 | Tag |