cytur-design-system 0.7.1 → 0.8.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { forwardRef as e, useEffect as t } from "react";
-import { Alert as n, App as r, AutoComplete as i, Avatar as a, Badge as o, Breadcrumb as s, Button as c, Button as l, Card as u, Card as ee, Checkbox as d, Col as f, ConfigProvider as p, ConfigProvider as m, DatePicker as te, Descriptions as ne, Divider as re, Drawer as ie, Dropdown as ae, Empty as oe, Empty as se, Flex as h, Form as g, Input as ce, InputNumber as le, Layout as ue, List as de, Menu as fe, Modal as pe, Pagination as me, Popconfirm as he, Popover as ge, Progress as _e, Radio as ve, Result as ye, Row as be, Select as xe, Skeleton as _, Skeleton as v, Slider as y, Space as b, Space as x, Spin as S, Spin as C, Statistic as w, Steps as T, Switch as E, Table as D, Table as O, Tabs as k, Tag as A, Tag as j, TimePicker as M, Tooltip as Se, Tree as Ce, Typography as we, Typography as N, Upload as Te, message as Ee, notification as P, theme as De, theme as F } from "antd";
-import { Fragment as Oe, jsx as I, jsxs as L } from "react/jsx-runtime";
-import * as ke from "@ant-design/icons";
-import { DownloadOutlined as Ae, NotificationOutlined as je, SettingOutlined as Me } from "@ant-design/icons";
+import { forwardRef as e, useEffect as t, useRef as n, useState as r } from "react";
+import { Alert as i, App as a, AutoComplete as o, Avatar as s, Badge as c, Breadcrumb as l, Button as u, Card as d, Card as f, Checkbox as p, Col as m, ConfigProvider as h, ConfigProvider as g, DatePicker as _, Descriptions as v, Divider as y, Drawer as b, Dropdown as x, Empty as S, Empty as C, Flex as w, Form as T, Input as E, InputNumber as D, Layout as O, List as ee, Menu as te, Modal as ne, Pagination as re, Popconfirm as ie, Popover as ae, Progress as oe, Radio as se, Result as ce, Row as le, Select as ue, Select as de, Skeleton as fe, Skeleton as pe, Slider as me, Space as he, Space as k, Spin as ge, Spin as _e, Statistic as ve, Steps as ye, Switch as be, Table as xe, Tabs as Se, Tag as Ce, Tag as A, TimePicker as we, Tooltip as Te, Tree as Ee, Typography as De, Typography as j, Upload as Oe, message as ke, notification as Ae, theme as je, theme as M } from "antd";
+import { Fragment as Me, jsx as N, jsxs as P } from "react/jsx-runtime";
+import * as Ne from "@ant-design/icons";
+import { DownloadOutlined as Pe, NotificationOutlined as Fe, SettingOutlined as Ie } from "@ant-design/icons";
 //#region src/theme/index.ts
-var R = {
+var F = {
 	fontFamily: "\"Pretendard\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
 	fontSize: 14,
 	borderRadius: 4,
@@ -13,6 +13,8 @@ var R = {
 	borderRadiusXS: 2,
 	boxShadow: "0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08)",
 	boxShadowSecondary: "0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08)",
+	controlOutlineWidth: 0,
+	controlOutline: "transparent",
 	colorSuccess: "#15803d",
 	colorWarning: "#f59e0b",
 	colorError: "#dc2626",
@@ -28,15 +30,42 @@ var R = {
 	colorBgContainer: "#ffffff",
 	colorBgElevated: "#ffffff",
 	colorBgLayout: "#f8fafb"
-}, z = {
+}, I = {
 	Button: {
 		primaryShadow: "none",
-		defaultShadow: "none"
+		defaultShadow: "none",
+		dangerShadow: "none",
+		fontWeight: 700,
+		controlHeightSM: 32,
+		contentFontSizeSM: 12,
+		contentLineHeightSM: 16 / 12,
+		paddingInlineSM: 8,
+		borderRadiusSM: 4,
+		controlHeight: 36,
+		contentFontSize: 14,
+		contentLineHeight: 20 / 14,
+		paddingInline: 12,
+		borderRadius: 6,
+		controlHeightLG: 44,
+		contentFontSizeLG: 16,
+		contentLineHeightLG: 24 / 16,
+		paddingInlineLG: 16,
+		borderRadiusLG: 8
+	},
+	Input: {
+		activeShadow: "none",
+		errorActiveShadow: "none",
+		warningActiveShadow: "none"
+	},
+	InputNumber: {
+		activeShadow: "none",
+		errorActiveShadow: "none",
+		warningActiveShadow: "none"
 	},
 	Modal: { borderRadiusLG: 12 }
-}, B = {
+}, L = {
 	token: {
-		...R,
+		...F,
 		colorPrimary: "#0a9e9e",
 		colorPrimaryHover: "#078080",
 		colorPrimaryActive: "#056363",
@@ -44,10 +73,10 @@ var R = {
 		colorLinkHover: "#078080",
 		colorLinkActive: "#056363"
 	},
-	components: z
-}, V = {
+	components: I
+}, R = {
 	token: {
-		...R,
+		...F,
 		colorPrimary: "#2563eb",
 		colorPrimaryHover: "#1d4ed8",
 		colorPrimaryActive: "#1e40af",
@@ -55,10 +84,10 @@ var R = {
 		colorLinkHover: "#1d4ed8",
 		colorLinkActive: "#1e40af"
 	},
-	components: z
-}, H = {
+	components: I
+}, z = {
 	token: {
-		...R,
+		...F,
 		colorPrimary: "#4f46e5",
 		colorPrimaryHover: "#4338ca",
 		colorPrimaryActive: "#3730a3",
@@ -66,12 +95,12 @@ var R = {
 		colorLinkHover: "#4338ca",
 		colorLinkActive: "#3730a3"
 	},
-	components: z
-}, Ne = B, U = {
-	base: B,
-	rm: V,
-	csc: H
-}, W = {
+	components: I
+}, Le = L, B = {
+	base: L,
+	rm: R,
+	csc: z
+}, V = {
 	"label-default-bg-solid": "#1f2937",
 	"label-default-text-solid": "#ffffff",
 	"label-primary-bg-solid": "#2563eb",
@@ -164,9 +193,6 @@ var R = {
 	"tag-danger-bg-border-hover": "#fef2f2",
 	"tag-danger-text-border": "#b91c1c",
 	"tag-danger-border": "#f87171",
-	"action-primary": "#0a9e9e",
-	"action-primary-hover": "#078080",
-	"action-primary-active": "#056363",
 	"action-secondary": "#1d4ed8",
 	"action-secondary-hover": "#1e40af",
 	"action-secondary-active": "#1e3a8a",
@@ -180,7 +206,6 @@ var R = {
 	"text-primary": "#111827",
 	"text-secondary": "#4a5568",
 	"text-secondary-action": "#1d4ed8",
-	"text-primary-action": "#0a9e9e",
 	"text-muted": "#a3adb8",
 	"text-danger": "#dc2626",
 	"text-inverse": "#ffffff",
@@ -192,6 +217,91 @@ var R = {
 	"disabled-bg": "#e2e6ea",
 	"disabled-border": "#e2e6ea",
 	"disabled-text": "#a3adb8",
+	"button-base-border-width": "1px",
+	"button-base-font-weight": "700",
+	"button-base-transition": "0.15s ease",
+	"radius-4": "4px",
+	"radius-6": "6px",
+	"radius-8": "8px",
+	"button-secondary-bg-default": "transparent",
+	"button-secondary-bg-hover": "rgba(0,0,0,0.04)",
+	"button-secondary-bg-active": "rgba(0,0,0,0.08)",
+	"button-secondary-bg-focus": "transparent",
+	"button-secondary-bg-disabled": "#e2e6ea",
+	"button-secondary-text-default": "#374151",
+	"button-secondary-text-hover": "#111827",
+	"button-secondary-text-active": "#111827",
+	"button-secondary-text-focus": "#374151",
+	"button-secondary-text-disabled": "#a3adb8",
+	"button-secondary-border-default": "#a3adb8",
+	"button-secondary-border-hover": "#374151",
+	"button-secondary-border-active": "#111827",
+	"button-secondary-border-focus": "#4a5568",
+	"button-secondary-border-disabled": "#e2e6ea",
+	"button-ghost-bg-default": "transparent",
+	"button-ghost-bg-hover": "#f8fafb",
+	"button-ghost-bg-active": "#cdd3d9",
+	"button-ghost-bg-focus": "transparent",
+	"button-ghost-bg-disabled": "#e2e6ea",
+	"button-ghost-text-default": "#111827",
+	"button-ghost-text-hover": "#111827",
+	"button-ghost-text-active": "#111827",
+	"button-ghost-text-focus": "#111827",
+	"button-ghost-text-disabled": "#a3adb8",
+	"button-ghost-border-default": "transparent",
+	"button-ghost-border-hover": "transparent",
+	"button-ghost-border-active": "transparent",
+	"button-ghost-border-focus": "#3b82f6",
+	"button-ghost-border-disabled": "transparent",
+	"button-danger-bg-default": "#dc2626",
+	"button-danger-bg-hover": "#b91c1c",
+	"button-danger-bg-active": "#991b1b",
+	"button-danger-bg-focus": "#dc2626",
+	"button-danger-bg-disabled": "#e2e6ea",
+	"button-danger-text-default": "#ffffff",
+	"button-danger-text-hover": "#ffffff",
+	"button-danger-text-active": "#ffffff",
+	"button-danger-text-focus": "#ffffff",
+	"button-danger-text-disabled": "#a3adb8",
+	"button-danger-border-default": "transparent",
+	"button-danger-border-hover": "transparent",
+	"button-danger-border-active": "transparent",
+	"button-danger-border-focus": "#3b82f6",
+	"button-danger-border-disabled": "transparent",
+	"iconbutton-radius": "8px",
+	"iconbutton-size-sm": "28px",
+	"iconbutton-size-md": "32px",
+	"iconbutton-size-lg": "36px",
+	"iconbutton-icon-sm": "16px",
+	"iconbutton-icon-md": "20px",
+	"iconbutton-icon-lg": "24px",
+	"iconbutton-bg-default": "transparent",
+	"iconbutton-bg-hover": "#f1f3f5",
+	"iconbutton-bg-active": "#e2e6ea",
+	"iconbutton-bg-disabled": "transparent",
+	"iconbutton-icon-default": "#4a5568",
+	"iconbutton-icon-hover": "#111827",
+	"iconbutton-icon-active": "#111827",
+	"iconbutton-icon-disabled": "#a3adb8",
+	"button-size-sm-height": "32px",
+	"button-size-sm-padding-x": "8px",
+	"button-size-sm-padding-y": "8px",
+	"button-size-sm-gap": "4px",
+	"button-size-sm-radius": "4px",
+	"button-size-sm-icon": "16px",
+	"button-size-md-height": "36px",
+	"button-size-md-padding-x": "12px",
+	"button-size-md-padding-y": "8px",
+	"button-size-md-gap": "8px",
+	"button-size-md-radius": "6px",
+	"button-size-md-icon": "20px",
+	"button-size-lg-height": "44px",
+	"button-size-lg-padding-x": "16px",
+	"button-size-lg-padding-y": "12px",
+	"button-size-lg-gap": "8px",
+	"button-size-lg-radius": "8px",
+	"button-size-lg-icon": "24px",
+	"font-family": "\"Pretendard\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
 	"font-size-xs": "12px",
 	"font-size-sm": "14px",
 	"font-size-md": "16px",
@@ -224,11 +334,8 @@ var R = {
 	"color-gray-900": "#111827",
 	"color-yellow-50": "#fffbeb",
 	"color-yellow-500": "#f59e0b"
-}, Pe = {
-	...W,
-	"action-primary": "#3b82f6",
-	"action-primary-hover": "#5899f5",
-	"action-primary-active": "#88b8fa",
+}, Re = {
+	...V,
 	"action-danger": "#f87171",
 	"action-danger-hover": "#fca5a5",
 	"action-danger-active": "#fecaca",
@@ -239,7 +346,6 @@ var R = {
 	"text-primary": "#f8fafb",
 	"text-secondary": "#cdd3d9",
 	"text-secondary-action": "#88b8fa",
-	"text-primary-action": "#3b82f6",
 	"text-muted": "#6b7b8d",
 	"text-danger": "#f87171",
 	"text-inverse": "#1f2937",
@@ -251,6 +357,57 @@ var R = {
 	"disabled-bg": "#1f2937",
 	"disabled-border": "#374151",
 	"disabled-text": "#6b7b8d",
+	"iconbutton-bg-hover": "#1f2937",
+	"iconbutton-bg-active": "#374151",
+	"iconbutton-icon-default": "#cdd3d9",
+	"iconbutton-icon-hover": "#f8fafb",
+	"iconbutton-icon-active": "#f8fafb",
+	"iconbutton-icon-disabled": "#6b7b8d",
+	"button-secondary-bg-default": "transparent",
+	"button-secondary-bg-hover": "rgba(255,255,255,0.06)",
+	"button-secondary-bg-active": "rgba(255,255,255,0.12)",
+	"button-secondary-bg-focus": "transparent",
+	"button-secondary-bg-disabled": "#1f2937",
+	"button-secondary-text-default": "#cdd3d9",
+	"button-secondary-text-hover": "#f8fafb",
+	"button-secondary-text-active": "#f8fafb",
+	"button-secondary-text-focus": "#cdd3d9",
+	"button-secondary-text-disabled": "#6b7b8d",
+	"button-secondary-border-default": "#4a5568",
+	"button-secondary-border-hover": "#a3adb8",
+	"button-secondary-border-active": "#f8fafb",
+	"button-secondary-border-focus": "#a3adb8",
+	"button-secondary-border-disabled": "#374151",
+	"button-ghost-bg-default": "transparent",
+	"button-ghost-bg-hover": "#1f2937",
+	"button-ghost-bg-active": "#374151",
+	"button-ghost-bg-focus": "transparent",
+	"button-ghost-bg-disabled": "#1f2937",
+	"button-ghost-text-default": "#f8fafb",
+	"button-ghost-text-hover": "#f8fafb",
+	"button-ghost-text-active": "#f8fafb",
+	"button-ghost-text-focus": "#f8fafb",
+	"button-ghost-text-disabled": "#6b7b8d",
+	"button-ghost-border-default": "transparent",
+	"button-ghost-border-hover": "transparent",
+	"button-ghost-border-active": "transparent",
+	"button-ghost-border-focus": "#3b82f6",
+	"button-ghost-border-disabled": "transparent",
+	"button-danger-bg-default": "#f87171",
+	"button-danger-bg-hover": "#fca5a5",
+	"button-danger-bg-active": "#fecaca",
+	"button-danger-bg-focus": "#f87171",
+	"button-danger-bg-disabled": "#1f2937",
+	"button-danger-text-default": "#ffffff",
+	"button-danger-text-hover": "#ffffff",
+	"button-danger-text-active": "#ffffff",
+	"button-danger-text-focus": "#ffffff",
+	"button-danger-text-disabled": "#6b7b8d",
+	"button-danger-border-default": "transparent",
+	"button-danger-border-hover": "transparent",
+	"button-danger-border-active": "transparent",
+	"button-danger-border-focus": "#3b82f6",
+	"button-danger-border-disabled": "transparent",
 	"color-gray-50": "#0f172a",
 	"color-gray-100": "#1f2937",
 	"color-gray-200": "#374151",
@@ -261,303 +418,874 @@ var R = {
 	"color-gray-700": "#e2e6ea",
 	"color-gray-800": "#f1f3f5",
 	"color-gray-900": "#f8fafb"
-}, Fe = (e, t) => {
-	let n = (e) => Object.entries(e).map(([e, t]) => `  --cytur-${e}: ${t};`).join("\n");
-	return `
+}, ze = (e, t, n) => {
+	let r = (e) => Object.entries(e).map(([e, t]) => `  --cytur-${e}: ${t};`).join("\n"), i = Object.keys(n), a = i[0];
+	return `${`
 :root, [data-mode="light"] {
-${n(e)}
+${r(e)}
 }
 [data-mode="dark"] {
-${n(t)}
+${r(t)}
+}`.trim()}\n${i.map((e) => {
+		let t = n[e], i = e === a, o = i ? `:root, [data-brand="${e}"]:not([data-mode="dark"])` : `[data-brand="${e}"]:not([data-mode="dark"])`, s = `[data-brand="${e}"][data-mode="dark"]${i ? ", [data-mode=\"dark\"]:not([data-brand])" : ""}`;
+		return `${o} {
+${r(t.light)}
 }
-`.trim();
-}, G = "__cytur_tokens__", Ie = () => {
+${s} {
+${r(t.dark)}
+}`;
+	}).join("\n")}`;
+}, Be = {
+	light: {
+		"action-primary": "#0a9e9e",
+		"action-primary-hover": "#078080",
+		"action-primary-active": "#056363",
+		"button-primary-bg-default": "#0a9e9e",
+		"button-primary-bg-hover": "#078080",
+		"button-primary-bg-active": "#056363",
+		"button-primary-bg-focus": "#0a9e9e",
+		"button-primary-bg-disabled": "#e2e6ea",
+		"button-primary-text-default": "#ffffff",
+		"button-primary-text-hover": "#ffffff",
+		"button-primary-text-active": "#ffffff",
+		"button-primary-text-focus": "#ffffff",
+		"button-primary-text-disabled": "#a3adb8",
+		"button-primary-border-default": "transparent",
+		"button-primary-border-hover": "transparent",
+		"button-primary-border-active": "transparent",
+		"button-primary-border-focus": "#3b82f6",
+		"button-primary-border-disabled": "transparent",
+		"text-primary-action": "#0a9e9e"
+	},
+	dark: {
+		"action-primary": "#3b82f6",
+		"action-primary-hover": "#5899f5",
+		"action-primary-active": "#88b8fa",
+		"button-primary-bg-default": "#3b82f6",
+		"button-primary-bg-hover": "#5899f5",
+		"button-primary-bg-active": "#88b8fa",
+		"button-primary-bg-focus": "#3b82f6",
+		"button-primary-bg-disabled": "#1f2937",
+		"button-primary-text-default": "#ffffff",
+		"button-primary-text-hover": "#ffffff",
+		"button-primary-text-active": "#ffffff",
+		"button-primary-text-focus": "#ffffff",
+		"button-primary-text-disabled": "#6b7b8d",
+		"button-primary-border-default": "transparent",
+		"button-primary-border-hover": "transparent",
+		"button-primary-border-active": "transparent",
+		"button-primary-border-focus": "#3b82f6",
+		"button-primary-border-disabled": "transparent",
+		"text-primary-action": "#3b82f6"
+	}
+}, Ve = {
+	light: {
+		colorPrimary: "#0a9e9e",
+		colorPrimaryHover: "#078080",
+		colorPrimaryActive: "#056363"
+	},
+	dark: {
+		colorPrimary: "#3b82f6",
+		colorPrimaryHover: "#5899f5",
+		colorPrimaryActive: "#88b8fa"
+	}
+}, He = {
+	light: {
+		"action-primary": "#2563eb",
+		"action-primary-hover": "#1d4ed8",
+		"action-primary-active": "#1e40af",
+		"button-primary-bg-default": "#2563eb",
+		"button-primary-bg-hover": "#1d4ed8",
+		"button-primary-bg-active": "#1e40af",
+		"button-primary-bg-focus": "#2563eb",
+		"button-primary-bg-disabled": "#e2e6ea",
+		"button-primary-text-default": "#ffffff",
+		"button-primary-text-hover": "#ffffff",
+		"button-primary-text-active": "#ffffff",
+		"button-primary-text-focus": "#ffffff",
+		"button-primary-text-disabled": "#a3adb8",
+		"button-primary-border-default": "transparent",
+		"button-primary-border-hover": "transparent",
+		"button-primary-border-active": "transparent",
+		"button-primary-border-focus": "#3b82f6",
+		"button-primary-border-disabled": "transparent",
+		"text-primary-action": "#2563eb"
+	},
+	dark: {
+		"action-primary": "#3b82f6",
+		"action-primary-hover": "#5899f5",
+		"action-primary-active": "#88b8fa",
+		"button-primary-bg-default": "#3b82f6",
+		"button-primary-bg-hover": "#5899f5",
+		"button-primary-bg-active": "#88b8fa",
+		"button-primary-bg-focus": "#3b82f6",
+		"button-primary-bg-disabled": "#1f2937",
+		"button-primary-text-default": "#ffffff",
+		"button-primary-text-hover": "#ffffff",
+		"button-primary-text-active": "#ffffff",
+		"button-primary-text-focus": "#ffffff",
+		"button-primary-text-disabled": "#6b7b8d",
+		"button-primary-border-default": "transparent",
+		"button-primary-border-hover": "transparent",
+		"button-primary-border-active": "transparent",
+		"button-primary-border-focus": "#3b82f6",
+		"button-primary-border-disabled": "transparent",
+		"text-primary-action": "#3b82f6"
+	}
+}, Ue = {
+	light: {
+		colorPrimary: "#2563eb",
+		colorPrimaryHover: "#1d4ed8",
+		colorPrimaryActive: "#1e40af"
+	},
+	dark: {
+		colorPrimary: "#3b82f6",
+		colorPrimaryHover: "#5899f5",
+		colorPrimaryActive: "#88b8fa"
+	}
+}, H = {
+	"font-family": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+	"action-primary": "#3d6bff",
+	"action-primary-hover": "#4c86ff",
+	"action-primary-active": "#2e54cc",
+	"button-primary-bg-default": "#3d6bff",
+	"button-primary-bg-hover": "#4c86ff",
+	"button-primary-bg-active": "#2e54cc",
+	"button-primary-bg-focus": "#3d6bff",
+	"button-primary-bg-disabled": "#243154",
+	"button-primary-text-default": "#ffffff",
+	"button-primary-text-hover": "#ffffff",
+	"button-primary-text-active": "#ffffff",
+	"button-primary-text-focus": "#ffffff",
+	"button-primary-text-disabled": "#5e5e5e",
+	"button-primary-border-default": "#3d6bff",
+	"button-primary-border-hover": "#5d92ff",
+	"button-primary-border-active": "#2e54cc",
+	"button-primary-border-focus": "#3d6bff",
+	"button-primary-border-disabled": "transparent",
+	"button-secondary-bg-default": "#d9d9d9",
+	"button-secondary-bg-hover": "#bfbfbf",
+	"button-secondary-bg-active": "#a6a6a6",
+	"button-secondary-bg-focus": "#d9d9d9",
+	"button-secondary-bg-disabled": "#383838",
+	"button-secondary-text-default": "#111111",
+	"button-secondary-text-hover": "#111111",
+	"button-secondary-text-active": "#111111",
+	"button-secondary-text-focus": "#111111",
+	"button-secondary-text-disabled": "#424242",
+	"button-secondary-border-default": "transparent",
+	"button-secondary-border-hover": "transparent",
+	"button-secondary-border-active": "transparent",
+	"button-secondary-border-focus": "#3d6bff",
+	"button-secondary-border-disabled": "transparent",
+	"button-ghost-bg-default": "transparent",
+	"button-ghost-bg-hover": "#3d6bff1a",
+	"button-ghost-bg-active": "#3d6bff2e",
+	"button-ghost-bg-focus": "transparent",
+	"button-ghost-bg-disabled": "transparent",
+	"button-ghost-text-default": "#3d6bff",
+	"button-ghost-text-hover": "#4c86ff",
+	"button-ghost-text-active": "#2e54cc",
+	"button-ghost-text-focus": "#3d6bff",
+	"button-ghost-text-disabled": "#424242",
+	"button-ghost-border-default": "transparent",
+	"button-ghost-border-hover": "transparent",
+	"button-ghost-border-active": "transparent",
+	"button-ghost-border-focus": "#3d6bff",
+	"button-ghost-border-disabled": "transparent",
+	"button-tertiary-bg-default": "#383838",
+	"button-tertiary-bg-hover": "#454545",
+	"button-tertiary-bg-active": "#525252",
+	"button-tertiary-bg-focus": "#383838",
+	"button-tertiary-bg-disabled": "#2a2a2a",
+	"button-tertiary-text-default": "#ffffff",
+	"button-tertiary-text-hover": "#ffffff",
+	"button-tertiary-text-active": "#ffffff",
+	"button-tertiary-text-focus": "#ffffff",
+	"button-tertiary-text-disabled": "#424242",
+	"button-tertiary-border-default": "#4c4c4c",
+	"button-tertiary-border-hover": "#9b9b9b",
+	"button-tertiary-border-active": "#5e5e5e",
+	"button-tertiary-border-focus": "#3d6bff",
+	"button-tertiary-border-disabled": "#383838",
+	"button-softdanger-bg-default": "#ff64644c",
+	"button-softdanger-bg-hover": "#ff64644c",
+	"button-softdanger-bg-active": "#ff646466",
+	"button-softdanger-bg-focus": "#ff64644c",
+	"button-softdanger-bg-disabled": "#5d2f2f",
+	"button-softdanger-text-default": "#ff6464",
+	"button-softdanger-text-hover": "#ff6464",
+	"button-softdanger-text-active": "#ff6464",
+	"button-softdanger-text-focus": "#ff6464",
+	"button-softdanger-text-disabled": "#5e5e5e",
+	"button-softdanger-border-default": "transparent",
+	"button-softdanger-border-hover": "#ff646480",
+	"button-softdanger-border-active": "#ff6464b2",
+	"button-softdanger-border-focus": "#3d6bff",
+	"button-softdanger-border-disabled": "transparent",
+	"button-danger-bg-default": "#ea3b3b",
+	"button-danger-bg-hover": "#ff6262",
+	"button-danger-bg-active": "#c52e2e",
+	"button-danger-bg-focus": "#ea3b3b",
+	"button-danger-bg-disabled": "#572222",
+	"button-danger-text-default": "#ffffff",
+	"button-danger-text-hover": "#ffffff",
+	"button-danger-text-active": "#ffffff",
+	"button-danger-text-focus": "#ffffff",
+	"button-danger-text-disabled": "#5e5e5e",
+	"button-danger-border-default": "transparent",
+	"button-danger-border-hover": "transparent",
+	"button-danger-border-active": "transparent",
+	"button-danger-border-focus": "#3d6bff",
+	"button-danger-border-disabled": "transparent",
+	"text-primary-action": "#3d6bff",
+	"border-focus": "#3d6bff"
+}, We = {
+	light: H,
+	dark: { ...H }
+}, Ge = {
+	light: {
+		colorPrimary: "#3d6bff",
+		colorPrimaryHover: "#4c86ff",
+		colorPrimaryActive: "#2e54cc"
+	},
+	dark: {
+		colorPrimary: "#3d6bff",
+		colorPrimaryHover: "#4c86ff",
+		colorPrimaryActive: "#2e54cc"
+	}
+}, Ke = {
+	base: Be,
+	rm: He,
+	mg: We
+}, qe = {
+	base: Ve,
+	rm: Ue,
+	mg: Ge
+}, U = "__cytur_tokens__", Je = () => {
 	if (typeof document > "u") return;
-	let e = document.getElementById(G);
-	e || (e = document.createElement("style"), e.id = G, document.head.appendChild(e)), e.innerHTML = Fe(W, Pe);
-}, K = ({ theme: e = "base", mode: n = "light", children: r }) => {
+	let e = document.getElementById(U);
+	e || (e = document.createElement("style"), e.id = U, document.head.appendChild(e)), e.innerHTML = ze(V, Re, Ke);
+}, W = ({ theme: e, brand: n, mode: r = "light", children: i }) => {
+	let a = n ?? (e === "rm" ? "rm" : "base");
 	t(() => {
-		Ie();
+		Je();
 	}, []), t(() => {
-		typeof document < "u" && (document.documentElement.dataset.mode = n);
-	}, [n]);
-	let i = e === "base" && n === "dark" ? { token: {
-		...U[e].token,
-		colorPrimary: "#3b82f6",
-		colorPrimaryHover: "#5899f5",
-		colorPrimaryActive: "#88b8fa",
-		colorError: "#f87171",
-		colorErrorHover: "#fca5a5",
-		colorErrorActive: "#fecaca"
-	} } : {};
-	return /* @__PURE__ */ I(m, {
+		typeof document < "u" && (document.documentElement.dataset.mode = r, document.documentElement.dataset.brand = a);
+	}, [r, a]);
+	let o = qe[a][r], s = a === "rm" ? "rm" : "base";
+	return /* @__PURE__ */ N(g, {
 		theme: {
-			...U[e],
-			...i,
-			algorithm: n === "dark" ? F.darkAlgorithm : F.defaultAlgorithm
+			...B[s],
+			token: {
+				...B[s].token,
+				...o,
+				...r === "dark" ? {
+					colorError: "#f87171",
+					colorErrorHover: "#fca5a5",
+					colorErrorActive: "#fecaca"
+				} : {}
+			},
+			algorithm: r === "dark" ? M.darkAlgorithm : M.defaultAlgorithm
 		},
-		children: r
+		wave: { disabled: !0 },
+		children: i
 	});
 };
-K.displayName = "CyturProvider";
+W.displayName = "CyturProvider";
 //#endregion
 //#region src/theme/tokens.ts
-var q = (e) => `var(--cytur-${e})`, Le = {
+var G = (e) => `var(--cytur-${e})`, K = {
 	label: {
 		default: {
 			bg: {
-				solid: q("label-default-bg-solid"),
-				subtle: q("label-default-bg-subtle"),
-				border: q("label-default-bg-border")
+				solid: G("label-default-bg-solid"),
+				subtle: G("label-default-bg-subtle"),
+				border: G("label-default-bg-border")
 			},
 			text: {
-				solid: q("label-default-text-solid"),
-				subtle: q("label-default-text-subtle"),
-				border: q("label-default-text-border")
+				solid: G("label-default-text-solid"),
+				subtle: G("label-default-text-subtle"),
+				border: G("label-default-text-border")
 			},
-			border: q("label-default-border")
+			border: G("label-default-border")
 		},
 		primary: {
 			bg: {
-				solid: q("label-primary-bg-solid"),
-				subtle: q("label-primary-bg-subtle"),
-				border: q("label-primary-bg-border")
+				solid: G("label-primary-bg-solid"),
+				subtle: G("label-primary-bg-subtle"),
+				border: G("label-primary-bg-border")
 			},
 			text: {
-				solid: q("label-primary-text-solid"),
-				subtle: q("label-primary-text-subtle"),
-				border: q("label-primary-text-border")
+				solid: G("label-primary-text-solid"),
+				subtle: G("label-primary-text-subtle"),
+				border: G("label-primary-text-border")
 			},
-			border: q("label-primary-border")
+			border: G("label-primary-border")
 		},
 		info: {
 			bg: {
-				solid: q("label-info-bg-solid"),
-				subtle: q("label-info-bg-subtle"),
-				border: q("label-info-bg-border")
+				solid: G("label-info-bg-solid"),
+				subtle: G("label-info-bg-subtle"),
+				border: G("label-info-bg-border")
 			},
 			text: {
-				solid: q("label-info-text-solid"),
-				subtle: q("label-info-text-subtle"),
-				border: q("label-info-text-border")
+				solid: G("label-info-text-solid"),
+				subtle: G("label-info-text-subtle"),
+				border: G("label-info-text-border")
 			},
-			border: q("label-info-border")
+			border: G("label-info-border")
 		},
 		success: {
 			bg: {
-				solid: q("label-success-bg-solid"),
-				subtle: q("label-success-bg-subtle"),
-				border: q("label-success-bg-border")
+				solid: G("label-success-bg-solid"),
+				subtle: G("label-success-bg-subtle"),
+				border: G("label-success-bg-border")
 			},
 			text: {
-				solid: q("label-success-text-solid"),
-				subtle: q("label-success-text-subtle"),
-				border: q("label-success-text-border")
+				solid: G("label-success-text-solid"),
+				subtle: G("label-success-text-subtle"),
+				border: G("label-success-text-border")
 			},
-			border: q("label-success-border")
+			border: G("label-success-border")
 		},
 		warning: {
 			bg: {
-				solid: q("label-warning-bg-solid"),
-				subtle: q("label-warning-bg-subtle"),
-				border: q("label-warning-bg-border")
+				solid: G("label-warning-bg-solid"),
+				subtle: G("label-warning-bg-subtle"),
+				border: G("label-warning-bg-border")
 			},
 			text: {
-				solid: q("label-warning-text-solid"),
-				subtle: q("label-warning-text-subtle"),
-				border: q("label-warning-text-border")
+				solid: G("label-warning-text-solid"),
+				subtle: G("label-warning-text-subtle"),
+				border: G("label-warning-text-border")
 			},
-			border: q("label-warning-border")
+			border: G("label-warning-border")
 		},
 		danger: {
 			bg: {
-				solid: q("label-danger-bg-solid"),
-				subtle: q("label-danger-bg-subtle"),
-				border: q("label-danger-bg-border")
+				solid: G("label-danger-bg-solid"),
+				subtle: G("label-danger-bg-subtle"),
+				border: G("label-danger-bg-border")
 			},
 			text: {
-				solid: q("label-danger-text-solid"),
-				subtle: q("label-danger-text-subtle"),
-				border: q("label-danger-text-border")
+				solid: G("label-danger-text-solid"),
+				subtle: G("label-danger-text-subtle"),
+				border: G("label-danger-text-border")
 			},
-			border: q("label-danger-border")
+			border: G("label-danger-border")
 		}
 	},
 	tag: {
 		default: {
 			bg: {
-				solid: q("tag-default-bg-solid"),
-				solidHover: q("tag-default-bg-solid-hover"),
-				subtle: q("tag-default-bg-subtle"),
-				subtleHover: q("tag-default-bg-subtle-hover"),
-				border: q("tag-default-bg-border"),
-				borderHover: q("tag-default-bg-border-hover")
+				solid: G("tag-default-bg-solid"),
+				solidHover: G("tag-default-bg-solid-hover"),
+				subtle: G("tag-default-bg-subtle"),
+				subtleHover: G("tag-default-bg-subtle-hover"),
+				border: G("tag-default-bg-border"),
+				borderHover: G("tag-default-bg-border-hover")
 			},
 			text: {
-				solid: q("tag-default-text-solid"),
-				subtle: q("tag-default-text-subtle"),
-				border: q("tag-default-text-border")
+				solid: G("tag-default-text-solid"),
+				subtle: G("tag-default-text-subtle"),
+				border: G("tag-default-text-border")
 			},
-			border: q("tag-default-border")
+			border: G("tag-default-border")
 		},
 		primary: {
 			bg: {
-				solid: q("tag-primary-bg-solid"),
-				solidHover: q("tag-primary-bg-solid-hover"),
-				subtle: q("tag-primary-bg-subtle"),
-				subtleHover: q("tag-primary-bg-subtle-hover"),
-				border: q("tag-primary-bg-border"),
-				borderHover: q("tag-primary-bg-border-hover")
+				solid: G("tag-primary-bg-solid"),
+				solidHover: G("tag-primary-bg-solid-hover"),
+				subtle: G("tag-primary-bg-subtle"),
+				subtleHover: G("tag-primary-bg-subtle-hover"),
+				border: G("tag-primary-bg-border"),
+				borderHover: G("tag-primary-bg-border-hover")
 			},
 			text: {
-				solid: q("tag-primary-text-solid"),
-				subtle: q("tag-primary-text-subtle"),
-				border: q("tag-primary-text-border")
+				solid: G("tag-primary-text-solid"),
+				subtle: G("tag-primary-text-subtle"),
+				border: G("tag-primary-text-border")
 			},
-			border: q("tag-primary-border")
+			border: G("tag-primary-border")
 		},
 		success: {
 			bg: {
-				solid: q("tag-success-bg-solid"),
-				solidHover: q("tag-success-bg-solid-hover"),
-				subtle: q("tag-success-bg-subtle"),
-				subtleHover: q("tag-success-bg-subtle-hover"),
-				border: q("tag-success-bg-border"),
-				borderHover: q("tag-success-bg-border-hover")
+				solid: G("tag-success-bg-solid"),
+				solidHover: G("tag-success-bg-solid-hover"),
+				subtle: G("tag-success-bg-subtle"),
+				subtleHover: G("tag-success-bg-subtle-hover"),
+				border: G("tag-success-bg-border"),
+				borderHover: G("tag-success-bg-border-hover")
 			},
 			text: {
-				solid: q("tag-success-text-solid"),
-				subtle: q("tag-success-text-subtle"),
-				border: q("tag-success-text-border")
+				solid: G("tag-success-text-solid"),
+				subtle: G("tag-success-text-subtle"),
+				border: G("tag-success-text-border")
 			},
-			border: q("tag-success-border")
+			border: G("tag-success-border")
 		},
 		warning: {
 			bg: {
-				solid: q("tag-warning-bg-solid"),
-				solidHover: q("tag-warning-bg-solid-hover"),
-				subtle: q("tag-warning-bg-subtle"),
-				subtleHover: q("tag-warning-bg-subtle-hover"),
-				border: q("tag-warning-bg-border"),
-				borderHover: q("tag-warning-bg-border-hover")
+				solid: G("tag-warning-bg-solid"),
+				solidHover: G("tag-warning-bg-solid-hover"),
+				subtle: G("tag-warning-bg-subtle"),
+				subtleHover: G("tag-warning-bg-subtle-hover"),
+				border: G("tag-warning-bg-border"),
+				borderHover: G("tag-warning-bg-border-hover")
 			},
 			text: {
-				solid: q("tag-warning-text-solid"),
-				subtle: q("tag-warning-text-subtle"),
-				border: q("tag-warning-text-border")
+				solid: G("tag-warning-text-solid"),
+				subtle: G("tag-warning-text-subtle"),
+				border: G("tag-warning-text-border")
 			},
-			border: q("tag-warning-border")
+			border: G("tag-warning-border")
 		},
 		danger: {
 			bg: {
-				solid: q("tag-danger-bg-solid"),
-				solidHover: q("tag-danger-bg-solid-hover"),
-				subtle: q("tag-danger-bg-subtle"),
-				subtleHover: q("tag-danger-bg-subtle-hover"),
-				border: q("tag-danger-bg-border"),
-				borderHover: q("tag-danger-bg-border-hover")
+				solid: G("tag-danger-bg-solid"),
+				solidHover: G("tag-danger-bg-solid-hover"),
+				subtle: G("tag-danger-bg-subtle"),
+				subtleHover: G("tag-danger-bg-subtle-hover"),
+				border: G("tag-danger-bg-border"),
+				borderHover: G("tag-danger-bg-border-hover")
 			},
 			text: {
-				solid: q("tag-danger-text-solid"),
-				subtle: q("tag-danger-text-subtle"),
-				border: q("tag-danger-text-border")
+				solid: G("tag-danger-text-solid"),
+				subtle: G("tag-danger-text-subtle"),
+				border: G("tag-danger-text-border")
 			},
-			border: q("tag-danger-border")
+			border: G("tag-danger-border")
 		}
 	},
 	action: {
 		primary: {
-			default: q("action-primary"),
-			hover: q("action-primary-hover"),
-			active: q("action-primary-active")
+			default: G("action-primary"),
+			hover: G("action-primary-hover"),
+			active: G("action-primary-active")
 		},
 		secondary: {
-			default: q("action-secondary"),
-			hover: q("action-secondary-hover"),
-			active: q("action-secondary-active")
+			default: G("action-secondary"),
+			hover: G("action-secondary-hover"),
+			active: G("action-secondary-active")
 		},
 		danger: {
-			default: q("action-danger"),
-			hover: q("action-danger-hover"),
-			active: q("action-danger-active")
+			default: G("action-danger"),
+			hover: G("action-danger-hover"),
+			active: G("action-danger-active")
 		}
 	},
 	bg: {
-		surface: q("bg-surface"),
-		subtle: q("bg-subtle"),
-		secondarySubtle: q("bg-secondary-subtle"),
-		dangerSubtle: q("bg-danger-subtle")
+		surface: G("bg-surface"),
+		subtle: G("bg-subtle"),
+		secondarySubtle: G("bg-secondary-subtle"),
+		dangerSubtle: G("bg-danger-subtle")
 	},
 	text: {
-		primary: q("text-primary"),
-		secondary: q("text-secondary"),
-		secondaryAction: q("text-secondary-action"),
-		primaryAction: q("text-primary-action"),
-		muted: q("text-muted"),
-		danger: q("text-danger"),
-		inverse: q("text-inverse"),
-		disabled: q("text-disabled")
+		primary: G("text-primary"),
+		secondary: G("text-secondary"),
+		secondaryAction: G("text-secondary-action"),
+		primaryAction: G("text-primary-action"),
+		muted: G("text-muted"),
+		danger: G("text-danger"),
+		inverse: G("text-inverse"),
+		disabled: G("text-disabled")
 	},
 	border: {
-		default: q("border-default"),
-		secondary: q("border-secondary"),
-		danger: q("border-danger"),
-		focus: q("border-focus")
+		default: G("border-default"),
+		secondary: G("border-secondary"),
+		danger: G("border-danger"),
+		focus: G("border-focus")
 	},
 	disabled: {
-		bg: q("disabled-bg"),
-		border: q("disabled-border"),
-		text: q("disabled-text")
+		bg: G("disabled-bg"),
+		border: G("disabled-border"),
+		text: G("disabled-text")
+	},
+	button: {
+		base: {
+			borderWidth: G("button-base-border-width"),
+			fontWeight: G("button-base-font-weight"),
+			transition: G("button-base-transition")
+		},
+		primary: {
+			bg: {
+				default: G("button-primary-bg-default"),
+				hover: G("button-primary-bg-hover"),
+				active: G("button-primary-bg-active"),
+				focus: G("button-primary-bg-focus"),
+				disabled: G("button-primary-bg-disabled")
+			},
+			text: {
+				default: G("button-primary-text-default"),
+				hover: G("button-primary-text-hover"),
+				active: G("button-primary-text-active"),
+				focus: G("button-primary-text-focus"),
+				disabled: G("button-primary-text-disabled")
+			},
+			border: {
+				default: G("button-primary-border-default"),
+				hover: G("button-primary-border-hover"),
+				active: G("button-primary-border-active"),
+				focus: G("button-primary-border-focus"),
+				disabled: G("button-primary-border-disabled")
+			}
+		},
+		secondary: {
+			bg: {
+				default: G("button-secondary-bg-default"),
+				hover: G("button-secondary-bg-hover"),
+				active: G("button-secondary-bg-active"),
+				focus: G("button-secondary-bg-focus"),
+				disabled: G("button-secondary-bg-disabled")
+			},
+			text: {
+				default: G("button-secondary-text-default"),
+				hover: G("button-secondary-text-hover"),
+				active: G("button-secondary-text-active"),
+				focus: G("button-secondary-text-focus"),
+				disabled: G("button-secondary-text-disabled")
+			},
+			border: {
+				default: G("button-secondary-border-default"),
+				hover: G("button-secondary-border-hover"),
+				active: G("button-secondary-border-active"),
+				focus: G("button-secondary-border-focus"),
+				disabled: G("button-secondary-border-disabled")
+			}
+		},
+		ghost: {
+			bg: {
+				default: G("button-ghost-bg-default"),
+				hover: G("button-ghost-bg-hover"),
+				active: G("button-ghost-bg-active"),
+				focus: G("button-ghost-bg-focus"),
+				disabled: G("button-ghost-bg-disabled")
+			},
+			text: {
+				default: G("button-ghost-text-default"),
+				hover: G("button-ghost-text-hover"),
+				active: G("button-ghost-text-active"),
+				focus: G("button-ghost-text-focus"),
+				disabled: G("button-ghost-text-disabled")
+			},
+			border: {
+				default: G("button-ghost-border-default"),
+				hover: G("button-ghost-border-hover"),
+				active: G("button-ghost-border-active"),
+				focus: G("button-ghost-border-focus"),
+				disabled: G("button-ghost-border-disabled")
+			}
+		},
+		danger: {
+			bg: {
+				default: G("button-danger-bg-default"),
+				hover: G("button-danger-bg-hover"),
+				active: G("button-danger-bg-active"),
+				focus: G("button-danger-bg-focus"),
+				disabled: G("button-danger-bg-disabled")
+			},
+			text: {
+				default: G("button-danger-text-default"),
+				hover: G("button-danger-text-hover"),
+				active: G("button-danger-text-active"),
+				focus: G("button-danger-text-focus"),
+				disabled: G("button-danger-text-disabled")
+			},
+			border: {
+				default: G("button-danger-border-default"),
+				hover: G("button-danger-border-hover"),
+				active: G("button-danger-border-active"),
+				focus: G("button-danger-border-focus"),
+				disabled: G("button-danger-border-disabled")
+			}
+		},
+		tertiary: {
+			bg: {
+				default: G("button-tertiary-bg-default"),
+				hover: G("button-tertiary-bg-hover"),
+				active: G("button-tertiary-bg-active"),
+				focus: G("button-tertiary-bg-focus"),
+				disabled: G("button-tertiary-bg-disabled")
+			},
+			text: {
+				default: G("button-tertiary-text-default"),
+				hover: G("button-tertiary-text-hover"),
+				active: G("button-tertiary-text-active"),
+				focus: G("button-tertiary-text-focus"),
+				disabled: G("button-tertiary-text-disabled")
+			},
+			border: {
+				default: G("button-tertiary-border-default"),
+				hover: G("button-tertiary-border-hover"),
+				active: G("button-tertiary-border-active"),
+				focus: G("button-tertiary-border-focus"),
+				disabled: G("button-tertiary-border-disabled")
+			}
+		},
+		softDanger: {
+			bg: {
+				default: G("button-softdanger-bg-default"),
+				hover: G("button-softdanger-bg-hover"),
+				active: G("button-softdanger-bg-active"),
+				focus: G("button-softdanger-bg-focus"),
+				disabled: G("button-softdanger-bg-disabled")
+			},
+			text: {
+				default: G("button-softdanger-text-default"),
+				hover: G("button-softdanger-text-hover"),
+				active: G("button-softdanger-text-active"),
+				focus: G("button-softdanger-text-focus"),
+				disabled: G("button-softdanger-text-disabled")
+			},
+			border: {
+				default: G("button-softdanger-border-default"),
+				hover: G("button-softdanger-border-hover"),
+				active: G("button-softdanger-border-active"),
+				focus: G("button-softdanger-border-focus"),
+				disabled: G("button-softdanger-border-disabled")
+			}
+		},
+		size: {
+			sm: {
+				height: G("button-size-sm-height"),
+				paddingX: G("button-size-sm-padding-x"),
+				paddingY: G("button-size-sm-padding-y"),
+				gap: G("button-size-sm-gap"),
+				radius: G("button-size-sm-radius"),
+				icon: G("button-size-sm-icon")
+			},
+			md: {
+				height: G("button-size-md-height"),
+				paddingX: G("button-size-md-padding-x"),
+				paddingY: G("button-size-md-padding-y"),
+				gap: G("button-size-md-gap"),
+				radius: G("button-size-md-radius"),
+				icon: G("button-size-md-icon")
+			},
+			lg: {
+				height: G("button-size-lg-height"),
+				paddingX: G("button-size-lg-padding-x"),
+				paddingY: G("button-size-lg-padding-y"),
+				gap: G("button-size-lg-gap"),
+				radius: G("button-size-lg-radius"),
+				icon: G("button-size-lg-icon")
+			}
+		}
+	},
+	iconButton: {
+		radius: G("iconbutton-radius"),
+		size: {
+			sm: {
+				box: G("iconbutton-size-sm"),
+				icon: G("iconbutton-icon-sm")
+			},
+			md: {
+				box: G("iconbutton-size-md"),
+				icon: G("iconbutton-icon-md")
+			},
+			lg: {
+				box: G("iconbutton-size-lg"),
+				icon: G("iconbutton-icon-lg")
+			}
+		},
+		bg: {
+			default: G("iconbutton-bg-default"),
+			hover: G("iconbutton-bg-hover"),
+			active: G("iconbutton-bg-active"),
+			disabled: G("iconbutton-bg-disabled")
+		},
+		icon: {
+			default: G("iconbutton-icon-default"),
+			hover: G("iconbutton-icon-hover"),
+			active: G("iconbutton-icon-active"),
+			disabled: G("iconbutton-icon-disabled")
+		}
+	},
+	radius: {
+		4: G("radius-4"),
+		6: G("radius-6"),
+		8: G("radius-8")
+	},
+	typography: {
+		heading: {
+			xl: {
+				fontFamily: G("font-family"),
+				fontWeight: G("font-weight-bold"),
+				fontSize: G("font-size-xl"),
+				lineHeight: G("line-height-32"),
+				letterSpacing: G("letter-spacing-tight")
+			},
+			md: {
+				fontFamily: G("font-family"),
+				fontWeight: G("font-weight-bold"),
+				fontSize: G("font-size-md"),
+				lineHeight: G("line-height-24"),
+				letterSpacing: G("letter-spacing-normal")
+			}
+		},
+		label: { lg: {
+			fontFamily: G("font-family"),
+			fontWeight: G("font-weight-medium"),
+			fontSize: G("font-size-md"),
+			lineHeight: G("line-height-24"),
+			letterSpacing: G("letter-spacing-normal")
+		} },
+		body: { sm: {
+			fontFamily: G("font-family"),
+			fontWeight: G("font-weight-regular"),
+			fontSize: G("font-size-xs"),
+			lineHeight: G("line-height-18"),
+			letterSpacing: G("letter-spacing-normal")
+		} },
+		button: {
+			sm: {
+				fontFamily: G("font-family"),
+				fontWeight: G("font-weight-bold"),
+				fontSize: G("font-size-xs"),
+				lineHeight: G("line-height-16"),
+				letterSpacing: G("letter-spacing-normal")
+			},
+			md: {
+				fontFamily: G("font-family"),
+				fontWeight: G("font-weight-bold"),
+				fontSize: G("font-size-sm"),
+				lineHeight: G("line-height-20"),
+				letterSpacing: G("letter-spacing-normal")
+			},
+			lg: {
+				fontFamily: G("font-family"),
+				fontWeight: G("font-weight-bold"),
+				fontSize: G("font-size-md"),
+				lineHeight: G("line-height-24"),
+				letterSpacing: G("letter-spacing-normal")
+			}
+		}
 	},
 	font: {
 		size: {
-			xs: q("font-size-xs"),
-			sm: q("font-size-sm"),
-			md: q("font-size-md"),
-			lg: q("font-size-lg"),
-			xl: q("font-size-xl")
+			xs: G("font-size-xs"),
+			sm: G("font-size-sm"),
+			md: G("font-size-md"),
+			lg: G("font-size-lg"),
+			xl: G("font-size-xl")
 		},
 		weight: {
-			regular: q("font-weight-regular"),
-			medium: q("font-weight-medium"),
-			semibold: q("font-weight-semibold"),
-			bold: q("font-weight-bold")
+			regular: G("font-weight-regular"),
+			medium: G("font-weight-medium"),
+			semibold: G("font-weight-semibold"),
+			bold: G("font-weight-bold")
 		},
 		lineHeight: {
-			16: q("line-height-16"),
-			18: q("line-height-18"),
-			20: q("line-height-20"),
-			22: q("line-height-22"),
-			24: q("line-height-24"),
-			28: q("line-height-28"),
-			32: q("line-height-32")
+			16: G("line-height-16"),
+			18: G("line-height-18"),
+			20: G("line-height-20"),
+			22: G("line-height-22"),
+			24: G("line-height-24"),
+			28: G("line-height-28"),
+			32: G("line-height-32")
 		},
 		letterSpacing: {
-			tighter: q("letter-spacing-tighter"),
-			tight: q("letter-spacing-tight"),
-			normal: q("letter-spacing-normal"),
-			wide: q("letter-spacing-wide")
+			tighter: G("letter-spacing-tighter"),
+			tight: G("letter-spacing-tight"),
+			normal: G("letter-spacing-normal"),
+			wide: G("letter-spacing-wide")
 		}
 	},
 	color: {
 		gray: {
-			50: q("color-gray-50"),
-			100: q("color-gray-100"),
-			200: q("color-gray-200"),
-			300: q("color-gray-300"),
-			400: q("color-gray-400"),
-			500: q("color-gray-500"),
-			600: q("color-gray-600"),
-			700: q("color-gray-700"),
-			800: q("color-gray-800"),
-			900: q("color-gray-900")
+			50: G("color-gray-50"),
+			100: G("color-gray-100"),
+			200: G("color-gray-200"),
+			300: G("color-gray-300"),
+			400: G("color-gray-400"),
+			500: G("color-gray-500"),
+			600: G("color-gray-600"),
+			700: G("color-gray-700"),
+			800: G("color-gray-800"),
+			900: G("color-gray-900")
 		},
 		yellow: {
-			50: q("color-yellow-50"),
-			500: q("color-yellow-500")
+			50: G("color-yellow-50"),
+			500: G("color-yellow-500")
 		}
 	}
-}, Re = {
+}, Ye = [
+	"secondary",
+	"tertiary",
+	"softDanger"
+], Xe = (e, t) => {
+	let n = K.button[e], r = t === "disabled" ? n.bg.disabled : t === "hover" ? n.bg.hover : t === "active" ? n.bg.active : t === "focus" ? n.bg.focus : n.bg.default;
+	if (Ye.includes(e)) {
+		let e = n;
+		return {
+			bg: r,
+			text: t === "disabled" ? e.text.disabled : t === "hover" ? e.text.hover : t === "active" ? e.text.active : t === "focus" ? e.text.focus : e.text.default,
+			border: t === "disabled" ? e.border.disabled : t === "hover" ? e.border.hover : t === "active" ? e.border.active : t === "focus" ? e.border.focus : e.border.default
+		};
+	}
+	return {
+		bg: r,
+		text: t === "disabled" ? n.text.disabled : n.text.default,
+		border: t === "focus" ? n.border.focus : e === "ghost" ? "transparent" : r
+	};
+}, q = e(({ variant: e = "primary", size: t = "md", htmlType: i = "button", icon: a, disabled: o, onMouseEnter: s, onMouseLeave: c, onMouseDown: l, onMouseUp: u, onFocus: d, onBlur: f, style: p, children: m, ...h }, g) => {
+	let [_, v] = r(!1), [y, b] = r(!1), [x, S] = r(!1), C = n(!1), { bg: w, text: T, border: E } = Xe(e, o ? "disabled" : y ? "active" : _ ? "hover" : x ? "focus" : "default"), D = K.button.size[t], O = K.typography.button[t];
+	return /* @__PURE__ */ P("button", {
+		ref: g,
+		type: i,
+		disabled: o,
+		onMouseEnter: (e) => {
+			v(!0), s?.(e);
+		},
+		onMouseLeave: (e) => {
+			v(!1), b(!1), c?.(e);
+		},
+		onMouseDown: (e) => {
+			C.current = !0, b(!0), l?.(e);
+		},
+		onMouseUp: (e) => {
+			b(!1), u?.(e);
+		},
+		onFocus: (e) => {
+			C.current || S(!0), C.current = !1, d?.(e);
+		},
+		onBlur: (e) => {
+			S(!1), f?.(e);
+		},
+		style: {
+			...O,
+			height: D.height,
+			padding: `0 ${D.paddingX}`,
+			gap: D.gap,
+			background: w,
+			color: T,
+			border: `1px solid ${E}`,
+			borderRadius: D.radius,
+			cursor: o ? "not-allowed" : "pointer",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			transition: "0.15s ease",
+			whiteSpace: "nowrap",
+			outline: "none",
+			...p
+		},
+		...h,
+		children: [a && /* @__PURE__ */ N("span", {
+			"aria-hidden": !0,
+			style: {
+				display: "inline-flex",
+				alignItems: "center"
+			},
+			children: a
+		}), m]
+	});
+});
+q.displayName = "Button";
+//#endregion
+//#region src/components/icon/icons.ts
+var Ze = {
 	close: {
 		viewBox: "0 0 20 20",
 		paths: ["M16 5.20857L14.7914 4L10 8.79143L5.20857 4L4 5.20857L8.79143 10L4 14.7914L5.20857 16L10 11.2086L14.7914 16L16 14.7914L11.2086 10L16 5.20857Z"]
@@ -646,14 +1374,14 @@ var q = (e) => `var(--cytur-${e})`, Le = {
 		viewBox: "0 0 20 20",
 		paths: ["M10 3L6.5 6.5L7.5 7.5L10 5L12.5 7.5L13.5 6.5L10 3Z", "M10 17L13.5 13.5L12.5 12.5L10 15L7.5 12.5L6.5 13.5L10 17Z"]
 	}
-}, ze = {
+}, Qe = {
 	xs: 10,
 	sm: 16,
 	md: 20,
 	lg: 24
 }, J = e(({ name: e, size: t = "md", color: n = "currentColor", style: r, ...i }, a) => {
-	let o = typeof t == "number" ? t : ze[t], s = Re[e];
-	return /* @__PURE__ */ I("svg", {
+	let o = typeof t == "number" ? t : Qe[t], s = Ze[e];
+	return /* @__PURE__ */ N("svg", {
 		ref: a,
 		width: o,
 		height: o,
@@ -666,7 +1394,7 @@ var q = (e) => `var(--cytur-${e})`, Le = {
 			...r
 		},
 		...i,
-		children: s.paths.map((e, t) => /* @__PURE__ */ I("path", {
+		children: s.paths.map((e, t) => /* @__PURE__ */ N("path", {
 			d: e,
 			fillRule: "evenodd",
 			clipRule: "evenodd"
@@ -676,41 +1404,60 @@ var q = (e) => `var(--cytur-${e})`, Le = {
 J.displayName = "Icon";
 //#endregion
 //#region src/components/icon-button/IconButton.tsx
-var Be = {
-	sm: 28,
-	md: 32,
-	lg: 36
-}, Ve = {
-	sm: 16,
-	md: 20,
-	lg: 24
-}, Y = e(({ size: e = "md", icon: t, style: n, ...r }, i) => {
-	let a = Be[e], o = Ve[e];
-	return /* @__PURE__ */ I(l, {
-		ref: i,
-		type: "text",
-		icon: /* @__PURE__ */ I("span", {
-			style: {
-				display: "inline-flex",
-				fontSize: o,
-				lineHeight: 1
-			},
-			children: t
-		}),
+var Y = e(({ icon: e, size: t = "md", disabled: n, style: i, onMouseDown: a, onMouseUp: o, onMouseLeave: s, onMouseEnter: c, ...l }, u) => {
+	let [d, f] = r(!1), [p, m] = r(!1), h = n ? "disabled" : p ? "active" : d ? "hover" : "default", g = K.iconButton.size[t];
+	return /* @__PURE__ */ N("button", {
+		ref: u,
+		type: "button",
+		disabled: n,
+		onMouseEnter: (e) => {
+			f(!0), c?.(e);
+		},
+		onMouseLeave: (e) => {
+			f(!1), m(!1), s?.(e);
+		},
+		onMouseDown: (e) => {
+			m(!0), a?.(e);
+		},
+		onMouseUp: (e) => {
+			m(!1), o?.(e);
+		},
 		style: {
-			width: a,
-			height: a,
+			width: g.box,
+			height: g.box,
 			padding: 0,
-			borderRadius: 8,
-			...n
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: K.iconButton.bg[h],
+			color: K.iconButton.icon[h],
+			border: "none",
+			borderRadius: K.iconButton.radius,
+			cursor: n ? "not-allowed" : "pointer",
+			transition: "0.15s ease",
+			...i
 		},
-		...r
+		...l,
+		children: /* @__PURE__ */ N("span", {
+			"aria-hidden": !0,
+			style: {
+				width: g.icon,
+				height: g.icon,
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				fontSize: g.icon,
+				lineHeight: 1,
+				color: "currentColor"
+			},
+			children: e
+		})
 	});
 });
 Y.displayName = "IconButton";
 //#endregion
 //#region src/components/alert-feed/AlertFeed.tsx
-var He = {
+var $e = {
 	emergency: "red",
 	alarm: "orange",
 	warning: "gold",
@@ -720,39 +1467,39 @@ var He = {
 	alarm: "Alarm",
 	warning: "Warning",
 	caution: "Caution"
-}, Z = ({ title: e = "Threat Event Alarms", subtitle: t = "(Last 7 Days)", items: n = [], loading: r = !1, maxHeight: i = 620, activeFilter: a = "all", onFilterChange: o, onViewAll: s, onSettingsClick: c, viewAllLabel: u = "View All Threat Events", extra: d }) => {
-	let f = {
+}, Z = ({ title: e = "Threat Event Alarms", subtitle: t = "(Last 7 Days)", items: n = [], loading: r = !1, maxHeight: i = 620, activeFilter: a = "all", onFilterChange: o, onViewAll: s, onSettingsClick: c, viewAllLabel: l = "View All Threat Events", extra: d }) => {
+	let p = {
 		all: n.length,
 		emergency: n.filter((e) => e.severity === "emergency").length,
 		alarm: n.filter((e) => e.severity === "alarm").length,
 		warning: n.filter((e) => e.severity === "warning").length,
 		caution: n.filter((e) => e.severity === "caution").length
-	}, p = a === "all" ? n : n.filter((e) => e.severity === a), m = d ?? (c && /* @__PURE__ */ I(l, {
+	}, m = a === "all" ? n : n.filter((e) => e.severity === a), h = d ?? (c && /* @__PURE__ */ N(u, {
 		type: "text",
 		size: "small",
-		icon: /* @__PURE__ */ I(Me, {}),
+		icon: /* @__PURE__ */ N(Ie, {}),
 		onClick: c
 	}));
-	return /* @__PURE__ */ I(ee, {
-		title: /* @__PURE__ */ L(x, {
+	return /* @__PURE__ */ N(f, {
+		title: /* @__PURE__ */ P(k, {
 			size: 6,
 			children: [
-				/* @__PURE__ */ I(je, { style: { fontSize: 16 } }),
-				/* @__PURE__ */ I("span", {
+				/* @__PURE__ */ N(Fe, { style: { fontSize: 16 } }),
+				/* @__PURE__ */ N("span", {
 					style: {
 						fontSize: 14,
 						fontWeight: 700
 					},
 					children: e
 				}),
-				/* @__PURE__ */ I(N.Text, {
+				/* @__PURE__ */ N(j.Text, {
 					type: "secondary",
 					style: { fontSize: 12 },
 					children: t
 				})
 			]
 		}),
-		extra: m,
+		extra: h,
 		style: {
 			width: 400,
 			maxHeight: i,
@@ -768,25 +1515,25 @@ var He = {
 			gap: 12,
 			overflow: "hidden"
 		} },
-		actions: s && !r ? [/* @__PURE__ */ I(l, {
+		actions: s && !r ? [/* @__PURE__ */ N(u, {
 			type: "text",
 			size: "small",
 			onClick: s,
-			children: u
+			children: l
 		}, "view-all")] : void 0,
-		children: r ? /* @__PURE__ */ I(v, {
+		children: r ? /* @__PURE__ */ N(pe, {
 			active: !0,
 			paragraph: { rows: 6 }
-		}) : /* @__PURE__ */ L(Oe, { children: [/* @__PURE__ */ I(x, {
+		}) : /* @__PURE__ */ P(Me, { children: [/* @__PURE__ */ N(k, {
 			size: 4,
 			wrap: !0,
-			children: Object.entries(f).map(([e, t]) => /* @__PURE__ */ I(j.CheckableTag, {
+			children: Object.entries(p).map(([e, t]) => /* @__PURE__ */ N(A.CheckableTag, {
 				checked: a === e,
 				onChange: () => o?.(e),
 				style: { margin: 0 },
 				children: `${e === "all" ? "All" : X[e]} ${t}`
 			}, e))
-		}), /* @__PURE__ */ I("div", {
+		}), /* @__PURE__ */ N("div", {
 			style: {
 				flex: 1,
 				minHeight: 0,
@@ -795,10 +1542,10 @@ var He = {
 				flexDirection: "column",
 				gap: 6
 			},
-			children: p.length === 0 ? /* @__PURE__ */ I(se, {
+			children: m.length === 0 ? /* @__PURE__ */ N(C, {
 				description: n.length === 0 ? "No alerts" : "No matching alerts",
 				style: { margin: "auto" }
-			}) : p.map((e) => /* @__PURE__ */ L("div", {
+			}) : m.map((e) => /* @__PURE__ */ P("div", {
 				style: {
 					padding: "10px 12px",
 					background: "#f9fafb",
@@ -808,23 +1555,23 @@ var He = {
 					gap: 4
 				},
 				children: [
-					/* @__PURE__ */ L("div", {
+					/* @__PURE__ */ P("div", {
 						style: {
 							display: "flex",
 							justifyContent: "space-between",
 							alignItems: "center"
 						},
-						children: [/* @__PURE__ */ I(j, {
-							color: He[e.severity],
+						children: [/* @__PURE__ */ N(A, {
+							color: $e[e.severity],
 							style: { margin: 0 },
 							children: X[e.severity]
-						}), /* @__PURE__ */ I(N.Text, {
+						}), /* @__PURE__ */ N(j.Text, {
 							type: "secondary",
 							style: { fontSize: 12 },
 							children: e.time
 						})]
 					}),
-					/* @__PURE__ */ I("div", {
+					/* @__PURE__ */ N("div", {
 						style: {
 							fontSize: 14,
 							fontWeight: 500,
@@ -832,7 +1579,7 @@ var He = {
 						},
 						children: e.title
 					}),
-					/* @__PURE__ */ I(N.Text, {
+					/* @__PURE__ */ N(j.Text, {
 						type: "secondary",
 						style: { fontSize: 12 },
 						children: e.meta
@@ -847,7 +1594,7 @@ Z.displayName = "AlertFeed";
 //#region src/components/file/File.tsx
 var Q = ({ state: e = "default", children: t, style: n, ...r }) => {
 	let i = e === "loading";
-	return /* @__PURE__ */ L(N.Link, {
+	return /* @__PURE__ */ P(j.Link, {
 		...r,
 		disabled: i,
 		style: {
@@ -858,48 +1605,26 @@ var Q = ({ state: e = "default", children: t, style: n, ...r }) => {
 			lineHeight: "18px",
 			...n
 		},
-		children: [i ? /* @__PURE__ */ I(C, { size: "small" }) : /* @__PURE__ */ I(Ae, {}), t]
+		children: [i ? /* @__PURE__ */ N(_e, { size: "small" }) : /* @__PURE__ */ N(Pe, {}), t]
 	});
 };
 Q.displayName = "File";
 //#endregion
-//#region src/components/data-table/DataTable.tsx
-function $({ columns: e, data: t, rowKey: n = "id", pagination: r = !1, pageSize: i = 10, pageSizeOptions: a = [
-	5,
-	10,
-	20,
-	50
-], showGoTo: o = !1, emptyText: s = "No data", ...c }) {
-	let l = e.map((e) => {
-		let { key: n, label: r, sortable: i, filterable: a, dataIndex: o, render: s, ...c } = e, l = o ?? n, u = {
-			...c,
-			key: n,
-			dataIndex: l,
-			title: r,
-			render: s
-		};
-		return i && (u.sorter = (e, t) => {
-			let n = e[l], r = t[l], i = Number(n), a = Number(r);
-			return !Number.isNaN(i) && !Number.isNaN(a) ? i - a : String(n ?? "").localeCompare(String(r ?? ""));
-		}), a && (u.filters = Array.from(new Set(t.map((e) => String(e[l] ?? "")))).map((e) => ({
-			text: e,
-			value: e
-		})), u.onFilter = (e, t) => String(t[l] ?? "") === e), u;
-	});
-	return /* @__PURE__ */ I(O, {
-		...c,
-		columns: l,
-		dataSource: t,
-		rowKey: n,
-		pagination: r ? {
-			pageSize: i,
-			pageSizeOptions: a.map(String),
-			showSizeChanger: !0,
-			showQuickJumper: o
-		} : !1,
-		locale: { emptyText: s }
+//#region src/components/tags-select/TagsSelect.tsx
+var $ = e((e, t) => {
+	let [n, i] = r(!1);
+	return /* @__PURE__ */ N(de, {
+		ref: t,
+		...e,
+		placeholder: n ? "" : e.placeholder,
+		onFocus: (t) => {
+			i(!0), e.onFocus?.(t);
+		},
+		onBlur: (t) => {
+			i(!1), e.onBlur?.(t);
+		}
 	});
-}
-$.displayName = "DataTable";
+});
+$.displayName = "TagsSelect";
 //#endregion
-export { n as Alert, Z as AlertFeed, r as App, i as AutoComplete, a as Avatar, o as Badge, s as Breadcrumb, c as Button, u as Card, d as Checkbox, f as Col, p as ConfigProvider, K as CyturProvider, $ as DataTable, te as DatePicker, ne as Descriptions, re as Divider, ie as Drawer, ae as Dropdown, oe as Empty, Q as File, h as Flex, g as Form, J as Icon, Y as IconButton, ke as Icons, ce as Input, le as InputNumber, ue as Layout, de as List, fe as Menu, pe as Modal, me as Pagination, he as Popconfirm, ge as Popover, _e as Progress, ve as Radio, ye as Result, be as Row, xe as Select, _ as Skeleton, y as Slider, b as Space, S as Spin, w as Statistic, T as Steps, E as Switch, D as Table, k as Tabs, A as Tag, M as TimePicker, Se as Tooltip, Ce as Tree, we as Typography, Te as Upload, B as baseTheme, H as cscTheme, Ne as defaultTheme, Ee as message, P as notification, V as rmTheme, De as theme, U as themes, Le as tokens };
+export { i as Alert, Z as AlertFeed, a as App, o as AutoComplete, s as Avatar, c as Badge, l as Breadcrumb, q as Button, d as Card, p as Checkbox, m as Col, h as ConfigProvider, W as CyturProvider, _ as DatePicker, v as Descriptions, y as Divider, b as Drawer, x as Dropdown, S as Empty, Q as File, w as Flex, T as Form, J as Icon, Y as IconButton, Ne as Icons, E as Input, D as InputNumber, O as Layout, ee as List, te as Menu, ne as Modal, re as Pagination, ie as Popconfirm, ae as Popover, oe as Progress, se as Radio, ce as Result, le as Row, ue as Select, fe as Skeleton, me as Slider, he as Space, ge as Spin, ve as Statistic, ye as Steps, be as Switch, xe as Table, Se as Tabs, Ce as Tag, $ as TagsSelect, we as TimePicker, Te as Tooltip, Ee as Tree, De as Typography, Oe as Upload, L as baseTheme, z as cscTheme, Le as defaultTheme, ke as message, Ae as notification, R as rmTheme, je as theme, B as themes, K as tokens };