@fangxinyan/lumina 0.6.2 → 0.6.4

package/dist/ThemePanel.d.cts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { ThemeMode, ThemePreset, ThemeBaseMode } from './Theme.cjs';
+
+type ThemePanelSection = "mode" | "presets" | "accent" | "shadow" | "intensity" | "radius" | "font" | "density";
+interface ThemePanelPresetOption {
+    /** Mode key. If it exists in `theme.themes`, the registered preset is used. */
+    key: ThemeMode;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** Optional preset to apply and register on click. */
+    preset?: ThemePreset;
+}
+interface ThemePanelModeOption {
+    key: ThemeMode;
+    label: React.ReactNode;
+}
+interface ThemePanelCreatedThemeMeta {
+    key: ThemeMode;
+    label: string;
+    description: string;
+}
+interface ThemePanelCreateThemePayload extends ThemePanelCreatedThemeMeta {
+    preset: ThemePreset;
+    /** Ready-to-append preset option for callers that control `presetOptions`. */
+    presetOption: ThemePanelPresetOption;
+}
+interface ThemePanelDeleteThemePayload extends ThemePanelCreatedThemeMeta {
+    preset?: ThemePreset;
+}
+type ThemePanelDefaultPresetKey = "light" | "dark" | "porcelain" | "assistant" | "assistantDark";
+type ThemePanelDefaultPreset = ThemePreset & {
+    base: ThemeBaseMode;
+    tokens: NonNullable<ThemePreset["tokens"]>;
+};
+declare const THEME_PANEL_DEFAULT_THEME_PRESETS: Record<ThemePanelDefaultPresetKey, ThemePanelDefaultPreset>;
+declare const THEME_PANEL_DEFAULT_PRESET_OPTIONS: ThemePanelPresetOption[];
+interface ThemePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Header title. Pass `null` to hide the title text while keeping the panel layout. */
+    title?: React.ReactNode;
+    /** Secondary header text. */
+    description?: React.ReactNode;
+    /** Sections to render, in order. */
+    sections?: ThemePanelSection[];
+    /** Built-in mode buttons. */
+    modeOptions?: ThemePanelModeOption[];
+    /** Named theme preset cards. Defaults to Lumina presets plus registered `theme.themes`. */
+    presetOptions?: ThemePanelPresetOption[];
+    /** Initial color used by the custom accent picker. */
+    defaultCustomAccent?: string;
+    /** Show the inline create-theme flow in the preset section. */
+    allowCreateTheme?: boolean;
+    /** Default name for a newly created theme. */
+    defaultCreateThemeName?: string;
+    /** Prefix used when generating a mode key for a created theme. */
+    createThemeKeyPrefix?: string;
+    /** Called after a custom theme is saved into the nearest ThemeProvider. */
+    onCreateTheme?: (payload: ThemePanelCreateThemePayload) => void;
+    /** Show delete actions for non-default named themes. */
+    allowDeleteTheme?: boolean;
+    /** Called after a non-default theme is removed from the nearest ThemeProvider. */
+    onDeleteTheme?: (payload: ThemePanelDeleteThemePayload) => void;
+    /** Show the reset button. */
+    showReset?: boolean;
+    /** Compact typography and spacing. */
+    compact?: boolean;
+}
+/**
+ * `ThemePanel` — ready-made controls for quickly editing and saving the nearest Lumina theme.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider>
+ *   <ThemePanel />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemePanel: React.ForwardRefExoticComponent<ThemePanelProps & React.RefAttributes<HTMLDivElement>>;
+
+export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel, type ThemePanelCreateThemePayload, type ThemePanelCreatedThemeMeta, type ThemePanelDeleteThemePayload, type ThemePanelModeOption, type ThemePanelPresetOption, type ThemePanelProps, type ThemePanelSection };

package/dist/ThemePanel.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { ThemeMode, ThemePreset, ThemeBaseMode } from './Theme.js';
+
+type ThemePanelSection = "mode" | "presets" | "accent" | "shadow" | "intensity" | "radius" | "font" | "density";
+interface ThemePanelPresetOption {
+    /** Mode key. If it exists in `theme.themes`, the registered preset is used. */
+    key: ThemeMode;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** Optional preset to apply and register on click. */
+    preset?: ThemePreset;
+}
+interface ThemePanelModeOption {
+    key: ThemeMode;
+    label: React.ReactNode;
+}
+interface ThemePanelCreatedThemeMeta {
+    key: ThemeMode;
+    label: string;
+    description: string;
+}
+interface ThemePanelCreateThemePayload extends ThemePanelCreatedThemeMeta {
+    preset: ThemePreset;
+    /** Ready-to-append preset option for callers that control `presetOptions`. */
+    presetOption: ThemePanelPresetOption;
+}
+interface ThemePanelDeleteThemePayload extends ThemePanelCreatedThemeMeta {
+    preset?: ThemePreset;
+}
+type ThemePanelDefaultPresetKey = "light" | "dark" | "porcelain" | "assistant" | "assistantDark";
+type ThemePanelDefaultPreset = ThemePreset & {
+    base: ThemeBaseMode;
+    tokens: NonNullable<ThemePreset["tokens"]>;
+};
+declare const THEME_PANEL_DEFAULT_THEME_PRESETS: Record<ThemePanelDefaultPresetKey, ThemePanelDefaultPreset>;
+declare const THEME_PANEL_DEFAULT_PRESET_OPTIONS: ThemePanelPresetOption[];
+interface ThemePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Header title. Pass `null` to hide the title text while keeping the panel layout. */
+    title?: React.ReactNode;
+    /** Secondary header text. */
+    description?: React.ReactNode;
+    /** Sections to render, in order. */
+    sections?: ThemePanelSection[];
+    /** Built-in mode buttons. */
+    modeOptions?: ThemePanelModeOption[];
+    /** Named theme preset cards. Defaults to Lumina presets plus registered `theme.themes`. */
+    presetOptions?: ThemePanelPresetOption[];
+    /** Initial color used by the custom accent picker. */
+    defaultCustomAccent?: string;
+    /** Show the inline create-theme flow in the preset section. */
+    allowCreateTheme?: boolean;
+    /** Default name for a newly created theme. */
+    defaultCreateThemeName?: string;
+    /** Prefix used when generating a mode key for a created theme. */
+    createThemeKeyPrefix?: string;
+    /** Called after a custom theme is saved into the nearest ThemeProvider. */
+    onCreateTheme?: (payload: ThemePanelCreateThemePayload) => void;
+    /** Show delete actions for non-default named themes. */
+    allowDeleteTheme?: boolean;
+    /** Called after a non-default theme is removed from the nearest ThemeProvider. */
+    onDeleteTheme?: (payload: ThemePanelDeleteThemePayload) => void;
+    /** Show the reset button. */
+    showReset?: boolean;
+    /** Compact typography and spacing. */
+    compact?: boolean;
+}
+/**
+ * `ThemePanel` — ready-made controls for quickly editing and saving the nearest Lumina theme.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider>
+ *   <ThemePanel />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemePanel: React.ForwardRefExoticComponent<ThemePanelProps & React.RefAttributes<HTMLDivElement>>;
+
+export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel, type ThemePanelCreateThemePayload, type ThemePanelCreatedThemeMeta, type ThemePanelDeleteThemePayload, type ThemePanelModeOption, type ThemePanelPresetOption, type ThemePanelProps, type ThemePanelSection };

package/dist/ThemePanel.js

@@ -0,0 +1,12 @@
+export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-NJCHFXGC.js';
+import './chunk-HU7T64Y3.js';
+import './chunk-6SPMHY54.js';
+import './chunk-7NZ2A4MA.js';
+import './chunk-YJEXAO2I.js';
+import './chunk-HFUHQUPQ.js';
+import './chunk-GZCU6HXD.js';
+import './chunk-DUFRASGO.js';
+import './chunk-XVP7IKLZ.js';
+import './chunk-56PHETWO.js';
+import './chunk-CNGKJYGZ.js';
+import './chunk-YT5NLCRC.js';

package/dist/{Timeline-3ZHOHPXT.css → Timeline-ZIM7QFQC.css}

@@ -71,7 +71,7 @@
   width: 12px;
   height: 12px;
   border-radius: var(--r-pill);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   flex-shrink: 0;
   display: flex;
   align-items: center;

package/dist/Timeline.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkNTS5L4NQ_cjs = require('./chunk-NTS5L4NQ.cjs');
-require('./chunk-QKQHZIF3.cjs');
+var chunkBJ6WUVEG_cjs = require('./chunk-BJ6WUVEG.cjs');
+require('./chunk-SG42F5VB.cjs');
 
 
 
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
-  get: function () { return chunkNTS5L4NQ_cjs.Timeline; }
+  get: function () { return chunkBJ6WUVEG_cjs.Timeline; }
 });

package/dist/Timeline.js

@@ -1,2 +1,2 @@
-export { Timeline } from './chunk-46VXFTEC.js';
-import './chunk-ELNT3CFO.js';
+export { Timeline } from './chunk-OQU3TJCF.js';
+import './chunk-Y5F7ZTBH.js';

package/dist/{Tooltip-DMKUPC24.css → Tooltip-WI23DSRQ.css}

@@ -12,7 +12,7 @@
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   pointer-events: none;
   animation: fadeIn var(--dur) var(--ease);
   z-index: 1000;

package/dist/Tooltip.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk3YJU3D5S_cjs = require('./chunk-3YJU3D5S.cjs');
+var chunkF3LHLYX6_cjs = require('./chunk-F3LHLYX6.cjs');
 require('./chunk-YB3IWIOJ.cjs');
 
 
 
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunk3YJU3D5S_cjs.Tooltip; }
+  get: function () { return chunkF3LHLYX6_cjs.Tooltip; }
 });

package/dist/Tooltip.js

@@ -1,2 +1,2 @@
-export { Tooltip } from './chunk-TEEFR2FD.js';
+export { Tooltip } from './chunk-XHQGMMH7.js';
 import './chunk-DUFRASGO.js';

package/dist/{Typography-NKPWTJCV.css → Typography-GQNIJ4XD.css}

@@ -48,7 +48,7 @@
   padding: 1px 6px;
   border-radius: 5px;
   background: var(--bg-sunken);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent-ink);
   margin: 0 2px;
 }
@@ -59,7 +59,7 @@
   padding: 1px 7px;
   border-radius: 5px;
   background: var(--bg-raised);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   border: 1px solid var(--border);
   color: var(--fg);
   margin: 0 2px;
@@ -145,7 +145,7 @@
 .typo-action:hover {
   color: var(--accent-ink);
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
 }
 .typo-action:focus-visible {
   outline: 2px solid var(--accent-glow);
@@ -169,7 +169,7 @@
   font: inherit;
   color: inherit;
   background: var(--bg-sunken);
-  box-shadow: var(--neu-in);
+  box-shadow: var(--neu-shadow-inset-strong);
   border: none;
   outline: none;
   width: 100%;
@@ -184,7 +184,7 @@
   font-family: inherit;
 }
 .typo-editor:focus {
-  box-shadow: var(--neu-in), 0 0 0 3px var(--accent-glow);
+  box-shadow: var(--neu-shadow-inset-strong), 0 0 0 3px var(--accent-glow);
 }
 
 /* ---- Ellipsis ---- */

package/dist/Typography.cjs

@@ -1,27 +1,27 @@
 'use strict';
 
-var chunkMQV2XN4B_cjs = require('./chunk-MQV2XN4B.cjs');
-require('./chunk-TJII7BQ2.cjs');
+var chunk5JPAUQ5H_cjs = require('./chunk-5JPAUQ5H.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "Link", {
   enumerable: true,
-  get: function () { return chunkMQV2XN4B_cjs.Link; }
+  get: function () { return chunk5JPAUQ5H_cjs.Link; }
 });
 Object.defineProperty(exports, "Paragraph", {
   enumerable: true,
-  get: function () { return chunkMQV2XN4B_cjs.Paragraph; }
+  get: function () { return chunk5JPAUQ5H_cjs.Paragraph; }
 });
 Object.defineProperty(exports, "Text", {
   enumerable: true,
-  get: function () { return chunkMQV2XN4B_cjs.Text; }
+  get: function () { return chunk5JPAUQ5H_cjs.Text; }
 });
 Object.defineProperty(exports, "Title", {
   enumerable: true,
-  get: function () { return chunkMQV2XN4B_cjs.Title; }
+  get: function () { return chunk5JPAUQ5H_cjs.Title; }
 });
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
-  get: function () { return chunkMQV2XN4B_cjs.Typography; }
+  get: function () { return chunk5JPAUQ5H_cjs.Typography; }
 });

package/dist/Typography.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconName } from './Icon.cjs';
+import 'react/jsx-runtime';
 
 type TypographyType = "secondary" | "success" | "warning" | "danger";
 interface CopyableConfig {

package/dist/Typography.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconName } from './Icon.js';
+import 'react/jsx-runtime';
 
 type TypographyType = "secondary" | "success" | "warning" | "danger";
 interface CopyableConfig {

package/dist/Typography.js

@@ -1,2 +1,2 @@
-export { Link, Paragraph, Text, Title, Typography } from './chunk-CXWEOAVU.js';
-import './chunk-OF3SGLZY.js';
+export { Link, Paragraph, Text, Title, Typography } from './chunk-BCFCSVGJ.js';
+import './chunk-YT5NLCRC.js';

package/dist/chunk-2NT5QKEX.js

@@ -0,0 +1,243 @@
+import { Icon } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
+import './shared-NJHRNLRH.css';
+import './Image-SGSRTHQX.css';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var Image = React.forwardRef(({
+  src,
+  alt,
+  width = 200,
+  height,
+  variant = "framed",
+  frame,
+  padding,
+  objectFit,
+  objectPosition,
+  preview,
+  hover = true,
+  placeholder,
+  imgProps,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const [loaded, setLoaded] = React.useState(false);
+  const [err, setErr] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedHeight = height ?? (variant === "icon" ? width : 140);
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  const resolvedObjectFit = objectFit ?? (variant === "icon" ? "contain" : "cover");
+  const canPreview = (preview ?? variant === "framed") && loaded && !err;
+  const {
+    className: imgClassName = "",
+    style: imgStyle,
+    onLoad,
+    onError,
+    ...imageRest
+  } = imgProps ?? {};
+  React.useEffect(() => {
+    setLoaded(false);
+    setErr(false);
+    setOpen(false);
+  }, [src]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `n-image ${variant} ${visualFrame ? "framed" : "unframed"} ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
+        style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+        onClick: () => canPreview && setOpen(true),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: "n-image-frame", style: { width: "100%", height: resolvedHeight }, children: [
+          !err && src && /* @__PURE__ */ jsx(
+            "img",
+            {
+              ...imageRest,
+              src,
+              alt,
+              className: imgClassName,
+              style: { objectFit: resolvedObjectFit, objectPosition, ...imgStyle },
+              onLoad: (event) => {
+                setLoaded(true);
+                onLoad?.(event);
+              },
+              onError: (event) => {
+                setErr(true);
+                onError?.(event);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsx(Icon, { name: "image", size: 28 }) }),
+          canPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "image-hint", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "eye", size: 14 }),
+              /* @__PURE__ */ jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ia-btn",
+                  onClick: () => setOpen(true),
+                  "aria-label": "\u9884\u89C8",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "eye", size: 13 })
+                }
+              ),
+              src && /* @__PURE__ */ jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsx(Icon, { name: "download", size: 13 }) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    open && typeof document !== "undefined" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx("div", { className: "image-preview-overlay", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx("img", { src, alt, onClick: (e) => e.stopPropagation() }) }),
+      document.body
+    )
+  ] });
+});
+Image.displayName = "Image";
+var ImageGrid = React.forwardRef(({
+  images,
+  columns,
+  itemHeight = 130,
+  minItemWidth = 160,
+  gap = 14,
+  imageProps,
+  className = "",
+  style,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className,
+    style: {
+      display: "grid",
+      gap,
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : `repeat(auto-fill, minmax(${typeof minItemWidth === "number" ? `${minItemWidth}px` : minItemWidth}, 1fr))`,
+      ...style
+    },
+    ...rest,
+    children: images.map((img, i) => /* @__PURE__ */ jsx(
+      Image,
+      {
+        ...imageProps,
+        ...img,
+        src: img.src,
+        alt: img.alt,
+        width: img.width ?? "100%",
+        height: img.height ?? itemHeight
+      },
+      i
+    ))
+  }
+));
+ImageGrid.displayName = "ImageGrid";
+var SpriteImage = React.forwardRef(({
+  src,
+  sprite,
+  alt,
+  width,
+  height,
+  scale = 1,
+  backgroundSize,
+  variant = "icon",
+  frame,
+  padding,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedWidth = width ?? sprite.width * scale;
+  const resolvedHeight = height ?? sprite.height * scale;
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `n-sprite-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
+      role: alt ? "img" : void 0,
+      "aria-label": alt || void 0,
+      "aria-hidden": alt === "" ? true : void 0,
+      style: { width: resolvedWidth, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "n-sprite-image-frame", style: { height: resolvedHeight }, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "n-sprite-image-sprite",
+          style: {
+            width: sprite.width,
+            height: sprite.height,
+            backgroundImage: `url(${JSON.stringify(src)})`,
+            backgroundPosition: `${-sprite.x}px ${-sprite.y}px`,
+            backgroundSize,
+            transform: scale !== 1 ? `scale(${scale})` : void 0
+          }
+        }
+      ) })
+    }
+  );
+});
+SpriteImage.displayName = "SpriteImage";
+var insetStyle = (inset) => {
+  if (inset == null) return { inset: 0 };
+  if (typeof inset === "number" || typeof inset === "string") return { inset };
+  return inset;
+};
+var LayeredImage = React.forwardRef(({
+  layers,
+  width = 64,
+  height = 64,
+  variant = "icon",
+  frame,
+  padding,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `n-layered-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
+      style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "n-layered-image-frame", style: { height }, children: layers.map(({ src: layerSrc, alt: layerAlt = "", fit = "contain", inset, zIndex, className: layerClassName = "", style: layerStyle, ...layerRest }, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "n-layered-image-layer",
+          style: {
+            zIndex,
+            ...insetStyle(inset)
+          },
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              ...layerRest,
+              src: layerSrc,
+              alt: layerAlt,
+              className: layerClassName,
+              style: {
+                objectFit: fit,
+                ...layerStyle
+              }
+            }
+          )
+        },
+        `${layerSrc}-${index}`
+      )) })
+    }
+  );
+});
+LayeredImage.displayName = "LayeredImage";
+
+export { Image, ImageGrid, LayeredImage, SpriteImage };

package/dist/{chunk-6BWELOCT.js → chunk-2SCXQ7QS.js}

@@ -1,6 +1,6 @@
-import './tokens-BIIUTPKN.css';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './StatusBar-CDS2GPSI.css';
+import './StatusBar-FJKEEPXU.css';
 import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-5WAXZJG5.cjs → chunk-2ZADGBUN.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
-require('./tokens-BIIUTPKN.css');
+var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Button-SDQD25AG.css');
+require('./Button-TUMZUQLI.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -64,12 +64,12 @@ var Button = React__namespace.forwardRef(
         className: cls,
         disabled: disabled || loading,
         title: tip,
-        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? icon : void 0),
+        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? (typeof icon === "string" ? icon : void 0) : void 0),
         ...rest,
         children: [
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: icon, size: 15 }) : null,
+          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : chunk6LARTGLP_cjs.renderIconSlot(icon, { size: 15, className: "btn-icon-slot" }),
           content,
-          trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: trailingIcon, size: 15 })
+          chunk6LARTGLP_cjs.renderIconSlot(trailingIcon, { size: 15, className: "btn-icon-slot" })
         ]
       }
     );

package/dist/{chunk-7NGMQIST.js → chunk-2ZFJTMEF.js}

@@ -1,8 +1,8 @@
-import { Select } from './chunk-WKKSAGYH.js';
-import { Icon } from './chunk-OF3SGLZY.js';
-import './tokens-BIIUTPKN.css';
+import { Select } from './chunk-7D76MI37.js';
+import { Icon } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Pagination-YIRYJUXP.css';
+import './Pagination-YSZSNFHG.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-UMDGS4BP.js → chunk-3YP7CBJT.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-OF3SGLZY.js';
-import './tokens-BIIUTPKN.css';
+import { renderIconSlot, Icon } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Alert-JJ7GB3UU.css';
+import './Alert-HVPI6L4V.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -17,7 +17,7 @@ var Alert = React.forwardRef(({
   className = "",
   ...rest
 }, ref) => {
-  const iconName = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
+  const iconNode = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -26,7 +26,7 @@ var Alert = React.forwardRef(({
       role: "alert",
       ...rest,
       children: [
-        showIcon && /* @__PURE__ */ jsx("span", { className: "alert-ico", children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 14 }) }),
+        showIcon && /* @__PURE__ */ jsx("span", { className: "alert-ico", children: renderIconSlot(iconNode, { size: 14 }) }),
         /* @__PURE__ */ jsxs("div", { className: "alert-body", children: [
           title && /* @__PURE__ */ jsx("div", { className: "alert-title", children: title }),
           children && /* @__PURE__ */ jsx("div", { className: "alert-desc", children })