@lablup/ui-common 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/components/EmptyState/EmptyState2.js

@@ -1,79 +1,62 @@
 import { Button as e } from "../Button/Button2.js";
-import { BenchmarkIllustration as t, ChatIllustration as n, CreationsIllustration as r, ErrorIllustration as i, GenericIllustration as a, LogsIllustration as o, ModelsIllustration as s, ScheduleIllustration as c, StatisticsIllustration as l, TextIllustration as u } from "./illustrations.js";
 /* empty css           */
-import { memo as d, useCallback as f, useMemo as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { memo as t, useCallback as n, useMemo as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/EmptyState/EmptyState.tsx
-var _ = {
-	chat: n,
-	models: s,
-	creations: r,
-	text: u,
-	benchmark: t,
-	logs: o,
-	statistics: l,
-	error: i,
-	schedule: c,
-	generic: a
-};
-function v({ illustration: t, title: n, description: r, primaryAction: i, secondaryAction: a, children: o, className: s = "", showIllustration: c = !0 }) {
-	let l = i?.onClick, u = a?.onClick, d = f(() => {
-		l?.();
-	}, [l]), v = f(() => {
-		u?.();
-	}, [u]), y = p(() => _[t], [t]), b = p(() => [
-		"empty-state",
-		`empty-state--${t}`,
-		s
-	].filter(Boolean).join(" "), [t, s]);
-	return /* @__PURE__ */ g("div", {
-		className: b,
+function s({ illustration: t, title: s, description: c, primaryAction: l, secondaryAction: u, children: d, className: f = "", showIllustration: p = !0 }) {
+	let m = l?.onClick, h = u?.onClick, g = n(() => {
+		m?.();
+	}, [m]), _ = n(() => {
+		h?.();
+	}, [h]), v = r(() => ["empty-state", f].filter(Boolean).join(" "), [f]);
+	return /* @__PURE__ */ o("div", {
+		className: v,
 		role: "status",
 		"aria-live": "polite",
 		children: [
-			c && /* @__PURE__ */ h("div", {
+			p && t && /* @__PURE__ */ a("div", {
 				className: "empty-state__illustration",
-				children: /* @__PURE__ */ h(y, { className: "empty-state__icon" })
+				children: t
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ o("div", {
 				className: "empty-state__content",
 				children: [
-					/* @__PURE__ */ h("h3", {
+					/* @__PURE__ */ a("h3", {
 						className: "empty-state__title",
-						children: n
+						children: s
 					}),
-					/* @__PURE__ */ h("p", {
+					/* @__PURE__ */ a("p", {
 						className: "empty-state__description",
-						children: r
+						children: c
 					}),
-					o
+					d
 				]
 			}),
-			(i || a) && /* @__PURE__ */ g("div", {
+			(l || u) && /* @__PURE__ */ o("div", {
 				className: "empty-state__actions",
-				children: [i && /* @__PURE__ */ h(e, {
+				children: [l && /* @__PURE__ */ a(e, {
 					variant: "primary",
-					onClick: d,
+					onClick: g,
 					className: "empty-state__action-btn empty-state__action-btn--primary",
-					children: i.label
-				}), a && /* @__PURE__ */ h(m, { children: a.href ? /* @__PURE__ */ h("a", {
-					href: a.href,
+					children: l.label
+				}), u && /* @__PURE__ */ a(i, { children: u.href ? /* @__PURE__ */ a("a", {
+					href: u.href,
 					className: "empty-state__action-link",
-					onClick: v,
-					children: a.label
-				}) : /* @__PURE__ */ h(e, {
+					onClick: _,
+					children: u.label
+				}) : /* @__PURE__ */ a(e, {
 					variant: "ghost",
-					onClick: v,
+					onClick: _,
 					className: "empty-state__action-btn empty-state__action-btn--secondary",
-					children: a.label
+					children: u.label
 				}) })]
 			})
 		]
 	});
 }
-var y = d(v);
+var c = t(s);
 //#endregion
-export { y as EmptyState };
+export { c as EmptyState };
 
 //# sourceMappingURL=EmptyState2.js.map
 import "../../assets/components/EmptyState/EmptyState.css";

package/dist/components/EmptyState/EmptyState2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState2.js","names":[],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["/**\n * EmptyState Component\n *\n * Unified empty state component with consistent layout and styling.\n * Provides configurable illustration, title, description, and call-to-action buttons.\n *\n * Features:\n * - Multiple illustration types for different contexts\n * - Primary and secondary action buttons, plus a `children` slot for an\n *   onboarding state that needs more than two (issue #3903)\n * - Accessible (ARIA attributes, semantic HTML)\n * - Dark/light theme support via design tokens\n * - Fade-in animation with reduced motion support\n * - Responsive design\n * - Memoized for optimal performance\n */\n\nimport { memo, useCallback, useMemo, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport {\n  ChatIllustration,\n  ModelsIllustration,\n  CreationsIllustration,\n  TextIllustration,\n  BenchmarkIllustration,\n  LogsIllustration,\n  StatisticsIllustration,\n  ErrorIllustration,\n  ScheduleIllustration,\n  GenericIllustration,\n} from \"./illustrations\";\nimport \"./EmptyState.css\";\n\nexport type IllustrationType =\n  | \"chat\"\n  | \"models\"\n  | \"creations\"\n  | \"text\"\n  | \"benchmark\"\n  | \"logs\"\n  | \"statistics\"\n  | \"error\"\n  | \"schedule\"\n  | \"generic\";\n\nexport interface EmptyStateAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface EmptyStateSecondaryAction {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface EmptyStateProps {\n  /** Type of illustration to display */\n  illustration: IllustrationType;\n  /** Main heading */\n  title: string;\n  /** Descriptive text */\n  description: string;\n  /** Primary action button */\n  primaryAction?: EmptyStateAction;\n  /** Secondary action (link or button) */\n  secondaryAction?: EmptyStateSecondaryAction;\n  /**\n   * Extra content rendered under the description, inside the same text column.\n   *\n   * The two action props cover the common one-or-two-button case. An\n   * onboarding state that has to offer more than that (e.g. the Data Hub's\n   * three ingest paths, issue #3903) renders them here instead of growing a\n   * page-local copy of this component.\n   */\n  children?: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show illustration (default: true) */\n  showIllustration?: boolean;\n}\n\n/**\n * Static map of illustration types to components.\n * Defined outside component to avoid recreation on each render.\n */\nconst illustrationMap: Record<\n  IllustrationType,\n  React.ComponentType<{ className?: string }>\n> = {\n  chat: ChatIllustration,\n  models: ModelsIllustration,\n  creations: CreationsIllustration,\n  text: TextIllustration,\n  benchmark: BenchmarkIllustration,\n  logs: LogsIllustration,\n  statistics: StatisticsIllustration,\n  error: ErrorIllustration,\n  schedule: ScheduleIllustration,\n  generic: GenericIllustration,\n};\n\n/**\n * EmptyState Component\n *\n * Displays an empty state with illustration, text, and optional actions.\n * Memoized to prevent unnecessary re-renders.\n */\nfunction EmptyStateComponent({\n  illustration,\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  children,\n  className = \"\",\n  showIllustration = true,\n}: EmptyStateProps) {\n  // Use stable callback references by extracting onClick functions\n  const primaryOnClick = primaryAction?.onClick;\n  const secondaryOnClick = secondaryAction?.onClick;\n\n  const handlePrimaryAction = useCallback(() => {\n    primaryOnClick?.();\n  }, [primaryOnClick]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryOnClick?.();\n  }, [secondaryOnClick]);\n\n  // Memoize illustration component lookup\n  const Illustration = useMemo(() => illustrationMap[illustration], [illustration]);\n\n  // Memoize class name computation\n  const containerClass = useMemo(\n    () =>\n      [\"empty-state\", `empty-state--${illustration}`, className]\n        .filter(Boolean)\n        .join(\" \"),\n    [illustration, className],\n  );\n\n  return (\n    <div className={containerClass} role=\"status\" aria-live=\"polite\">\n      {showIllustration && (\n        <div className=\"empty-state__illustration\">\n          <Illustration className=\"empty-state__icon\" />\n        </div>\n      )}\n\n      <div className=\"empty-state__content\">\n        <h3 className=\"empty-state__title\">{title}</h3>\n        <p className=\"empty-state__description\">{description}</p>\n        {children}\n      </div>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"empty-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"empty-state__action-btn empty-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <>\n              {secondaryAction.href ? (\n                <a\n                  href={secondaryAction.href}\n                  className=\"empty-state__action-link\"\n                  onClick={handleSecondaryAction}\n                >\n                  {secondaryAction.label}\n                </a>\n              ) : (\n                <Button\n                  variant=\"ghost\"\n                  onClick={handleSecondaryAction}\n                  className=\"empty-state__action-btn empty-state__action-btn--secondary\"\n                >\n                  {secondaryAction.label}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const EmptyState = memo(EmptyStateComponent);\n"],"mappings":";;;;;;AAsFA,IAAM,IAGF;CACF,MAAM;CACN,QAAQ;CACR,WAAW;CACX,MAAM;CACN,WAAW;CACX,MAAM;CACN,YAAY;CACZ,OAAO;CACP,UAAU;CACV,SAAS;AACX;AAQA,SAAS,EAAoB,EAC3B,iBACA,UACA,gBACA,kBACA,oBACA,aACA,eAAY,IACZ,sBAAmB,MACD;CAElB,IAAM,IAAiB,GAAe,SAChC,IAAmB,GAAiB,SAEpC,IAAsB,QAAkB;EAC5C,IAAiB;CACnB,GAAG,CAAC,CAAc,CAAC,GAEb,IAAwB,QAAkB;EAC9C,IAAmB;CACrB,GAAG,CAAC,CAAgB,CAAC,GAGf,IAAe,QAAc,EAAgB,IAAe,CAAC,CAAY,CAAC,GAG1E,IAAiB,QAEnB;EAAC;EAAe,gBAAgB;EAAgB;CAAS,CAAC,CACvD,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACb,CAAC,GAAc,CAAS,CAC1B;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAS,aAAU;EAAxD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD,EAAc,WAAU,oBAAqB,CAAA;GAC1C,CAAA;GAGP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;MAAsB,UAAA;KAAU,CAAA;KAC9C,kBAAC,KAAD;MAAG,WAAU;MAA4B,UAAA;KAAe,CAAA;KACvD;IACE;;IAEH,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAA,GAAA,EAAA,UACG,EAAgB,OACf,kBAAC,KAAD;KACE,MAAM,EAAgB;KACtB,WAAU;KACV,SAAS;KAER,UAAA,EAAgB;IAChB,CAAA,IAEH,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,EAEV,CAAA,CAED;;EAEJ;;AAET;AAEA,IAAa,IAAa,EAAK,CAAmB"}
+{"version":3,"file":"EmptyState2.js","names":[],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["/**\n * EmptyState Component\n *\n * Unified empty state component with consistent layout and styling.\n * Provides configurable illustration, title, description, and call-to-action buttons.\n *\n * Features:\n * - Multiple illustration types for different contexts\n * - Primary and secondary action buttons, plus a `children` slot for an\n *   onboarding state that needs more than two (issue #3903)\n * - Accessible (ARIA attributes, semantic HTML)\n * - Dark/light theme support via design tokens\n * - Fade-in animation with reduced motion support\n * - Responsive design\n * - Memoized for optimal performance\n */\n\nimport { memo, useCallback, useMemo, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport \"./EmptyState.css\";\n\nexport interface EmptyStateAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface EmptyStateSecondaryAction {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface EmptyStateProps {\n  /**\n   * The drawing shown above the text.\n   *\n   * This used to be one of ten names: chat, models, creations, benchmark,\n   * logs, statistics, schedule and so on, each resolving to an SVG shipped\n   * inside this package. Those names are one product's information\n   * architecture, and no other consumer has a \"creations\" screen to draw for.\n   * A consumer passes its own artwork and keeps its own vocabulary.\n   */\n  illustration?: ReactNode;\n  /** Main heading */\n  title: string;\n  /** Descriptive text */\n  description: string;\n  /** Primary action button */\n  primaryAction?: EmptyStateAction;\n  /** Secondary action (link or button) */\n  secondaryAction?: EmptyStateSecondaryAction;\n  /**\n   * Extra content rendered under the description, inside the same text column.\n   *\n   * The two action props cover the common one-or-two-button case. An\n   * onboarding state that has to offer more than that (e.g. the Data Hub's\n   * three ingest paths, issue #3903) renders them here instead of growing a\n   * page-local copy of this component.\n   */\n  children?: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show illustration (default: true) */\n  showIllustration?: boolean;\n}\n\n/**\n * EmptyState Component\n *\n * Displays an empty state with illustration, text, and optional actions.\n * Memoized to prevent unnecessary re-renders.\n */\nfunction EmptyStateComponent({\n  illustration,\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  children,\n  className = \"\",\n  showIllustration = true,\n}: EmptyStateProps) {\n  // Use stable callback references by extracting onClick functions\n  const primaryOnClick = primaryAction?.onClick;\n  const secondaryOnClick = secondaryAction?.onClick;\n\n  const handlePrimaryAction = useCallback(() => {\n    primaryOnClick?.();\n  }, [primaryOnClick]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryOnClick?.();\n  }, [secondaryOnClick]);\n\n  // Memoize class name computation\n  const containerClass = useMemo(\n    () => [\"empty-state\", className].filter(Boolean).join(\" \"),\n    [className],\n  );\n\n  return (\n    <div className={containerClass} role=\"status\" aria-live=\"polite\">\n      {showIllustration && illustration && (\n        <div className=\"empty-state__illustration\">{illustration}</div>\n      )}\n\n      <div className=\"empty-state__content\">\n        <h3 className=\"empty-state__title\">{title}</h3>\n        <p className=\"empty-state__description\">{description}</p>\n        {children}\n      </div>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"empty-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"empty-state__action-btn empty-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <>\n              {secondaryAction.href ? (\n                <a\n                  href={secondaryAction.href}\n                  className=\"empty-state__action-link\"\n                  onClick={handleSecondaryAction}\n                >\n                  {secondaryAction.label}\n                </a>\n              ) : (\n                <Button\n                  variant=\"ghost\"\n                  onClick={handleSecondaryAction}\n                  className=\"empty-state__action-btn empty-state__action-btn--secondary\"\n                >\n                  {secondaryAction.label}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const EmptyState = memo(EmptyStateComponent);\n"],"mappings":";;;;;AAwEA,SAAS,EAAoB,EAC3B,iBACA,UACA,gBACA,kBACA,oBACA,aACA,eAAY,IACZ,sBAAmB,MACD;CAElB,IAAM,IAAiB,GAAe,SAChC,IAAmB,GAAiB,SAEpC,IAAsB,QAAkB;EAC5C,IAAiB;CACnB,GAAG,CAAC,CAAc,CAAC,GAEb,IAAwB,QAAkB;EAC9C,IAAmB;CACrB,GAAG,CAAC,CAAgB,CAAC,GAGf,IAAiB,QACf,CAAC,eAAe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GACzD,CAAC,CAAS,CACZ;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAS,aAAU;EAAxD,UAAA;GACG,KAAoB,KACnB,kBAAC,OAAD;IAAK,WAAU;IAA6B,UAAA;GAAkB,CAAA;GAGhE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;MAAsB,UAAA;KAAU,CAAA;KAC9C,kBAAC,KAAD;MAAG,WAAU;MAA4B,UAAA;KAAe,CAAA;KACvD;IACE;;IAEH,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAA,GAAA,EAAA,UACG,EAAgB,OACf,kBAAC,KAAD;KACE,MAAM,EAAgB;KACtB,WAAU;KACV,SAAS;KAER,UAAA,EAAgB;IAChB,CAAA,IAEH,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,EAEV,CAAA,CAED;;EAEJ;;AAET;AAEA,IAAa,IAAa,EAAK,CAAmB"}

package/dist/components/EmptyState/index.d.ts

@@ -1,16 +1,10 @@
 /**
  * EmptyState Component - Barrel Export
- */
-export { EmptyState } from './EmptyState';
-export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, IllustrationType, } from './EmptyState';
-/**
- * The illustrations are also exported on their own.
  *
- * They shipped inside the package from the first release but no barrel named
- * them, so a consumer that composes its own empty state, which is the case
- * `EmptyState` cannot cover, had no way to reach one. Same shape as the
- * stylesheets in 0.1.0-alpha.1: present in the tarball, addressable by
- * nothing.
+ * The ten illustrations that used to ship here were one product's information
+ * architecture: chat, models, creations, benchmark, logs, statistics,
+ * schedule. No other consumer has a "creations" screen to draw for. A consumer
+ * passes its own artwork through `illustration` and keeps its own vocabulary.
  */
-export { ChatIllustration, ModelsIllustration, CreationsIllustration, BenchmarkIllustration, LogsIllustration, StatisticsIllustration, ErrorIllustration, TextIllustration, ScheduleIllustration, GenericIllustration, } from './illustrations';
-export type { IllustrationProps } from './illustrations';
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, } from './EmptyState';

package/dist/components/EmptyState/index.js

@@ -1,3 +1,2 @@
-import { BenchmarkIllustration as e, ChatIllustration as t, CreationsIllustration as n, ErrorIllustration as r, GenericIllustration as i, LogsIllustration as a, ModelsIllustration as o, ScheduleIllustration as s, StatisticsIllustration as c, TextIllustration as l } from "./illustrations.js";
-import { EmptyState as u } from "./EmptyState2.js";
-export { e as BenchmarkIllustration, t as ChatIllustration, n as CreationsIllustration, u as EmptyState, r as ErrorIllustration, i as GenericIllustration, a as LogsIllustration, o as ModelsIllustration, s as ScheduleIllustration, c as StatisticsIllustration, l as TextIllustration };
+import { EmptyState as e } from "./EmptyState2.js";
+export { e as EmptyState };

package/dist/components/ErrorState/ErrorState.d.ts

@@ -1,11 +1,24 @@
-export type ErrorType = "network" | "configuration" | "model" | "permission" | "generic";
+import { ReactNode } from 'react';
+/**
+ * How the error reads, not what it is about.
+ *
+ * This prop used to be a union of five names: network, configuration, model,
+ * permission, generic. Two of those, and "model" in particular, are one
+ * product's categories rather than anything a shared component can reason
+ * about, and all five resolved to three colours anyway: network and permission
+ * were the same amber, model and generic the same red. A consumer decides
+ * which of its own error categories reads as which tone.
+ */
+export type ErrorTone = "danger" | "warning" | "accent";
 export interface ErrorAction {
     label: string;
     onClick: () => void;
 }
 export interface ErrorStateProps {
-    /** Error type determines icon and default styling */
-    type?: ErrorType;
+    /** How the error reads. Defaults to `danger`. */
+    tone?: ErrorTone;
+    /** Replaces the default alert icon. */
+    icon?: ReactNode;
     /** Error title - main heading */
     title: string;
     /** Detailed error message */
@@ -22,4 +35,4 @@ export interface ErrorStateProps {
 /**
  * ErrorState Component
  */
-export declare function ErrorState({ type, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;
+export declare function ErrorState({ tone, icon, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;

package/dist/components/ErrorState/ErrorState2.js

@@ -4,56 +4,53 @@ import { AlertCircleIcon as t } from "../../icons/AlertCircleIcon.js";
 import { useCallback as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/ErrorState/ErrorState.tsx
-function a(e) {
-	return /* @__PURE__ */ r(t, { size: 48 });
-}
-function o({ type: t = "generic", title: o, message: s, primaryAction: c, secondaryAction: l, className: u = "", showIcon: d = !0 }) {
-	let f = n(() => {
-		c?.onClick();
-	}, [c]), p = n(() => {
+function a({ tone: a = "danger", icon: o, title: s, message: c, primaryAction: l, secondaryAction: u, className: d = "", showIcon: f = !0 }) {
+	let p = n(() => {
 		l?.onClick();
-	}, [l]), m = [
+	}, [l]), m = n(() => {
+		u?.onClick();
+	}, [u]), h = [
 		"error-state",
-		`error-state--${t}`,
-		u
+		`error-state--${a}`,
+		d
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ i("div", {
-		className: m,
+		className: h,
 		role: "alert",
 		"aria-live": "polite",
 		children: [
-			d && /* @__PURE__ */ r("div", {
+			f && /* @__PURE__ */ r("div", {
 				className: "error-state__icon",
 				"aria-hidden": "true",
-				children: a(t)
+				children: o ?? /* @__PURE__ */ r(t, { size: 48 })
 			}),
 			/* @__PURE__ */ r("h2", {
 				className: "error-state__title",
-				children: o
+				children: s
 			}),
 			/* @__PURE__ */ r("p", {
 				className: "error-state__message",
-				children: s
+				children: c
 			}),
-			(c || l) && /* @__PURE__ */ i("div", {
+			(l || u) && /* @__PURE__ */ i("div", {
 				className: "error-state__actions",
-				children: [c && /* @__PURE__ */ r(e, {
+				children: [l && /* @__PURE__ */ r(e, {
 					variant: "primary",
-					onClick: f,
+					onClick: p,
 					className: "error-state__action-btn error-state__action-btn--primary",
-					children: c.label
-				}), l && /* @__PURE__ */ r(e, {
+					children: l.label
+				}), u && /* @__PURE__ */ r(e, {
 					variant: "secondary",
-					onClick: p,
+					onClick: m,
 					className: "error-state__action-btn error-state__action-btn--secondary",
-					children: l.label
+					children: u.label
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { o as ErrorState };
+export { a as ErrorState };
 
 //# sourceMappingURL=ErrorState2.js.map
 import "../../assets/components/ErrorState/ErrorState.css";

package/dist/components/ErrorState/ErrorState2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState Component\n *\n * Unified error state component with recovery actions.\n * Provides consistent error presentation across all pages with actionable buttons.\n *\n * Features:\n * - Error type variants (network, configuration, model, permission, generic)\n * - Primary and secondary action buttons\n * - Accessible (ARIA attributes, focus management)\n * - Dark/light theme support\n */\n\nimport { useCallback } from \"react\";\nimport { AlertCircleIcon } from \"../../icons/AlertCircleIcon\";\nimport { Button } from \"../Button\";\nimport \"./ErrorState.css\";\n\nexport type ErrorType =\n  \"network\" | \"configuration\" | \"model\" | \"permission\" | \"generic\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** Error type determines icon and default styling */\n  type?: ErrorType;\n  /** Error title - main heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g., Retry, Go to Settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g., View Logs, Report Issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show error icon */\n  showIcon?: boolean;\n}\n\n/**\n * Get icon for error type\n */\nfunction getErrorIcon(_type: ErrorType): React.ReactNode {\n  // All error types use the same AlertCircleIcon for now\n  // Can be extended with different icons per type in the future\n  return <AlertCircleIcon size={48} />;\n}\n\n/**\n * ErrorState Component\n */\nexport function ErrorState({\n  type = \"generic\",\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const handlePrimaryAction = useCallback(() => {\n    primaryAction?.onClick();\n  }, [primaryAction]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryAction?.onClick();\n  }, [secondaryAction]);\n\n  const containerClass = [\"error-state\", `error-state--${type}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"error-state__icon\" aria-hidden=\"true\">\n          {getErrorIcon(type)}\n        </div>\n      )}\n\n      <h2 className=\"error-state__title\">{title}</h2>\n\n      <p className=\"error-state__message\">{message}</p>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"error-state__action-btn error-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              onClick={handleSecondaryAction}\n              className=\"error-state__action-btn error-state__action-btn--secondary\"\n            >\n              {secondaryAction.label}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA8CA,SAAS,EAAa,GAAmC;CAGvD,OAAO,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;AACrC;AAKA,SAAgB,EAAW,EACzB,UAAO,WACP,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAsB,QAAkB;EAC5C,GAAe,QAAQ;CACzB,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAwB,QAAkB;EAC9C,GAAiB,QAAQ;CAC3B,GAAG,CAAC,CAAe,CAAC,GAEd,IAAiB;EAAC;EAAe,gBAAgB;EAAQ;CAAS,CAAC,CACtE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAoB,eAAY;IAC5C,UAAA,EAAa,CAAI;GACf,CAAA;GAGP,kBAAC,MAAD;IAAI,WAAU;IAAsB,UAAA;GAAU,CAAA;GAE9C,kBAAC,KAAD;IAAG,WAAU;IAAwB,UAAA;GAAW,CAAA;IAE9C,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,CAEP;;EAEJ;;AAET"}
+{"version":3,"file":"ErrorState2.js","names":[],"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["/**\n * ErrorState Component\n *\n * Unified error state component with recovery actions.\n * Provides consistent error presentation across all pages with actionable buttons.\n *\n * Features:\n * - Three visual tones\n * - Primary and secondary action buttons\n * - Accessible (ARIA attributes, focus management)\n * - Dark/light theme support\n */\n\nimport type { ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport { AlertCircleIcon } from \"../../icons/AlertCircleIcon\";\nimport { Button } from \"../Button\";\nimport \"./ErrorState.css\";\n\n/**\n * How the error reads, not what it is about.\n *\n * This prop used to be a union of five names: network, configuration, model,\n * permission, generic. Two of those, and \"model\" in particular, are one\n * product's categories rather than anything a shared component can reason\n * about, and all five resolved to three colours anyway: network and permission\n * were the same amber, model and generic the same red. A consumer decides\n * which of its own error categories reads as which tone.\n */\nexport type ErrorTone = \"danger\" | \"warning\" | \"accent\";\n\nexport interface ErrorAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ErrorStateProps {\n  /** How the error reads. Defaults to `danger`. */\n  tone?: ErrorTone;\n  /** Replaces the default alert icon. */\n  icon?: ReactNode;\n  /** Error title - main heading */\n  title: string;\n  /** Detailed error message */\n  message: string;\n  /** Primary action button (e.g., Retry, Go to Settings) */\n  primaryAction?: ErrorAction;\n  /** Secondary action button (e.g., View Logs, Report Issue) */\n  secondaryAction?: ErrorAction;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether to show error icon */\n  showIcon?: boolean;\n}\n\n/**\n * ErrorState Component\n */\nexport function ErrorState({\n  tone = \"danger\",\n  icon,\n  title,\n  message,\n  primaryAction,\n  secondaryAction,\n  className = \"\",\n  showIcon = true,\n}: ErrorStateProps) {\n  const handlePrimaryAction = useCallback(() => {\n    primaryAction?.onClick();\n  }, [primaryAction]);\n\n  const handleSecondaryAction = useCallback(() => {\n    secondaryAction?.onClick();\n  }, [secondaryAction]);\n\n  const containerClass = [\"error-state\", `error-state--${tone}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClass} role=\"alert\" aria-live=\"polite\">\n      {showIcon && (\n        <div className=\"error-state__icon\" aria-hidden=\"true\">\n          {icon ?? <AlertCircleIcon size={48} />}\n        </div>\n      )}\n\n      <h2 className=\"error-state__title\">{title}</h2>\n\n      <p className=\"error-state__message\">{message}</p>\n\n      {(primaryAction || secondaryAction) && (\n        <div className=\"error-state__actions\">\n          {primaryAction && (\n            <Button\n              variant=\"primary\"\n              onClick={handlePrimaryAction}\n              className=\"error-state__action-btn error-state__action-btn--primary\"\n            >\n              {primaryAction.label}\n            </Button>\n          )}\n\n          {secondaryAction && (\n            <Button\n              variant=\"secondary\"\n              onClick={handleSecondaryAction}\n              className=\"error-state__action-btn error-state__action-btn--secondary\"\n            >\n              {secondaryAction.label}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA0DA,SAAgB,EAAW,EACzB,UAAO,UACP,SACA,UACA,YACA,kBACA,oBACA,eAAY,IACZ,cAAW,MACO;CAClB,IAAM,IAAsB,QAAkB;EAC5C,GAAe,QAAQ;CACzB,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAwB,QAAkB;EAC9C,GAAiB,QAAQ;CAC3B,GAAG,CAAC,CAAe,CAAC,GAEd,IAAiB;EAAC;EAAe,gBAAgB;EAAQ;CAAS,CAAC,CACtE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAQ,aAAU;EAAvD,UAAA;GACG,KACC,kBAAC,OAAD;IAAK,WAAU;IAAoB,eAAY;IAC5C,UAAA,KAAQ,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;GAClC,CAAA;GAGP,kBAAC,MAAD;IAAI,WAAU;IAAsB,UAAA;GAAU,CAAA;GAE9C,kBAAC,KAAD;IAAG,WAAU;IAAwB,UAAA;GAAW,CAAA;IAE9C,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,CAEP;;EAEJ;;AAET"}

package/dist/components/ErrorState/index.d.ts

@@ -2,4 +2,4 @@
  * ErrorState Component Export
  */
 export { ErrorState } from './ErrorState';
-export type { ErrorStateProps, ErrorType, ErrorAction } from './ErrorState';
+export type { ErrorStateProps, ErrorTone, ErrorAction } from './ErrorState';

package/dist/components/Tabs/Tabs.d.ts

@@ -1,26 +1,18 @@
 import { ReactNode } from 'react';
-import { TabTagType, TabTagLabels } from './tabTags';
-export type { TabTagType, TabTagLabels } from './tabTags';
-export { TAG_CONFIG } from './tabTags';
 export interface TabItem {
     id: string;
     label: string;
     content: ReactNode;
     /**
-     * Show a "Required" badge next to the tab label.
-     * @deprecated Use `tag="required"` instead. Kept for backward compatibility.
-     */
-    required?: boolean;
-    /**
-     * Guide tag displayed after the tab label as a small badge.
-     * When set, takes precedence over the `required` boolean.
-     */
-    tag?: TabTagType;
-    /**
-     * Optional extra trailing node rendered next to the tab label (e.g. a
-     * count badge). Distinct from `tag` (which uses a fixed preset). Use this
-     * when migrating segmented controls that rendered their own inline count
-     * pill alongside the label.
+     * Trailing node rendered next to the tab label: a count pill, a status
+     * badge, whatever the consumer's vocabulary calls for.
+     *
+     * This used to sit beside a `tag` prop that took one of four fixed names,
+     * required / recommended / beta / experimental, and rendered a Badge for
+     * it. Those are one product's guide vocabulary, and the arrangement had
+     * already split across the boundary: the badge variant lived here while the
+     * label text had to be passed in from the consumer's locale bundle. A
+     * consumer that wants that badge renders it here, and owns both halves.
      */
     labelExtra?: ReactNode;
     /**
@@ -98,10 +90,5 @@ export interface TabsProps {
     scrollLeftLabel?: string;
     /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
     scrollRightLabel?: string;
-    /**
-     * English defaults for every guide-tag badge label (required / recommended
-     * / beta / experimental). Override individual entries to translate them.
-     */
-    tagLabels?: TabTagLabels;
 }
-export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, tagLabels, }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, }: TabsProps): import("react").JSX.Element;