@x-plat/design-system 0.1.2 → 0.1.4

package/dist/components/index.js

@@ -1,441 +1,15 @@
-// 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"
-  }
-};
-
-// src/util/getColor.ts
-var getColorClass = (namespace, palette, shade) => {
-  const namespaceMap = colors[namespace];
-  const paletteMap = namespaceMap[palette];
-  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
-  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
-};
-
-// node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
-// src/components/Button/Button.tsx
-import { jsx } from "react/jsx-runtime";
-var Button = (props) => {
-  const {
-    children,
-    type = "primary",
-    colorNamespace = "xplat",
-    color = "black",
-    colorDepth,
-    disabled,
-    className,
-    ...rest
-  } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color,
-    colorDepth ?? 500
-  );
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: clsx_default("lib-xplat-button", type, colorClass, className),
-      disabled,
-      ...rest,
-      children
-    }
-  );
-};
-Button.displayName = "Button";
-var Button_default = Button;
-
-// src/components/Card/Card.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Card = ({ children, title, className }) => {
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-card", className), children: [
-    title && /* @__PURE__ */ jsx2("div", { className: "title", children: title }),
-    /* @__PURE__ */ jsx2("div", { className: "content", children })
-  ] });
-};
-Card.displayName = "Card";
-var Card_default = Card;
-
-// src/components/Chart/Chart.tsx
+// src/components/Accordion/Accordion.tsx
 import React from "react";
-import {
-  ArcElement,
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-  Tooltip
-} from "chart.js";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { Bar, Doughnut, Line, Pie } from "react-chartjs-2";
-
-// src/components/Chart/token/colorSet.ts
-var presets = [
-  [
-    colors.xplat.red[100],
-    colors.xplat.red[200],
-    colors.xplat.red[300],
-    colors.xplat.red[400],
-    colors.xplat.red[500],
-    colors.xplat.red[600]
-  ],
-  [
-    colors.xplat.orange[100],
-    colors.xplat.orange[200],
-    colors.xplat.orange[300],
-    colors.xplat.orange[400],
-    colors.xplat.orange[500],
-    colors.xplat.orange[600]
-  ],
-  [
-    colors.xplat.yellow[100],
-    colors.xplat.yellow[200],
-    colors.xplat.yellow[300],
-    colors.xplat.yellow[400],
-    colors.xplat.yellow[500],
-    colors.xplat.yellow[600]
-  ],
-  [
-    colors.xplat.green[100],
-    colors.xplat.green[200],
-    colors.xplat.green[300],
-    colors.xplat.green[400],
-    colors.xplat.green[500],
-    colors.xplat.green[600]
-  ],
-  [
-    colors.xplat.blue[100],
-    colors.xplat.blue[200],
-    colors.xplat.blue[300],
-    colors.xplat.blue[400],
-    colors.xplat.blue[500],
-    colors.xplat.blue[600]
-  ],
-  [
-    colors.xplat.lightblue[100],
-    colors.xplat.lightblue[200],
-    colors.xplat.lightblue[300],
-    colors.xplat.lightblue[400],
-    colors.xplat.lightblue[500],
-    colors.xplat.lightblue[600]
-  ],
-  [
-    colors.xplat.purple[100],
-    colors.xplat.purple[200],
-    colors.xplat.purple[300],
-    colors.xplat.purple[400],
-    colors.xplat.purple[500],
-    colors.xplat.purple[600]
-  ],
-  [
-    colors.xplat.pink[100],
-    colors.xplat.pink[200],
-    colors.xplat.pink[300],
-    colors.xplat.pink[400],
-    colors.xplat.pink[500],
-    colors.xplat.pink[600]
-  ],
-  [
-    colors.xplat.orange[300],
-    colors.xplat.red[300],
-    colors.xplat.yellow[300],
-    colors.xplat.green[300],
-    colors.xplat.blue[300],
-    colors.xplat.lightblue[300]
-  ],
-  [
-    colors.xplat.orange[400],
-    colors.xplat.red[400],
-    colors.xplat.yellow[400],
-    colors.xplat.green[400],
-    colors.xplat.blue[400],
-    colors.xplat.lightblue[400]
-  ],
-  [
-    colors.xplat.orange[500],
-    colors.xplat.red[500],
-    colors.xplat.yellow[500],
-    colors.xplat.green[500],
-    colors.xplat.blue[500],
-    colors.xplat.lightblue[500]
-  ]
-];
-var colorPresets = {
-  line: [
-    presets[0],
-    presets[1],
-    presets[2],
-    presets[3],
-    presets[4],
-    presets[5],
-    presets[6],
-    presets[7]
-  ],
-  bar: [
-    presets[0],
-    presets[1],
-    presets[2],
-    presets[3],
-    presets[4],
-    presets[5],
-    presets[6],
-    presets[7]
-  ],
-  doughnut: [presets[8], presets[9], presets[10]],
-  pie: [presets[8], presets[9], presets[10]]
-};
-
-// src/components/Chart/util.ts
-var getChartColorPreset = (type) => {
-  const index = Math.floor(Math.random() * colorPresets[type].length);
-  return colorPresets[type][index];
-};
-var getIndexColorByPreset = (preset, index) => {
-  const idx = index % preset.length;
-  return preset[idx];
-};
-
-// src/components/Chart/Chart.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-  ChartDataLabels
-);
-var Chart = (props) => {
-  const { type, data, labels } = props;
-  const chartRef = React.useRef(null);
-  const containerRef = React.useRef(null);
-  const datasets = React.useMemo(() => {
-    const pallette = getChartColorPreset(type);
-    return Object.entries(data).map(([key, values], index) => {
-      const uniqueColors = getIndexColorByPreset(pallette, index);
-      if (type === "pie" || type === "doughnut") {
-        return {
-          label: key,
-          data: values,
-          backgroundColor: uniqueColors
-        };
-      }
-      return {
-        label: key,
-        data: values,
-        backgroundColor: uniqueColors,
-        borderColor: uniqueColors,
-        maxBarThickness: 32
-      };
-    });
-  }, [data, type]);
-  const chartData = {
-    labels,
-    datasets
-  };
-  const options = {
-    plugins: {
-      legend: { display: false },
-      datalabels: { display: false },
-      tooltip: { enabled: true }
-    }
-  };
-  if (type === "line" || type === "bar") {
-    options.scales = {
-      y: {
-        beginAtZero: true,
-        drawBorder: false,
-        suggestedMax: Math.max(...Object.values(data).flat()) * 1.2,
-        ticks: {
-          maxTicksLimit: 7
-        }
-      },
-      x: {
-        grid: { display: false },
-        ticks: { display: false }
-      }
-    };
-  }
-  if (type === "pie" || type === "doughnut") {
-    options.plugins.datalabels = {
-      color: colors.xplat.white,
-      font: { weight: "bold" },
-      formatter: (value) => `${value}`
-    };
-  }
-  const renderChart = React.useMemo(() => {
-    switch (type) {
-      case "line":
-        return /* @__PURE__ */ jsx3(Line, { ref: chartRef, data: chartData, options });
-      case "bar":
-        return /* @__PURE__ */ jsx3(Bar, { ref: chartRef, data: chartData, options });
-      case "pie":
-        return /* @__PURE__ */ jsx3(Pie, { ref: chartRef, data: chartData, options });
-      case "doughnut":
-        return /* @__PURE__ */ jsx3(Doughnut, { ref: chartRef, data: chartData, options });
-      default:
-        return null;
-    }
-  }, [chartData, options, type]);
-  React.useEffect(() => {
-    if (!containerRef.current || !chartRef.current) return;
-    const observer = new ResizeObserver(() => {
-      requestAnimationFrame(() => {
-        chartRef.current?.resize();
-      });
-    });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, []);
-  return /* @__PURE__ */ jsx3("div", { className: "lib-xplat-chart", ref: containerRef, children: renderChart });
-};
-Chart.displayName = "Chart";
-var Chart_default = Chart;
 
 // src/tokens/svg/action/CopyIcon.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 // src/tokens/svg/action/CropIcon.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/DeleteIcon.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var DeleteIcon = () => /* @__PURE__ */ jsxs4(
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DeleteIcon = () => /* @__PURE__ */ jsxs3(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -444,21 +18,21 @@ var DeleteIcon = () => /* @__PURE__ */ jsxs4(
     viewBox: "0 0 16 16",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx3(
         "path",
         {
           d: "M6.66709 6.7334C6.99828 6.73361 7.26709 7.00216 7.26709 7.3334V11.3334C7.26698 11.6645 6.99822 11.9332 6.66709 11.9334C6.33578 11.9334 6.0672 11.6647 6.06709 11.3334V7.3334C6.06709 7.00203 6.33572 6.7334 6.66709 6.7334Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx3(
         "path",
         {
           d: "M9.3335 6.7334C9.66469 6.73361 9.9335 7.00216 9.9335 7.3334V11.3334C9.93339 11.6645 9.66462 11.9332 9.3335 11.9334C9.00219 11.9334 8.7336 11.6647 8.7335 11.3334V7.3334C8.7335 7.00203 9.00213 6.7334 9.3335 6.7334Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx3(
         "path",
         {
           fillRule: "evenodd",
@@ -473,77 +47,77 @@ var DeleteIcon = () => /* @__PURE__ */ jsxs4(
 var DeleteIcon_default = DeleteIcon;
 
 // src/tokens/svg/action/DownloadCloudIcon.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/DownloadIcon.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/Edit2Icon.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/Edit3Icon.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/EditIcon.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/ExternalLinkIcon.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/FilterIcon.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/Link2Icon.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/LinkIcon.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/MoveIcon.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/RefreshCcwIcon.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/RefreshCwIcon.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/RotateCcwIcon.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/RotateCwIcon.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/SaveIcon.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/ScissorsIcon.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/SearchIcon.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/SendIcon.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/Share2Icon.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/ShareIcon.tsx
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/Trash2Icon.tsx
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/TrashIcon.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/UploadCloudIcon.tsx
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/UploadIcon.tsx
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
-var UploadIcon = () => /* @__PURE__ */ jsxs20(
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var UploadIcon = () => /* @__PURE__ */ jsxs19(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -552,14 +126,14 @@ var UploadIcon = () => /* @__PURE__ */ jsxs20(
     viewBox: "0 0 16 16",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx27(
         "path",
         {
           d: "M13.9999 9.40039C14.3313 9.40039 14.5999 9.66902 14.5999 10.0004V12.6668C14.5999 13.1796 14.3961 13.6714 14.0335 14.034C13.6709 14.3966 13.1791 14.6004 12.6663 14.6004H3.3335C2.82074 14.6004 2.32888 14.3966 1.96631 14.034C1.60374 13.6714 1.3999 13.1796 1.3999 12.6668V10.0004C1.3999 9.66902 1.66853 9.40039 1.9999 9.40039C2.33127 9.40039 2.5999 9.66902 2.5999 10.0004V12.6668C2.5999 12.8613 2.67722 13.048 2.81475 13.1855C2.95227 13.3231 3.139 13.4004 3.3335 13.4004H12.6663C12.8608 13.4004 13.0475 13.3231 13.1851 13.1855C13.3226 13.048 13.3999 12.8613 13.3999 12.6668V10.0004C13.3999 9.66902 13.6685 9.40039 13.9999 9.40039Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx27(
         "path",
         {
           d: "M8.021 1.40117C8.02595 1.40134 8.03089 1.40166 8.03584 1.40195C8.06704 1.4038 8.09751 1.40802 8.12725 1.41445C8.14906 1.41917 8.17003 1.42682 8.19131 1.43398C8.20533 1.43872 8.21996 1.44154 8.2335 1.44727L8.23975 1.45039C8.3068 1.47957 8.37009 1.52135 8.4249 1.57617L11.7577 4.90977C11.9918 5.14403 11.9918 5.52394 11.7577 5.7582C11.5234 5.99219 11.1435 5.99224 10.9093 5.7582L8.5999 3.44883V10.0004C8.5999 10.3318 8.33127 10.6004 7.9999 10.6004C7.66853 10.6004 7.3999 10.3318 7.3999 10.0004V3.44883L5.09131 5.7582C4.85709 5.99228 4.47717 5.99215 4.24287 5.7582C4.0086 5.52393 4.00869 5.14409 4.24287 4.90977L7.57178 1.58008C7.57552 1.57627 7.57965 1.57285 7.5835 1.56914L7.62178 1.53477C7.62876 1.52908 7.63648 1.52446 7.64365 1.51914C7.65829 1.50829 7.67335 1.49818 7.68897 1.48867C7.70584 1.4784 7.72293 1.469 7.74053 1.46055C7.75681 1.45271 7.77347 1.44582 7.79053 1.43945C7.81028 1.4321 7.8304 1.42669 7.85068 1.42148C7.87179 1.41606 7.89281 1.40976 7.91475 1.40664C7.91788 1.40619 7.92098 1.40548 7.92412 1.40508C7.94894 1.40195 7.97424 1.40039 7.9999 1.40039C8.00697 1.40039 8.01399 1.40093 8.021 1.40117Z",
@@ -572,59 +146,59 @@ var UploadIcon = () => /* @__PURE__ */ jsxs20(
 var UploadIcon_default = UploadIcon;
 
 // src/tokens/svg/action/ZoomInIcon.tsx
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 
 // src/tokens/svg/action/ZoomOutIcon.tsx
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/CallActiveIcon.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/CallForwardedIcon.tsx
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/CallIcon.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/CallIncomingIcon.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/CallMissedIcon.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/CallOffIcon.tsx
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/CallOutgoingIcon.tsx
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 
 // src/tokens/svg/call/VoicemailIcon.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 
 // src/tokens/svg/chart/BarChart2Icon.tsx
-import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 
 // src/tokens/svg/chart/BarChartIcon.tsx
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 
 // src/tokens/svg/chart/PieChartIcon.tsx
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 
 // src/tokens/svg/chart/TableIcon.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 
 // src/tokens/svg/chart/TrendingDownIcon.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 
 // src/tokens/svg/chart/TrendingUpIcon.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 
 // src/tokens/svg/date/CalendarIcon.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 
 // src/tokens/svg/date/CalenderIcon.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var CalenderIcon = () => /* @__PURE__ */ jsx48(
+import { jsx as jsx45 } from "react/jsx-runtime";
+var CalenderIcon = () => /* @__PURE__ */ jsx45(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -632,7 +206,7 @@ var CalenderIcon = () => /* @__PURE__ */ jsx48(
     height: "1em",
     viewBox: "0 0 16 16",
     fill: "none",
-    children: /* @__PURE__ */ jsx48(
+    children: /* @__PURE__ */ jsx45(
       "path",
       {
         fillRule: "evenodd",
@@ -646,161 +220,161 @@ var CalenderIcon = () => /* @__PURE__ */ jsx48(
 var CalenderIcon_default = CalenderIcon;
 
 // src/tokens/svg/date/ClockIcon.tsx
-import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 
 // src/tokens/svg/date/SunriseIcon.tsx
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 
 // src/tokens/svg/date/SunsetIcon.tsx
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/BatteryChargingIcon.tsx
-import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/BatteryIcon.tsx
-import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/BluetoothIcon.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/CommandIcon.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/CpuIcon.tsx
-import { jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/DatabaseIcon.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/HardDriveIcon.tsx
-import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs37 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/MonitorIcon.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/PrinterIcon.tsx
-import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs38 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/ServerIcon.tsx
-import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs39 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/SmartphoneIcon.tsx
-import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs40 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/TabletIcon.tsx
-import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/TerminalIcon.tsx
-import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/TvIcon.tsx
-import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/WatchIcon.tsx
-import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/WifiIcon.tsx
-import { jsx as jsx67, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
 
 // src/tokens/svg/device/WifiOffIcon.tsx
-import { jsx as jsx68, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/AlignCenterIcon.tsx
-import { jsx as jsx69, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/AlignJustifyIcon.tsx
-import { jsx as jsx70, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/AlignLeftIcon.tsx
-import { jsx as jsx71, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/AlignRightIcon.tsx
-import { jsx as jsx72, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/BoldIcon.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/CodeIcon.tsx
-import { jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs51 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/ItalicIcon.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/PenToolIcon.tsx
-import { jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs52 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/TypeIcon.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 
 // src/tokens/svg/edit/UnderlineIcon.tsx
-import { jsx as jsx78, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/ArchiveIcon.tsx
-import { jsx as jsx79, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/BookIcon.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/BookOpenIcon.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/BookmarkIcon.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/ClipboardIcon.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/FileIcon.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/FileMinusIcon.tsx
-import { jsx as jsx85, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs55 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/FilePlusIcon.tsx
-import { jsx as jsx86, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs56 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/FileTextIcon.tsx
-import { jsx as jsx87, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs57 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/FolderIcon.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/FolderMinusIcon.tsx
-import { jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs58 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/FolderPlusIcon.tsx
-import { jsx as jsx90, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs59 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/PackageIcon.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/AirplayIcon.tsx
-import { jsx as jsx92, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs60 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/CameraIcon.tsx
-import { jsx as jsx93, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs61 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/CameraOffIcon.tsx
-import { jsx as jsx94, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs62 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/CastIcon.tsx
-import { jsx as jsx95, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs63 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/DiscIcon.tsx
-import { jsx as jsx96, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs64 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/FastForwardIcon.tsx
-import { jsx as jsx97, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs65 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/FilmIcon.tsx
-import { jsx as jsx98, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs66 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/HeadphonesIcon.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/ImageIcon.tsx
-import { jsx as jsx100, jsxs as jsxs68 } from "react/jsx-runtime";
-var ImageIcon = () => /* @__PURE__ */ jsxs68(
+import { jsx as jsx97, jsxs as jsxs67 } from "react/jsx-runtime";
+var ImageIcon = () => /* @__PURE__ */ jsxs67(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -809,7 +383,7 @@ var ImageIcon = () => /* @__PURE__ */ jsxs68(
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx100(
+      /* @__PURE__ */ jsx97(
         "path",
         {
           fillRule: "evenodd",
@@ -818,7 +392,7 @@ var ImageIcon = () => /* @__PURE__ */ jsxs68(
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx100(
+      /* @__PURE__ */ jsx97(
         "path",
         {
           fillRule: "evenodd",
@@ -833,20 +407,20 @@ var ImageIcon = () => /* @__PURE__ */ jsxs68(
 var ImageIcon_default = ImageIcon;
 
 // src/tokens/svg/media/MicIcon.tsx
-import { jsx as jsx101, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs68 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/MicOffIcon.tsx
-import { jsx as jsx102, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs69 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/MusicIcon.tsx
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/PauseCircleIcon.tsx
-import { jsx as jsx104, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs70 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/PauseIcon.tsx
-import { jsx as jsx105, jsxs as jsxs72 } from "react/jsx-runtime";
-var PauseIcon = () => /* @__PURE__ */ jsxs72(
+import { jsx as jsx102, jsxs as jsxs71 } from "react/jsx-runtime";
+var PauseIcon = () => /* @__PURE__ */ jsxs71(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -855,16 +429,16 @@ var PauseIcon = () => /* @__PURE__ */ jsxs72(
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx105("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.33301 2.58301C8.74714 2.58301 9.08288 2.91891 9.08301 3.33301V16.666C9.08301 17.0802 8.74722 17.416 8.33301 17.416H5C4.58579 17.416 4.25 17.0802 4.25 16.666V3.33301C4.25013 2.91891 4.58587 2.58301 5 2.58301H8.33301ZM5.75 15.916H7.58301V4.08301H5.75V15.916Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx105("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 2.58301C15.4139 2.58327 15.7499 2.91907 15.75 3.33301V16.666C15.75 17.0801 15.414 17.4158 15 17.416H11.667C11.2528 17.416 10.917 17.0802 10.917 16.666V3.33301C10.9171 2.91891 11.2529 2.58301 11.667 2.58301H15ZM12.417 15.916H14.25V4.08301H12.417V15.916Z", fill: "currentColor" })
+      /* @__PURE__ */ jsx102("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.33301 2.58301C8.74714 2.58301 9.08288 2.91891 9.08301 3.33301V16.666C9.08301 17.0802 8.74722 17.416 8.33301 17.416H5C4.58579 17.416 4.25 17.0802 4.25 16.666V3.33301C4.25013 2.91891 4.58587 2.58301 5 2.58301H8.33301ZM5.75 15.916H7.58301V4.08301H5.75V15.916Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx102("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 2.58301C15.4139 2.58327 15.7499 2.91907 15.75 3.33301V16.666C15.75 17.0801 15.414 17.4158 15 17.416H11.667C11.2528 17.416 10.917 17.0802 10.917 16.666V3.33301C10.9171 2.91891 11.2529 2.58301 11.667 2.58301H15ZM12.417 15.916H14.25V4.08301H12.417V15.916Z", fill: "currentColor" })
     ]
   }
 );
 var PauseIcon_default = PauseIcon;
 
 // src/tokens/svg/media/PlayCircleIcon.tsx
-import { jsx as jsx106, jsxs as jsxs73 } from "react/jsx-runtime";
-var PlayCircleIcon = () => /* @__PURE__ */ jsxs73(
+import { jsx as jsx103, jsxs as jsxs72 } from "react/jsx-runtime";
+var PlayCircleIcon = () => /* @__PURE__ */ jsxs72(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -873,241 +447,241 @@ var PlayCircleIcon = () => /* @__PURE__ */ jsxs73(
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsxs73("g", { clipPath: "url(#playcircle-clip)", children: [
-        /* @__PURE__ */ jsx106("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.98047 6.00586C8.22424 5.87564 8.52002 5.88965 8.75 6.04297L13.75 9.37598C13.9583 9.51505 14.0839 9.74954 14.084 10C14.0839 10.2505 13.9584 10.4849 13.75 10.624L8.75 13.958C8.52015 14.1112 8.22412 14.1251 7.98047 13.9951C7.73677 13.8647 7.58419 13.6104 7.58398 13.334V6.66699L7.59082 6.56445C7.6233 6.32874 7.7671 6.12005 7.98047 6.00586ZM9.08398 11.9316L11.9814 10L9.08398 8.06738V11.9316Z", fill: "currentColor" }),
-        /* @__PURE__ */ jsx106("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 0.916992C15.0163 0.917256 19.0838 4.98373 19.084 10C19.0839 15.0163 15.0163 19.0837 10 19.084C4.98364 19.0838 0.916148 15.0164 0.916016 10C0.916191 4.98367 4.98367 0.917168 10 0.916992ZM10 2.41699C5.8121 2.41717 2.41717 5.8121 2.41699 10C2.41712 14.1879 5.81207 17.5838 10 17.584C14.1879 17.5837 17.5839 14.1879 17.584 10C17.5838 5.81215 14.1878 2.41726 10 2.41699Z", fill: "currentColor" })
+      /* @__PURE__ */ jsxs72("g", { clipPath: "url(#playcircle-clip)", children: [
+        /* @__PURE__ */ jsx103("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.98047 6.00586C8.22424 5.87564 8.52002 5.88965 8.75 6.04297L13.75 9.37598C13.9583 9.51505 14.0839 9.74954 14.084 10C14.0839 10.2505 13.9584 10.4849 13.75 10.624L8.75 13.958C8.52015 14.1112 8.22412 14.1251 7.98047 13.9951C7.73677 13.8647 7.58419 13.6104 7.58398 13.334V6.66699L7.59082 6.56445C7.6233 6.32874 7.7671 6.12005 7.98047 6.00586ZM9.08398 11.9316L11.9814 10L9.08398 8.06738V11.9316Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx103("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 0.916992C15.0163 0.917256 19.0838 4.98373 19.084 10C19.0839 15.0163 15.0163 19.0837 10 19.084C4.98364 19.0838 0.916148 15.0164 0.916016 10C0.916191 4.98367 4.98367 0.917168 10 0.916992ZM10 2.41699C5.8121 2.41717 2.41717 5.8121 2.41699 10C2.41712 14.1879 5.81207 17.5838 10 17.584C14.1879 17.5837 17.5839 14.1879 17.584 10C17.5838 5.81215 14.1878 2.41726 10 2.41699Z", fill: "currentColor" })
       ] }),
-      /* @__PURE__ */ jsx106("defs", { children: /* @__PURE__ */ jsx106("clipPath", { id: "playcircle-clip", children: /* @__PURE__ */ jsx106("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
+      /* @__PURE__ */ jsx103("defs", { children: /* @__PURE__ */ jsx103("clipPath", { id: "playcircle-clip", children: /* @__PURE__ */ jsx103("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
     ]
   }
 );
 var PlayCircleIcon_default = PlayCircleIcon;
 
 // src/tokens/svg/media/PlayIcon.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/RepeatIcon.tsx
-import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs73 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/RewindIcon.tsx
-import { jsx as jsx109, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/SkipBackIcon.tsx
-import { jsx as jsx110, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs75 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/SkipForwardIcon.tsx
-import { jsx as jsx111, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs76 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/SpeakerIcon.tsx
-import { jsx as jsx112, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs77 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/StopCircleIcon.tsx
-import { jsx as jsx113, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs78 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/VideoIcon.tsx
-import { jsx as jsx114 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/VideoOffIcon.tsx
-import { jsx as jsx115, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs79 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/Volume1Icon.tsx
-import { jsx as jsx116, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs80 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/Volume2Icon.tsx
-import { jsx as jsx117, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs81 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/VolumeIcon.tsx
-import { jsx as jsx118 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 
 // src/tokens/svg/media/VolumeXIcon.tsx
-import { jsx as jsx119, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs82 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ActivityIcon.tsx
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/AnchorIcon.tsx
-import { jsx as jsx121, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs83 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ApertureIcon.tsx
-import { jsx as jsx122, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs84 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/AwardIcon.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/BellIcon.tsx
-import { jsx as jsx124, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs85 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/BellOffIcon.tsx
-import { jsx as jsx125, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs86 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/BoxIcon.tsx
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/BriefcaseIcon.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CloudDrizzleIcon.tsx
-import { jsx as jsx128, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs87 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CloudIcon.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CloudLightningIcon.tsx
-import { jsx as jsx130, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs88 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CloudOffIcon.tsx
-import { jsx as jsx131, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs89 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CloudRainIcon.tsx
-import { jsx as jsx132, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs90 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CloudSnowIcon.tsx
-import { jsx as jsx133, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs91 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CoffeeIcon.tsx
-import { jsx as jsx134, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs92 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CreditCardIcon.tsx
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/CrosshairIcon.tsx
-import { jsx as jsx136, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs93 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/DollarSignIcon.tsx
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/DropletIcon.tsx
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/FeatherIcon.tsx
-import { jsx as jsx139, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs94 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/FlagIcon.tsx
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/FrownIcon.tsx
-import { jsx as jsx141, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs95 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/GiftIcon.tsx
-import { jsx as jsx142, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs96 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/GitBranchIcon.tsx
-import { jsx as jsx143 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/GitCommitIcon.tsx
-import { jsx as jsx144 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/GitMergeIcon.tsx
-import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/GitPullRequestIcon.tsx
-import { jsx as jsx146, jsxs as jsxs98 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs97 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/GlobeIcon.tsx
-import { jsx as jsx147, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs98 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/HeartIcon.tsx
-import { jsx as jsx148 } from "react/jsx-runtime";
+import { jsx as jsx145 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/HomeIcon.tsx
-import { jsx as jsx149 } from "react/jsx-runtime";
+import { jsx as jsx146 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/InboxIcon.tsx
-import { jsx as jsx150 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/LayersIcon.tsx
-import { jsx as jsx151, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx148, jsxs as jsxs99 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/LifeBuoyIcon.tsx
-import { jsx as jsx152, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx149, jsxs as jsxs100 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/MehIcon.tsx
-import { jsx as jsx153, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs101 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/MessageCircleIcon.tsx
-import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx151 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/MessageSquareIcon.tsx
-import { jsx as jsx155 } from "react/jsx-runtime";
+import { jsx as jsx152 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/MoonIcon.tsx
-import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx153 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/MousePointerIcon.tsx
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx154 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/PaperclipIcon.tsx
-import { jsx as jsx158 } from "react/jsx-runtime";
+import { jsx as jsx155 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/PocketIcon.tsx
-import { jsx as jsx159, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs102 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/PowerIcon.tsx
-import { jsx as jsx160, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs103 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/RadioIcon.tsx
-import { jsx as jsx161, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx158, jsxs as jsxs104 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ShieldIcon.tsx
-import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ShieldOffIcon.tsx
-import { jsx as jsx163, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx160, jsxs as jsxs105 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ShoppingBagIcon.tsx
-import { jsx as jsx164, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs106 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ShoppingCartIcon.tsx
-import { jsx as jsx165, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx162, jsxs as jsxs107 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ShuffleIcon.tsx
-import { jsx as jsx166, jsxs as jsxs109 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs108 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/SmileIcon.tsx
-import { jsx as jsx167, jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs109 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/StarIcon.tsx
-import { jsx as jsx168 } from "react/jsx-runtime";
+import { jsx as jsx165 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/SunIcon.tsx
-import { jsx as jsx169, jsxs as jsxs111 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs110 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/TagIcon.tsx
-import { jsx as jsx170, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx167, jsxs as jsxs111 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/TargetIcon.tsx
-import { jsx as jsx171, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx168, jsxs as jsxs112 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ThermometerIcon.tsx
-import { jsx as jsx172 } from "react/jsx-runtime";
+import { jsx as jsx169 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ThumbsDownIcon.tsx
-import { jsx as jsx173 } from "react/jsx-runtime";
+import { jsx as jsx170 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ThumbsUpIcon.tsx
-import { jsx as jsx174 } from "react/jsx-runtime";
+import { jsx as jsx171 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ToolIcon.tsx
-import { jsx as jsx175 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/TruckIcon.tsx
-import { jsx as jsx176 } from "react/jsx-runtime";
+import { jsx as jsx173 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/UmbrellaIcon.tsx
-import { jsx as jsx177, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx174, jsxs as jsxs113 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/WindIcon.tsx
-import { jsx as jsx178, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx175, jsxs as jsxs114 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ZapIcon.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 
 // src/tokens/svg/misc/ZapOffIcon.tsx
-import { jsx as jsx180, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs115 } from "react/jsx-runtime";
 
 // src/tokens/svg/Input/CloseEyeIcon.tsx
-import { jsx as jsx181, jsxs as jsxs117 } from "react/jsx-runtime";
-var CloseEyeIcon = () => /* @__PURE__ */ jsxs117(
+import { jsx as jsx178, jsxs as jsxs116 } from "react/jsx-runtime";
+var CloseEyeIcon = () => /* @__PURE__ */ jsxs116(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1116,7 +690,7 @@ var CloseEyeIcon = () => /* @__PURE__ */ jsxs117(
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx181(
+      /* @__PURE__ */ jsx178(
         "path",
         {
           fillRule: "evenodd",
@@ -1125,7 +699,7 @@ var CloseEyeIcon = () => /* @__PURE__ */ jsxs117(
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx181(
+      /* @__PURE__ */ jsx178(
         "path",
         {
           d: "M9.91701 2.5008C13.1328 2.5011 15.609 4.33645 17.2344 6.07014C18.0538 6.94422 18.6805 7.81555 19.1016 8.4676C19.3125 8.79427 19.473 9.06857 19.582 9.26252C19.6366 9.35947 19.6784 9.43688 19.707 9.49103C19.7213 9.51797 19.7325 9.53938 19.7402 9.55451C19.744 9.56183 19.7478 9.5677 19.75 9.57209L19.7539 9.5799L19.7901 9.66486C19.8604 9.86248 19.8453 10.0829 19.7451 10.2703C19.2148 11.2625 18.5817 12.1966 17.8574 13.0574C17.5908 13.3743 17.1177 13.4147 16.8008 13.1483C16.4839 12.8816 16.4424 12.4085 16.709 12.0916C17.2798 11.4133 17.7876 10.6845 18.2266 9.91486C18.1327 9.75115 18.0048 9.53442 17.8418 9.28205C17.4558 8.68431 16.8833 7.88875 16.1406 7.0965C14.6413 5.49721 12.5337 4.00013 9.91701 3.99982H9.91505C9.3843 3.99858 8.85471 4.05957 8.33791 4.18049C7.93468 4.27487 7.53105 4.02408 7.43654 3.62092C7.34213 3.21761 7.5928 2.81396 7.99611 2.71955C8.62561 2.57227 9.27051 2.49939 9.91701 2.5008Z",
@@ -1138,14 +712,14 @@ var CloseEyeIcon = () => /* @__PURE__ */ jsxs117(
 var CloseEyeIcon_default = CloseEyeIcon;
 
 // src/tokens/svg/Input/EyeIcon.tsx
-import { jsx as jsx182, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx179, jsxs as jsxs117 } from "react/jsx-runtime";
 
 // src/tokens/svg/Input/EyeOffIcon.tsx
-import { jsx as jsx183, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx180, jsxs as jsxs118 } from "react/jsx-runtime";
 
 // src/tokens/svg/Input/OpenEyeIcon.tsx
-import { jsx as jsx184, jsxs as jsxs120 } from "react/jsx-runtime";
-var OpenEyeIcon = () => /* @__PURE__ */ jsxs120(
+import { jsx as jsx181, jsxs as jsxs119 } from "react/jsx-runtime";
+var OpenEyeIcon = () => /* @__PURE__ */ jsxs119(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1154,7 +728,7 @@ var OpenEyeIcon = () => /* @__PURE__ */ jsxs120(
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx184(
+      /* @__PURE__ */ jsx181(
         "path",
         {
           fillRule: "evenodd",
@@ -1163,7 +737,7 @@ var OpenEyeIcon = () => /* @__PURE__ */ jsxs120(
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx184(
+      /* @__PURE__ */ jsx181(
         "path",
         {
           fillRule: "evenodd",
@@ -1178,140 +752,140 @@ var OpenEyeIcon = () => /* @__PURE__ */ jsxs120(
 var OpenEyeIcon_default = OpenEyeIcon;
 
 // src/tokens/svg/navigation/ArrowDownCircleIcon.tsx
-import { jsx as jsx185, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs120 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowDownIcon.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx183 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowDownLeftIcon.tsx
-import { jsx as jsx187 } from "react/jsx-runtime";
+import { jsx as jsx184 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowDownRightIcon.tsx
-import { jsx as jsx188 } from "react/jsx-runtime";
+import { jsx as jsx185 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowLeftCircleIcon.tsx
-import { jsx as jsx189, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs121 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowLeftIcon.tsx
-import { jsx as jsx190 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowRightCircleIcon.tsx
-import { jsx as jsx191, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx188, jsxs as jsxs122 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowRightIcon.tsx
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx189 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowUpCircleIcon.tsx
-import { jsx as jsx193, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs123 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowUpIcon.tsx
-import { jsx as jsx194 } from "react/jsx-runtime";
+import { jsx as jsx191 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowUpLeftIcon.tsx
-import { jsx as jsx195 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/ArrowUpRightIcon.tsx
-import { jsx as jsx196 } from "react/jsx-runtime";
+import { jsx as jsx193 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CompassIcon.tsx
-import { jsx as jsx197, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx194, jsxs as jsxs124 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerDownLeftIcon.tsx
-import { jsx as jsx198 } from "react/jsx-runtime";
+import { jsx as jsx195 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerDownRightIcon.tsx
-import { jsx as jsx199 } from "react/jsx-runtime";
+import { jsx as jsx196 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerLeftDownIcon.tsx
-import { jsx as jsx200 } from "react/jsx-runtime";
+import { jsx as jsx197 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerLeftUpIcon.tsx
-import { jsx as jsx201 } from "react/jsx-runtime";
+import { jsx as jsx198 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerRightDownIcon.tsx
-import { jsx as jsx202 } from "react/jsx-runtime";
+import { jsx as jsx199 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerRightUpIcon.tsx
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx200 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerUpLeftIcon.tsx
-import { jsx as jsx204 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/CornerUpRightIcon.tsx
-import { jsx as jsx205 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/MapIcon.tsx
-import { jsx as jsx206, jsxs as jsxs126 } from "react/jsx-runtime";
+import { jsx as jsx203, jsxs as jsxs125 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/MapPinIcon.tsx
-import { jsx as jsx207, jsxs as jsxs127 } from "react/jsx-runtime";
+import { jsx as jsx204, jsxs as jsxs126 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/Navigation2Icon.tsx
-import { jsx as jsx208 } from "react/jsx-runtime";
+import { jsx as jsx205 } from "react/jsx-runtime";
 
 // src/tokens/svg/navigation/NavigationIcon.tsx
-import { jsx as jsx209 } from "react/jsx-runtime";
+import { jsx as jsx206 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/ChromeIcon.tsx
-import { jsx as jsx210, jsxs as jsxs128 } from "react/jsx-runtime";
+import { jsx as jsx207, jsxs as jsxs127 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/CodepenIcon.tsx
-import { jsx as jsx211, jsxs as jsxs129 } from "react/jsx-runtime";
+import { jsx as jsx208, jsxs as jsxs128 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/CodesandboxIcon.tsx
-import { jsx as jsx212 } from "react/jsx-runtime";
+import { jsx as jsx209 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/DribbbleIcon.tsx
-import { jsx as jsx213, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx210, jsxs as jsxs129 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/FacebookIcon.tsx
-import { jsx as jsx214 } from "react/jsx-runtime";
+import { jsx as jsx211 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/FigmaIcon.tsx
-import { jsx as jsx215 } from "react/jsx-runtime";
+import { jsx as jsx212 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/FramerIcon.tsx
-import { jsx as jsx216 } from "react/jsx-runtime";
+import { jsx as jsx213 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/GithubIcon.tsx
-import { jsx as jsx217 } from "react/jsx-runtime";
+import { jsx as jsx214 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/GitlabIcon.tsx
-import { jsx as jsx218, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs130 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/InstagramIcon.tsx
-import { jsx as jsx219, jsxs as jsxs132 } from "react/jsx-runtime";
+import { jsx as jsx216, jsxs as jsxs131 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/LinkedinIcon.tsx
-import { jsx as jsx220, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx217, jsxs as jsxs132 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/RssIcon.tsx
-import { jsx as jsx221, jsxs as jsxs134 } from "react/jsx-runtime";
+import { jsx as jsx218, jsxs as jsxs133 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/SlackIcon.tsx
-import { jsx as jsx222, jsxs as jsxs135 } from "react/jsx-runtime";
+import { jsx as jsx219, jsxs as jsxs134 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/TrelloIcon.tsx
-import { jsx as jsx223, jsxs as jsxs136 } from "react/jsx-runtime";
+import { jsx as jsx220, jsxs as jsxs135 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/TwitchIcon.tsx
-import { jsx as jsx224, jsxs as jsxs137 } from "react/jsx-runtime";
+import { jsx as jsx221, jsxs as jsxs136 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/TwitterIcon.tsx
-import { jsx as jsx225 } from "react/jsx-runtime";
+import { jsx as jsx222 } from "react/jsx-runtime";
 
 // src/tokens/svg/social/YoutubeIcon.tsx
-import { jsx as jsx226, jsxs as jsxs138 } from "react/jsx-runtime";
+import { jsx as jsx223, jsxs as jsxs137 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/AtSignIcon.tsx
-import { jsx as jsx227, jsxs as jsxs139 } from "react/jsx-runtime";
+import { jsx as jsx224, jsxs as jsxs138 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/CheckCircleIcon.tsx
-import { jsx as jsx228, jsxs as jsxs140 } from "react/jsx-runtime";
+import { jsx as jsx225, jsxs as jsxs139 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/CheckIcon.tsx
-import { jsx as jsx229 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx229(
+import { jsx as jsx226 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx226(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1319,7 +893,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx229(
     height: "1em",
     viewBox: "0 0 12 9",
     fill: "none",
-    children: /* @__PURE__ */ jsx229(
+    children: /* @__PURE__ */ jsx226(
       "path",
       {
         d: "M10.842 0.175637C11.0762 -0.0586118 11.4561 -0.0584793 11.6904 0.175637C11.9247 0.409951 11.9247 0.78976 11.6904 1.02407L4.35759 8.35767C4.24516 8.46996 4.09228 8.53338 3.93338 8.53345C3.77449 8.53336 3.62157 8.46994 3.50916 8.35767L0.175563 5.02407C-0.0585904 4.78985 -0.0584518 4.40995 0.175563 4.17564C0.409855 3.94135 0.789681 3.94139 1.024 4.17564L3.93259 7.08423L10.842 0.175637Z",
@@ -1331,11 +905,11 @@ var CheckIcon = () => /* @__PURE__ */ jsx229(
 var CheckIcon_default = CheckIcon;
 
 // src/tokens/svg/ui/CheckSquareIcon.tsx
-import { jsx as jsx230, jsxs as jsxs141 } from "react/jsx-runtime";
+import { jsx as jsx227, jsxs as jsxs140 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ChevronDownIcon.tsx
-import { jsx as jsx231 } from "react/jsx-runtime";
-var ChevronDownIcon = () => /* @__PURE__ */ jsx231(
+import { jsx as jsx228 } from "react/jsx-runtime";
+var ChevronDownIcon = () => /* @__PURE__ */ jsx228(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1343,7 +917,7 @@ var ChevronDownIcon = () => /* @__PURE__ */ jsx231(
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none",
-    children: /* @__PURE__ */ jsx231(
+    children: /* @__PURE__ */ jsx228(
       "path",
       {
         d: "M14.4698 6.96967C14.7627 6.67678 15.2374 6.67678 15.5303 6.96967C15.8232 7.26257 15.8232 7.73734 15.5303 8.03022L10.5303 13.0302C10.2375 13.3231 9.76269 13.3231 9.46979 13.0302L4.46979 8.03022C4.1769 7.73732 4.1769 7.26256 4.46979 6.96967C4.76269 6.67678 5.23745 6.67678 5.53034 6.96967L10.0001 11.4394L14.4698 6.96967Z",
@@ -1355,294 +929,919 @@ var ChevronDownIcon = () => /* @__PURE__ */ jsx231(
 var ChevronDownIcon_default = ChevronDownIcon;
 
 // src/tokens/svg/ui/ChevronLeftIcon.tsx
-import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx229 } from "react/jsx-runtime";
+var ChevronLeftIcon = () => /* @__PURE__ */ jsx229(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx229("path", { d: "M11.9697 4.46978C12.2626 4.17689 12.7373 4.17689 13.0302 4.46978C13.3231 4.76268 13.3231 5.23746 13.0302 5.53033L8.56049 10.0001L13.0302 14.4698C13.3231 14.7627 13.3231 15.2375 13.0302 15.5303C12.7373 15.8232 12.2626 15.8232 11.9697 15.5303L6.96967 10.5303C6.67678 10.2374 6.67678 9.76268 6.96967 9.46978L11.9697 4.46978Z", fill: "currentColor" })
+  }
+);
+var ChevronLeftIcon_default = ChevronLeftIcon;
 
 // src/tokens/svg/ui/ChevronRightIcon.tsx
-import { jsx as jsx233 } from "react/jsx-runtime";
+import { jsx as jsx230 } from "react/jsx-runtime";
+var ChevronRightIcon = () => /* @__PURE__ */ jsx230(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx230("path", { d: "M6.96967 4.46978C7.26256 4.17689 7.73732 4.17689 8.03022 4.46978L13.0302 9.46978C13.3231 9.76268 13.3231 10.2375 13.0302 10.5303L8.03022 15.5303C7.73734 15.8232 7.26257 15.8232 6.96967 15.5303C6.67678 15.2374 6.67678 14.7627 6.96967 14.4698L11.4394 10.0001L6.96967 5.53033C6.67678 5.23744 6.67678 4.76268 6.96967 4.46978Z", fill: "currentColor" })
+  }
+);
+var ChevronRightIcon_default = ChevronRightIcon;
 
 // src/tokens/svg/ui/ChevronUpIcon.tsx
-import { jsx as jsx234 } from "react/jsx-runtime";
+import { jsx as jsx231 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ChevronsDownIcon.tsx
-import { jsx as jsx235, jsxs as jsxs142 } from "react/jsx-runtime";
+import { jsx as jsx232, jsxs as jsxs141 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ChevronsLeftIcon.tsx
-import { jsx as jsx236, jsxs as jsxs143 } from "react/jsx-runtime";
+import { jsx as jsx233, jsxs as jsxs142 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ChevronsRightIcon.tsx
-import { jsx as jsx237, jsxs as jsxs144 } from "react/jsx-runtime";
+import { jsx as jsx234, jsxs as jsxs143 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ChevronsUpIcon.tsx
-import { jsx as jsx238, jsxs as jsxs145 } from "react/jsx-runtime";
+import { jsx as jsx235, jsxs as jsxs144 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/CircleIcon.tsx
-import { jsx as jsx239, jsxs as jsxs146 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs145 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ColumnsIcon.tsx
-import { jsx as jsx240 } from "react/jsx-runtime";
+import { jsx as jsx237 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/DivideCircleIcon.tsx
-import { jsx as jsx241, jsxs as jsxs147 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs146 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/DivideIcon.tsx
-import { jsx as jsx242, jsxs as jsxs148 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs147 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/DivideSquareIcon.tsx
-import { jsx as jsx243, jsxs as jsxs149 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs148 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/GridIcon.tsx
-import { jsx as jsx244, jsxs as jsxs150 } from "react/jsx-runtime";
+import { jsx as jsx241, jsxs as jsxs149 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/HashIcon.tsx
-import { jsx as jsx245 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/HexagonIcon.tsx
-import { jsx as jsx246 } from "react/jsx-runtime";
+import { jsx as jsx243 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/LayoutIcon.tsx
-import { jsx as jsx247 } from "react/jsx-runtime";
+import { jsx as jsx244 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ListIcon.tsx
-import { jsx as jsx248, jsxs as jsxs151 } from "react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs150 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/LoaderIcon.tsx
-import { jsx as jsx249, jsxs as jsxs152 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs151 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/Maximize2Icon.tsx
-import { jsx as jsx250, jsxs as jsxs153 } from "react/jsx-runtime";
+import { jsx as jsx247, jsxs as jsxs152 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MaximizeIcon.tsx
-import { jsx as jsx251, jsxs as jsxs154 } from "react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs153 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MenuIcon.tsx
-import { jsx as jsx252, jsxs as jsxs155 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs154 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/Minimize2Icon.tsx
-import { jsx as jsx253, jsxs as jsxs156 } from "react/jsx-runtime";
+import { jsx as jsx250, jsxs as jsxs155 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MinimizeIcon.tsx
-import { jsx as jsx254, jsxs as jsxs157 } from "react/jsx-runtime";
+import { jsx as jsx251, jsxs as jsxs156 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MinusCircleIcon.tsx
-import { jsx as jsx255, jsxs as jsxs158 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs157 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MinusIcon.tsx
-import { jsx as jsx256 } from "react/jsx-runtime";
+import { jsx as jsx253 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MinusSquareIcon.tsx
-import { jsx as jsx257, jsxs as jsxs159 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs158 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MoreHorizontalIcon.tsx
-import { jsx as jsx258, jsxs as jsxs160 } from "react/jsx-runtime";
+import { jsx as jsx255, jsxs as jsxs159 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/MoreVerticalIcon.tsx
-import { jsx as jsx259, jsxs as jsxs161 } from "react/jsx-runtime";
+import { jsx as jsx256, jsxs as jsxs160 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/OctagonIcon.tsx
-import { jsx as jsx260, jsxs as jsxs162 } from "react/jsx-runtime";
+import { jsx as jsx257, jsxs as jsxs161 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/PercentIcon.tsx
-import { jsx as jsx261, jsxs as jsxs163 } from "react/jsx-runtime";
+import { jsx as jsx258, jsxs as jsxs162 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/PlusCircleIcon.tsx
-import { jsx as jsx262, jsxs as jsxs164 } from "react/jsx-runtime";
+import { jsx as jsx259, jsxs as jsxs163 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/PlusIcon.tsx
-import { jsx as jsx263 } from "react/jsx-runtime";
+import { jsx as jsx260 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/PlusSquareIcon.tsx
-import { jsx as jsx264, jsxs as jsxs165 } from "react/jsx-runtime";
+import { jsx as jsx261, jsxs as jsxs164 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/SettingsIcon.tsx
-import { jsx as jsx265, jsxs as jsxs166 } from "react/jsx-runtime";
+import { jsx as jsx262, jsxs as jsxs165 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/SidebarIcon.tsx
-import { jsx as jsx266 } from "react/jsx-runtime";
+import { jsx as jsx263 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/SlashIcon.tsx
-import { jsx as jsx267, jsxs as jsxs167 } from "react/jsx-runtime";
+import { jsx as jsx264, jsxs as jsxs166 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/SlidersIcon.tsx
-import { jsx as jsx268, jsxs as jsxs168 } from "react/jsx-runtime";
+import { jsx as jsx265, jsxs as jsxs167 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/SquareIcon.tsx
-import { jsx as jsx269 } from "react/jsx-runtime";
+import { jsx as jsx266 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ToggleLeftIcon.tsx
-import { jsx as jsx270, jsxs as jsxs169 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs168 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/ToggleRightIcon.tsx
-import { jsx as jsx271, jsxs as jsxs170 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs169 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/TriangleIcon.tsx
-import { jsx as jsx272 } from "react/jsx-runtime";
+import { jsx as jsx269 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/XCircleIcon.tsx
-import { jsx as jsx273, jsxs as jsxs171 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs170 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/XIcon.tsx
-import { jsx as jsx274 } from "react/jsx-runtime";
+import { jsx as jsx271 } from "react/jsx-runtime";
+var XIcon = () => /* @__PURE__ */ jsx271(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ jsx271("path", { d: "M14.4697 4.46979C14.7626 4.1769 15.2373 4.1769 15.5302 4.46979C15.8231 4.76269 15.8231 5.23746 15.5302 5.53034L11.0605 10.0001L15.5302 14.4698C15.8231 14.7627 15.8231 15.2375 15.5302 15.5303C15.2373 15.8232 14.7626 15.8232 14.4697 15.5303L9.99994 11.0606L5.53022 15.5303C5.23734 15.8232 4.76257 15.8232 4.46967 15.5303C4.17678 15.2374 4.17678 14.7627 4.46967 14.4698L8.9394 10.0001L4.46967 5.53034C4.17678 5.23745 4.17678 4.76269 4.46967 4.46979C4.76256 4.1769 5.23732 4.1769 5.53022 4.46979L9.99994 8.93952L14.4697 4.46979Z", fill: "currentColor" })
+  }
+);
+var XIcon_default = XIcon;
 
 // src/tokens/svg/ui/XOctagonIcon.tsx
-import { jsx as jsx275, jsxs as jsxs172 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs171 } from "react/jsx-runtime";
 
 // src/tokens/svg/ui/XSquareIcon.tsx
-import { jsx as jsx276, jsxs as jsxs173 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs172 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/GierIcon.tsx
-import { jsx as jsx277, jsxs as jsxs174 } from "react/jsx-runtime";
+import { jsx as jsx274, jsxs as jsxs173 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/KeyIcon.tsx
-import { jsx as jsx278 } from "react/jsx-runtime";
+import { jsx as jsx275 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/LockIcon.tsx
-import { jsx as jsx279 } from "react/jsx-runtime";
+import { jsx as jsx276 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/LogInIcon.tsx
-import { jsx as jsx280, jsxs as jsxs175 } from "react/jsx-runtime";
+import { jsx as jsx277, jsxs as jsxs174 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/LogOutIcon.tsx
-import { jsx as jsx281, jsxs as jsxs176 } from "react/jsx-runtime";
+import { jsx as jsx278, jsxs as jsxs175 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/MailIcon.tsx
-import { jsx as jsx282 } from "react/jsx-runtime";
+import { jsx as jsx279 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/ProfileIcon.tsx
-import { jsx as jsx283, jsxs as jsxs177 } from "react/jsx-runtime";
+import { jsx as jsx280, jsxs as jsxs176 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/UnlockIcon.tsx
-import { jsx as jsx284 } from "react/jsx-runtime";
+import { jsx as jsx281 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/UserCheckIcon.tsx
-import { jsx as jsx285, jsxs as jsxs178 } from "react/jsx-runtime";
+import { jsx as jsx282, jsxs as jsxs177 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/UserIcon.tsx
-import { jsx as jsx286, jsxs as jsxs179 } from "react/jsx-runtime";
+import { jsx as jsx283, jsxs as jsxs178 } from "react/jsx-runtime";
 
 // src/tokens/svg/user/UserMinusIcon.tsx
-import { jsx as jsx287, jsxs as jsxs180 } from "react/jsx-runtime";
+import { jsx as jsx284, jsxs as jsxs179 } from "react/jsx-runtime";
+
+// src/tokens/svg/user/UserPlusIcon.tsx
+import { jsx as jsx285, jsxs as jsxs180 } from "react/jsx-runtime";
+
+// src/tokens/svg/user/UserXIcon.tsx
+import { jsx as jsx286, jsxs as jsxs181 } from "react/jsx-runtime";
+
+// src/tokens/svg/user/UsersIcon.tsx
+import { jsx as jsx287, jsxs as jsxs182 } from "react/jsx-runtime";
+
+// src/tokens/svg/validation/AlertCircleIcon.tsx
+import { jsx as jsx288, jsxs as jsxs183 } from "react/jsx-runtime";
+
+// src/tokens/svg/validation/AlertOctagonIcon.tsx
+import { jsx as jsx289, jsxs as jsxs184 } from "react/jsx-runtime";
+
+// src/tokens/svg/validation/AlertTriangleIcon.tsx
+import { jsx as jsx290, jsxs as jsxs185 } from "react/jsx-runtime";
+
+// src/tokens/svg/validation/ErrorIcon.tsx
+import { jsx as jsx291, jsxs as jsxs186 } from "react/jsx-runtime";
+var ErrorIcon = () => /* @__PURE__ */ jsxs186(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs186("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ jsx291(
+          "path",
+          {
+            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx291(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx291("defs", { children: /* @__PURE__ */ jsx291("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ jsx291("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/validation/HelpCircleIcon.tsx
+import { jsx as jsx292, jsxs as jsxs187 } from "react/jsx-runtime";
+
+// src/tokens/svg/validation/InfoIcon.tsx
+import { jsx as jsx293, jsxs as jsxs188 } from "react/jsx-runtime";
+var InfoIcon = () => /* @__PURE__ */ jsxs188(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs188("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ jsx293(
+          "path",
+          {
+            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx293(
+          "path",
+          {
+            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx293(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx293("defs", { children: /* @__PURE__ */ jsx293("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ jsx293("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/validation/SuccessIcon.tsx
+import { jsx as jsx294 } from "react/jsx-runtime";
+var SuccessIcon = () => /* @__PURE__ */ jsx294(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ jsx294(
+      "path",
+      {
+        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var SuccessIcon_default = SuccessIcon;
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Accordion/Accordion.tsx
+import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
+var AccordionItem = ({ item, isOpen, onToggle }) => {
+  const bodyRef = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    if (bodyRef.current) {
+      setHeight(bodyRef.current.scrollHeight);
+    }
+  }, [isOpen, item.content]);
+  return /* @__PURE__ */ jsxs189("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
+    /* @__PURE__ */ jsxs189(
+      "button",
+      {
+        className: "accordion-header",
+        onClick: onToggle,
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx295("span", { className: "title", children: item.title }),
+          /* @__PURE__ */ jsx295("span", { className: "chevron", children: /* @__PURE__ */ jsx295(ChevronDownIcon_default, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx295(
+      "div",
+      {
+        ref: bodyRef,
+        className: "accordion-body",
+        style: { maxHeight: isOpen ? height : 0 },
+        children: /* @__PURE__ */ jsx295("div", { className: "accordion-content", children: item.content })
+      }
+    )
+  ] });
+};
+var Accordion = (props) => {
+  const { items, multiple = false, defaultActiveKeys = [], className } = props;
+  const [activeKeys, setActiveKeys] = React.useState(
+    new Set(defaultActiveKeys)
+  );
+  const toggle = (key) => {
+    setActiveKeys((prev) => {
+      const next = new Set(multiple ? prev : []);
+      if (prev.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx295("div", { className: clsx_default("lib-xplat-accordion", className), children: items.map((item) => /* @__PURE__ */ jsx295(
+    AccordionItem,
+    {
+      item,
+      isOpen: activeKeys.has(item.key),
+      onToggle: () => toggle(item.key)
+    },
+    item.key
+  )) });
+};
+Accordion.displayName = "Accordion";
+var Accordion_default = Accordion;
+
+// src/components/Alert/Alert.tsx
+import { jsx as jsx296, jsxs as jsxs190 } from "react/jsx-runtime";
+var Alert = (props) => {
+  const { type = "info", children, onClose, className } = props;
+  return /* @__PURE__ */ jsxs190(
+    "div",
+    {
+      className: clsx_default("lib-xplat-alert", type, className),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx296("div", { className: "content", children }),
+        onClose && /* @__PURE__ */ jsx296(
+          "button",
+          {
+            className: "close-btn",
+            onClick: onClose,
+            "aria-label": "\uB2EB\uAE30",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+Alert.displayName = "Alert";
+var Alert_default = Alert;
+
+// 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"
+  }
+};
 
-// src/tokens/svg/user/UserPlusIcon.tsx
-import { jsx as jsx288, jsxs as jsxs181 } from "react/jsx-runtime";
+// src/util/getColor.ts
+var getColorClass = (namespace, palette, shade) => {
+  const namespaceMap = colors[namespace];
+  const paletteMap = namespaceMap[palette];
+  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
+  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+};
 
-// src/tokens/svg/user/UserXIcon.tsx
-import { jsx as jsx289, jsxs as jsxs182 } from "react/jsx-runtime";
+// src/components/Avatar/Avatar.tsx
+import { jsx as jsx297 } from "react/jsx-runtime";
+var Avatar = (props) => {
+  const {
+    src,
+    alt,
+    name,
+    size = "md",
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
+  return /* @__PURE__ */ jsx297("div", { className: clsx_default("lib-xplat-avatar", size, className), children: src ? /* @__PURE__ */ jsx297("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx297("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ jsx297("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx297("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
+};
+Avatar.displayName = "Avatar";
+var Avatar_default = Avatar;
 
-// src/tokens/svg/user/UsersIcon.tsx
-import { jsx as jsx290, jsxs as jsxs183 } from "react/jsx-runtime";
+// src/components/Badge/Badge.tsx
+import { jsx as jsx298, jsxs as jsxs191 } from "react/jsx-runtime";
+var Badge = (props) => {
+  const {
+    children,
+    count,
+    maxCount = 99,
+    dot = false,
+    colorNamespace = "xplat",
+    color = "red",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  const showBadge = dot || count !== void 0 && count > 0;
+  const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
+  return /* @__PURE__ */ jsxs191("div", { className: clsx_default("lib-xplat-badge", className), children: [
+    children,
+    showBadge && /* @__PURE__ */ jsx298("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
+  ] });
+};
+Badge.displayName = "Badge";
+var Badge_default = Badge;
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+import { jsx as jsx299, jsxs as jsxs192 } from "react/jsx-runtime";
+var Breadcrumb = (props) => {
+  const { items, separator = "/", className } = props;
+  return /* @__PURE__ */ jsx299("nav", { className: clsx_default("lib-xplat-breadcrumb", className), "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ jsx299("ol", { children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs192("li", { children: [
+      isLast ? /* @__PURE__ */ jsx299("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx299("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ jsx299("button", { className: "link", onClick: item.onClick, children: item.label }),
+      !isLast && /* @__PURE__ */ jsx299("span", { className: "separator", children: separator })
+    ] }, index);
+  }) }) });
+};
+Breadcrumb.displayName = "Breadcrumb";
+var Breadcrumb_default = Breadcrumb;
 
-// src/tokens/svg/validation/AlertCircleIcon.tsx
-import { jsx as jsx291, jsxs as jsxs184 } from "react/jsx-runtime";
+// src/components/Button/Button.tsx
+import { jsx as jsx300 } from "react/jsx-runtime";
+var Button = (props) => {
+  const {
+    children,
+    type = "primary",
+    colorNamespace = "xplat",
+    color = "black",
+    colorDepth,
+    disabled,
+    className,
+    ...rest
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ jsx300(
+    "button",
+    {
+      className: clsx_default("lib-xplat-button", type, colorClass, className),
+      disabled,
+      ...rest,
+      children
+    }
+  );
+};
+Button.displayName = "Button";
+var Button_default = Button;
 
-// src/tokens/svg/validation/AlertOctagonIcon.tsx
-import { jsx as jsx292, jsxs as jsxs185 } from "react/jsx-runtime";
+// src/components/Card/Card.tsx
+import { jsx as jsx301, jsxs as jsxs193 } from "react/jsx-runtime";
+var Card = ({ children, title, className }) => {
+  return /* @__PURE__ */ jsxs193("div", { className: clsx_default("lib-xplat-card", className), children: [
+    title && /* @__PURE__ */ jsx301("div", { className: "title", children: title }),
+    /* @__PURE__ */ jsx301("div", { className: "content", children })
+  ] });
+};
+Card.displayName = "Card";
+var Card_default = Card;
 
-// src/tokens/svg/validation/AlertTriangleIcon.tsx
-import { jsx as jsx293, jsxs as jsxs186 } from "react/jsx-runtime";
+// src/components/Chart/Chart.tsx
+import React2 from "react";
+import {
+  ArcElement,
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip
+} from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { Bar, Doughnut, Line, Pie } from "react-chartjs-2";
 
-// src/tokens/svg/validation/ErrorIcon.tsx
-import { jsx as jsx294, jsxs as jsxs187 } from "react/jsx-runtime";
-var ErrorIcon = () => /* @__PURE__ */ jsxs187(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    children: [
-      /* @__PURE__ */ jsxs187("g", { clipPath: "url(#clip0_1196_9603)", children: [
-        /* @__PURE__ */ jsx294(
-          "path",
-          {
-            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsx294(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
-            fill: "currentColor"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx294("defs", { children: /* @__PURE__ */ jsx294("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ jsx294("rect", { width: "16", height: "16", fill: "white" }) }) })
-    ]
-  }
-);
-var ErrorIcon_default = ErrorIcon;
+// src/components/Chart/token/colorSet.ts
+var presets = [
+  [
+    colors.xplat.red[100],
+    colors.xplat.red[200],
+    colors.xplat.red[300],
+    colors.xplat.red[400],
+    colors.xplat.red[500],
+    colors.xplat.red[600]
+  ],
+  [
+    colors.xplat.orange[100],
+    colors.xplat.orange[200],
+    colors.xplat.orange[300],
+    colors.xplat.orange[400],
+    colors.xplat.orange[500],
+    colors.xplat.orange[600]
+  ],
+  [
+    colors.xplat.yellow[100],
+    colors.xplat.yellow[200],
+    colors.xplat.yellow[300],
+    colors.xplat.yellow[400],
+    colors.xplat.yellow[500],
+    colors.xplat.yellow[600]
+  ],
+  [
+    colors.xplat.green[100],
+    colors.xplat.green[200],
+    colors.xplat.green[300],
+    colors.xplat.green[400],
+    colors.xplat.green[500],
+    colors.xplat.green[600]
+  ],
+  [
+    colors.xplat.blue[100],
+    colors.xplat.blue[200],
+    colors.xplat.blue[300],
+    colors.xplat.blue[400],
+    colors.xplat.blue[500],
+    colors.xplat.blue[600]
+  ],
+  [
+    colors.xplat.lightblue[100],
+    colors.xplat.lightblue[200],
+    colors.xplat.lightblue[300],
+    colors.xplat.lightblue[400],
+    colors.xplat.lightblue[500],
+    colors.xplat.lightblue[600]
+  ],
+  [
+    colors.xplat.purple[100],
+    colors.xplat.purple[200],
+    colors.xplat.purple[300],
+    colors.xplat.purple[400],
+    colors.xplat.purple[500],
+    colors.xplat.purple[600]
+  ],
+  [
+    colors.xplat.pink[100],
+    colors.xplat.pink[200],
+    colors.xplat.pink[300],
+    colors.xplat.pink[400],
+    colors.xplat.pink[500],
+    colors.xplat.pink[600]
+  ],
+  [
+    colors.xplat.orange[300],
+    colors.xplat.red[300],
+    colors.xplat.yellow[300],
+    colors.xplat.green[300],
+    colors.xplat.blue[300],
+    colors.xplat.lightblue[300]
+  ],
+  [
+    colors.xplat.orange[400],
+    colors.xplat.red[400],
+    colors.xplat.yellow[400],
+    colors.xplat.green[400],
+    colors.xplat.blue[400],
+    colors.xplat.lightblue[400]
+  ],
+  [
+    colors.xplat.orange[500],
+    colors.xplat.red[500],
+    colors.xplat.yellow[500],
+    colors.xplat.green[500],
+    colors.xplat.blue[500],
+    colors.xplat.lightblue[500]
+  ]
+];
+var colorPresets = {
+  line: [
+    presets[0],
+    presets[1],
+    presets[2],
+    presets[3],
+    presets[4],
+    presets[5],
+    presets[6],
+    presets[7]
+  ],
+  bar: [
+    presets[0],
+    presets[1],
+    presets[2],
+    presets[3],
+    presets[4],
+    presets[5],
+    presets[6],
+    presets[7]
+  ],
+  doughnut: [presets[8], presets[9], presets[10]],
+  pie: [presets[8], presets[9], presets[10]]
+};
 
-// src/tokens/svg/validation/HelpCircleIcon.tsx
-import { jsx as jsx295, jsxs as jsxs188 } from "react/jsx-runtime";
+// src/components/Chart/util.ts
+var getChartColorPreset = (type) => {
+  const index = Math.floor(Math.random() * colorPresets[type].length);
+  return colorPresets[type][index];
+};
+var getIndexColorByPreset = (preset, index) => {
+  const idx = index % preset.length;
+  return preset[idx];
+};
 
-// src/tokens/svg/validation/InfoIcon.tsx
-import { jsx as jsx296, jsxs as jsxs189 } from "react/jsx-runtime";
-var InfoIcon = () => /* @__PURE__ */ jsxs189(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    children: [
-      /* @__PURE__ */ jsxs189("g", { clipPath: "url(#clip0_1188_11261)", children: [
-        /* @__PURE__ */ jsx296(
-          "path",
-          {
-            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsx296(
-          "path",
-          {
-            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsx296(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
-            fill: "currentColor"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx296("defs", { children: /* @__PURE__ */ jsx296("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ jsx296("rect", { width: "16", height: "16", fill: "white" }) }) })
-    ]
-  }
+// src/components/Chart/Chart.tsx
+import { jsx as jsx302 } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  ArcElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
 );
-var InfoIcon_default = InfoIcon;
-
-// src/tokens/svg/validation/SuccessIcon.tsx
-import { jsx as jsx297 } from "react/jsx-runtime";
-var SuccessIcon = () => /* @__PURE__ */ jsx297(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    children: /* @__PURE__ */ jsx297(
-      "path",
-      {
-        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
-        fill: "currentColor"
+var Chart = (props) => {
+  const { type, data, labels } = props;
+  const chartInstanceRef = React2.useRef(null);
+  const containerRef = React2.useRef(null);
+  const chartRef = React2.useCallback((instance) => {
+    chartInstanceRef.current = instance ?? null;
+  }, []);
+  const datasets = React2.useMemo(() => {
+    const pallette = getChartColorPreset(type);
+    return Object.entries(data).map(([key, values], index) => {
+      const uniqueColors = getIndexColorByPreset(pallette, index);
+      if (type === "pie" || type === "doughnut") {
+        return {
+          label: key,
+          data: values,
+          backgroundColor: uniqueColors
+        };
       }
-    )
+      return {
+        label: key,
+        data: values,
+        backgroundColor: uniqueColors,
+        borderColor: uniqueColors,
+        maxBarThickness: 32
+      };
+    });
+  }, [data, type]);
+  const chartData = {
+    labels,
+    datasets
+  };
+  const options = {
+    plugins: {
+      legend: { display: false },
+      datalabels: { display: false },
+      tooltip: { enabled: true }
+    }
+  };
+  if (type === "line" || type === "bar") {
+    options.scales = {
+      y: {
+        beginAtZero: true,
+        drawBorder: false,
+        suggestedMax: Math.max(...Object.values(data).flat()) * 1.2,
+        ticks: {
+          maxTicksLimit: 7
+        }
+      },
+      x: {
+        grid: { display: false },
+        ticks: { display: false }
+      }
+    };
   }
-);
-var SuccessIcon_default = SuccessIcon;
+  if (type === "pie" || type === "doughnut") {
+    options.plugins.datalabels = {
+      color: colors.xplat.white,
+      font: { weight: "bold" },
+      formatter: (value) => `${value}`
+    };
+  }
+  const renderChart = React2.useMemo(() => {
+    switch (type) {
+      case "line":
+        return /* @__PURE__ */ jsx302(Line, { ref: chartRef, data: chartData, options });
+      case "bar":
+        return /* @__PURE__ */ jsx302(Bar, { ref: chartRef, data: chartData, options });
+      case "pie":
+        return /* @__PURE__ */ jsx302(Pie, { ref: chartRef, data: chartData, options });
+      case "doughnut":
+        return /* @__PURE__ */ jsx302(Doughnut, { ref: chartRef, data: chartData, options });
+      default:
+        return null;
+    }
+  }, [chartData, options, type]);
+  React2.useEffect(() => {
+    if (!containerRef.current || !chartInstanceRef.current) return;
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        chartInstanceRef.current?.resize();
+      });
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx302("div", { className: "lib-xplat-chart", ref: containerRef, children: renderChart });
+};
+Chart.displayName = "Chart";
+var Chart_default = Chart;
 
 // src/components/CheckBox/CheckBox.tsx
-import { jsx as jsx298, jsxs as jsxs190 } from "react/jsx-runtime";
+import { jsx as jsx303, jsxs as jsxs194 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     colorNamespace = "xplat",
@@ -1667,8 +1866,8 @@ var CheckBox = (props) => {
   const checkedClasses = `checked ${mainColor}`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs190("label", { className: clsx_default("lib-xplat-checkbox", className), children: [
-    /* @__PURE__ */ jsx298(
+  return /* @__PURE__ */ jsxs194("label", { className: clsx_default("lib-xplat-checkbox", className), children: [
+    /* @__PURE__ */ jsx303(
       "input",
       {
         type: "checkbox",
@@ -1678,15 +1877,15 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx298("span", { className: clsx_default("checkbox", boxClasses), children: checked && /* @__PURE__ */ jsx298(CheckIcon_default, {}) }),
-    label && /* @__PURE__ */ jsx298("span", { className: "label", children: label })
+    /* @__PURE__ */ jsx303("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx303("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx303(CheckIcon_default, {}) }) }),
+    label && /* @__PURE__ */ jsx303("span", { className: "label", children: label })
   ] });
 };
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
 // src/components/Chip/Chip.tsx
-import { jsx as jsx299 } from "react/jsx-runtime";
+import { jsx as jsx304 } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
@@ -1701,29 +1900,29 @@ var Chip = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx299("div", { className: clsx_default("lib-xplat-chip", type, colorClass, className), children });
+  return /* @__PURE__ */ jsx304("div", { className: clsx_default("lib-xplat-chip", type, colorClass, className), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React4 from "react";
+import React5 from "react";
 
 // src/components/Input/Input.tsx
-import React2 from "react";
+import React3 from "react";
 
 // src/components/Input/InputValidations.tsx
-import { jsx as jsx300, jsxs as jsxs191 } from "react/jsx-runtime";
+import { jsx as jsx305, jsxs as jsxs195 } from "react/jsx-runtime";
 var InputValidations = (props) => {
   const { message, status = "default" } = props;
-  return /* @__PURE__ */ jsxs191("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ jsxs191("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ jsx300(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ jsx300(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ jsx300(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ jsx300(ErrorIcon_default, {})
+  return /* @__PURE__ */ jsxs195("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ jsxs195("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ jsx305(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ jsx305(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ jsx305(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ jsx305(ErrorIcon_default, {})
     ] }),
-    /* @__PURE__ */ jsx300("div", { className: "message", children: message })
+    /* @__PURE__ */ jsx305("div", { className: "message", children: message })
   ] });
 };
 InputValidations.displayName = "InputValidations";
@@ -1764,7 +1963,7 @@ var handleTelBackspace = (prevValue, currValue) => {
 };
 
 // src/components/Input/Input.tsx
-import { jsx as jsx301, jsxs as jsxs192 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs196 } from "react/jsx-runtime";
 import { createElement } from "react";
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
@@ -1813,7 +2012,7 @@ var parseValue = (type, value) => {
       return value;
   }
 };
-var Input = React2.forwardRef((props, ref) => {
+var Input = React3.forwardRef((props, ref) => {
   const {
     value,
     onChange,
@@ -1839,13 +2038,13 @@ var Input = React2.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs192("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
-    /* @__PURE__ */ jsxs192(
+  return /* @__PURE__ */ jsxs196("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+    /* @__PURE__ */ jsxs196(
       "div",
       {
         className: clsx_default("lib-xplat-input", disabled ? "disabled" : void 0),
         children: [
-          /* @__PURE__ */ jsx301(
+          /* @__PURE__ */ jsx306(
             "input",
             {
               ...inputProps,
@@ -1856,11 +2055,11 @@ var Input = React2.forwardRef((props, ref) => {
               onChange: handleChange
             }
           ),
-          suffix && /* @__PURE__ */ jsx301("div", { className: "suffix", children: suffix })
+          suffix && /* @__PURE__ */ jsx306("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ jsx301("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
+    validations && /* @__PURE__ */ jsx306("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
       InputValidations_default,
       {
         ...validation,
@@ -1873,20 +2072,20 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-import React3 from "react";
-import { jsx as jsx302 } from "react/jsx-runtime";
-var PasswordInput = React3.forwardRef(
+import React4 from "react";
+import { jsx as jsx307 } from "react/jsx-runtime";
+var PasswordInput = React4.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = React3.useState(false);
+    const [isView, setIsView] = React4.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };
-    return /* @__PURE__ */ jsx302(
+    return /* @__PURE__ */ jsx307(
       Input_default,
       {
         ...inputProps,
-        suffix: /* @__PURE__ */ jsx302("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx302(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx302(CloseEyeIcon_default, {}) }),
+        suffix: /* @__PURE__ */ jsx307("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ jsx307(OpenEyeIcon_default, {}) : /* @__PURE__ */ jsx307(CloseEyeIcon_default, {}) }),
         type: isView ? "text" : "password",
         ref
       }
@@ -1899,8 +2098,8 @@ var PasswordInput_default = PasswordInput;
 // src/components/DatePicker/InputDatePicker/index.tsx
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { jsx as jsx303 } from "react/jsx-runtime";
-var Suffix = () => /* @__PURE__ */ jsx303("div", { children: /* @__PURE__ */ jsx303(CalenderIcon_default, {}) });
+import { jsx as jsx308 } from "react/jsx-runtime";
+var Suffix = () => /* @__PURE__ */ jsx308("div", { children: /* @__PURE__ */ jsx308(CalenderIcon_default, {}) });
 var InputDatePicker = (props) => {
   const { value, onChange, disabled, ...rest } = props;
   const handleChange = (date) => {
@@ -1914,22 +2113,22 @@ var InputDatePicker = (props) => {
     const d = String(date.getDate()).padStart(2, "0");
     return `${y}/${m}/${d}`;
   };
-  const CustomInput = React4.forwardRef(({ onClick }, _ref) => /* @__PURE__ */ jsx303("div", { onClick, children: /* @__PURE__ */ jsx303(
+  const CustomInput = React5.forwardRef(({ onClick }, _ref) => /* @__PURE__ */ jsx308("div", { onClick, children: /* @__PURE__ */ jsx308(
     Input_default,
     {
       value: formatDate(value),
-      suffix: /* @__PURE__ */ jsx303(Suffix, {}),
+      suffix: /* @__PURE__ */ jsx308(Suffix, {}),
       disabled
     }
   ) }));
   CustomInput.displayName = "InputDatePickerCustomInput";
-  return /* @__PURE__ */ jsx303("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ jsx303(
+  return /* @__PURE__ */ jsx308("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ jsx308(
     DatePicker,
     {
       selected: value,
       onChange: handleChange,
       ...rest,
-      customInput: /* @__PURE__ */ jsx303(CustomInput, {}),
+      customInput: /* @__PURE__ */ jsx308(CustomInput, {}),
       dateFormat: "YYYY/MM/dd"
     }
   ) });
@@ -1938,18 +2137,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React6 from "react";
+import React7 from "react";
 
 // src/components/Modal/Modal.tsx
-import React5 from "react";
+import React6 from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx304 } from "react/jsx-runtime";
+import { jsx as jsx309 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React5.useState(false);
-  const [visible, setVisible] = React5.useState(false);
-  React5.useEffect(() => {
+  const [mounted, setMounted] = React6.useState(false);
+  const [visible, setVisible] = React6.useState(false);
+  React6.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -1963,15 +2162,17 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal(
-    /* @__PURE__ */ jsx304(
+    /* @__PURE__ */ jsx309(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsx304(
+        children: /* @__PURE__ */ jsx309(
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children
           }
@@ -1987,23 +2188,58 @@ var Modal_default = Modal;
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import DatePicker2 from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { jsx as jsx305 } from "react/jsx-runtime";
+import { jsx as jsx310 } from "react/jsx-runtime";
+function getColorValue(ns, color, depth) {
+  const nsColors = colors[ns];
+  const colorEntry = nsColors[color];
+  if (typeof colorEntry === "string") return colorEntry;
+  return colorEntry[String(depth)] ?? "";
+}
 var SingleDatePicker = (props) => {
-  const { value, onChange, ...rest } = props;
+  const {
+    value,
+    onChange,
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    highlightDates,
+    ...rest
+  } = props;
   const handleChange = (date) => {
     if (Array.isArray(date)) return;
     onChange?.(date);
   };
-  return /* @__PURE__ */ jsx305("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ jsx305(DatePicker2, { selected: value, onChange: handleChange, inline: true, ...rest }) });
+  const activeColor = getColorValue(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ jsx310(
+    "div",
+    {
+      className: "lib-xplat-datepicker",
+      style: { "--datepicker-active-color": activeColor },
+      children: /* @__PURE__ */ jsx310(
+        DatePicker2,
+        {
+          selected: value,
+          onChange: handleChange,
+          inline: true,
+          highlightDates,
+          ...rest
+        }
+      )
+    }
+  );
 };
 SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import { jsx as jsx306, jsxs as jsxs193 } from "react/jsx-runtime";
+import { jsx as jsx311, jsxs as jsxs197 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type } = props;
-  const [isOpen, setIsOpen] = React6.useState(false);
+  const [isOpen, setIsOpen] = React7.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -2011,11 +2247,11 @@ var PopupPicker = (props) => {
     props.onChange?.(date);
     handleClose();
   };
-  return /* @__PURE__ */ jsxs193("div", { className: "lib-xplat-popup-datepicker", children: [
-    React6.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ jsx306(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs193("div", { className: "lib-xplat-popup-datepicker-card", children: [
-      /* @__PURE__ */ jsxs193("div", { className: "popup-datepicker-content", children: [
-        type === "single" && /* @__PURE__ */ jsx306(
+  return /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-popup-datepicker", children: [
+    React7.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ jsx311(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ jsxs197("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ jsx311(
           SingleDatePicker_default,
           {
             value: props.value,
@@ -2024,7 +2260,7 @@ var PopupPicker = (props) => {
             maxDate: props.maxDate
           }
         ),
-        type === "range" && /* @__PURE__ */ jsx306(
+        type === "range" && /* @__PURE__ */ jsx311(
           RangePicker_default,
           {
             startDate: props.startDate,
@@ -2035,8 +2271,8 @@ var PopupPicker = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs193("div", { className: "popup-datepicker-footer", children: [
-        /* @__PURE__ */ jsx306(
+      /* @__PURE__ */ jsxs197("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ jsx311(
           Button_default,
           {
             type: "secondary",
@@ -2046,7 +2282,7 @@ var PopupPicker = (props) => {
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ jsx306(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+        /* @__PURE__ */ jsx311(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
       ] })
     ] }) })
   ] });
@@ -2055,50 +2291,155 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/DatePicker/RangePicker/index.tsx
-import { jsx as jsx307, jsxs as jsxs194 } from "react/jsx-runtime";
+import React8 from "react";
+import { jsx as jsx312, jsxs as jsxs198 } from "react/jsx-runtime";
+function getDatesBetween(start, end) {
+  const dates = [];
+  const current = new Date(start);
+  current.setHours(0, 0, 0, 0);
+  const last = new Date(end);
+  last.setHours(0, 0, 0, 0);
+  while (current <= last) {
+    dates.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  return dates;
+}
 var RangePicker = (props) => {
-  const { startDate, endDate, onChange, minDate, maxDate } = props;
-  return /* @__PURE__ */ jsxs194("div", { className: "lib-xplat-range-datepicker", children: [
-    /* @__PURE__ */ jsxs194("div", { className: "lib-xplat-range-datepicker-from", children: [
-      /* @__PURE__ */ jsx307("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
-      /* @__PURE__ */ jsx307(
+  const {
+    startDate,
+    endDate,
+    onChange,
+    minDate,
+    maxDate,
+    colorNamespace,
+    color,
+    colorDepth
+  } = props;
+  const rangeDates = React8.useMemo(
+    () => getDatesBetween(startDate, endDate),
+    [startDate, endDate]
+  );
+  const colorProps = {
+    ...colorNamespace !== void 0 && { colorNamespace },
+    ...color !== void 0 && { color },
+    ...colorDepth !== void 0 && { colorDepth }
+  };
+  return /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-range-datepicker", children: [
+    /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-range-datepicker-from", children: [
+      /* @__PURE__ */ jsx312("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
+      /* @__PURE__ */ jsx312(
         SingleDatePicker_default,
         {
           value: startDate,
           onChange: (date) => date != null && onChange?.({ startDate: date, endDate }),
           minDate,
-          maxDate: endDate
+          maxDate: endDate,
+          highlightDates: rangeDates,
+          ...colorProps
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs194("div", { className: "lib-xplat-range-datepicker-to", children: [
-      /* @__PURE__ */ jsx307("span", { className: "lib-xplat-range-datepicker-label", children: "\uC885\uB8CC" }),
-      /* @__PURE__ */ jsx307(
+    /* @__PURE__ */ jsxs198("div", { className: "lib-xplat-range-datepicker-to", children: [
+      /* @__PURE__ */ jsx312("span", { className: "lib-xplat-range-datepicker-label", children: "\uC885\uB8CC" }),
+      /* @__PURE__ */ jsx312(
         SingleDatePicker_default,
         {
           value: endDate,
           onChange: (date) => date != null && onChange?.({ startDate, endDate: date }),
           minDate: startDate,
-          maxDate
+          maxDate,
+          highlightDates: rangeDates,
+          ...colorProps
         }
       )
     ] })
   ] });
 };
-RangePicker.displayName = "RangePicker";
-var RangePicker_default = RangePicker;
+RangePicker.displayName = "RangePicker";
+var RangePicker_default = RangePicker;
+
+// src/components/Divider/Divider.tsx
+import { jsx as jsx313 } from "react/jsx-runtime";
+var Divider = (props) => {
+  const { orientation = "horizontal", className } = props;
+  return /* @__PURE__ */ jsx313(
+    "div",
+    {
+      className: clsx_default("lib-xplat-divider", orientation, className),
+      role: "separator",
+      "aria-orientation": orientation
+    }
+  );
+};
+Divider.displayName = "Divider";
+var Divider_default = Divider;
+
+// src/components/Drawer/Drawer.tsx
+import React9 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx314, jsxs as jsxs199 } from "react/jsx-runtime";
+var ANIMATION_DURATION_MS2 = 250;
+var Drawer = (props) => {
+  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const [mounted, setMounted] = React9.useState(false);
+  const [visible, setVisible] = React9.useState(false);
+  React9.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS2);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  if (typeof document === "undefined") return null;
+  if (!mounted) return null;
+  const stateClass = visible ? "enter" : "exit";
+  const widthValue = typeof width === "number" ? `${width}px` : width;
+  return createPortal2(
+    /* @__PURE__ */ jsx314(
+      "div",
+      {
+        className: clsx_default("lib-xplat-drawer-overlay", stateClass),
+        onClick: onClose,
+        children: /* @__PURE__ */ jsxs199(
+          "div",
+          {
+            className: clsx_default("lib-xplat-drawer", placement, stateClass),
+            style: { width: widthValue },
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              title && /* @__PURE__ */ jsxs199("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ jsx314("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ jsx314("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              ] }),
+              /* @__PURE__ */ jsx314("div", { className: "drawer-body", children })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+Drawer.displayName = "Drawer";
+var Drawer_default = Drawer;
 
-// src/components/Select/Select.tsx
-import React11 from "react";
+// src/components/Dropdown/Dropdown.tsx
+import React12 from "react";
 
 // src/tokens/hooks/useAutoPosition.ts
-import React7 from "react";
+import React10 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React7.useState({
+  const [position, setPosition] = React10.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React7.useCallback(() => {
+  const calculatePosition = React10.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
@@ -2120,7 +2461,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React7.useEffect(() => {
+  React10.useEffect(() => {
     calculatePosition();
     window.addEventListener("resize", calculatePosition);
     return () => window.removeEventListener("resize", calculatePosition);
@@ -2130,9 +2471,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React8 from "react";
+import React11 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -2154,17 +2495,172 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/components/Dropdown/Dropdown.tsx
+import { jsx as jsx315, jsxs as jsxs200 } from "react/jsx-runtime";
+var Dropdown = (props) => {
+  const { items, children, className } = props;
+  const [isOpen, setIsOpen] = React12.useState(false);
+  const [mounted, setMounted] = React12.useState(false);
+  const [visible, setVisible] = React12.useState(false);
+  const triggerRef = React12.useRef(null);
+  const menuRef = React12.useRef(null);
+  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
+  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
+  React12.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), 150);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    item.onClick?.();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs200("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
+    /* @__PURE__ */ jsx315(
+      "div",
+      {
+        ref: triggerRef,
+        className: "dropdown-trigger",
+        onClick: () => setIsOpen((prev) => !prev),
+        children
+      }
+    ),
+    mounted && /* @__PURE__ */ jsx315(
+      "div",
+      {
+        ref: menuRef,
+        className: clsx_default("dropdown-menu", direction, { visible }),
+        style: { top: position.top, left: position.left },
+        role: "menu",
+        children: items.map((item) => /* @__PURE__ */ jsx315(
+          "button",
+          {
+            className: clsx_default("dropdown-item", {
+              disabled: item.disabled,
+              danger: item.danger
+            }),
+            role: "menuitem",
+            disabled: item.disabled,
+            onClick: () => handleItemClick(item),
+            children: item.label
+          },
+          item.key
+        ))
+      }
+    )
+  ] });
+};
+Dropdown.displayName = "Dropdown";
+var Dropdown_default = Dropdown;
+
+// src/components/EmptyState/EmptyState.tsx
+import { jsx as jsx316, jsxs as jsxs201 } from "react/jsx-runtime";
+var EmptyState = (props) => {
+  const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action, className } = props;
+  return /* @__PURE__ */ jsxs201("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
+    icon && /* @__PURE__ */ jsx316("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ jsx316("div", { className: "empty-icon", children: /* @__PURE__ */ jsx316("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx316("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ jsx316("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ jsx316("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ jsx316("div", { className: "empty-action", children: action })
+  ] });
+};
+EmptyState.displayName = "EmptyState";
+var EmptyState_default = EmptyState;
+
+// src/components/FileUpload/FileUpload.tsx
+import React13 from "react";
+import { jsx as jsx317, jsxs as jsxs202 } from "react/jsx-runtime";
+var FileUpload = (props) => {
+  const {
+    accept,
+    multiple = false,
+    maxSize,
+    onChange,
+    label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
+    description,
+    className
+  } = props;
+  const [isDragOver, setIsDragOver] = React13.useState(false);
+  const inputRef = React13.useRef(null);
+  const handleFiles = (fileList) => {
+    let files = Array.from(fileList);
+    if (maxSize) {
+      files = files.filter((f) => f.size <= maxSize);
+    }
+    if (!multiple && files.length > 1) {
+      files = [files[0]];
+    }
+    onChange?.(files);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (e.dataTransfer.files.length > 0) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+  const handleChange = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      handleFiles(e.target.files);
+    }
+  };
+  return /* @__PURE__ */ jsxs202(
+    "div",
+    {
+      className: clsx_default("lib-xplat-file-upload", { "drag-over": isDragOver }, className),
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: () => inputRef.current?.click(),
+      children: [
+        /* @__PURE__ */ jsx317(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsx317("div", { className: "upload-icon", children: /* @__PURE__ */ jsx317(UploadIcon_default, {}) }),
+        /* @__PURE__ */ jsx317("p", { className: "upload-label", children: label }),
+        description && /* @__PURE__ */ jsx317("p", { className: "upload-description", children: description })
+      ]
+    }
+  );
+};
+FileUpload.displayName = "FileUpload";
+var FileUpload_default = FileUpload;
+
+// src/components/Select/Select.tsx
+import React16 from "react";
+
 // src/components/Select/context.ts
-import React9 from "react";
-var SelectContext = React9.createContext(null);
+import React14 from "react";
+var SelectContext = React14.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React10 from "react";
-import { jsx as jsx308 } from "react/jsx-runtime";
+import React15 from "react";
+import { jsx as jsx318 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false, className } = props;
-  const ctx = React10.useContext(context_default);
+  const ctx = React15.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -2173,7 +2669,7 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
-  return /* @__PURE__ */ jsx308(
+  return /* @__PURE__ */ jsx318(
     "div",
     {
       className: clsx_default("select-item", disabled && "disabled", className),
@@ -2194,8 +2690,8 @@ SelectItem.displayName = "Select.Item";
 var SelectItem_default = SelectItem;
 
 // src/components/Select/Select.tsx
-import { jsx as jsx309, jsxs as jsxs195 } from "react/jsx-runtime";
-var ANIMATION_DURATION_MS2 = 200;
+import { jsx as jsx319, jsxs as jsxs203 } from "react/jsx-runtime";
+var ANIMATION_DURATION_MS3 = 200;
 var SelectRoot = (props) => {
   const {
     placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
@@ -2204,41 +2700,41 @@ var SelectRoot = (props) => {
     disabled = false,
     error = false
   } = props;
-  const itemChildren = React11.Children.toArray(children).filter(
-    (child) => React11.isValidElement(child) && child.type === SelectItem_default
+  const itemChildren = React16.Children.toArray(children).filter(
+    (child) => React16.isValidElement(child) && child.type === SelectItem_default
   );
-  const [isOpen, setOpen] = React11.useState(false);
-  const [selectedLabel, setSelectedLabel] = React11.useState(null);
-  const triggerRef = React11.useRef(null);
-  const contentRef = React11.useRef(null);
-  const [mounted, setMounted] = React11.useState(false);
-  const [visible, setVisible] = React11.useState(false);
-  React11.useEffect(() => {
+  const [isOpen, setOpen] = React16.useState(false);
+  const [selectedLabel, setSelectedLabel] = React16.useState(null);
+  const triggerRef = React16.useRef(null);
+  const contentRef = React16.useRef(null);
+  const [mounted, setMounted] = React16.useState(false);
+  const [visible, setVisible] = React16.useState(false);
+  React16.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React11.useEffect(() => {
+  React16.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
       return () => clearTimeout(t2);
     }
     setVisible(false);
-    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS2);
+    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS3);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const open = React11.useCallback(() => setOpen(true), []);
-  const close = React11.useCallback(() => setOpen(false), []);
-  const toggle = React11.useCallback(() => setOpen((prev) => !prev), []);
+  const open = React16.useCallback(() => setOpen(true), []);
+  const close = React16.useCallback(() => setOpen(false), []);
+  const toggle = React16.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   const position = useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React11.useCallback(
+  const setSelected = React16.useCallback(
     (label, value2) => {
       setSelectedLabel(label);
       onChange?.(value2, label);
     },
     [onChange]
   );
-  const value = React11.useMemo(
+  const value = React16.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -2259,7 +2755,7 @@ var SelectRoot = (props) => {
     if (disabled) return;
     toggle();
   };
-  return /* @__PURE__ */ jsx309(context_default.Provider, { value, children: /* @__PURE__ */ jsxs195(
+  return /* @__PURE__ */ jsx319(context_default.Provider, { value, children: /* @__PURE__ */ jsxs203(
     "div",
     {
       className: clsx_default(
@@ -2269,7 +2765,7 @@ var SelectRoot = (props) => {
         mounted && "is-open"
       ),
       children: [
-        /* @__PURE__ */ jsxs195(
+        /* @__PURE__ */ jsxs203(
           "div",
           {
             ref: triggerRef,
@@ -2293,7 +2789,7 @@ var SelectRoot = (props) => {
               }
             },
             children: [
-              /* @__PURE__ */ jsx309(
+              /* @__PURE__ */ jsx319(
                 "span",
                 {
                   className: clsx_default(
@@ -2303,18 +2799,18 @@ var SelectRoot = (props) => {
                   children: selectedLabel ?? placeholder
                 }
               ),
-              /* @__PURE__ */ jsx309(
+              /* @__PURE__ */ jsx319(
                 "span",
                 {
                   className: clsx_default("select-trigger-icon", isOpen && "open"),
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx309(ChevronDownIcon_default, {})
+                  children: /* @__PURE__ */ jsx319(ChevronDownIcon_default, {})
                 }
               )
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx309(
+        mounted && /* @__PURE__ */ jsx319(
           "div",
           {
             className: clsx_default("select-content", position.direction, stateClass),
@@ -2335,10 +2831,10 @@ var Select = Object.assign(SelectRoot, {
 var Select_default = Select;
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import React13 from "react";
+import React18 from "react";
 
 // src/components/HtmlTypeWriter/utils.ts
-import React12 from "react";
+import React17 from "react";
 var voidTags = /* @__PURE__ */ new Set([
   "br",
   "img",
@@ -2406,40 +2902,40 @@ function convertNodeToReactWithRange(node, typedLen, rangeMap) {
     props[attr.name] = attr.value;
   });
   if (voidTags.has(tag)) {
-    return React12.createElement(tag, props);
+    return React17.createElement(tag, props);
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
-  return React12.createElement(tag, props, ...children);
+  return React17.createElement(tag, props, ...children);
 }
 function htmlToReactProgressive(root, typedLen, rangeMap) {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
-    return node == null ? null : React12.createElement(React12.Fragment, { key: idx }, node);
+    return node == null ? null : React17.createElement(React17.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
 }
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
-import { jsx as jsx310 } from "react/jsx-runtime";
+import { jsx as jsx320 } from "react/jsx-runtime";
 var HtmlTypeWriter = ({
   html,
   duration = 20,
   onDone,
   onChange
 }) => {
-  const [typedLen, setTypedLen] = React13.useState(0);
-  const doneCalledRef = React13.useRef(false);
-  const { doc, rangeMap, totalLength } = React13.useMemo(() => {
+  const [typedLen, setTypedLen] = React18.useState(0);
+  const doneCalledRef = React18.useRef(false);
+  const { doc, rangeMap, totalLength } = React18.useMemo(() => {
     const decoded = decodeHtmlEntities(html);
     const doc2 = new DOMParser().parseFromString(decoded, "text/html");
     const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
     return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
   }, [html]);
-  React13.useEffect(() => {
+  React18.useEffect(() => {
     setTypedLen(0);
     doneCalledRef.current = false;
   }, [html]);
-  React13.useEffect(() => {
+  React18.useEffect(() => {
     if (!totalLength) return;
     if (typedLen >= totalLength) return;
     const timer = window.setInterval(() => {
@@ -2447,36 +2943,42 @@ var HtmlTypeWriter = ({
     }, duration);
     return () => window.clearInterval(timer);
   }, [typedLen, totalLength, duration]);
-  React13.useEffect(() => {
+  React18.useEffect(() => {
     if (typedLen > 0 && typedLen < totalLength) {
       onChange?.();
     }
   }, [typedLen, totalLength, onChange]);
-  React13.useEffect(() => {
+  React18.useEffect(() => {
     if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
       doneCalledRef.current = true;
       onDone?.();
     }
   }, [typedLen, totalLength, onDone]);
-  const parsed = React13.useMemo(
+  const parsed = React18.useMemo(
     () => htmlToReactProgressive(doc.body, typedLen, rangeMap),
     [doc.body, typedLen, rangeMap]
   );
-  return /* @__PURE__ */ jsx310("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+  return /* @__PURE__ */ jsx320("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
 };
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 
 // src/components/ImageSelector/ImageSelector.tsx
-import React14 from "react";
-import { jsx as jsx311, jsxs as jsxs196 } from "react/jsx-runtime";
+import React19 from "react";
+import { jsx as jsx321, jsxs as jsxs204 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const previewUrl = React14.useMemo(() => {
-    if (value) return URL.createObjectURL(value);
-    return void 0;
+  const [previewUrl, setPreviewUrl] = React19.useState();
+  React19.useEffect(() => {
+    if (!value) {
+      setPreviewUrl(void 0);
+      return;
+    }
+    const url = URL.createObjectURL(value);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
   }, [value]);
-  const inputRef = React14.useRef(null);
+  const inputRef = React19.useRef(null);
   const handleFileChange = (e) => {
     const selectedFile = e.target.files?.[0];
     if (selectedFile) {
@@ -2489,8 +2991,8 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs196("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ jsx311(
+  return /* @__PURE__ */ jsxs204("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ jsx321(
       "input",
       {
         type: "file",
@@ -2500,31 +3002,120 @@ var ImageSelector = (props) => {
         ref: inputRef
       }
     ),
-    value && /* @__PURE__ */ jsxs196("div", { className: "action-bar", children: [
-      /* @__PURE__ */ jsx311("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx311(UploadIcon_default, {}) }),
-      /* @__PURE__ */ jsx311("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx311(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ jsxs204("div", { className: "action-bar", children: [
+      /* @__PURE__ */ jsx321("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx321(UploadIcon_default, {}) }),
+      /* @__PURE__ */ jsx321("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx321(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ jsx311("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx311("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs196("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ jsx311("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx311(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx311("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ jsx321("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx321("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs204("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ jsx321("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx321(ImageIcon_default, {}) }),
+      /* @__PURE__ */ jsx321("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;
 
+// src/components/Pagination/Pagination.tsx
+import { jsx as jsx322, jsxs as jsxs205 } from "react/jsx-runtime";
+function getPageRange(current, totalPages, siblingCount) {
+  const totalNumbers = siblingCount * 2 + 5;
+  if (totalPages <= totalNumbers) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const leftSibling = Math.max(current - siblingCount, 1);
+  const rightSibling = Math.min(current + siblingCount, totalPages);
+  const showLeftDots = leftSibling > 3;
+  const showRightDots = rightSibling < totalPages - 2;
+  if (!showLeftDots && showRightDots) {
+    const leftCount = siblingCount * 2 + 3;
+    const leftRange = Array.from({ length: leftCount }, (_, i) => i + 1);
+    return [...leftRange, "...", totalPages];
+  }
+  if (showLeftDots && !showRightDots) {
+    const rightCount = siblingCount * 2 + 3;
+    const rightRange = Array.from({ length: rightCount }, (_, i) => totalPages - rightCount + i + 1);
+    return [1, "...", ...rightRange];
+  }
+  const middleRange = Array.from(
+    { length: rightSibling - leftSibling + 1 },
+    (_, i) => leftSibling + i
+  );
+  return [1, "...", ...middleRange, "...", totalPages];
+}
+var Pagination = (props) => {
+  const {
+    current,
+    total,
+    pageSize = 10,
+    siblingCount = 1,
+    onChange,
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const pages = getPageRange(current, totalPages, siblingCount);
+  const handleClick = (page) => {
+    if (page !== current && page >= 1 && page <= totalPages) {
+      onChange?.(page);
+    }
+  };
+  return /* @__PURE__ */ jsxs205("nav", { className: clsx_default("lib-xplat-pagination", className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+    /* @__PURE__ */ jsx322(
+      "button",
+      {
+        className: "page-btn prev",
+        disabled: current <= 1,
+        onClick: () => handleClick(current - 1),
+        "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
+        children: /* @__PURE__ */ jsx322(ChevronLeftIcon_default, {})
+      }
+    ),
+    pages.map(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx322("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx322(
+        "button",
+        {
+          className: clsx_default("page-btn", colorClass, { active: page === current }),
+          onClick: () => handleClick(page),
+          "aria-current": page === current ? "page" : void 0,
+          children: page
+        },
+        page
+      )
+    ),
+    /* @__PURE__ */ jsx322(
+      "button",
+      {
+        className: "page-btn next",
+        disabled: current >= totalPages,
+        onClick: () => handleClick(current + 1),
+        "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
+        children: /* @__PURE__ */ jsx322(ChevronRightIcon_default, {})
+      }
+    )
+  ] });
+};
+Pagination.displayName = "Pagination";
+var Pagination_default = Pagination;
+
 // src/components/PopOver/PopOver.tsx
-import React15 from "react";
-import { jsx as jsx312, jsxs as jsxs197 } from "react/jsx-runtime";
+import React20 from "react";
+import { jsx as jsx323, jsxs as jsxs206 } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React15.useRef(null);
-  const triggerRef = React15.useRef(null);
-  const [localOpen, setLocalOpen] = React15.useState(false);
-  const [eventTrigger, setEventTrigger] = React15.useState(false);
+  const popRef = React20.useRef(null);
+  const triggerRef = React20.useRef(null);
+  const [localOpen, setLocalOpen] = React20.useState(false);
+  const [eventTrigger, setEventTrigger] = React20.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React15.useEffect(() => {
+  React20.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -2537,7 +3128,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs197(
+  return /* @__PURE__ */ jsxs206(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -2547,7 +3138,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx312(
+        localOpen && /* @__PURE__ */ jsx323(
           "div",
           {
             className: clsx_default(
@@ -2569,18 +3160,64 @@ var PopOver = (props) => {
 PopOver.displayName = "PopOver";
 var PopOver_default = PopOver;
 
+// src/components/Progress/Progress.tsx
+import { jsx as jsx324, jsxs as jsxs207 } from "react/jsx-runtime";
+var Progress = (props) => {
+  const {
+    value,
+    max = 100,
+    size = "md",
+    showLabel = false,
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxs207("div", { className: clsx_default("lib-xplat-progress", size, className), children: [
+    /* @__PURE__ */ jsx324(
+      "div",
+      {
+        className: "track",
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        children: /* @__PURE__ */ jsx324(
+          "div",
+          {
+            className: clsx_default("bar", colorClass),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxs207("span", { className: "label", children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+};
+Progress.displayName = "Progress";
+var Progress_default = Progress;
+
 // src/components/Radio/RadioGroupContext.tsx
-import React16 from "react";
-var RadioGroupContext = React16.createContext(
+import React21 from "react";
+var RadioGroupContext = React21.createContext(
   null
 );
 var useRadioGroupContext = () => {
-  return React16.useContext(RadioGroupContext);
+  return React21.useContext(RadioGroupContext);
 };
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-import { jsx as jsx313, jsxs as jsxs198 } from "react/jsx-runtime";
+import { jsx as jsx325, jsxs as jsxs208 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
@@ -2604,7 +3241,7 @@ var Radio = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsxs198(
+  return /* @__PURE__ */ jsxs208(
     "label",
     {
       className: clsx_default(
@@ -2613,8 +3250,8 @@ var Radio = (props) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx313("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ jsx313(
+        /* @__PURE__ */ jsx325("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ jsx325(
           "div",
           {
             className: clsx_default(
@@ -2622,10 +3259,10 @@ var Radio = (props) => {
               localChecked ? "checked" : void 0,
               colorClass
             ),
-            children: localChecked && /* @__PURE__ */ jsx313("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ jsx325("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ jsx313("span", { children: label })
+        label && /* @__PURE__ */ jsx325("span", { children: label })
       ]
     }
   );
@@ -2634,17 +3271,120 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment, jsx as jsx314 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx326 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx314(Fragment, { children: /* @__PURE__ */ jsx314(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx326(Fragment, { children: /* @__PURE__ */ jsx326(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;
 
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx327 } from "react/jsx-runtime";
+var Skeleton = (props) => {
+  const { variant = "text", width, height, className } = props;
+  const style = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height
+  };
+  return /* @__PURE__ */ jsx327(
+    "div",
+    {
+      className: clsx_default("lib-xplat-skeleton", variant, className),
+      style,
+      "aria-hidden": "true"
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+var Skeleton_default = Skeleton;
+
+// src/components/Spinner/Spinner.tsx
+import { jsx as jsx328, jsxs as jsxs209 } from "react/jsx-runtime";
+var Spinner = (props) => {
+  const {
+    size = "md",
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ jsx328(
+    "div",
+    {
+      className: clsx_default("lib-xplat-spinner", size, colorClass, className),
+      role: "status",
+      "aria-label": "\uB85C\uB529 \uC911",
+      children: /* @__PURE__ */ jsxs209("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx328(
+          "circle",
+          {
+            className: "track",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            strokeWidth: "3"
+          }
+        ),
+        /* @__PURE__ */ jsx328(
+          "circle",
+          {
+            className: "indicator",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            strokeWidth: "3",
+            strokeLinecap: "round"
+          }
+        )
+      ] })
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+var Spinner_default = Spinner;
+
+// src/components/Steps/Steps.tsx
+import { jsx as jsx329, jsxs as jsxs210 } from "react/jsx-runtime";
+var Steps = (props) => {
+  const {
+    items,
+    current,
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ jsx329("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index) => {
+    const status = index < current ? "completed" : index === current ? "active" : "pending";
+    return /* @__PURE__ */ jsxs210("div", { className: clsx_default("step-item", status), children: [
+      /* @__PURE__ */ jsxs210("div", { className: "step-indicator", children: [
+        /* @__PURE__ */ jsx329("div", { className: clsx_default("step-circle", colorClass), children: status === "completed" ? /* @__PURE__ */ jsx329(CheckIcon_default, {}) : /* @__PURE__ */ jsx329("span", { children: index + 1 }) }),
+        index < items.length - 1 && /* @__PURE__ */ jsx329("div", { className: clsx_default("step-line", colorClass) })
+      ] }),
+      /* @__PURE__ */ jsxs210("div", { className: "step-content", children: [
+        /* @__PURE__ */ jsx329("span", { className: "step-title", children: item.title }),
+        item.description && /* @__PURE__ */ jsx329("span", { className: "step-description", children: item.description })
+      ] })
+    ] }, index);
+  }) });
+};
+Steps.displayName = "Steps";
+var Steps_default = Steps;
+
 // src/components/Switch/Switch.tsx
-import React17 from "react";
-import { jsx as jsx315 } from "react/jsx-runtime";
+import React22 from "react";
+import { jsx as jsx330 } from "react/jsx-runtime";
 var KNOB_TRANSITION_MS = 250;
 var Switch = (props) => {
   const {
@@ -2656,9 +3396,9 @@ var Switch = (props) => {
     colorDepth,
     className
   } = props;
-  const [isAnimating, setIsAnimating] = React17.useState(false);
-  const timeoutRef = React17.useRef(null);
-  React17.useEffect(() => {
+  const [isAnimating, setIsAnimating] = React22.useState(false);
+  const timeoutRef = React22.useRef(null);
+  React22.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -2678,7 +3418,7 @@ var Switch = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx315(
+  return /* @__PURE__ */ jsx330(
     "div",
     {
       className: clsx_default(
@@ -2691,7 +3431,7 @@ var Switch = (props) => {
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,
-      children: /* @__PURE__ */ jsx315("div", { className: clsx_default("knob", value ? "checked" : void 0) })
+      children: /* @__PURE__ */ jsx330("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
 };
@@ -2699,14 +3439,14 @@ Switch.displayName = "Switch";
 var Switch_default = Switch;
 
 // src/components/Tab/Tab.tsx
-import React19 from "react";
+import React24 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React18 from "react";
-import { jsx as jsx316 } from "react/jsx-runtime";
-var TabItem = React18.forwardRef((props, ref) => {
+import React23 from "react";
+import { jsx as jsx331 } from "react/jsx-runtime";
+var TabItem = React23.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
-  return /* @__PURE__ */ jsx316(
+  return /* @__PURE__ */ jsx331(
     "div",
     {
       ref,
@@ -2720,25 +3460,25 @@ TabItem.displayName = "TabItem";
 var TabItem_default = TabItem;
 
 // src/components/Tab/Tab.tsx
-import { jsx as jsx317, jsxs as jsxs199 } from "react/jsx-runtime";
+import { jsx as jsx332, jsxs as jsxs211 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, type } = props;
-  const [underlineStyle, setUnderlineStyle] = React19.useState({
+  const [underlineStyle, setUnderlineStyle] = React24.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React19.useRef([]);
+  const itemRefs = React24.useRef([]);
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React19.useEffect(() => {
+  React24.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs199("div", { className: clsx_default("lib-xplat-tab", `type-${type}`), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx317(
+  return /* @__PURE__ */ jsxs211("div", { className: clsx_default("lib-xplat-tab", `type-${type}`), children: [
+    tabs.map((tab, idx) => /* @__PURE__ */ jsx332(
       TabItem_default,
       {
         onClick: () => handleChangeActiveTab(tab, idx),
@@ -2750,7 +3490,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx317(
+    type === "toggle" && /* @__PURE__ */ jsx332(
       "div",
       {
         className: "tab-toggle-underline",
@@ -2766,17 +3506,17 @@ Tab.displayName = "Tab";
 var Tab_default = Tab;
 
 // src/components/Table/TableContext.tsx
-import React20 from "react";
-var TableContext = React20.createContext(null);
+import React25 from "react";
+var TableContext = React25.createContext(null);
 var useTableContext = () => {
-  const ctx = React20.useContext(TableContext);
+  const ctx = React25.useContext(TableContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableContext_default = TableContext;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx318 } from "react/jsx-runtime";
+import { jsx as jsx333 } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     className,
@@ -2786,7 +3526,7 @@ var Table = (props) => {
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx318("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ jsx318(
+  return /* @__PURE__ */ jsx333("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ jsx333(
     TableContext_default.Provider,
     {
       value: {
@@ -2795,7 +3535,7 @@ var Table = (props) => {
         headerSticky,
         stickyShadow
       },
-      children: /* @__PURE__ */ jsx318("table", { className: "lib-xplat-table", children })
+      children: /* @__PURE__ */ jsx333("table", { className: "lib-xplat-table", children })
     }
   ) });
 };
@@ -2803,40 +3543,40 @@ Table.displayName = "Table";
 var Table_default = Table;
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx319 } from "react/jsx-runtime";
+import { jsx as jsx334 } from "react/jsx-runtime";
 var TableBody = (props) => {
   const { children, className } = props;
-  return /* @__PURE__ */ jsx319("tbody", { className, children });
+  return /* @__PURE__ */ jsx334("tbody", { className, children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
 
 // src/components/Table/TableCell.tsx
-import React23 from "react";
+import React28 from "react";
 
 // src/components/Table/TableHeadContext.tsx
-import React21 from "react";
-var TableHeadContext = React21.createContext(
+import React26 from "react";
+var TableHeadContext = React26.createContext(
   null
 );
 var useTableHeadContext = () => {
-  const ctx = React21.useContext(TableHeadContext);
+  const ctx = React26.useContext(TableHeadContext);
   return ctx;
 };
 var TableHeadContext_default = TableHeadContext;
 
 // src/components/Table/TableRowContext.tsx
-import React22 from "react";
-var TableRowContext = React22.createContext(null);
+import React27 from "react";
+var TableRowContext = React27.createContext(null);
 var useTableRowContext = () => {
-  const ctx = React22.useContext(TableRowContext);
+  const ctx = React27.useContext(TableRowContext);
   if (!ctx) throw new Error("Table components must be used inside <Table>");
   return ctx;
 };
 var TableRowContext_default = TableRowContext;
 
 // src/components/Table/TableCell.tsx
-import { jsx as jsx320 } from "react/jsx-runtime";
+import { jsx as jsx335 } from "react/jsx-runtime";
 var TableCell = (props) => {
   const {
     children,
@@ -2848,9 +3588,9 @@ var TableCell = (props) => {
   const { registerStickyCell, stickyCells } = useTableRowContext();
   const { stickyShadow } = useTableContext();
   const headContext = useTableHeadContext();
-  const [left, setLeft] = React23.useState(0);
-  const cellRef = React23.useRef(null);
-  const calculateLeft = React23.useCallback(() => {
+  const [left, setLeft] = React28.useState(0);
+  const cellRef = React28.useRef(null);
+  const calculateLeft = React28.useCallback(() => {
     if (!cellRef.current) return 0;
     let totalLeft = 0;
     for (const ref of stickyCells) {
@@ -2859,7 +3599,7 @@ var TableCell = (props) => {
     }
     return totalLeft;
   }, [stickyCells]);
-  React23.useEffect(() => {
+  React28.useEffect(() => {
     if (!isSticky || !cellRef.current) return;
     registerStickyCell(cellRef);
     setLeft(calculateLeft());
@@ -2877,7 +3617,7 @@ var TableCell = (props) => {
   const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
-  return /* @__PURE__ */ jsx320(
+  return /* @__PURE__ */ jsx335(
     CellTag,
     {
       ref: cellRef,
@@ -2899,21 +3639,21 @@ TableCell.displayName = "TableCell";
 var TableCell_default = TableCell;
 
 // src/components/Table/TableHead.tsx
-import { jsx as jsx321 } from "react/jsx-runtime";
+import { jsx as jsx336 } from "react/jsx-runtime";
 var TableHead = ({
   children,
   className = "",
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ jsx321(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx321("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+  return /* @__PURE__ */ jsx336(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx336("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
 
 // src/components/Table/TableRow.tsx
-import React24 from "react";
-import { jsx as jsx322 } from "react/jsx-runtime";
+import React29 from "react";
+import { jsx as jsx337 } from "react/jsx-runtime";
 var TableRow = (props) => {
   const {
     children,
@@ -2926,7 +3666,7 @@ var TableRow = (props) => {
     onClick
   } = props;
   const { rowBorderUse } = useTableContext();
-  const [stickyCells, setStickyCells] = React24.useState([]);
+  const [stickyCells, setStickyCells] = React29.useState([]);
   const registerStickyCell = (ref) => {
     setStickyCells((prev) => {
       if (prev.includes(ref)) return prev;
@@ -2938,7 +3678,7 @@ var TableRow = (props) => {
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsx322(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx322(
+  return /* @__PURE__ */ jsx337(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx337(
     "tr",
     {
       className: clsx_default(
@@ -2957,13 +3697,37 @@ var TableRow = (props) => {
 TableRow.displayName = "TableRow";
 var TableRow_default = TableRow;
 
+// src/components/Tag/Tag.tsx
+import { jsx as jsx338, jsxs as jsxs212 } from "react/jsx-runtime";
+var Tag = (props) => {
+  const {
+    children,
+    onClose,
+    colorNamespace = "xplat",
+    color = "neutral",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ jsxs212("span", { className: clsx_default("lib-xplat-tag", colorClass, className), children: [
+    /* @__PURE__ */ jsx338("span", { className: "tag-label", children }),
+    onClose && /* @__PURE__ */ jsx338("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ jsx338(XIcon_default, {}) })
+  ] });
+};
+Tag.displayName = "Tag";
+var Tag_default = Tag;
+
 // src/components/TextArea/TextArea.tsx
-import React25 from "react";
-import { jsx as jsx323 } from "react/jsx-runtime";
-var TextArea = React25.forwardRef(
+import React30 from "react";
+import { jsx as jsx339 } from "react/jsx-runtime";
+var TextArea = React30.forwardRef(
   (props, ref) => {
     const { value, onChange, className, disabled, ...textareaProps } = props;
-    const localRef = React25.useRef(null);
+    const localRef = React30.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
       if (!ref) return;
@@ -2983,21 +3747,21 @@ var TextArea = React25.forwardRef(
         onChange(event);
       }
     };
-    React25.useEffect(() => {
+    React30.useEffect(() => {
       const el = localRef.current;
       if (!el) return;
       el.style.height = "0px";
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ jsx323("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx323(
+    return /* @__PURE__ */ jsx339("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx339(
       "div",
       {
         className: clsx_default(
           "lib-xplat-textarea",
           disabled ? "disabled" : void 0
         ),
-        children: /* @__PURE__ */ jsx323(
+        children: /* @__PURE__ */ jsx339(
           "textarea",
           {
             ...textareaProps,
@@ -3014,9 +3778,100 @@ var TextArea = React25.forwardRef(
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
+// src/components/Toast/Toast.tsx
+import React31 from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx340, jsxs as jsxs213 } from "react/jsx-runtime";
+var ToastContext = React31.createContext(null);
+var useToast = () => {
+  const ctx = React31.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+};
+var EXIT_DURATION = 300;
+var ToastItemComponent = ({ item, isExiting, onClose }) => {
+  const ref = React31.useRef(null);
+  const [height, setHeight] = React31.useState(void 0);
+  React31.useEffect(() => {
+    if (ref.current && !isExiting) {
+      setHeight(ref.current.offsetHeight);
+    }
+  }, [isExiting]);
+  return /* @__PURE__ */ jsx340(
+    "div",
+    {
+      className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
+      style: {
+        maxHeight: isExiting ? 0 : height ?? "none",
+        marginBottom: isExiting ? 0 : void 0
+      },
+      children: /* @__PURE__ */ jsxs213(
+        "div",
+        {
+          ref,
+          className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsx340("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx340("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+          ]
+        }
+      )
+    }
+  );
+};
+var ToastProvider = ({
+  children,
+  position = "top-right"
+}) => {
+  const [toasts, setToasts] = React31.useState([]);
+  const [removing, setRemoving] = React31.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React31.useState(false);
+  React31.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const remove = React31.useCallback((id) => {
+    setRemoving((prev) => new Set(prev).add(id));
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      setRemoving((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }, EXIT_DURATION);
+  }, []);
+  const toast = React31.useCallback(
+    (type, message, duration = 3e3) => {
+      const id = `${Date.now()}-${Math.random()}`;
+      setToasts((prev) => [...prev, { id, type, message }]);
+      if (duration > 0) {
+        setTimeout(() => remove(id), duration);
+      }
+    },
+    [remove]
+  );
+  return /* @__PURE__ */ jsxs213(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    mounted && createPortal3(
+      /* @__PURE__ */ jsx340("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx340(
+        ToastItemComponent,
+        {
+          item: t,
+          isExiting: removing.has(t.id),
+          onClose: () => remove(t.id)
+        },
+        t.id
+      )) }),
+      document.body
+    )
+  ] });
+};
+ToastProvider.displayName = "ToastProvider";
+
 // src/components/Tooltip/Tooltip.tsx
-import React26 from "react";
-import { jsx as jsx324, jsxs as jsxs200 } from "react/jsx-runtime";
+import React32 from "react";
+import { jsx as jsx341, jsxs as jsxs214 } from "react/jsx-runtime";
 var Tooltip2 = (props) => {
   const {
     type = "primary",
@@ -3026,24 +3881,24 @@ var Tooltip2 = (props) => {
     description,
     children
   } = props;
-  const iconRef = React26.useRef(null);
+  const iconRef = React32.useRef(null);
   const colorClass = getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500
   );
-  return /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ jsx324("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx324("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+  return /* @__PURE__ */ jsxs214("div", { className: "lib-xplat-tooltip", children: [
+    /* @__PURE__ */ jsx341("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
+    /* @__PURE__ */ jsx341("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
   ] });
 };
 Tooltip2.displayName = "Tooltip";
 var Tooltip_default = Tooltip2;
 
 // src/components/Video/Video.tsx
-import React27 from "react";
-import { jsx as jsx325, jsxs as jsxs201 } from "react/jsx-runtime";
-var Video = React27.forwardRef((props, ref) => {
+import React33 from "react";
+import { jsx as jsx342, jsxs as jsxs215 } from "react/jsx-runtime";
+var Video = React33.forwardRef((props, ref) => {
   const {
     src,
     poster,
@@ -3057,10 +3912,10 @@ var Video = React27.forwardRef((props, ref) => {
     onPause,
     ...rest
   } = props;
-  const videoRef = React27.useRef(null);
-  const [isPlaying, setIsPlaying] = React27.useState(Boolean(autoPlay));
-  const [isLoaded, setIsLoaded] = React27.useState(false);
-  const setRefs = React27.useCallback(
+  const videoRef = React33.useRef(null);
+  const [isPlaying, setIsPlaying] = React33.useState(Boolean(autoPlay));
+  const [isLoaded, setIsLoaded] = React33.useState(false);
+  const setRefs = React33.useCallback(
     (el) => {
       videoRef.current = el;
       if (typeof ref === "function") ref(el);
@@ -3088,7 +3943,7 @@ var Video = React27.forwardRef((props, ref) => {
     }
   };
   const showCustomOverlay = !controls;
-  return /* @__PURE__ */ jsxs201(
+  return /* @__PURE__ */ jsxs215(
     "div",
     {
       className: clsx_default(
@@ -3097,7 +3952,7 @@ var Video = React27.forwardRef((props, ref) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx325(
+        /* @__PURE__ */ jsx342(
           "video",
           {
             ref: setRefs,
@@ -3114,7 +3969,7 @@ var Video = React27.forwardRef((props, ref) => {
             ...rest
           }
         ),
-        showCustomOverlay && /* @__PURE__ */ jsx325(
+        showCustomOverlay && /* @__PURE__ */ jsx342(
           "button",
           {
             type: "button",
@@ -3125,7 +3980,7 @@ var Video = React27.forwardRef((props, ref) => {
             ),
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ jsx325(PauseIcon_default, {}) : /* @__PURE__ */ jsx325("span", { className: "play-icon", children: /* @__PURE__ */ jsx325(PlayCircleIcon_default, {}) })
+            children: isPlaying ? /* @__PURE__ */ jsx342(PauseIcon_default, {}) : /* @__PURE__ */ jsx342("span", { className: "play-icon", children: /* @__PURE__ */ jsx342(PlayCircleIcon_default, {}) })
           }
         )
       ]
@@ -3135,25 +3990,40 @@ var Video = React27.forwardRef((props, ref) => {
 Video.displayName = "Video";
 var Video_default = Video;
 export {
+  Accordion_default as Accordion,
+  Alert_default as Alert,
+  Avatar_default as Avatar,
+  Badge_default as Badge,
+  Breadcrumb_default as Breadcrumb,
   Button_default as Button,
   Card_default as Card,
   Chart_default as Chart,
   CheckBox_default as CheckBox,
   Chip_default as Chip,
+  Divider_default as Divider,
+  Drawer_default as Drawer,
+  Dropdown_default as Dropdown,
+  EmptyState_default as EmptyState,
+  FileUpload_default as FileUpload,
   HtmlTypeWriter_default as HtmlTypewriter,
   ImageSelector_default as ImageSelector,
   Input_default as Input,
   InputDatePicker_default as InputDatePicker,
   Modal_default as Modal,
+  Pagination_default as Pagination,
   PasswordInput_default as PasswordInput,
   PopOver_default as PopOver,
   PopupPicker_default as PopupDatePicker,
+  Progress_default as Progress,
   Radio_default as Radio,
   RadioGroup_default as RadioGroup,
   RangePicker_default as RangeDatePicker,
   Select_default as Select,
   SelectItem_default as SelectItem,
   SingleDatePicker_default as SingleDatePicker,
+  Skeleton_default as Skeleton,
+  Spinner_default as Spinner,
+  Steps_default as Steps,
   Switch_default as Switch,
   Tab_default as Tab,
   Table_default as Table,
@@ -3161,7 +4031,10 @@ export {
   TableCell_default as TableCell,
   TableHead_default as TableHead,
   TableRow_default as TableRow,
+  Tag_default as Tag,
   TextArea_default as TextArea,
+  ToastProvider,
   Tooltip_default as Tooltip,
-  Video_default as Video
+  Video_default as Video,
+  useToast
 };