@plumile/ui 0.1.132 → 0.1.140

package/README.md

@@ -60,22 +60,83 @@ flat mental model.
 ### Primitives and forms
 
 - `Button`, `LinkButton`, `Input`, `Textarea`, `Checkbox`
-- `Label`, `ErrorMessage`, `Form`, `FormField`, `FormGroup`
+- `Label`, `Form`, `FormField`, `FormGroup`
+- `ErrorMessage` is the field-level error text primitive. Use it for messages
+  tied to a single control through `aria-describedby`.
+- `FormError` is the canonical form-level error block for submit failures and
+  validation summaries inside form surfaces.
+- `InlineBanner` is the canonical general notice/banner primitive for
+  non-field feedback. It supports info, success, warning, and danger tones,
+  titles, descriptions, actions, dismiss controls, and explicit live-region
+  overrides.
+- `EmptyState` is the canonical empty-state component. Use
+  `variant="framed"` for card-backed surfaces, `variant="plain"` for inline
+  backoffice-style surfaces, `density="compact"` for dense lists, and `tone`
+  for neutral, muted, info, success, warning, or danger emphasis.
 - `ToastProvider`, `ToastViewport`
 
 ### Layouts and shells
 
-- `AppShell`, `PageShell`, `SidebarPageLayout`, `SettingsLayout`
-- `ContentLayout`, `SplitViewLayout`, `PanelShell`, `ToolbarRow`
+- `PageShell`, `AdminShellLayout`, `SidebarNavigation`
+- `Surface` is the canonical structured surface primitive for titled content,
+  optional descriptions, actions, body content, and footers. It supports
+  `div`, `section`, and `article` roots plus visual variants for brand,
+  neutral, muted, and plain surfaces.
+- `SurfaceSection` wraps `Surface` for accessible titled sections and wires
+  `aria-labelledby` automatically when a title is present.
+- `ContentLayout`, `ResizableSplitView`, `PanelShell`
+- `ResizableSplitView` is the canonical split-view primitive for optional,
+  resizable side panels. It supports controlled and persisted widths,
+  pointer and keyboard resizing, stacked layouts below a breakpoint, and
+  accessible separator semantics.
+- `Toolbar`, `ToolbarGroup`, `ToolbarSpacer`, `ToolbarSeparator`
+- `SettingsLayout` for settings-oriented content with local navigation
+- `Card`, `PanelShell`, `ActionPanel`, and `BackofficeFormSection` remain
+  compatible wrappers or specialized compositions on top of the canonical
+  surface primitives.
 
 ### Data-heavy and dashboard components
 
-- `DataTable`, `VirtualizedConnectionTable`
-- `MetricCard`, `MetricTileGroup`, `StatusSummaryPanel`
+- `DataTable` is the canonical high-level table for static and paginated data.
+- `DataTableRoot`, `DataTableHeader`, `DataTableBody`, `DataTableRow`, and
+  `DataTableEmptyRow` expose the same public rendering primitives for advanced
+  table composition without duplicating cell, header, density, breakpoint, empty
+  state, or contained-scroll behavior.
+- `VirtualizedConnectionTable` is the specialized table for virtualized
+  connection lists and infinite loading. It shares the `DataTable` primitives
+  for table rendering while keeping virtualization and scroll-trigger behavior
+  separate from the base table API.
+- `ResponsiveRecordList` adapts the same table columns between table and mobile
+  card layouts.
+- `BackofficeDataTable` composes selection, bulk actions, and toolbar behavior
+  on top of `DataTable`; virtualized backoffice lists use
+  `VirtualizedConnectionTable` directly.
+- `MetricCard` and `MetricTileGroup` are the canonical KPI primitives. They
+  support metric tones, compact density, copyable values, and configurable
+  responsive tile widths without changing their default rendering.
+- `DashboardPanel`, `DashboardMetricGroup`, `DashboardQuickActions`, and
+  `DashboardStatusList` provide the canonical visual widgets for dashboard
+  panels, linked metric groups, shortcut lists, and status summaries.
+- `StatusSummaryPanel`
 - `ActivityFeed`, `TimelineEventRow`, `InfoTile`
+- `TimelineEventRow` is the reusable dashboard timeline row primitive. It uses
+  the canonical event vocabulary (`title`, `time` or `timestamp`,
+  `description`, `meta`, `metrics`, `details`, and semantic `tone`) while
+  keeping relative timestamp rendering available through `RelativeTimeText`.
 
 ### Formatting helpers
 
+- `HighlightCode` is the general code-display primitive. It supports a badge,
+  copy action, placeholder text, highlighted HTML/React content, and a plain
+  preformatted fallback.
+- `BackofficeJsonViewer` is the canonical structured JSON viewer for
+  backoffice surfaces. It safely stringifies unknown values, exposes copy and
+  collapse/expand controls, and accepts max-height and label overrides.
+- `BackofficePayloadViewer` is the canonical backoffice payload viewer for
+  `json`, `markdown`, `text`, and `code` payloads. Use it inside detail
+  sections or tool output surfaces for empty states, summaries, collapsible
+  details, copyable text/code, markdown rendering, and JSON rendering through
+  `BackofficeJsonViewer`.
 - `MoneyAmount` renders a currency amount from `amount` and `currency`
   props with fixed two-decimal formatting.
 - `formatCurrencyAmount({ amount, currency })` provides the same formatting
@@ -83,26 +144,79 @@ flat mental model.
 
 ### Backoffice visual components
 
-- badges, spinners, tags, skeletons
-- filter bars and drawers
-- backoffice data-table wrappers and list/detail visual helpers
-- `AdminSidebar` and `SidebarNavSection`, including optional sortable sections
-  for backoffice navigation groups
+- `Badge` is the low-level inline visual marker. It supports neutral, info,
+  success, warning, danger, and accent tones plus a loading shimmer.
+- `StatusBadge` maps semantic status tones to badge tones and can show an
+  optional status dot.
+- `Tag` is the compact pill component for short labels and optional removable
+  filters. Use `title`, `onRemove`, and `removeLabel` for accessible removable
+  tags.
+- `EnvironmentBadge` and `BackofficeIdBadge` remain specialized public badge
+  compositions for environment labels and copyable IDs.
+- Detail badge/value compositions are available for backoffice entity pages:
+  `BackofficeStatusMetaBadge`, `BackofficeStatusGroup`,
+  `BackofficeDetailFlagTag`, `BackofficeDetailTaggedValue`,
+  `BackofficeReferenceValue`, and `BackofficeEnumLabel`.
+- `BackofficeKeyValueList` is the canonical definition-list renderer for
+  backoffice label/value metadata. It supports surface or plain rendering,
+  split, stack, and grid layouts, custom empty labels, and React node values.
+- spinners and skeletons
+- `BackofficeToolbar` is the canonical list/table toolbar for search, filters,
+  sorting, actions, and active chips.
+- `BackofficeListFooter` is the canonical infinite-list footer for status-only
+  and button-driven loading flows. Keep load-more status, loaded counts,
+  spinners, and manual load buttons there rather than rebuilding list footers
+  around `InfiniteScrollTrigger`.
+- `BackofficeEmptyState` is a compatibility wrapper around `EmptyState` with the
+  plain, compact backoffice defaults.
+- `BackofficePickerShell`, `BackofficePickerList`, and `BackofficePickerRow`
+  are the canonical visual primitives for searchable backoffice pickers. They
+  own the search input layout, listbox/option rendering, empty state, and row
+  truncation; application integrations should pass already-resolved picker
+  items and keep manifest, Relay, and domain behavior outside `@plumile/ui`.
+- filter drawers and confirm dialogs stay separate from picker primitives
+  because their navigation, action, and confirmation semantics differ.
+- backoffice data-table wrappers and detail visual helpers, including
+  `BackofficeDetailField` and `BackofficeDetailSection` for generic titled
+  detail sections and copyable field values, plus `BackofficeScopeStack` and
+  `BackofficeAuditMetadataPanel` for canonical scope/context and audit
+  metadata sections
+- `AuditTimeline` is the canonical visual timeline for backoffice lifecycle and
+  audit history. It renders ordered `ol`/`li` events with title, time,
+  description, actor, source, meta, metrics, details, density, custom
+  `renderEvent`, and neutral/info/success/warning/danger tones. Empty timelines
+  render `null` unless `emptyState` is supplied.
+- `DetailPageTemplate`, `DetailPageTemplateContent`, and `ListPageTemplate` are
+  the canonical backoffice page templates for detail and list screens.
+- `SidebarNavigation`, including collapsible sections, collapsed rail mode,
+  profile footer composition, and optional sortable sections for backoffice
+  navigation groups
+
+Breaking changes in this line: `BackofficeTableToolbar`, `TableToolbar`,
+`BackofficeFiltersBar`, `BackofficeLoadMore`,
+`BackofficeInfiniteListStatus`, `BackofficeVirtualizedConnectionTable`,
+`BackofficeDetailLayout`, `DetailPage`, `DetailPageContent`, `SegmentedNav`,
+and `SectionNav` were removed in favor of the canonical components above and
+`Tabs`.
 
 For the complete export list, see [`src/index.ts`](./src/index.ts).
 
 ## Quick Start
 
 ```tsx
-import { Button, ThemeProvider, ToolbarRow } from '@plumile/ui';
+import { Button, ThemeProvider, Toolbar, ToolbarGroup } from '@plumile/ui';
 
 export function ExampleScreen(): JSX.Element {
   return (
     <ThemeProvider defaultMode="light">
-      <ToolbarRow>
-        <Button>Save</Button>
-        <Button kind="secondary">Cancel</Button>
-      </ToolbarRow>
+      <Toolbar ariaLabel="Screen actions">
+        <ToolbarGroup>
+          <Button>Save</Button>
+        </ToolbarGroup>
+        <ToolbarGroup justify="end">
+          <Button variant="secondary">Cancel</Button>
+        </ToolbarGroup>
+      </Toolbar>
     </ThemeProvider>
   );
 }

package/lib/esm/admin/organisms/admin_sidebar/AdminSidebar.js

@@ -1,6 +1,6 @@
 import { cx as e } from "../../../theme/tools.js";
-import { SidebarNavSection as t } from "../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js";
-import { SidebarCollapseToggle as n } from "../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js";
+import { SidebarCollapseToggle as t } from "../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js";
+import { SidebarNavSection as n } from "../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js";
 import { container as r, footer as i, header as a, inner as o, sections as s, widthRecipe as c } from "./adminSidebar.css.js";
 import { useCallback as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
@@ -26,7 +26,7 @@ var p = ({ header: p, search: m, footer: h, sections: g, isCollapsed: _, default
 			children: [
 				/* @__PURE__ */ f("div", {
 					className: a,
-					children: [p, !w && /* @__PURE__ */ d(n, {
+					children: [p, !w && /* @__PURE__ */ d(t, {
 						isCollapsed: O,
 						onToggle: k,
 						label: b,
@@ -41,7 +41,7 @@ var p = ({ header: p, search: m, footer: h, sections: g, isCollapsed: _, default
 				/* @__PURE__ */ d("nav", {
 					className: s,
 					"aria-label": C,
-					children: g.map((e) => /* @__PURE__ */ d(t, {
+					children: g.map((e) => /* @__PURE__ */ d(n, {
 						title: e.title,
 						icon: e.icon,
 						items: e.items,

package/lib/esm/admin/organisms/admin_sidebar/adminSidebar.css.js

@@ -4,6 +4,8 @@
 /* empty css                                        */
 /* empty css                                            */
 /* empty css                                  */
+/* empty css                                          */
+/* empty css                                         */
 /* empty css                            */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/organisms/admin_sidebar/adminSidebar.css.ts

package/lib/esm/admin/templates/admin_shell_layout/AdminShellLayout.js

@@ -1,5 +1,5 @@
-import { AppShell as e } from "../../../components/layout/AppShell.js";
-import { AdminSidebar as t } from "../../organisms/admin_sidebar/AdminSidebar.js";
+import { PageShell as e } from "../../../components/layout/PageShell.js";
+import { SidebarNavigation as t } from "../../../components/navigation/sidebar/SidebarNavigation.js";
 import { AdminTopbar as n } from "../../organisms/admin_topbar/AdminTopbar.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/admin/templates/admin_shell_layout/AdminShellLayout.tsx

package/lib/esm/admin/templates/admin_shell_layout/AdminShellLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminShellLayout.js","names":[],"sources":["../../../../../src/admin/templates/admin_shell_layout/AdminShellLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { AppShell } from '../../../components/layout/AppShell.js';\nimport {\n  AdminSidebar,\n  type AdminSidebarProps,\n} from '../../organisms/admin_sidebar/AdminSidebar.js';\nimport {\n  AdminTopbar,\n  type AdminTopbarProps,\n} from '../../organisms/admin_topbar/AdminTopbar.js';\nimport type {\n  PageShellActions,\n  PageShellContentScrollMode,\n  PageShellTab,\n} from '../../../components/layout/PageShell.js';\n\nexport type AdminShellLayoutProps = {\n  children: ReactNode;\n  sidebar: AdminSidebarProps;\n  mobileSidebar?: AdminSidebarProps;\n  topbar?: AdminTopbarProps;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n  contentScrollMode?: PageShellContentScrollMode;\n};\n\nexport const AdminShellLayout = ({\n  children,\n  sidebar,\n  mobileSidebar,\n  topbar,\n  actions,\n  tabs,\n  contentScrollMode,\n}: AdminShellLayoutProps): JSX.Element => {\n  const isDesktopSidebarOpen = sidebar.isCollapsed !== true;\n  let sidebarNode: JSX.Element | null = null;\n  if (isDesktopSidebarOpen) {\n    sidebarNode = <AdminSidebar {...sidebar} isCollapsed={false} />;\n  }\n  let mobileSidebarNode: JSX.Element | undefined;\n  if (mobileSidebar != null) {\n    mobileSidebarNode = <AdminSidebar {...mobileSidebar} />;\n  }\n  let topbarNode: JSX.Element | null = null;\n  if (topbar != null) {\n    topbarNode = <AdminTopbar {...topbar} />;\n  }\n\n  let openDesktopSidebarLabel: string | undefined;\n  if (typeof sidebar.expandToggleLabel === 'string') {\n    openDesktopSidebarLabel = sidebar.expandToggleLabel;\n  }\n\n  return (\n    <AppShell\n      sidebar={sidebarNode}\n      mobileSidebar={mobileSidebarNode}\n      desktopSidebarOpen={isDesktopSidebarOpen}\n      onOpenDesktopSidebar={() => {\n        sidebar.onCollapsedChange?.(false);\n      }}\n      openDesktopSidebarLabel={openDesktopSidebarLabel}\n      breadcrumbSlot={topbarNode}\n      actions={actions}\n      tabs={tabs}\n      contentScrollMode={contentScrollMode}\n    >\n      {children}\n    </AppShell>\n  );\n};\n\nexport default AdminShellLayout;\n"],"mappings":";;;;;AA2BA,IAAa,KAAoB,EAC/B,aACA,YACA,kBACA,WACA,YACA,SACA,2BACwC;CACxC,IAAM,IAAuB,EAAQ,gBAAgB,IACjD,IAAkC;CACtC,AAAI,MACF,IAAc,kBAAC,GAAD;EAAc,GAAI;EAAS,aAAa;EAAS,CAAA;CAEjE,IAAI;CACJ,AAAI,KAAiB,SACnB,IAAoB,kBAAC,GAAD,EAAc,GAAI,GAAiB,CAAA;CAEzD,IAAI,IAAiC;CACrC,AAAI,KAAU,SACZ,IAAa,kBAAC,GAAD,EAAa,GAAI,GAAU,CAAA;CAG1C,IAAI;CAKJ,OAJI,OAAO,EAAQ,qBAAsB,aACvC,IAA0B,EAAQ,oBAIlC,kBAAC,GAAD;EACE,SAAS;EACT,eAAe;EACf,oBAAoB;EACpB,4BAA4B;GAC1B,EAAQ,oBAAoB,GAAM;;EAEX;EACzB,gBAAgB;EACP;EACH;EACa;EAElB;EACQ,CAAA"}
+{"version":3,"file":"AdminShellLayout.js","names":[],"sources":["../../../../../src/admin/templates/admin_shell_layout/AdminShellLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  SidebarNavigation,\n  type SidebarNavigationProps,\n} from '../../../components/navigation/sidebar/SidebarNavigation.js';\nimport {\n  AdminTopbar,\n  type AdminTopbarProps,\n} from '../../organisms/admin_topbar/AdminTopbar.js';\nimport {\n  PageShell,\n  type PageShellActions,\n  type PageShellContentScrollMode,\n  type PageShellTab,\n} from '../../../components/layout/PageShell.js';\n\nexport type AdminShellLayoutProps = {\n  children: ReactNode;\n  sidebar: SidebarNavigationProps;\n  mobileSidebar?: SidebarNavigationProps;\n  topbar?: AdminTopbarProps;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n  contentScrollMode?: PageShellContentScrollMode;\n};\n\nexport const AdminShellLayout = ({\n  children,\n  sidebar,\n  mobileSidebar,\n  topbar,\n  actions,\n  tabs,\n  contentScrollMode,\n}: AdminShellLayoutProps): JSX.Element => {\n  const isDesktopSidebarOpen = sidebar.isCollapsed !== true;\n  let sidebarNode: JSX.Element | null = null;\n  if (isDesktopSidebarOpen) {\n    sidebarNode = <SidebarNavigation {...sidebar} isCollapsed={false} />;\n  }\n  let mobileSidebarNode: JSX.Element | undefined;\n  if (mobileSidebar != null) {\n    mobileSidebarNode = <SidebarNavigation {...mobileSidebar} />;\n  }\n  let topbarNode: JSX.Element | null = null;\n  if (topbar != null) {\n    topbarNode = <AdminTopbar {...topbar} />;\n  }\n\n  let openDesktopSidebarLabel: string | undefined;\n  if (typeof sidebar.expandToggleLabel === 'string') {\n    openDesktopSidebarLabel = sidebar.expandToggleLabel;\n  }\n\n  return (\n    <PageShell\n      sidebar={sidebarNode}\n      mobileSidebar={mobileSidebarNode}\n      desktopSidebarOpen={isDesktopSidebarOpen}\n      onOpenDesktopSidebar={() => {\n        sidebar.onCollapsedChange?.(false);\n      }}\n      openDesktopSidebarLabel={openDesktopSidebarLabel}\n      breadcrumbSlot={topbarNode}\n      actions={actions}\n      tabs={tabs}\n      contentScrollMode={contentScrollMode}\n    >\n      {children}\n    </PageShell>\n  );\n};\n\nexport default AdminShellLayout;\n"],"mappings":";;;;;AA2BA,IAAa,KAAoB,EAC/B,aACA,YACA,kBACA,WACA,YACA,SACA,2BACwC;CACxC,IAAM,IAAuB,EAAQ,gBAAgB,IACjD,IAAkC;CACtC,AAAI,MACF,IAAc,kBAAC,GAAD;EAAmB,GAAI;EAAS,aAAa;EAAS,CAAA;CAEtE,IAAI;CACJ,AAAI,KAAiB,SACnB,IAAoB,kBAAC,GAAD,EAAmB,GAAI,GAAiB,CAAA;CAE9D,IAAI,IAAiC;CACrC,AAAI,KAAU,SACZ,IAAa,kBAAC,GAAD,EAAa,GAAI,GAAU,CAAA;CAG1C,IAAI;CAKJ,OAJI,OAAO,EAAQ,qBAAsB,aACvC,IAA0B,EAAQ,oBAIlC,kBAAC,GAAD;EACE,SAAS;EACT,eAAe;EACf,oBAAoB;EACpB,4BAA4B;GAC1B,EAAQ,oBAAoB,GAAM;;EAEX;EACzB,gBAAgB;EACP;EACH;EACa;EAElB;EACS,CAAA"}

package/lib/esm/admin/theme/adminSurface.css.js

@@ -6,8 +6,6 @@
 /* empty css                               */
 /* empty css                            */
 /* empty css                            */
-/* empty css                                       */
-/* empty css                                      */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/theme/adminSurface.css.ts
 var t = e({

package/lib/esm/atomic/atoms/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../../../../../src/atomic/atoms/badge/Badge.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { badge } from './badge.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype Props = {\n  children: ReactNode;\n  tone?: BadgeTone;\n  className?: string;\n  loading?: boolean;\n};\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\nexport const Badge = ({\n  children,\n  tone,\n  className,\n  loading = false,\n}: Props): JSX.Element => {\n  let loadingVariant: 'on' | 'off' = 'off';\n  if (loading) {\n    loadingVariant = 'on';\n  }\n\n  return (\n    <span className={cx(badge({ tone, loading: loadingVariant }), className)}>\n      {children}\n    </span>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;AAoBA,IAAa,KAAS,EACpB,aACA,SACA,cACA,aAAU,SACc;CACxB,IAAI,IAA+B;CAKnC,OAJI,MACF,IAAiB,OAIjB,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAM;GAAE;GAAM,SAAS;GAAgB,CAAC,EAAE,EAAU;EACrE;EACI,CAAA"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../../../src/atomic/atoms/badge/Badge.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { badge } from './badge.css.js';\nimport { cx } from '../../../theme/tools.js';\n\nexport type BadgeProps = {\n  children: ReactNode;\n  tone?: BadgeTone;\n  className?: string;\n  loading?: boolean;\n};\n\nexport type BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\nexport const Badge = ({\n  children,\n  tone,\n  className,\n  loading = false,\n}: BadgeProps): JSX.Element => {\n  let loadingVariant: 'on' | 'off' = 'off';\n  if (loading) {\n    loadingVariant = 'on';\n  }\n\n  return (\n    <span className={cx(badge({ tone, loading: loadingVariant }), className)}>\n      {children}\n    </span>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;AAoBA,IAAa,KAAS,EACpB,aACA,SACA,cACA,aAAU,SACmB;CAC7B,IAAI,IAA+B;CAKnC,OAJI,MACF,IAAiB,OAIjB,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAM;GAAE;GAAM,SAAS;GAAgB,CAAC,EAAE,EAAU;EACrE;EACI,CAAA"}

package/lib/esm/atomic/atoms/error_message/ErrorMessage.js

@@ -1,14 +1,15 @@
-import { errorMessage as e } from "./errorMessage.css.js";
+import { cx as e } from "../../../theme/tools.js";
+import { errorMessage as t } from "./errorMessage.css.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/atomic/atoms/error_message/ErrorMessage.tsx
-var n = ({ children: n, id: r, ...i }) => n == null ? null : /* @__PURE__ */ t("div", {
-	id: r,
-	className: e,
-	...i,
-	children: n
+var r = ({ children: r, className: i, id: a, ...o }) => r == null ? null : /* @__PURE__ */ n("div", {
+	id: a,
+	className: e(t, i),
+	...o,
+	children: r
 });
 //#endregion
-export { n as ErrorMessage };
+export { r as ErrorMessage };
 
 //# sourceMappingURL=ErrorMessage.js.map

package/lib/esm/atomic/atoms/error_message/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","names":[],"sources":["../../../../../src/atomic/atoms/error_message/ErrorMessage.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\nimport { errorMessage } from './errorMessage.css.js';\n\ntype Props = {\n  children: React.ReactNode;\n  className?: string;\n  id?: string; // Added id prop\n};\n\nexport const ErrorMessage = ({\n  children,\n  id,\n  ...rest\n}: Props): JSX.Element | null => {\n  if (children == null) {\n    return null;\n  }\n\n  return (\n    <div id={id} className={errorMessage} {...rest}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAa,KAAgB,EAC3B,aACA,OACA,GAAG,QAEC,KAAY,OACP,OAIP,kBAAC,OAAD;CAAS;CAAI,WAAW;CAAc,GAAI;CACvC;CACG,CAAA"}
+{"version":3,"file":"ErrorMessage.js","names":[],"sources":["../../../../../src/atomic/atoms/error_message/ErrorMessage.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\nimport { cx } from '../../../theme/tools.js';\nimport { errorMessage } from './errorMessage.css.js';\n\ntype Props = {\n  children: React.ReactNode;\n  className?: string;\n  id?: string;\n};\n\nexport const ErrorMessage = ({\n  children,\n  className,\n  id,\n  ...rest\n}: Props): JSX.Element | null => {\n  if (children == null) {\n    return null;\n  }\n\n  return (\n    <div id={id} className={cx(errorMessage, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAUA,IAAa,KAAgB,EAC3B,aACA,cACA,OACA,GAAG,QAEC,KAAY,OACP,OAIP,kBAAC,OAAD;CAAS;CAAI,WAAW,EAAG,GAAc,EAAU;CAAE,GAAI;CACtD;CACG,CAAA"}

package/lib/esm/atomic/molecules/card/Card.js

@@ -1,25 +1,23 @@
-import { cx as e } from "../../../theme/tools.js";
-import { card as t, content as n, header as r, title as i } from "./Card.css.js";
-import { useMemo as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Surface as e } from "../../../components/layout/Surface.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/atomic/molecules/card/Card.tsx
-var c = (c) => {
-	let { title: l, children: u, headerActions: d, className: f, contentClassName: p } = c, m = a(() => l == null ? null : /* @__PURE__ */ s("div", {
-		className: r,
-		children: [/* @__PURE__ */ o("span", {
-			className: i,
-			children: l
-		}), d]
-	}), [d, l]);
-	return /* @__PURE__ */ s("div", {
-		className: e(t, f),
-		children: [m, /* @__PURE__ */ o("div", {
-			className: e(n, p),
-			children: u
-		})]
+var n = (n) => {
+	let { title: r, children: i, headerActions: a, className: o, contentClassName: s } = n;
+	return /* @__PURE__ */ t(e, {
+		actions: a,
+		border: "none",
+		className: o,
+		contentClassName: s,
+		density: "spacious",
+		radius: "xl",
+		title: r,
+		titleAs: "div",
+		variant: "brand",
+		children: i
 	});
 };
 //#endregion
-export { c as Card };
+export { n as Card };
 
 //# sourceMappingURL=Card.js.map

package/lib/esm/atomic/molecules/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":[],"sources":["../../../../../src/atomic/molecules/card/Card.tsx"],"sourcesContent":["import React, { type JSX, useMemo } from 'react';\n\nimport * as styles from './Card.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype Props = {\n  headerActions?: React.ReactNode;\n  title?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport const Card = (props: Props): JSX.Element => {\n  const { title, children, headerActions, className, contentClassName } = props;\n\n  const header = useMemo(() => {\n    if (title == null) {\n      return null;\n    }\n\n    return (\n      <div className={styles.header}>\n        <span className={styles.title}>{title}</span>\n        {headerActions}\n      </div>\n    );\n  }, [headerActions, title]);\n\n  const rootClass = cx(styles.card, className);\n  const contentClass = cx(styles.content, contentClassName);\n\n  return (\n    <div className={rootClass}>\n      {header}\n      <div className={contentClass}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAaA,IAAa,KAAQ,MAA8B;CACjD,IAAM,EAAE,OAAA,GAAO,aAAU,kBAAe,cAAW,wBAAqB,GAElE,IAAS,QACT,KAAS,OACJ,OAIP,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,QAAD;GAAM,WAAW;aAAe;GAAa,CAAA,EAC5C,EACG;KAEP,CAAC,GAAe,EAAM,CAAC;CAK1B,OACE,kBAAC,OAAD;EAAK,WAJW,EAAG,GAAa,EAIhB;YAAhB,CACG,GACD,kBAAC,OAAD;GAAK,WALY,EAAG,GAAgB,EAKpB;GAAe;GAAe,CAAA,CAC1C"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../../src/atomic/molecules/card/Card.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\n\nimport { Surface } from '../../../components/layout/Surface.js';\n\ntype Props = {\n  headerActions?: React.ReactNode;\n  title?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport const Card = (props: Props): JSX.Element => {\n  const { title, children, headerActions, className, contentClassName } = props;\n\n  return (\n    <Surface\n      actions={headerActions}\n      border=\"none\"\n      className={className}\n      contentClassName={contentClassName}\n      density=\"spacious\"\n      radius=\"xl\"\n      title={title}\n      titleAs=\"div\"\n      variant=\"brand\"\n    >\n      {children}\n    </Surface>\n  );\n};\n"],"mappings":";;;;AAYA,IAAa,KAAQ,MAA8B;CACjD,IAAM,EAAE,UAAO,aAAU,kBAAe,cAAW,wBAAqB;CAExE,OACE,kBAAC,GAAD;EACE,SAAS;EACT,QAAO;EACI;EACO;EAClB,SAAQ;EACR,QAAO;EACA;EACP,SAAQ;EACR,SAAQ;EAEP;EACO,CAAA"}

package/lib/esm/atomic/molecules/empty-state/EmptyState.css.js

@@ -1,8 +1,86 @@
 /* empty css                                      */
 /* empty css                          */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/molecules/empty-state/EmptyState.css.ts
-var e = "_1lrdacm0 txvbqb17w0 txvbqbdr8 txvbqbf6i txvbqbey txvbqbjtp txvbqbff6 txvbqb16fa", t = "_1lrdacm1 txvbqbam", n = "_1lrdacm2 txvbqbm9g txvbqba9 txvbqbfd0 txvbqb19c9", r = "_1lrdacm3 txvbqbm9g txvbqb9j txvbqb19cb txvbqbs78", i = "_1lrdacm4 txvbqbdr8 txvbqbf91 txvbqbff6 txvbqbjtp";
+var t = e({
+	defaultClassName: "_1lrdacm7 _1lrdacm0 txvbqb17w0",
+	variantClassNames: {
+		variant: {
+			framed: "_1lrdacm8",
+			plain: "_1lrdacm9 _1lrdacm1 txvbqbdr8 txvbqbf6i txvbqbjtp txvbqb19cb"
+		},
+		density: {
+			default: "_1lrdacma _1lrdacm2 txvbqbff6",
+			compact: "_1lrdacmb _1lrdacm3 txvbqbyov txvbqbzmg txvbqb10m7 txvbqbvya txvbqbffj"
+		},
+		align: {
+			center: "_1lrdacmc _1lrdacm4 txvbqbey txvbqb16fa",
+			start: "_1lrdacmd _1lrdacm5 txvbqbel txvbqb16ex"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: [[{
+		variant: "plain",
+		density: "default"
+	}, "_1lrdacm6 txvbqbypl txvbqbzn6 txvbqb10mx txvbqbvz0"]]
+}), n = e({
+	defaultClassName: "_1lrdacmj _1lrdacme txvbqb17w0 txvbqbdr8 txvbqbf6i txvbqbjtp",
+	variantClassNames: {
+		density: {
+			default: "_1lrdacmk _1lrdacmf txvbqbff6",
+			compact: "_1lrdacml _1lrdacmg txvbqbffj"
+		},
+		align: {
+			center: "_1lrdacmm _1lrdacmh txvbqbey txvbqb16fa",
+			start: "_1lrdacmn _1lrdacmi txvbqbel txvbqb16ex"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+}), r = e({
+	defaultClassName: "_1lrdacmv _1lrdacmo txvbqbdr8 txvbqbey txvbqbjtp txvbqbam",
+	variantClassNames: { tone: {
+		neutral: "_1lrdacmw _1lrdacmp txvbqb19c9",
+		muted: "_1lrdacmx _1lrdacmq txvbqb19cb",
+		info: "_1lrdacmy _1lrdacmr txvbqb19d5",
+		success: "_1lrdacmz _1lrdacms txvbqb19cx",
+		warning: "_1lrdacm10 _1lrdacmt txvbqb19d1",
+		danger: "_1lrdacm11 _1lrdacmu txvbqb19cn"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), i = e({
+	defaultClassName: "_1lrdacm15 _1lrdacm12 txvbqbm9g txvbqbfd0 txvbqb19c9",
+	variantClassNames: { density: {
+		default: "_1lrdacm16 _1lrdacm13 txvbqba9",
+		compact: "_1lrdacm17 _1lrdacm14 txvbqba9"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), a = e({
+	defaultClassName: "_1lrdacm1b _1lrdacm18 txvbqbm9g txvbqb9j txvbqb19cb",
+	variantClassNames: { density: {
+		default: "_1lrdacm1c _1lrdacm19 txvbqbs78",
+		compact: "_1lrdacm1d _1lrdacm1a txvbqbs6i"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), o = e({
+	defaultClassName: "_1lrdacm1j _1lrdacm1e txvbqbdr8 txvbqbey txvbqbf91",
+	variantClassNames: {
+		density: {
+			default: "_1lrdacm1k _1lrdacm1f txvbqbff6",
+			compact: "_1lrdacm1l _1lrdacm1g txvbqbq0i txvbqbff6"
+		},
+		align: {
+			center: "_1lrdacm1m _1lrdacm1h txvbqbjtp",
+			start: "_1lrdacm1n _1lrdacm1i txvbqbjuf"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+});
 //#endregion
-export { i as actions, e as content, r as description, t as icon, n as title };
+export { o as actions, n as content, a as description, r as icon, t as root, i as title };
 
 //# sourceMappingURL=EmptyState.css.js.map

package/lib/esm/atomic/molecules/empty-state/EmptyState.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.css.js","names":[],"sources":["../../../../../src/atomic/molecules/empty-state/EmptyState.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const content = sprinkles({\n  width: 'full',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: 2,\n  textAlign: 'center',\n});\n\nexport const icon = sprinkles({\n  fontSize: 'xl',\n});\n\nexport const title = sprinkles({\n  margin: 0,\n  fontSize: 'lg',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n  maxWidth: 'md',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  justifyContent: 'center',\n});\n"],"mappings":""}
+{"version":3,"file":"EmptyState.css.js","names":[],"sources":["../../../../../src/atomic/molecules/empty-state/EmptyState.css.ts"],"sourcesContent":["import { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const root = recipe({\n  base: sprinkles({\n    width: 'full',\n  }),\n  variants: {\n    variant: {\n      framed: {},\n      plain: sprinkles({\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        color: 'textSecondary',\n      }),\n    },\n    density: {\n      default: sprinkles({\n        gap: 2,\n      }),\n      compact: sprinkles({\n        paddingY: 10,\n        paddingX: 4,\n        gap: 3,\n      }),\n    },\n    align: {\n      center: sprinkles({\n        alignItems: 'center',\n        textAlign: 'center',\n      }),\n      start: sprinkles({\n        alignItems: 'flex-start',\n        textAlign: 'left',\n      }),\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        variant: 'plain',\n        density: 'default',\n      },\n      style: sprinkles({\n        paddingY: 12,\n        paddingX: 6,\n      }),\n    },\n  ],\n});\n\nexport const content = recipe({\n  base: sprinkles({\n    width: 'full',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  }),\n  variants: {\n    density: {\n      default: sprinkles({\n        gap: 2,\n      }),\n      compact: sprinkles({\n        gap: 3,\n      }),\n    },\n    align: {\n      center: sprinkles({\n        alignItems: 'center',\n        textAlign: 'center',\n      }),\n      start: sprinkles({\n        alignItems: 'flex-start',\n        textAlign: 'left',\n      }),\n    },\n  },\n});\n\nexport const icon = recipe({\n  base: sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: 'xl',\n  }),\n  variants: {\n    tone: {\n      neutral: sprinkles({\n        color: 'text',\n      }),\n      muted: sprinkles({\n        color: 'textSecondary',\n      }),\n      info: sprinkles({\n        color: 'info',\n      }),\n      success: sprinkles({\n        color: 'success',\n      }),\n      warning: sprinkles({\n        color: 'warning',\n      }),\n      danger: sprinkles({\n        color: 'error',\n      }),\n    },\n  },\n});\n\nexport const title = recipe({\n  base: sprinkles({\n    margin: 0,\n    fontWeight: 'semibold',\n    color: 'text',\n  }),\n  variants: {\n    density: {\n      default: sprinkles({\n        fontSize: 'lg',\n      }),\n      compact: sprinkles({\n        fontSize: 'lg',\n      }),\n    },\n  },\n});\n\nexport const description = recipe({\n  base: sprinkles({\n    margin: 0,\n    fontSize: 'sm',\n    color: 'textSecondary',\n  }),\n  variants: {\n    density: {\n      default: sprinkles({\n        maxWidth: 'md',\n      }),\n      compact: sprinkles({\n        maxWidth: 'lg',\n      }),\n    },\n  },\n});\n\nexport const actions = recipe({\n  base: sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n  }),\n  variants: {\n    density: {\n      default: sprinkles({\n        gap: 2,\n      }),\n      compact: sprinkles({\n        marginTop: 2,\n        gap: 2,\n      }),\n    },\n    align: {\n      center: sprinkles({\n        justifyContent: 'center',\n      }),\n      start: sprinkles({\n        justifyContent: 'flex-start',\n      }),\n    },\n  },\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/empty-state/EmptyState.js

@@ -1,35 +1,57 @@
-import { Card as e } from "../card/Card.js";
-import { actions as t, content as n, description as r, icon as i, title as a } from "./EmptyState.css.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cx as e } from "../../../theme/tools.js";
+import { Card as t } from "../card/Card.js";
+import { actions as n, content as r, description as i, icon as a, root as o, title as s } from "./EmptyState.css.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/atomic/molecules/empty-state/EmptyState.tsx
-var c = ({ title: c, description: l, icon: u, actions: d, className: f }) => {
-	let p = null;
-	u != null && (p = /* @__PURE__ */ o("div", {
-		className: i,
-		children: u
+var d = ({ title: d, description: f, icon: p, actions: m, className: h, variant: g = "framed", density: _ = "default", align: v = "center", tone: y = "neutral", titleAs: b = "h2" }) => {
+	let x = null;
+	p != null && (x = /* @__PURE__ */ l("div", {
+		className: a({ tone: y }),
+		children: p
 	}));
-	let m = null;
-	return d != null && (m = /* @__PURE__ */ o("div", {
-		className: t,
-		children: d
-	})), /* @__PURE__ */ s(e, {
-		className: f,
-		contentClassName: n,
-		children: [
-			p,
-			/* @__PURE__ */ o("h2", {
-				className: a,
-				children: c
-			}),
-			/* @__PURE__ */ o("p", {
-				className: r,
-				children: l
-			}),
-			m
-		]
+	let S = b, C = null;
+	f != null && (C = /* @__PURE__ */ l("div", {
+		className: i({ density: _ }),
+		children: f
+	}));
+	let w = null;
+	m != null && (w = /* @__PURE__ */ l("div", {
+		className: n({
+			density: _,
+			align: v
+		}),
+		children: m
+	}));
+	let T = /* @__PURE__ */ u(c, { children: [
+		x,
+		/* @__PURE__ */ l(S, {
+			className: s({ density: _ }),
+			children: d
+		}),
+		C,
+		w
+	] });
+	return g === "plain" ? /* @__PURE__ */ l("div", {
+		className: e(o({
+			variant: g,
+			density: _,
+			align: v
+		}), h),
+		children: T
+	}) : /* @__PURE__ */ l(t, {
+		className: e(o({
+			variant: g,
+			density: _,
+			align: v
+		}), h),
+		contentClassName: r({
+			density: _,
+			align: v
+		}),
+		children: T
 	});
 };
 //#endregion
-export { c as EmptyState, c as default };
+export { d as EmptyState, d as default };
 
 //# sourceMappingURL=EmptyState.js.map

package/lib/esm/atomic/molecules/empty-state/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../../src/atomic/molecules/empty-state/EmptyState.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Card } from '../card/Card.js';\nimport * as styles from './EmptyState.css.js';\n\ntype Props = {\n  title: string;\n  description: ReactNode;\n  icon?: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n};\n\nexport const EmptyState = ({\n  title,\n  description,\n  icon,\n  actions,\n  className,\n}: Props): JSX.Element => {\n  let iconElement: JSX.Element | null = null;\n  if (icon != null) {\n    iconElement = <div className={styles.icon}>{icon}</div>;\n  }\n\n  let actionsElement: JSX.Element | null = null;\n  if (actions != null) {\n    actionsElement = <div className={styles.actions}>{actions}</div>;\n  }\n\n  return (\n    <Card className={className} contentClassName={styles.content}>\n      {iconElement}\n      <h2 className={styles.title}>{title}</h2>\n      <p className={styles.description}>{description}</p>\n      {actionsElement}\n    </Card>\n  );\n};\n\nexport default EmptyState;\n"],"mappings":";;;;AAaA,IAAa,KAAc,EACzB,OAAA,GACA,aAAA,GACA,MAAA,GACA,SAAA,GACA,mBACwB;CACxB,IAAI,IAAkC;CACtC,AAAI,KAAQ,SACV,IAAc,kBAAC,OAAD;EAAK,WAAW;YAAc;EAAW,CAAA;CAGzD,IAAI,IAAqC;CAKzC,OAJI,KAAW,SACb,IAAiB,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,GAIhE,kBAAC,GAAD;EAAiB;EAAW,kBAAkB;YAA9C;GACG;GACD,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA;GACzC,kBAAC,KAAD;IAAG,WAAW;cAAqB;IAAgB,CAAA;GAClD;GACI"}
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../../../src/atomic/molecules/empty-state/EmptyState.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { Card } from '../card/Card.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './EmptyState.css.js';\n\nexport type EmptyStateVariant = 'framed' | 'plain';\nexport type EmptyStateDensity = 'default' | 'compact';\nexport type EmptyStateAlign = 'center' | 'start';\nexport type EmptyStateTone =\n  | 'neutral'\n  | 'muted'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\nexport type EmptyStateTitleAs = 'h2' | 'h3' | 'div';\n\nexport type EmptyStateProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n  variant?: EmptyStateVariant;\n  density?: EmptyStateDensity;\n  align?: EmptyStateAlign;\n  tone?: EmptyStateTone;\n  titleAs?: EmptyStateTitleAs;\n};\n\nexport const EmptyState = ({\n  title,\n  description,\n  icon,\n  actions,\n  className,\n  variant = 'framed',\n  density = 'default',\n  align = 'center',\n  tone = 'neutral',\n  titleAs = 'h2',\n}: EmptyStateProps): JSX.Element => {\n  let iconElement: JSX.Element | null = null;\n  if (icon != null) {\n    iconElement = <div className={styles.icon({ tone })}>{icon}</div>;\n  }\n\n  const Title = titleAs;\n\n  let descriptionElement: JSX.Element | null = null;\n  if (description != null) {\n    descriptionElement = (\n      <div className={styles.description({ density })}>{description}</div>\n    );\n  }\n\n  let actionsElement: JSX.Element | null = null;\n  if (actions != null) {\n    actionsElement = (\n      <div className={styles.actions({ density, align })}>{actions}</div>\n    );\n  }\n\n  const content = (\n    <>\n      {iconElement}\n      <Title className={styles.title({ density })}>{title}</Title>\n      {descriptionElement}\n      {actionsElement}\n    </>\n  );\n\n  if (variant === 'plain') {\n    return (\n      <div className={cx(styles.root({ variant, density, align }), className)}>\n        {content}\n      </div>\n    );\n  }\n\n  return (\n    <Card\n      className={cx(styles.root({ variant, density, align }), className)}\n      contentClassName={styles.content({ density, align })}\n    >\n      {content}\n    </Card>\n  );\n};\n\nexport default EmptyState;\n"],"mappings":";;;;;AA+BA,IAAa,KAAc,EACzB,OAAA,GACA,aAAA,GACA,MAAA,GACA,SAAA,GACA,cACA,aAAU,UACV,aAAU,WACV,WAAQ,UACR,UAAO,WACP,aAAU,WACwB;CAClC,IAAI,IAAkC;CACtC,AAAI,KAAQ,SACV,IAAc,kBAAC,OAAD;EAAK,WAAW,EAAY,EAAE,SAAM,CAAC;YAAG;EAAW,CAAA;CAGnE,IAAM,IAAQ,GAEV,IAAyC;CAC7C,AAAI,KAAe,SACjB,IACE,kBAAC,OAAD;EAAK,WAAW,EAAmB,EAAE,YAAS,CAAC;YAAG;EAAkB,CAAA;CAIxE,IAAI,IAAqC;CACzC,AAAI,KAAW,SACb,IACE,kBAAC,OAAD;EAAK,WAAW,EAAe;GAAE;GAAS;GAAO,CAAC;YAAG;EAAc,CAAA;CAIvE,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG;EACD,kBAAC,GAAD;GAAO,WAAW,EAAa,EAAE,YAAS,CAAC;aAAG;GAAc,CAAA;EAC3D;EACA;EACA,EAAA,CAAA;CAWL,OARI,MAAY,UAEZ,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAY;GAAE;GAAS;GAAS;GAAO,CAAC,EAAE,EAAU;YACpE;EACG,CAAA,GAKR,kBAAC,GAAD;EACE,WAAW,EAAG,EAAY;GAAE;GAAS;GAAS;GAAO,CAAC,EAAE,EAAU;EAClE,kBAAkB,EAAe;GAAE;GAAS;GAAO,CAAC;YAEnD;EACI,CAAA"}

package/lib/esm/atomic/molecules/form_error/FormError.js

@@ -1,24 +1,34 @@
-import { FormErrorAlertSvg as e } from "../../../icons/FormErrorAlertSvg.js";
-import { formError as t, icon as n, message as r } from "./formError.css.js";
+import { cx as e } from "../../../theme/tools.js";
+import { FormErrorAlertSvg as t } from "../../../icons/FormErrorAlertSvg.js";
+import { formError as n, icon as r, message as i } from "./formError.css.js";
 import "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/atomic/molecules/form_error/FormError.tsx
-var o = ({ children: o, ...s }) => o == null ? null : /* @__PURE__ */ a("div", {
-	className: t,
-	role: "alert",
-	...s,
-	children: [/* @__PURE__ */ i("span", {
-		className: n,
-		children: /* @__PURE__ */ i(e, {
-			width: 16,
-			height: 16
-		})
-	}), /* @__PURE__ */ i("div", {
-		className: r,
-		children: o
-	})]
-});
+var s = ({ children: s, message: c, actions: l, className: u, id: d }) => {
+	let f = c ?? s;
+	return f == null || f === "" ? null : /* @__PURE__ */ o("div", {
+		id: d,
+		className: e(n, u),
+		role: "alert",
+		"aria-live": "assertive",
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: r,
+				children: /* @__PURE__ */ a(t, {
+					width: 16,
+					height: 16,
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				className: i,
+				children: f
+			}),
+			l
+		]
+	});
+};
 //#endregion
-export { o as FormError };
+export { s as FormError };
 
 //# sourceMappingURL=FormError.js.map

package/lib/esm/atomic/molecules/form_error/FormError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormError.js","names":[],"sources":["../../../../../src/atomic/molecules/form_error/FormError.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\n\nimport { FormErrorAlertSvg } from '../../../icons/FormErrorAlertSvg.js';\n\nimport { formError, icon, message } from './formError.css.js';\n\ntype Props = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport const FormError = ({ children, ...rest }: Props): JSX.Element | null => {\n  if (children == null) {\n    return null;\n  }\n\n  return (\n    <div className={formError} role=\"alert\" {...rest}>\n      <span className={icon}>\n        <FormErrorAlertSvg width={16} height={16} />\n      </span>\n      <div className={message}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAWA,IAAa,KAAa,EAAE,aAAU,GAAG,QACnC,KAAY,OACP,OAIP,kBAAC,OAAD;CAAK,WAAW;CAAW,MAAK;CAAQ,GAAI;WAA5C,CACE,kBAAC,QAAD;EAAM,WAAW;YACf,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;GAAM,CAAA;EACvC,CAAA,EACP,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAe,CAAA,CACrC"}
+{"version":3,"file":"FormError.js","names":[],"sources":["../../../../../src/atomic/molecules/form_error/FormError.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\n\nimport { FormErrorAlertSvg } from '../../../icons/FormErrorAlertSvg.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport { formError, icon, message } from './formError.css.js';\n\ntype Props = {\n  children?: React.ReactNode;\n  message?: React.ReactNode | null;\n  actions?: React.ReactNode;\n  className?: string;\n  id?: string;\n};\n\nexport const FormError = ({\n  children,\n  message: messageProp,\n  actions,\n  className,\n  id,\n}: Props): JSX.Element | null => {\n  const content = messageProp ?? children;\n  if (content == null || content === '') {\n    return null;\n  }\n\n  return (\n    <div\n      id={id}\n      className={cx(formError, className)}\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      <span className={icon}>\n        <FormErrorAlertSvg width={16} height={16} aria-hidden=\"true\" />\n      </span>\n      <div className={message}>{content}</div>\n      {actions}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAeA,IAAa,KAAa,EACxB,aACA,SAAS,GACT,YACA,cACA,YAC+B;CAC/B,IAAM,IAAU,KAAe;CAK/B,OAJI,KAAW,QAAQ,MAAY,KAC1B,OAIP,kBAAC,OAAD;EACM;EACJ,WAAW,EAAG,GAAW,EAAU;EACnC,MAAK;EACL,aAAU;YAJZ;GAME,kBAAC,QAAD;IAAM,WAAW;cACf,kBAAC,GAAD;KAAmB,OAAO;KAAI,QAAQ;KAAI,eAAY;KAAS,CAAA;IAC1D,CAAA;GACP,kBAAC,OAAD;IAAK,WAAW;cAAU;IAAc,CAAA;GACvC;GACG"}