@x-plat/design-system 0.4.6 → 0.5.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",
@@ -62,13 +62,11 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "@x-plat/tokens-core": "*",
     "@x-plat/tokens-default": "*"
   },
   "devDependencies": {
-    "chart.js": "^4.5.1",
-    "chartjs-plugin-datalabels": "^2.2.0",
     "framer-motion": "^12.23.19",
-    "react-chartjs-2": "^5.3.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",

package/dist/colors-CY4JXVHj.d.cts

@@ -1,137 +0,0 @@
-/**
- * 색상 토큰 설정 (세팅값만).
- * generate-theme 으로 styles/colors.scss 갱신.
- * 타입은 tokens/interface/colors.ts 또는 src/tokens 에서 export.
- */
-declare const colors: {
-    readonly xplat: {
-        readonly red: {
-            readonly 50: "#FFF0F0";
-            readonly 100: "#FFDDDE";
-            readonly 200: "#FFC1C2";
-            readonly 300: "#FF9698";
-            readonly 400: "#FF5A5D";
-            readonly 500: "#FF272B";
-            readonly 600: "#F80409";
-            readonly 700: "#D40105";
-            readonly 800: "#AE0609";
-            readonly 900: "#900C0F";
-        };
-        readonly green: {
-            readonly 50: "#E5F6EA";
-            readonly 100: "#C1E7CC";
-            readonly 200: "#98D8AC";
-            readonly 300: "#6CCA8B";
-            readonly 400: "#47BE72";
-            readonly 500: "#10B259";
-            readonly 600: "#00A34F";
-            readonly 700: "#009143";
-            readonly 800: "#007F38";
-            readonly 900: "#006024";
-        };
-        readonly orange: {
-            readonly 50: "#FFF8EC";
-            readonly 100: "#FFF0D3";
-            readonly 200: "#FFDDA5";
-            readonly 300: "#FFC46D";
-            readonly 400: "#FF9F32";
-            readonly 500: "#FF820A";
-            readonly 600: "#FF6900";
-            readonly 700: "#CC4B02";
-            readonly 800: "#A13A0B";
-            readonly 900: "#82320C";
-        };
-        readonly yellow: {
-            readonly 50: "#FFFDE7";
-            readonly 100: "#FFFAC1";
-            readonly 200: "#FFF186";
-            readonly 300: "#FFE041";
-            readonly 400: "#FFCC0D";
-            readonly 500: "#F0B100";
-            readonly 600: "#D18800";
-            readonly 700: "#A66002";
-            readonly 800: "#894B0A";
-            readonly 900: "#743D0F";
-        };
-        readonly blue: {
-            readonly 50: "#F1F4FD";
-            readonly 100: "#DFE7FA";
-            readonly 200: "#C5D4F8";
-            readonly 300: "#9EB8F2";
-            readonly 400: "#7093EA";
-            readonly 500: "#4D6DE3";
-            readonly 600: "#3950D7";
-            readonly 700: "#303EC5";
-            readonly 800: "#2D35A0";
-            readonly 900: "#29317F";
-        };
-        readonly lightblue: {
-            readonly 50: "#EEFAFF";
-            readonly 100: "#D9F4FF";
-            readonly 200: "#BBEDFF";
-            readonly 300: "#8DE3FF";
-            readonly 400: "#57D0FF";
-            readonly 500: "#30B6FF";
-            readonly 600: "#1999F7";
-            readonly 700: "#1280E3";
-            readonly 800: "#1566B8";
-            readonly 900: "#175791";
-        };
-        readonly purple: {
-            readonly 50: "#FBF6FE";
-            readonly 100: "#F5EAFD";
-            readonly 200: "#EDD8FC";
-            readonly 300: "#E0BAF8";
-            readonly 400: "#CD8DF3";
-            readonly 500: "#B961EB";
-            readonly 600: "#A541DC";
-            readonly 700: "#9230C5";
-            readonly 800: "#782B9E";
-            readonly 900: "#62247F";
-        };
-        readonly pink: {
-            readonly 50: "#FFF4FE";
-            readonly 100: "#FFE7FD";
-            readonly 200: "#FFCFFA";
-            readonly 300: "#FEA9F1";
-            readonly 400: "#FD75E7";
-            readonly 500: "#F553DA";
-            readonly 600: "#D821B6";
-            readonly 700: "#B31892";
-            readonly 800: "#921676";
-            readonly 900: "#781761";
-        };
-        readonly neutral: {
-            readonly 50: "#FAFAFA";
-            readonly 100: "#F5F5F5";
-            readonly 200: "#E5E5E5";
-            readonly 300: "#D4D4D4";
-            readonly 400: "#A1A1A1";
-            readonly 500: "#737373";
-            readonly 600: "#525252";
-            readonly 700: "#404040";
-            readonly 800: "#262626";
-            readonly 900: "#171717";
-        };
-        readonly black: "#000000";
-        readonly white: "#FFFFFF";
-    };
-    readonly test: {
-        readonly default: "#ffffff";
-    };
-};
-
-type DefaultColors = typeof colors;
-type BuildDefaultTokens<N extends keyof DefaultColors> = {
-    [C in keyof DefaultColors[N]]: DefaultColors[N][C] extends string ? `${N & string}-${C & string}` : `${N & string}-${C & string}-${keyof DefaultColors[N][C] & (string | number)}`;
-}[keyof DefaultColors[N]];
-type DefaultColorToken = {
-    [N in keyof DefaultColors]: BuildDefaultTokens<N>;
-}[keyof DefaultColors];
-type ColorToken = DefaultColorToken | XplatColorTokenRegistry[keyof XplatColorTokenRegistry];
-interface ColorProps {
-    /** "xplat-blue-500" 형태로 지정 (자동완성 지원) */
-    color?: ColorToken;
-}
-
-export { type ColorToken as C, type ColorProps as a, colors as c };

package/dist/colors-CY4JXVHj.d.ts

@@ -1,137 +0,0 @@
-/**
- * 색상 토큰 설정 (세팅값만).
- * generate-theme 으로 styles/colors.scss 갱신.
- * 타입은 tokens/interface/colors.ts 또는 src/tokens 에서 export.
- */
-declare const colors: {
-    readonly xplat: {
-        readonly red: {
-            readonly 50: "#FFF0F0";
-            readonly 100: "#FFDDDE";
-            readonly 200: "#FFC1C2";
-            readonly 300: "#FF9698";
-            readonly 400: "#FF5A5D";
-            readonly 500: "#FF272B";
-            readonly 600: "#F80409";
-            readonly 700: "#D40105";
-            readonly 800: "#AE0609";
-            readonly 900: "#900C0F";
-        };
-        readonly green: {
-            readonly 50: "#E5F6EA";
-            readonly 100: "#C1E7CC";
-            readonly 200: "#98D8AC";
-            readonly 300: "#6CCA8B";
-            readonly 400: "#47BE72";
-            readonly 500: "#10B259";
-            readonly 600: "#00A34F";
-            readonly 700: "#009143";
-            readonly 800: "#007F38";
-            readonly 900: "#006024";
-        };
-        readonly orange: {
-            readonly 50: "#FFF8EC";
-            readonly 100: "#FFF0D3";
-            readonly 200: "#FFDDA5";
-            readonly 300: "#FFC46D";
-            readonly 400: "#FF9F32";
-            readonly 500: "#FF820A";
-            readonly 600: "#FF6900";
-            readonly 700: "#CC4B02";
-            readonly 800: "#A13A0B";
-            readonly 900: "#82320C";
-        };
-        readonly yellow: {
-            readonly 50: "#FFFDE7";
-            readonly 100: "#FFFAC1";
-            readonly 200: "#FFF186";
-            readonly 300: "#FFE041";
-            readonly 400: "#FFCC0D";
-            readonly 500: "#F0B100";
-            readonly 600: "#D18800";
-            readonly 700: "#A66002";
-            readonly 800: "#894B0A";
-            readonly 900: "#743D0F";
-        };
-        readonly blue: {
-            readonly 50: "#F1F4FD";
-            readonly 100: "#DFE7FA";
-            readonly 200: "#C5D4F8";
-            readonly 300: "#9EB8F2";
-            readonly 400: "#7093EA";
-            readonly 500: "#4D6DE3";
-            readonly 600: "#3950D7";
-            readonly 700: "#303EC5";
-            readonly 800: "#2D35A0";
-            readonly 900: "#29317F";
-        };
-        readonly lightblue: {
-            readonly 50: "#EEFAFF";
-            readonly 100: "#D9F4FF";
-            readonly 200: "#BBEDFF";
-            readonly 300: "#8DE3FF";
-            readonly 400: "#57D0FF";
-            readonly 500: "#30B6FF";
-            readonly 600: "#1999F7";
-            readonly 700: "#1280E3";
-            readonly 800: "#1566B8";
-            readonly 900: "#175791";
-        };
-        readonly purple: {
-            readonly 50: "#FBF6FE";
-            readonly 100: "#F5EAFD";
-            readonly 200: "#EDD8FC";
-            readonly 300: "#E0BAF8";
-            readonly 400: "#CD8DF3";
-            readonly 500: "#B961EB";
-            readonly 600: "#A541DC";
-            readonly 700: "#9230C5";
-            readonly 800: "#782B9E";
-            readonly 900: "#62247F";
-        };
-        readonly pink: {
-            readonly 50: "#FFF4FE";
-            readonly 100: "#FFE7FD";
-            readonly 200: "#FFCFFA";
-            readonly 300: "#FEA9F1";
-            readonly 400: "#FD75E7";
-            readonly 500: "#F553DA";
-            readonly 600: "#D821B6";
-            readonly 700: "#B31892";
-            readonly 800: "#921676";
-            readonly 900: "#781761";
-        };
-        readonly neutral: {
-            readonly 50: "#FAFAFA";
-            readonly 100: "#F5F5F5";
-            readonly 200: "#E5E5E5";
-            readonly 300: "#D4D4D4";
-            readonly 400: "#A1A1A1";
-            readonly 500: "#737373";
-            readonly 600: "#525252";
-            readonly 700: "#404040";
-            readonly 800: "#262626";
-            readonly 900: "#171717";
-        };
-        readonly black: "#000000";
-        readonly white: "#FFFFFF";
-    };
-    readonly test: {
-        readonly default: "#ffffff";
-    };
-};
-
-type DefaultColors = typeof colors;
-type BuildDefaultTokens<N extends keyof DefaultColors> = {
-    [C in keyof DefaultColors[N]]: DefaultColors[N][C] extends string ? `${N & string}-${C & string}` : `${N & string}-${C & string}-${keyof DefaultColors[N][C] & (string | number)}`;
-}[keyof DefaultColors[N]];
-type DefaultColorToken = {
-    [N in keyof DefaultColors]: BuildDefaultTokens<N>;
-}[keyof DefaultColors];
-type ColorToken = DefaultColorToken | XplatColorTokenRegistry[keyof XplatColorTokenRegistry];
-interface ColorProps {
-    /** "xplat-blue-500" 형태로 지정 (자동완성 지원) */
-    color?: ColorToken;
-}
-
-export { type ColorToken as C, type ColorProps as a, colors as c };

package/dist/layout/Grid/GapGrid/index.cjs

@@ -1,32 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/layout/Grid/GapGrid/index.tsx
-var GapGrid_exports = {};
-__export(GapGrid_exports, {
-  default: () => GapGrid_default
-});
-module.exports = __toCommonJS(GapGrid_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var GapGrid = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children });
-};
-GapGrid.displayName = "GapGrid";
-var GapGrid_default = GapGrid;

package/dist/layout/Grid/GapGrid/index.d.cts

@@ -1,12 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-interface CenterGridProps {
-    children: React.ReactNode;
-}
-declare const GapGrid: {
-    (props: CenterGridProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-export { GapGrid as default };

package/dist/layout/Grid/GapGrid/index.d.ts

@@ -1,12 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-interface CenterGridProps {
-    children: React.ReactNode;
-}
-declare const GapGrid: {
-    (props: CenterGridProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-export { GapGrid as default };

package/dist/layout/Grid/GapGrid/index.js

@@ -1,11 +0,0 @@
-// src/layout/Grid/GapGrid/index.tsx
-import { jsx } from "react/jsx-runtime";
-var GapGrid = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsx("div", { children });
-};
-GapGrid.displayName = "GapGrid";
-var GapGrid_default = GapGrid;
-export {
-  GapGrid_default as default
-};