@kb-labs/studio-ui-kit 2.112.0 → 2.116.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.css +51 -2
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +57 -53
  4. package/dist/index.js.map +1 -1
  5. package/package.json +19 -19
package/dist/index.css CHANGED
@@ -67,13 +67,62 @@
67
67
  transform: scaleX(-1);
68
68
  }
69
69
 
70
+ /* src/core/UICard.module.css */
71
+ .card {
72
+ --card-accent: var(--border-primary);
73
+ box-shadow: 0 1px 2px var(--shadow);
74
+ transition:
75
+ box-shadow 200ms ease,
76
+ transform 200ms ease,
77
+ border-color 200ms ease;
78
+ position: relative;
79
+ }
80
+ .card::before {
81
+ content: "";
82
+ position: absolute;
83
+ top: 0;
84
+ left: 16px;
85
+ right: 16px;
86
+ height: 2px;
87
+ border-radius: 0 0 2px 2px;
88
+ background: var(--card-accent);
89
+ opacity: 0;
90
+ transition: opacity 200ms ease;
91
+ }
92
+ .card.accented::before {
93
+ opacity: 1;
94
+ }
95
+ .card.hoverable:hover {
96
+ box-shadow: 0 8px 20px -4px var(--shadow-hover);
97
+ border-color: var(--border-secondary);
98
+ transform: translateY(-1px);
99
+ }
100
+
70
101
  /* src/core/UITag.module.css */
71
102
  .kb-ui-tag {
72
- transition: opacity 100ms ease, transform 100ms ease;
103
+ transition:
104
+ opacity 100ms ease,
105
+ transform 100ms ease,
106
+ box-shadow 150ms ease,
107
+ border-color 150ms ease,
108
+ background-color 150ms ease,
109
+ filter 150ms ease;
73
110
  }
74
- .kb-ui-tag:not([disabled]):active {
111
+ .kb-ui-tag:not([disabled]):hover {
112
+ filter: brightness(1.06);
113
+ }
114
+ .kb-ui-tag--clickable {
115
+ cursor: pointer;
116
+ }
117
+ .kb-ui-tag--clickable:not([disabled]):hover {
118
+ transform: translateY(-1px);
119
+ box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));
120
+ border-color: var(--border-secondary);
121
+ }
122
+ .kb-ui-tag--clickable:not([disabled]):active {
75
123
  opacity: 0.7;
76
124
  transform: scale(0.94);
125
+ box-shadow: none;
77
126
  transition: opacity 50ms ease, transform 50ms ease;
78
127
  }
79
128
 
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/core/UIButton.module.css","../src/core/UITag.module.css","../src/core/UIIcon.module.css","../src/core/UIShimmerText.module.css","../src/feedback/UISkeleton.module.css"],"sourcesContent":["/**\n * UIButton styles - Proper SVG icon theming\n *\n * This ensures all SVG icons (lucide-react, etc.) inherit colors from CSS variables\n * and work correctly in both light and dark themes.\n */\n\n.uiButton {\n /* Button inherits theme colors from Ant Design tokens */\n}\n\n/*\n * CRITICAL: SVG icon color inheritance\n *\n * Force all SVG icons to inherit button text color automatically\n * Works for lucide-react, heroicons, and any other icon libraries\n */\n.uiButton svg {\n color: inherit !important;\n stroke: currentColor !important;\n fill: currentColor !important;\n}\n\n/*\n * Disabled state - reduce opacity\n */\n.uiButton:disabled svg,\n.uiButton.ant-btn-disabled svg {\n opacity: 0.4;\n}\n\n/*\n * Size variants - ensure SVG scales properly\n */\n.uiButton.ant-btn-sm svg {\n /* Small button icons */\n width: 14px;\n height: 14px;\n}\n\n.uiButton svg {\n /* Default (middle) button icons */\n width: 16px;\n height: 16px;\n}\n\n.uiButton.ant-btn-lg svg {\n /* Large button icons */\n width: 18px;\n height: 18px;\n}\n\n/*\n * Icon positioning within button\n * Ensures proper spacing between icon and text\n */\n.uiButton .ant-btn-icon {\n /* Icon wrapper - CRITICAL: must inherit color for SVG to get correct color */\n color: inherit !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.uiButton .ant-btn-icon svg {\n /* SVG inside icon wrapper */\n vertical-align: middle;\n display: block; /* Remove inline spacing */\n}\n\n/*\n * All buttons — base transition and press feedback\n */\n.uiButton {\n transition: transform 100ms ease, box-shadow 150ms ease, opacity 100ms ease;\n}\n\n.uiButton:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.96);\n transition: transform 60ms ease;\n}\n\n/*\n * Primary button — subtle lift on hover, snap back on press\n */\n.uiButton.ant-btn-primary {\n transition: transform 150ms ease, box-shadow 150ms ease;\n}\n\n.uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);\n}\n\n.uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.97);\n box-shadow: none;\n transition: transform 60ms ease;\n}\n\n/*\n * Default / dashed — dim on press\n */\n.uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {\n opacity: 0.75;\n}\n\n/*\n * Text / link — background flash on press for clear tactile signal\n */\n.uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {\n background: rgba(0, 0, 0, 0.06) !important;\n transform: scale(0.95);\n}\n\n/*\n * RTL (Right-to-Left) support\n */\n[dir='rtl'] .uiButton .ant-btn-icon {\n /* Mirror icon position in RTL */\n transform: scaleX(-1);\n}\n","/*\n * UITag styles — interactive feedback for clickable tags\n *\n * Class name is hardcoded ('kb-ui-tag') because tsup doesn't map\n * CSS module class names in the dist bundle — styles.className is always {}.\n */\n\n.kb-ui-tag {\n transition: opacity 100ms ease, transform 100ms ease;\n}\n\n.kb-ui-tag:not([disabled]):active {\n opacity: 0.7;\n transform: scale(0.94);\n transition: opacity 50ms ease, transform 50ms ease;\n}\n","/**\n * UIIcon styles - Proper SVG and icon font theming\n *\n * Ensures all icons (Ant Design icons, lucide-react, custom SVG)\n * inherit colors from CSS variables and work in both light and dark themes.\n */\n\n.uiIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n}\n\n/*\n * SVG icons (lucide-react, custom SVG)\n * Use currentColor to inherit from parent color\n */\n.uiIcon svg {\n color: currentColor;\n stroke: currentColor;\n fill: none; /* Most icon libraries use stroke, not fill */\n display: block; /* Remove inline spacing */\n}\n\n/*\n * Ant Design icons (icon fonts)\n * Already use currentColor by default, but ensure it's explicit\n */\n.uiIcon .anticon {\n color: currentColor;\n}\n\n/*\n * Clickable icons (icon buttons)\n */\n.uiIcon.clickable {\n cursor: pointer;\n transition: opacity 0.2s ease, transform 0.1s ease;\n}\n\n.uiIcon.clickable:hover {\n opacity: 0.8;\n}\n\n.uiIcon.clickable:active {\n transform: scale(0.95);\n}\n\n/*\n * Size variants\n */\n.uiIcon.size-xs {\n font-size: 12px;\n width: 12px;\n height: 12px;\n}\n\n.uiIcon.size-sm {\n font-size: 14px;\n width: 14px;\n height: 14px;\n}\n\n.uiIcon.size-base {\n font-size: 16px;\n width: 16px;\n height: 16px;\n}\n\n.uiIcon.size-lg {\n font-size: 20px;\n width: 20px;\n height: 20px;\n}\n\n.uiIcon.size-xl {\n font-size: 24px;\n width: 24px;\n height: 24px;\n}\n\n.uiIcon.size-2xl {\n font-size: 32px;\n width: 32px;\n height: 32px;\n}\n\n/*\n * Color variants using CSS variables\n */\n.uiIcon.color-primary {\n color: var(--link, #2563EB);\n}\n\n.uiIcon.color-secondary {\n color: var(--text-secondary, #6B7280);\n}\n\n.uiIcon.color-success {\n color: var(--success, #16A34A);\n}\n\n.uiIcon.color-warning {\n color: var(--warning, #F59E0B);\n}\n\n.uiIcon.color-error {\n color: var(--error, #DC2626);\n}\n\n.uiIcon.color-info {\n color: var(--info, #0EA5E9);\n}\n\n.uiIcon.color-inherit {\n color: inherit;\n}\n\n/*\n * Spin animation\n */\n.uiIcon.spin {\n animation: uiIconSpin 1s linear infinite;\n}\n\n@keyframes uiIconSpin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/*\n * Disabled state\n */\n.uiIcon.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n","/**\n * UIShimmerText - Animated gradient shimmer on text\n * Classic \"Cursor / ClickUp\" loading text effect.\n */\n\n.shimmer {\n background: linear-gradient(\n 90deg,\n var(--shimmer-color-1, #888) 0%,\n var(--shimmer-color-2, #888) 25%,\n var(--shimmer-highlight, #fff) 50%,\n var(--shimmer-color-2, #888) 75%,\n var(--shimmer-color-1, #888) 100%\n );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;\n display: inline-block;\n}\n\n@keyframes shimmerMove {\n 0% { background-position: 100% 0; }\n 100% { background-position: -100% 0; }\n}\n","@keyframes skeletonLoading {\n 0% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n.skeletonText {\n animation: skeletonLoading 1.4s ease infinite;\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/core/UIButton.module.css","../src/core/UICard.module.css","../src/core/UITag.module.css","../src/core/UIIcon.module.css","../src/core/UIShimmerText.module.css","../src/feedback/UISkeleton.module.css"],"sourcesContent":["/**\n * UIButton styles - Proper SVG icon theming\n *\n * This ensures all SVG icons (lucide-react, etc.) inherit colors from CSS variables\n * and work correctly in both light and dark themes.\n */\n\n.uiButton {\n /* Button inherits theme colors from Ant Design tokens */\n}\n\n/*\n * CRITICAL: SVG icon color inheritance\n *\n * Force all SVG icons to inherit button text color automatically\n * Works for lucide-react, heroicons, and any other icon libraries\n */\n.uiButton svg {\n color: inherit !important;\n stroke: currentColor !important;\n fill: currentColor !important;\n}\n\n/*\n * Disabled state - reduce opacity\n */\n.uiButton:disabled svg,\n.uiButton.ant-btn-disabled svg {\n opacity: 0.4;\n}\n\n/*\n * Size variants - ensure SVG scales properly\n */\n.uiButton.ant-btn-sm svg {\n /* Small button icons */\n width: 14px;\n height: 14px;\n}\n\n.uiButton svg {\n /* Default (middle) button icons */\n width: 16px;\n height: 16px;\n}\n\n.uiButton.ant-btn-lg svg {\n /* Large button icons */\n width: 18px;\n height: 18px;\n}\n\n/*\n * Icon positioning within button\n * Ensures proper spacing between icon and text\n */\n.uiButton .ant-btn-icon {\n /* Icon wrapper - CRITICAL: must inherit color for SVG to get correct color */\n color: inherit !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.uiButton .ant-btn-icon svg {\n /* SVG inside icon wrapper */\n vertical-align: middle;\n display: block; /* Remove inline spacing */\n}\n\n/*\n * All buttons — base transition and press feedback\n */\n.uiButton {\n transition: transform 100ms ease, box-shadow 150ms ease, opacity 100ms ease;\n}\n\n.uiButton:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.96);\n transition: transform 60ms ease;\n}\n\n/*\n * Primary button — subtle lift on hover, snap back on press\n */\n.uiButton.ant-btn-primary {\n transition: transform 150ms ease, box-shadow 150ms ease;\n}\n\n.uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);\n}\n\n.uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.97);\n box-shadow: none;\n transition: transform 60ms ease;\n}\n\n/*\n * Default / dashed — dim on press\n */\n.uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {\n opacity: 0.75;\n}\n\n/*\n * Text / link — background flash on press for clear tactile signal\n */\n.uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {\n background: rgba(0, 0, 0, 0.06) !important;\n transform: scale(0.95);\n}\n\n/*\n * RTL (Right-to-Left) support\n */\n[dir='rtl'] .uiButton .ant-btn-icon {\n /* Mirror icon position in RTL */\n transform: scaleX(-1);\n}\n",".card {\n --card-accent: var(--border-primary);\n box-shadow: 0 1px 2px var(--shadow);\n transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;\n position: relative;\n}\n\n.card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 16px;\n right: 16px;\n height: 2px;\n border-radius: 0 0 2px 2px;\n background: var(--card-accent);\n opacity: 0;\n transition: opacity 200ms ease;\n}\n\n.card.accented::before {\n opacity: 1;\n}\n\n.card.hoverable:hover {\n box-shadow: 0 8px 20px -4px var(--shadow-hover);\n border-color: var(--border-secondary);\n transform: translateY(-1px);\n}\n","/*\n * UITag styles — interactive feedback for clickable tags\n *\n * Class name is hardcoded ('kb-ui-tag') because tsup doesn't map\n * CSS module class names in the dist bundle — styles.className is always {}.\n */\n\n.kb-ui-tag {\n transition: opacity 100ms ease, transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease, filter 150ms ease;\n}\n\n/*\n * All tags, even plain informational ones (e.g. capability badges on a\n * card), get a subtle brightness lift on hover so the whole UI feels alive.\n */\n.kb-ui-tag:not([disabled]):hover {\n filter: brightness(1.06);\n}\n\n/* Tags with an onClick additionally get lift/press feedback — they're pressable. */\n.kb-ui-tag--clickable {\n cursor: pointer;\n}\n\n.kb-ui-tag--clickable:not([disabled]):hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));\n border-color: var(--border-secondary);\n}\n\n.kb-ui-tag--clickable:not([disabled]):active {\n opacity: 0.7;\n transform: scale(0.94);\n box-shadow: none;\n transition: opacity 50ms ease, transform 50ms ease;\n}\n","/**\n * UIIcon styles - Proper SVG and icon font theming\n *\n * Ensures all icons (Ant Design icons, lucide-react, custom SVG)\n * inherit colors from CSS variables and work in both light and dark themes.\n */\n\n.uiIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n}\n\n/*\n * SVG icons (lucide-react, custom SVG)\n * Use currentColor to inherit from parent color\n */\n.uiIcon svg {\n color: currentColor;\n stroke: currentColor;\n fill: none; /* Most icon libraries use stroke, not fill */\n display: block; /* Remove inline spacing */\n}\n\n/*\n * Ant Design icons (icon fonts)\n * Already use currentColor by default, but ensure it's explicit\n */\n.uiIcon .anticon {\n color: currentColor;\n}\n\n/*\n * Clickable icons (icon buttons)\n */\n.uiIcon.clickable {\n cursor: pointer;\n transition: opacity 0.2s ease, transform 0.1s ease;\n}\n\n.uiIcon.clickable:hover {\n opacity: 0.8;\n}\n\n.uiIcon.clickable:active {\n transform: scale(0.95);\n}\n\n/*\n * Size variants\n */\n.uiIcon.size-xs {\n font-size: 12px;\n width: 12px;\n height: 12px;\n}\n\n.uiIcon.size-sm {\n font-size: 14px;\n width: 14px;\n height: 14px;\n}\n\n.uiIcon.size-base {\n font-size: 16px;\n width: 16px;\n height: 16px;\n}\n\n.uiIcon.size-lg {\n font-size: 20px;\n width: 20px;\n height: 20px;\n}\n\n.uiIcon.size-xl {\n font-size: 24px;\n width: 24px;\n height: 24px;\n}\n\n.uiIcon.size-2xl {\n font-size: 32px;\n width: 32px;\n height: 32px;\n}\n\n/*\n * Color variants using CSS variables\n */\n.uiIcon.color-primary {\n color: var(--link, #2563EB);\n}\n\n.uiIcon.color-secondary {\n color: var(--text-secondary, #6B7280);\n}\n\n.uiIcon.color-success {\n color: var(--success, #16A34A);\n}\n\n.uiIcon.color-warning {\n color: var(--warning, #F59E0B);\n}\n\n.uiIcon.color-error {\n color: var(--error, #DC2626);\n}\n\n.uiIcon.color-info {\n color: var(--info, #0EA5E9);\n}\n\n.uiIcon.color-inherit {\n color: inherit;\n}\n\n/*\n * Spin animation\n */\n.uiIcon.spin {\n animation: uiIconSpin 1s linear infinite;\n}\n\n@keyframes uiIconSpin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/*\n * Disabled state\n */\n.uiIcon.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n","/**\n * UIShimmerText - Animated gradient shimmer on text\n * Classic \"Cursor / ClickUp\" loading text effect.\n */\n\n.shimmer {\n background: linear-gradient(\n 90deg,\n var(--shimmer-color-1, #888) 0%,\n var(--shimmer-color-2, #888) 25%,\n var(--shimmer-highlight, #fff) 50%,\n var(--shimmer-color-2, #888) 75%,\n var(--shimmer-color-1, #888) 100%\n );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;\n display: inline-block;\n}\n\n@keyframes shimmerMove {\n 0% { background-position: 100% 0; }\n 100% { background-position: -100% 0; }\n}\n","@keyframes skeletonLoading {\n 0% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n.skeletonText {\n animation: skeletonLoading 1.4s ease infinite;\n}\n"],"mappings":"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","names":[]}
package/dist/index.js CHANGED
@@ -203,13 +203,16 @@ var UIButton = React4.forwardRef(
203
203
  );
204
204
  }
205
205
  );
206
+
207
+ // src/core/UICard.module.css
208
+ var UICard_default = {};
206
209
  var { useToken: useToken3 } = theme;
207
210
  var variantTokens = {
208
- default: { tint: "transparent", accent: "transparent", border: "var(--border-primary, #e8eaed)" },
209
- success: { tint: "rgba(82,196,26,0.07)", accent: "#52c41a", border: "rgba(82,196,26,0.25)" },
210
- warning: { tint: "rgba(250,173,20,0.08)", accent: "#faad14", border: "rgba(250,173,20,0.30)" },
211
- error: { tint: "rgba(255,77,79,0.07)", accent: "#ff4d4f", border: "rgba(255,77,79,0.25)" },
212
- info: { tint: "rgba(12,102,255,0.07)", accent: "#0c66ff", border: "rgba(12,102,255,0.20)" }
211
+ default: { accent: "var(--border-primary)" },
212
+ success: { accent: "var(--success)" },
213
+ warning: { accent: "var(--warning)" },
214
+ error: { accent: "var(--error)" },
215
+ info: { accent: "var(--info)" }
213
216
  };
214
217
  function UICard({
215
218
  title,
@@ -237,17 +240,19 @@ function UICard({
237
240
  extra,
238
241
  size,
239
242
  variant: bordered ? "outlined" : "borderless",
240
- hoverable,
243
+ hoverable: false,
241
244
  loading,
242
245
  ...rest,
246
+ className: [
247
+ UICard_default.card,
248
+ hoverable && UICard_default.hoverable,
249
+ status !== "default" && UICard_default.accented,
250
+ rest.className
251
+ ].filter(Boolean).join(" "),
243
252
  style: {
244
- boxShadow: hoverable ? "0 4px 16px rgba(0,0,0,0.08)" : "0 1px 3px rgba(0,0,0,0.06)",
245
- transition: "box-shadow 200ms ease, transform 200ms ease",
246
- backgroundColor: status !== "default" ? vt.tint : void 0,
247
- borderColor: vt.border,
248
- borderTopColor: status !== "default" ? vt.accent : vt.border,
249
- borderTopWidth: status !== "default" ? 3 : 1,
253
+ borderColor: token.colorBorder,
250
254
  overflow: "hidden",
255
+ "--card-accent": vt.accent,
251
256
  ...rest.style
252
257
  },
253
258
  children: [
@@ -257,7 +262,6 @@ function UICard({
257
262
  }
258
263
  );
259
264
  }
260
- var { useToken: useToken4 } = theme;
261
265
  function UITag({
262
266
  variant = "default",
263
267
  color,
@@ -269,16 +273,15 @@ function UITag({
269
273
  onClick,
270
274
  ...rest
271
275
  }) {
272
- const { token } = useToken4();
273
276
  const colorMap = {
274
- success: token.colorSuccess,
275
- warning: token.colorWarning,
276
- error: token.colorError,
277
- info: token.colorInfo,
278
- default: token.colorPrimary,
279
- neutral: token.colorTextSecondary
277
+ success: "success",
278
+ warning: "warning",
279
+ error: "error",
280
+ info: "processing",
281
+ default: void 0,
282
+ neutral: void 0
280
283
  };
281
- const combinedClassName = ["kb-ui-tag", className].filter(Boolean).join(" ");
284
+ const combinedClassName = ["kb-ui-tag", onClick && "kb-ui-tag--clickable", className].filter(Boolean).join(" ");
282
285
  return /* @__PURE__ */ jsx(
283
286
  Tag,
284
287
  {
@@ -288,14 +291,13 @@ function UITag({
288
291
  icon,
289
292
  className: combinedClassName,
290
293
  onClick,
291
- style: onClick ? { cursor: "pointer" } : void 0,
292
294
  ...rest,
293
295
  children
294
296
  }
295
297
  );
296
298
  }
297
299
  var { Title: AntTitle } = Typography;
298
- var { useToken: useToken5 } = theme;
300
+ var { useToken: useToken4 } = theme;
299
301
  function UITitle({
300
302
  level = 1,
301
303
  children,
@@ -303,7 +305,7 @@ function UITitle({
303
305
  className,
304
306
  style
305
307
  }) {
306
- const { token: _token } = useToken5();
308
+ const { token: _token } = useToken4();
307
309
  if (subtitle) {
308
310
  return /* @__PURE__ */ jsxs(UIBox, { mb: subtitle ? 2 : 3, children: [
309
311
  /* @__PURE__ */ jsx(AntTitle, { level, className, style: { margin: 0, ...style }, children }),
@@ -463,7 +465,7 @@ function UICopyButton({ value, size = "small", label, style, ...rest }) {
463
465
  }
464
466
  );
465
467
  }
466
- var { useToken: useToken6 } = theme;
468
+ var { useToken: useToken5 } = theme;
467
469
  function UIMetricCard({
468
470
  label,
469
471
  value,
@@ -476,7 +478,7 @@ function UIMetricCard({
476
478
  showDelta = true,
477
479
  loading = false
478
480
  }) {
479
- const { token } = useToken6();
481
+ const { token } = useToken5();
480
482
  const iconBgMap = {
481
483
  default: token.colorFillSecondary,
482
484
  info: token.colorInfoBg,
@@ -638,9 +640,9 @@ function createFillFunction(colorMap, colorField) {
638
640
  return colorMap[value] || (firstKey ? colorMap[firstKey] : "#1890ff") || "#1890ff";
639
641
  };
640
642
  }
641
- var { useToken: useToken7 } = theme;
643
+ var { useToken: useToken6 } = theme;
642
644
  function useChartTheme() {
643
- const { token } = useToken7();
645
+ const { token } = useToken6();
644
646
  return React4.useMemo(
645
647
  () => ({
646
648
  defaultColor: token.colorPrimary,
@@ -694,9 +696,9 @@ function UILineChart({ colors, disableAutoColors, ...props }) {
694
696
  }, [props, colors, palette.colors, disableAutoColors]);
695
697
  return /* @__PURE__ */ jsx(Line, { ...enhancedProps, theme: chartTheme });
696
698
  }
697
- var { useToken: useToken8 } = theme;
699
+ var { useToken: useToken7 } = theme;
698
700
  function useChartTheme2() {
699
- const { token } = useToken8();
701
+ const { token } = useToken7();
700
702
  return React4.useMemo(
701
703
  () => ({
702
704
  defaultColor: token.colorPrimary,
@@ -753,9 +755,9 @@ function UIColumnChart({ colors, ...props }) {
753
755
  } : chartTheme;
754
756
  return /* @__PURE__ */ jsx(Column, { ...props, theme: mergedTheme });
755
757
  }
756
- var { useToken: useToken9 } = theme;
758
+ var { useToken: useToken8 } = theme;
757
759
  function useChartTheme3() {
758
- const { token } = useToken9();
760
+ const { token } = useToken8();
759
761
  return React4.useMemo(
760
762
  () => ({
761
763
  defaultColor: token.colorPrimary,
@@ -789,9 +791,9 @@ function UIAreaChart({ colors, disableAutoColors, ...props }) {
789
791
  }, [props, colors, palette.colors, disableAutoColors]);
790
792
  return /* @__PURE__ */ jsx(Area, { ...enhancedProps, theme: chartTheme });
791
793
  }
792
- var { useToken: useToken10 } = theme;
794
+ var { useToken: useToken9 } = theme;
793
795
  function useChartTheme4() {
794
- const { token } = useToken10();
796
+ const { token } = useToken9();
795
797
  return React4.useMemo(
796
798
  () => ({
797
799
  defaultColor: token.colorPrimary,
@@ -825,9 +827,9 @@ function UIPieChart({ colors, disableAutoColors, ...props }) {
825
827
  }, [props, colors, palette.colors, disableAutoColors]);
826
828
  return /* @__PURE__ */ jsx(Pie, { ...enhancedProps, theme: chartTheme });
827
829
  }
828
- var { useToken: useToken11 } = theme;
830
+ var { useToken: useToken10 } = theme;
829
831
  function useChartTheme5() {
830
- const { token } = useToken11();
832
+ const { token } = useToken10();
831
833
  return React4.useMemo(
832
834
  () => ({
833
835
  defaultColor: token.colorPrimary,
@@ -1445,7 +1447,7 @@ function UISteps(props) {
1445
1447
  function UIMenu(props) {
1446
1448
  return /* @__PURE__ */ jsx(Menu, { ...props });
1447
1449
  }
1448
- var { useToken: useToken12 } = theme;
1450
+ var { useToken: useToken11 } = theme;
1449
1451
  function UIPage({
1450
1452
  children,
1451
1453
  width = "default",
@@ -1453,7 +1455,7 @@ function UIPage({
1453
1455
  className,
1454
1456
  style: customStyle
1455
1457
  }) {
1456
- const { token } = useToken12();
1458
+ const { token } = useToken11();
1457
1459
  const maxWidthMap = {
1458
1460
  default: "1280px",
1459
1461
  wide: "1600px",
@@ -1467,14 +1469,14 @@ function UIPage({
1467
1469
  ...isDocument && {
1468
1470
  backgroundColor: token.colorBgContainer,
1469
1471
  borderRadius: token.borderRadiusLG,
1470
- boxShadow: "0 1px 3px rgba(0,0,0,0.06)"
1472
+ boxShadow: token.boxShadow
1471
1473
  },
1472
1474
  minHeight: isDocument ? void 0 : "100%",
1473
1475
  ...customStyle
1474
1476
  };
1475
1477
  return /* @__PURE__ */ jsx(UIBox, { as: "main", className, style, children });
1476
1478
  }
1477
- var { useToken: useToken13 } = theme;
1479
+ var { useToken: useToken12 } = theme;
1478
1480
  function UIHeader({
1479
1481
  title,
1480
1482
  subtitle,
@@ -1483,7 +1485,7 @@ function UIHeader({
1483
1485
  className,
1484
1486
  style: customStyle
1485
1487
  }) {
1486
- const { token } = useToken13();
1488
+ const { token } = useToken12();
1487
1489
  const style = {
1488
1490
  borderBottom: `1px solid ${token.colorBorder}`,
1489
1491
  paddingBottom: spacing[4],
@@ -1501,7 +1503,7 @@ function UIHeader({
1501
1503
  ] })
1502
1504
  ] });
1503
1505
  }
1504
- var { useToken: useToken14 } = theme;
1506
+ var { useToken: useToken13 } = theme;
1505
1507
  function UIPageHeader({
1506
1508
  title,
1507
1509
  description,
@@ -1512,7 +1514,7 @@ function UIPageHeader({
1512
1514
  onBack,
1513
1515
  children
1514
1516
  }) {
1515
- const { token } = useToken14();
1517
+ const { token } = useToken13();
1516
1518
  const hasTabs = !!tabs;
1517
1519
  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: hasTabs ? 0 : 24 }, children: [
1518
1520
  (onBack || breadcrumbs && breadcrumbs.length > 0) && /* @__PURE__ */ jsxs(
@@ -1577,10 +1579,12 @@ function UIPageHeader({
1577
1579
  {
1578
1580
  style: {
1579
1581
  margin: 0,
1582
+ fontFamily: "var(--font-heading)",
1580
1583
  fontSize: token.fontSizeHeading3,
1581
- fontWeight: token.fontWeightStrong,
1584
+ fontWeight: 700,
1585
+ letterSpacing: "-0.02em",
1582
1586
  color: token.colorTextHeading,
1583
- lineHeight: 1.3
1587
+ lineHeight: 1.2
1584
1588
  },
1585
1589
  children: title
1586
1590
  }
@@ -1631,7 +1635,7 @@ function UIAlert({
1631
1635
  }
1632
1636
  );
1633
1637
  }
1634
- var { useToken: useToken15 } = theme;
1638
+ var { useToken: useToken14 } = theme;
1635
1639
  function UIEmptyState({
1636
1640
  icon,
1637
1641
  title,
@@ -1643,7 +1647,7 @@ function UIEmptyState({
1643
1647
  className,
1644
1648
  style: customStyle
1645
1649
  }) {
1646
- const { token } = useToken15();
1650
+ const { token } = useToken14();
1647
1651
  const content = children ?? action;
1648
1652
  if (useDefaultImage || image !== void 0) {
1649
1653
  return /* @__PURE__ */ jsx(
@@ -1671,7 +1675,7 @@ function UIEmptyState({
1671
1675
  }
1672
1676
  UIEmptyState.PRESENTED_IMAGE_SIMPLE = Empty.PRESENTED_IMAGE_SIMPLE;
1673
1677
  UIEmptyState.PRESENTED_IMAGE_DEFAULT = Empty.PRESENTED_IMAGE_DEFAULT;
1674
- var { useToken: useToken16 } = theme;
1678
+ var { useToken: useToken15 } = theme;
1675
1679
  function UIErrorState({
1676
1680
  icon,
1677
1681
  title = "Something went wrong",
@@ -1684,7 +1688,7 @@ function UIErrorState({
1684
1688
  className,
1685
1689
  style: customStyle
1686
1690
  }) {
1687
- const { token } = useToken16();
1691
+ const { token } = useToken15();
1688
1692
  const style = {
1689
1693
  padding: spacing[8],
1690
1694
  textAlign: "center",
@@ -1879,9 +1883,9 @@ function UIPopconfirm(props) {
1879
1883
  function UIPopover(props) {
1880
1884
  return /* @__PURE__ */ jsx(Popover, { ...props });
1881
1885
  }
1882
- var { useToken: useToken17 } = theme;
1886
+ var { useToken: useToken16 } = theme;
1883
1887
  function UIMarkdownViewer({ content, className, style: customStyle }) {
1884
- const { token } = useToken17();
1888
+ const { token } = useToken16();
1885
1889
  const css = `
1886
1890
  .kb-md { font-size: ${token.fontSize}px; line-height: 1.75; color: ${token.colorText}; font-family: ${token.fontFamily}; }
1887
1891
  .kb-md h1,.kb-md h2,.kb-md h3,.kb-md h4,.kb-md h5,.kb-md h6 { font-weight:600; line-height:1.3; margin:1.5em 0 0.5em; color:${token.colorTextHeading}; }
@@ -1917,7 +1921,7 @@ function UIMarkdownViewer({ content, className, style: customStyle }) {
1917
1921
  )
1918
1922
  ] });
1919
1923
  }
1920
- var { useToken: useToken18 } = theme;
1924
+ var { useToken: useToken17 } = theme;
1921
1925
  function UIJsonViewer({
1922
1926
  data,
1923
1927
  collapsed: _collapsed = false,
@@ -1926,7 +1930,7 @@ function UIJsonViewer({
1926
1930
  className,
1927
1931
  style: customStyle
1928
1932
  }) {
1929
- const { token } = useToken18();
1933
+ const { token } = useToken17();
1930
1934
  const jsonString = React4.useMemo(() => {
1931
1935
  try {
1932
1936
  return JSON.stringify(data, null, indent);