@sero-ai/ui 0.3.2 → 0.4.0

package/dist/components/dashboard/icon-button.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+import { Icon } from "./typography";
+const sizeMap = {
+  xs: "icon-xs",
+  sm: "icon-sm",
+  md: "icon"
+};
+const iconSizeMap = {
+  xs: "xs",
+  sm: "sm",
+  md: "md"
+};
+function IconButton({
+  className,
+  icon,
+  label,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "icon-button",
+      type: "button",
+      variant,
+      size: sizeMap[size],
+      "aria-label": label,
+      title: label,
+      className: cn("text-[var(--text-muted)]", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { icon, size: iconSizeMap[size], className: "text-current" })
+    }
+  );
+}
+export {
+  IconButton
+};

package/dist/components/dashboard/index.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }var _tone = require('./tone'); _createStarExport(_tone);
+var _spacing = require('./spacing'); _createStarExport(_spacing);
+var _layout = require('./layout'); _createStarExport(_layout);
+var _typography = require('./typography'); _createStarExport(_typography);
+var _metric = require('./metric'); _createStarExport(_metric);
+var _status = require('./status'); _createStarExport(_status);
+var _keyvalue = require('./key-value'); _createStarExport(_keyvalue);
+var _itemlist = require('./item-list'); _createStarExport(_itemlist);
+var _activitylist = require('./activity-list'); _createStarExport(_activitylist);
+var _progressring = require('./progress-ring'); _createStarExport(_progressring);
+var _staleindicator = require('./stale-indicator'); _createStarExport(_staleindicator);
+var _databoundary = require('./data-boundary'); _createStarExport(_databoundary);
+var _emptystate = require('./empty-state'); _createStarExport(_emptystate);
+var _skeletons = require('./skeletons'); _createStarExport(_skeletons);
+var _iconbutton = require('./icon-button'); _createStarExport(_iconbutton);

package/dist/components/dashboard/index.d.cts

@@ -0,0 +1,24 @@
+export { Tone, toneColor, toneDot, tonePill } from './tone.cjs';
+export { Gap, gapClass } from './spacing.cjs';
+export { Divider, DividerProps, Grid, GridProps, Inline, InlineProps, Section, SectionProps, Stack, StackProps, WidgetContent, WidgetContentProps } from './layout.cjs';
+export { Heading, HeadingProps, Icon, IconProps, Text, TextProps } from './typography.cjs';
+export { Metric, MetricCard, MetricCardProps, MetricGroup, MetricGroupProps, MetricProps, MetricTrend } from './metric.cjs';
+export { Status, StatusProps } from './status.cjs';
+export { KeyValue, KeyValueList, KeyValueListProps, KeyValueProps } from './key-value.cjs';
+export { ItemList, ItemListItem, ItemListItemProps, ItemListProps } from './item-list.cjs';
+export { ActivityList, ActivityListItem, ActivityListItemProps, ActivityListProps } from './activity-list.cjs';
+export { ProgressRing, ProgressRingProps } from './progress-ring.cjs';
+export { StaleIndicator, StaleIndicatorProps } from './stale-indicator.cjs';
+export { DataBoundary, DataBoundaryProps, DataState } from './data-boundary.cjs';
+export { EmptyState, EmptyStateProps } from './empty-state.cjs';
+export { ActivitySkeleton, ListSkeleton, MetricSkeleton, SkeletonPatternProps } from './skeletons.cjs';
+export { IconButton, IconButtonProps } from './icon-button.cjs';
+import 'react/jsx-runtime';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';
+import '../ui/separator.cjs';
+import 'radix-ui';
+import '../ui/item.cjs';
+import '../ui/empty.cjs';
+import '../ui/button.cjs';

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

@@ -0,0 +1,24 @@
+export { Tone, toneColor, toneDot, tonePill } from './tone.js';
+export { Gap, gapClass } from './spacing.js';
+export { Divider, DividerProps, Grid, GridProps, Inline, InlineProps, Section, SectionProps, Stack, StackProps, WidgetContent, WidgetContentProps } from './layout.js';
+export { Heading, HeadingProps, Icon, IconProps, Text, TextProps } from './typography.js';
+export { Metric, MetricCard, MetricCardProps, MetricGroup, MetricGroupProps, MetricProps, MetricTrend } from './metric.js';
+export { Status, StatusProps } from './status.js';
+export { KeyValue, KeyValueList, KeyValueListProps, KeyValueProps } from './key-value.js';
+export { ItemList, ItemListItem, ItemListItemProps, ItemListProps } from './item-list.js';
+export { ActivityList, ActivityListItem, ActivityListItemProps, ActivityListProps } from './activity-list.js';
+export { ProgressRing, ProgressRingProps } from './progress-ring.js';
+export { StaleIndicator, StaleIndicatorProps } from './stale-indicator.js';
+export { DataBoundary, DataBoundaryProps, DataState } from './data-boundary.js';
+export { EmptyState, EmptyStateProps } from './empty-state.js';
+export { ActivitySkeleton, ListSkeleton, MetricSkeleton, SkeletonPatternProps } from './skeletons.js';
+export { IconButton, IconButtonProps } from './icon-button.js';
+import 'react/jsx-runtime';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';
+import '../ui/separator.js';
+import 'radix-ui';
+import '../ui/item.js';
+import '../ui/empty.js';
+import '../ui/button.js';

package/dist/components/dashboard/index.js

@@ -0,0 +1,15 @@
+export * from "./tone";
+export * from "./spacing";
+export * from "./layout";
+export * from "./typography";
+export * from "./metric";
+export * from "./status";
+export * from "./key-value";
+export * from "./item-list";
+export * from "./activity-list";
+export * from "./progress-ring";
+export * from "./stale-indicator";
+export * from "./data-boundary";
+export * from "./empty-state";
+export * from "./skeletons";
+export * from "./icon-button";

package/dist/components/dashboard/item-list.cjs

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+
+
+var _item = require('../ui/item');
+function ItemListItem({
+  className,
+  leading,
+  primary,
+  secondary,
+  trailing,
+  actions,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _item.Item,
+    {
+      "data-slot": "item-list-item",
+      variant,
+      size: "sm",
+      className: _utils.cn.call(void 0, 
+        "gap-2 rounded-md bg-[var(--surface-flat)] p-2 transition-colors hover:bg-[var(--glass-hover)]",
+        className
+      ),
+      ...props,
+      children: [
+        leading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _item.ItemMedia, { className: "self-center", children: leading }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _item.ItemContent, { className: "gap-0.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _item.ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
+          secondary && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _item.ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
+        ] }),
+        trailing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _item.ItemActions, { children: actions })
+      ]
+    }
+  );
+}
+function ItemList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-list",
+      role: "list",
+      className: _utils.cn.call(void 0, "flex min-w-0 flex-col gap-1", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+
+
+
+exports.ItemList = ItemList; exports.ItemListItem = ItemListItem;

package/dist/components/dashboard/item-list.d.cts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Item } from '../ui/item.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/separator.cjs';
+import 'radix-ui';
+
+interface ItemListItemProps extends Omit<React.ComponentProps<typeof Item>, "children"> {
+    /** Leading media — an icon, avatar or status marker. */
+    leading?: React.ReactNode;
+    primary: React.ReactNode;
+    secondary?: React.ReactNode;
+    /** Trailing metadata (e.g. a timestamp or count). */
+    trailing?: React.ReactNode;
+    /** Trailing interactive actions (e.g. an IconButton). */
+    actions?: React.ReactNode;
+}
+/** A single compact list row with optional media, text, metadata and actions. */
+declare function ItemListItem({ className, leading, primary, secondary, trailing, actions, variant, ...props }: ItemListItemProps): react_jsx_runtime.JSX.Element;
+interface ItemListProps extends React.ComponentProps<"div"> {
+    /** Count of items not shown; renders a "+N more" footer when > 0. */
+    overflowCount?: number;
+}
+/** A vertical stack of ItemListItem rows with a shared overflow footer. */
+declare function ItemList({ className, overflowCount, children, ...props }: ItemListProps): react_jsx_runtime.JSX.Element;
+
+export { ItemList, ItemListItem, type ItemListItemProps, type ItemListProps };

package/dist/components/dashboard/item-list.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Item } from '../ui/item.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/separator.js';
+import 'radix-ui';
+
+interface ItemListItemProps extends Omit<React.ComponentProps<typeof Item>, "children"> {
+    /** Leading media — an icon, avatar or status marker. */
+    leading?: React.ReactNode;
+    primary: React.ReactNode;
+    secondary?: React.ReactNode;
+    /** Trailing metadata (e.g. a timestamp or count). */
+    trailing?: React.ReactNode;
+    /** Trailing interactive actions (e.g. an IconButton). */
+    actions?: React.ReactNode;
+}
+/** A single compact list row with optional media, text, metadata and actions. */
+declare function ItemListItem({ className, leading, primary, secondary, trailing, actions, variant, ...props }: ItemListItemProps): react_jsx_runtime.JSX.Element;
+interface ItemListProps extends React.ComponentProps<"div"> {
+    /** Count of items not shown; renders a "+N more" footer when > 0. */
+    overflowCount?: number;
+}
+/** A vertical stack of ItemListItem rows with a shared overflow footer. */
+declare function ItemList({ className, overflowCount, children, ...props }: ItemListProps): react_jsx_runtime.JSX.Element;
+
+export { ItemList, ItemListItem, type ItemListItemProps, type ItemListProps };

package/dist/components/dashboard/item-list.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle
+} from "../ui/item";
+function ItemListItem({
+  className,
+  leading,
+  primary,
+  secondary,
+  trailing,
+  actions,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Item,
+    {
+      "data-slot": "item-list-item",
+      variant,
+      size: "sm",
+      className: cn(
+        "gap-2 rounded-md bg-[var(--surface-flat)] p-2 transition-colors hover:bg-[var(--glass-hover)]",
+        className
+      ),
+      ...props,
+      children: [
+        leading && /* @__PURE__ */ jsx(ItemMedia, { className: "self-center", children: leading }),
+        /* @__PURE__ */ jsxs(ItemContent, { className: "gap-0.5", children: [
+          /* @__PURE__ */ jsx(ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
+          secondary && /* @__PURE__ */ jsx(ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
+        ] }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        actions && /* @__PURE__ */ jsx(ItemActions, { children: actions })
+      ]
+    }
+  );
+}
+function ItemList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "item-list",
+      role: "list",
+      className: cn("flex min-w-0 flex-col gap-1", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ jsxs("span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ItemList,
+  ItemListItem
+};

package/dist/components/dashboard/key-value.cjs

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+function KeyValue({ className, label, value, mono, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "key-value",
+      className: _utils.cn.call(void 0, "flex items-baseline justify-between gap-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dt", { className: "shrink-0 truncate text-xs text-[var(--text-muted)]", children: label }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "dd",
+          {
+            className: _utils.cn.call(void 0, 
+              "min-w-0 truncate text-right text-xs text-[var(--text-primary)]",
+              mono && "font-mono tabular-nums"
+            ),
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function KeyValueList({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "dl",
+    {
+      "data-slot": "key-value-list",
+      className: _utils.cn.call(void 0, "flex flex-col gap-1.5", className),
+      ...props
+    }
+  );
+}
+
+
+
+exports.KeyValue = KeyValue; exports.KeyValueList = KeyValueList;

package/dist/components/dashboard/key-value.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface KeyValueProps extends React.ComponentProps<"div"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** Use mono + tabular numerals for the value (ids, counts, sizes). */
+    mono?: boolean;
+}
+/** A single label/value row rendered as a `dt`/`dd` pair. */
+declare function KeyValue({ className, label, value, mono, ...props }: KeyValueProps): react_jsx_runtime.JSX.Element;
+interface KeyValueListProps extends React.ComponentProps<"dl"> {
+}
+/** A vertical list of KeyValue rows. */
+declare function KeyValueList({ className, ...props }: KeyValueListProps): react_jsx_runtime.JSX.Element;
+
+export { KeyValue, KeyValueList, type KeyValueListProps, type KeyValueProps };

package/dist/components/dashboard/key-value.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface KeyValueProps extends React.ComponentProps<"div"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** Use mono + tabular numerals for the value (ids, counts, sizes). */
+    mono?: boolean;
+}
+/** A single label/value row rendered as a `dt`/`dd` pair. */
+declare function KeyValue({ className, label, value, mono, ...props }: KeyValueProps): react_jsx_runtime.JSX.Element;
+interface KeyValueListProps extends React.ComponentProps<"dl"> {
+}
+/** A vertical list of KeyValue rows. */
+declare function KeyValueList({ className, ...props }: KeyValueListProps): react_jsx_runtime.JSX.Element;
+
+export { KeyValue, KeyValueList, type KeyValueListProps, type KeyValueProps };

package/dist/components/dashboard/key-value.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function KeyValue({ className, label, value, mono, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "key-value",
+      className: cn("flex items-baseline justify-between gap-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: "shrink-0 truncate text-xs text-[var(--text-muted)]", children: label }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: cn(
+              "min-w-0 truncate text-right text-xs text-[var(--text-primary)]",
+              mono && "font-mono tabular-nums"
+            ),
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function KeyValueList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "key-value-list",
+      className: cn("flex flex-col gap-1.5", className),
+      ...props
+    }
+  );
+}
+export {
+  KeyValue,
+  KeyValueList
+};

package/dist/components/dashboard/layout.cjs

@@ -0,0 +1,193 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _classvarianceauthority = require('class-variance-authority');
+var _utils = require('../../lib/utils');
+var _separator = require('../ui/separator');
+var _spacing = require('./spacing');
+const widgetContentVariants = _classvarianceauthority.cva.call(void 0, 
+  // Full-height frame with a container-query boundary so child components can
+  // respond to the widget's own size rather than the viewport.
+  "@container/widget flex h-full min-h-0 flex-col",
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-2",
+        md: "p-3",
+        lg: "p-4"
+      },
+      scroll: {
+        true: "overflow-auto",
+        false: "overflow-hidden"
+      }
+    },
+    defaultVariants: { padding: "md", scroll: false }
+  }
+);
+function WidgetContent({
+  className,
+  padding,
+  scroll,
+  glass = true,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "widget-content",
+      className: _utils.cn.call(void 0, widgetContentVariants({ padding, scroll }), glass && "glass", className),
+      ...props
+    }
+  );
+}
+const alignClass = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+const justifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+function Stack({
+  className,
+  gap = "sm",
+  align,
+  justify,
+  fill = false,
+  scroll = false,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "stack",
+      className: _utils.cn.call(void 0, 
+        "flex flex-col",
+        _spacing.gapClass[gap],
+        align && alignClass[align],
+        justify && justifyClass[justify],
+        (fill || scroll) && "min-h-0 flex-1",
+        scroll && "overflow-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Inline({
+  className,
+  gap = "sm",
+  align = "center",
+  justify,
+  wrap = false,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "inline",
+      className: _utils.cn.call(void 0, 
+        "flex flex-row",
+        _spacing.gapClass[gap],
+        alignClass[align],
+        justify && justifyClass[justify],
+        wrap ? "flex-wrap" : "min-w-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const columnsClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+function Grid({
+  className,
+  columns = "auto",
+  gap = "sm",
+  minColumnWidth = 120,
+  style,
+  ...props
+}) {
+  const auto = columns === "auto";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "grid",
+      className: _utils.cn.call(void 0, 
+        "grid",
+        _spacing.gapClass[gap],
+        !auto && columnsClass[columns],
+        className
+      ),
+      style: auto ? {
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minColumnWidth}px, 1fr))`,
+        ...style
+      } : style,
+      ...props
+    }
+  );
+}
+function Section({
+  className,
+  heading,
+  description,
+  action,
+  gap = "sm",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "section",
+    {
+      "data-slot": "section",
+      className: _utils.cn.call(void 0, "flex flex-col", _spacing.gapClass[gap], className),
+      ...props,
+      children: [
+        (heading || action) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            heading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
+          ] }),
+          action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0", children: action })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+const dividerSpacing = { none: "my-0", sm: "my-1", md: "my-2" };
+function Divider({
+  className,
+  orientation = "horizontal",
+  spacing = "sm",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _separator.Separator,
+    {
+      "data-slot": "divider",
+      orientation,
+      className: _utils.cn.call(void 0, 
+        orientation === "horizontal" ? dividerSpacing[spacing] : "mx-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+exports.Divider = Divider; exports.Grid = Grid; exports.Inline = Inline; exports.Section = Section; exports.Stack = Stack; exports.WidgetContent = WidgetContent;