@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/layout/Layout.js

@@ -1,43 +1,54 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Resizable } from '../resizable/Resizable.js';
-import { ResizableHandle } from '../resizable/ResizableHandle.js';
-import { ResizablePanel } from '../resizable/ResizablePanel.js';
-import { layout } from './Layout-css.js';
-
-const Layout = forwardRef(
-  ({
-    children,
-    className,
-    detailsPanel,
-    header,
-    resizable,
-    sidebar,
-    size = "screen",
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(Box, { ref, ...layout({ size }, className), ...props, children: [
-      header,
-      /* @__PURE__ */ jsxs(Box, { display: "flex", flex: "1", overflow: "auto", children: [
-        sidebar,
-        resizable ? /* @__PURE__ */ jsxs(Resizable, { children: [
-          /* @__PURE__ */ jsx(ResizablePanel, { minSize: 33, children: /* @__PURE__ */ jsx(Box, { asChild: true, h: "full", children }) }),
-          detailsPanel && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ResizableHandle, {}),
-            /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 33, minSize: 33, children: detailsPanel })
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Box, { display: "flex", flex: "1", children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, w: detailsPanel ? "2/3" : "full", children }),
-          detailsPanel && /* @__PURE__ */ jsx(Box, { w: "1/3", children: detailsPanel })
-        ] })
-      ] })
-    ] });
-  }
-);
+import { Box } from "../box/Box.js";
+import { Resizable } from "../resizable/Resizable.js";
+import { ResizableHandle } from "../resizable/ResizableHandle.js";
+import { ResizablePanel } from "../resizable/ResizablePanel.js";
+import { layout } from "./Layout-css.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/Layout.tsx
+/**
+* Implement a basic page layout with multiple content areas.
+*
+* @category layout
+* @since 1.6.0
+* @experimental
+*/
+const Layout = forwardRef(({ children, className, detailsPanel, header, resizable, sidebar, size = "screen", ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		...layout({ size }, className),
+		...props,
+		children: [header, /* @__PURE__ */ jsxs(Box, {
+			display: "flex",
+			flex: "1",
+			overflow: "auto",
+			children: [sidebar, resizable ? /* @__PURE__ */ jsxs(Resizable, { children: [/* @__PURE__ */ jsx(ResizablePanel, {
+				minSize: 33,
+				children: /* @__PURE__ */ jsx(Box, {
+					asChild: true,
+					h: "full",
+					children
+				})
+			}), detailsPanel && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ResizableHandle, {}), /* @__PURE__ */ jsx(ResizablePanel, {
+				defaultSize: 33,
+				minSize: 33,
+				children: detailsPanel
+			})] })] }) : /* @__PURE__ */ jsxs(Box, {
+				display: "flex",
+				flex: "1",
+				children: [/* @__PURE__ */ jsx(Box, {
+					asChild: true,
+					w: detailsPanel ? "2/3" : "full",
+					children
+				}), detailsPanel && /* @__PURE__ */ jsx(Box, {
+					w: "1/3",
+					children: detailsPanel
+				})]
+			})]
+		})]
+	});
+});
 Layout.displayName = "@optiaxiom/react/Layout";
-
+//#endregion
 export { Layout };

package/dist/esm/packages/react/src/layout/LayoutContent-css.js

@@ -1,7 +1,17 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/layout/LayoutContent.css.ts.vanilla-FFb7Uuus.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var content = recipeRuntime({base:[{bg:'bg.page',flexDirection:'column',gap:'16',m:'4',ml:'0',overflow:'auto',px:'32',py:'24',rounded:'lg'},'_153ddy9']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/layout/LayoutContent.css.ts.vanilla-BKBAvxRZ.css";
+//#region src/layout/LayoutContent.css.ts
+var content = recipeRuntime({ base: [{
+	bg: "bg.page",
+	flexDirection: "column",
+	gap: "16",
+	m: "4",
+	ml: "0",
+	overflow: "auto",
+	px: "32",
+	py: "24",
+	rounded: "lg"
+}, "_101g31b"] });
+//#endregion
 export { content };

package/dist/esm/packages/react/src/layout/LayoutContent.js

@@ -1,23 +1,21 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Group } from '../group/Group.js';
-import { content } from './LayoutContent-css.js';
-
-const LayoutContent = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        ref,
-        tabIndex: 0,
-        ...content({}, className),
-        ...props,
-        children
-      }
-    );
-  }
-);
+import { Group } from "../group/Group.js";
+import { content } from "./LayoutContent-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/LayoutContent.tsx
+/**
+* @group Layout
+*/
+const LayoutContent = forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Group, {
+		ref,
+		tabIndex: 0,
+		...content({}, className),
+		...props,
+		children
+	});
+});
 LayoutContent.displayName = "@optiaxiom/react/LayoutContent";
-
+//#endregion
 export { LayoutContent };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,18 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-CiT8uOeC.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var icon$1 = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1eo11np']});
-var link$1 = recipeRuntime({base:['_1hn9vay'],variants:{appearance:{'default':'_1ttb26g',inverse:'_1ifc99a',subtle:'_1lt7ayl'}}});
-
-export { icon$1 as icon, link$1 as link };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/link/Link.css.ts.vanilla-Cq7Qu-hW.css";
+//#region src/link/Link.css.ts
+var icon = recipeRuntime({ base: [{
+	display: "inline-flex",
+	ml: "4"
+}, "_1ls5y7t"] });
+var link = recipeRuntime({
+	base: ["x4ruv4"],
+	variants: { appearance: {
+		"default": "rdck3z",
+		inverse: "_1kb758w",
+		subtle: "_5fqv5q"
+	} }
+});
+//#endregion
+export { icon, link };

package/dist/esm/packages/react/src/link/Link.js

@@ -1,50 +1,57 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { IconArrowUpRightFromSquare } from '@optiaxiom/icons';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Cover } from '../cover/Cover.js';
-import '../utils/conditions.js';
-import { decorateChildren } from '../utils/decorateChildren.js';
-import '../utils/isHoverSupported.js';
-import { icon, link } from './Link-css.js';
-
-const Slot$7 = createSlot("@optiaxiom/react/Link");
-const Link = forwardRef(
-  ({
-    appearance = "default",
-    asChild,
-    children,
-    className,
-    cover,
-    disabled,
-    external,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot$7 : "a";
-    const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...link({ appearance }, className), ...boxProps, children: /* @__PURE__ */ jsx(Cover, { asChild: true, disabled: !cover, inset: cover === "inset", children: /* @__PURE__ */ jsx(
-      Comp,
-      {
-        "aria-disabled": disabled,
-        "data-disabled": disabled ? "" : void 0,
-        ref,
-        ...external && { rel: "noopener noreferrer", target: "_blank" },
-        ...restProps,
-        ...disabled && {
-          href: void 0,
-          role: "link"
-        },
-        children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          children2,
-          external && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: /* @__PURE__ */ jsx(IconArrowUpRightFromSquare, {}) })
-        ] }))
-      }
-    ) }) });
-  }
-);
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { decorateChildren } from "../utils/decorateChildren.js";
+import { Cover } from "../cover/Cover.js";
+import { icon, link } from "./Link-css.js";
+import { IconArrowUpRightFromSquare } from "@optiaxiom/icons";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/link/Link.tsx
+const Slot = createSlot("@optiaxiom/react/Link");
+/**
+* Anchor element for creating hyperlinks.
+*
+* @category navigation
+* @since 0.1.0
+*/
+const Link = forwardRef(({ appearance = "default", asChild, children, className, cover, disabled, external, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+	const { boxProps, restProps } = extractBoxProps(props);
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...link({ appearance }, className),
+		...boxProps,
+		children: /* @__PURE__ */ jsx(Cover, {
+			asChild: true,
+			disabled: !cover,
+			inset: cover === "inset",
+			children: /* @__PURE__ */ jsx(Comp, {
+				"aria-disabled": disabled,
+				"data-disabled": disabled ? "" : void 0,
+				ref,
+				...external && {
+					rel: "noopener noreferrer",
+					target: "_blank"
+				},
+				...restProps,
+				...disabled && {
+					href: void 0,
+					role: "link"
+				},
+				children: decorateChildren({
+					asChild,
+					children
+				}, (children) => /* @__PURE__ */ jsxs(Fragment$1, { children: [children, external && /* @__PURE__ */ jsx(Box, {
+					asChild: true,
+					...icon(),
+					children: /* @__PURE__ */ jsx(IconArrowUpRightFromSquare, {})
+				})] }))
+			})
+		})
+	});
+});
 Link.displayName = "@optiaxiom/react/Link";
-
+//#endregion
 export { Link };

package/dist/esm/packages/react/src/listbox/Listbox-css.js

@@ -1,7 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/listbox/Listbox.css.ts.vanilla-DwiQmaG9.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var listbox$1 = recipeRuntime({base:[{display:'flex',flex:'1',flexDirection:'column',gap:'2',overflow:'auto'},'_1itqzds']});
-
-export { listbox$1 as listbox };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/listbox/Listbox.css.ts.vanilla-Bzg9hNry.css";
+//#region src/listbox/Listbox.css.ts
+var listbox = recipeRuntime({ base: [{
+	display: "flex",
+	flex: "1",
+	flexDirection: "column",
+	gap: "2",
+	overflow: "auto"
+}, "_1dy473d"] });
+//#endregion
+export { listbox };

package/dist/esm/packages/react/src/listbox/Listbox.js

@@ -1,16 +1,17 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { listbox } from './Listbox-css.js';
-
-const Listbox = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { ref, ...listbox({}, className), ...props, children });
-  }
-);
+import { Box } from "../box/Box.js";
+import { listbox } from "./Listbox-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/listbox/Listbox.tsx
+const Listbox = forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		...listbox({}, className),
+		...props,
+		children
+	});
+});
 Listbox.displayName = "@optiaxiom/react/Listbox";
-
+//#endregion
 export { Listbox };

package/dist/esm/packages/react/src/listbox/ListboxCheckboxItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DPYiTfJh.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'_1gqsy6h']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BNE_Heqw.css";
+//#region src/listbox/ListboxCheckboxItem.css.ts
+var checkbox = recipeRuntime({ base: [{ display: "inline-flex" }, "mtjpo3"] });
+//#endregion
 export { checkbox };

package/dist/esm/packages/react/src/listbox/ListboxCheckboxItem.js

@@ -1,50 +1,43 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Checkbox } from '../checkbox/Checkbox.js';
-import { Group } from '../group/Group.js';
-import { Icon } from '../icon/Icon.js';
-import { checkbox } from './ListboxCheckboxItem-css.js';
-import { ListboxItem } from './ListboxItem.js';
-
+import { Box } from "../box/Box.js";
+import { Icon } from "../icon/Icon.js";
+import { Group } from "../group/Group.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { checkbox } from "./ListboxCheckboxItem-css.js";
+import { ListboxItem } from "./ListboxItem.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/listbox/ListboxCheckboxItem.tsx
+/**
+* @group Listbox
+*/
 const ListboxCheckboxItem = forwardRef(({ addonBefore, icon, onCheckedChange, ...props }, ref) => {
-  const checked = Boolean(
-    props[props["role"] === "option" ? "aria-selected" : "aria-checked"]
-  );
-  return /* @__PURE__ */ jsx(
-    ListboxItem,
-    {
-      addonBefore: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            onClick: onCheckedChange ? (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              onCheckedChange(true);
-            } : void 0,
-            ...checkbox(),
-            children: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked,
-                hidden: true,
-                pointerEvents: "none",
-                tabIndex: -1
-              }
-            )
-          }
-        ),
-        addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null
-      ] }),
-      ref,
-      ...props
-    }
-  );
+	const checked = Boolean(props[props["role"] === "option" ? "aria-selected" : "aria-checked"]);
+	return /* @__PURE__ */ jsx(ListboxItem, {
+		addonBefore: /* @__PURE__ */ jsxs(Group, {
+			gap: "8",
+			children: [/* @__PURE__ */ jsx(Box, {
+				onClick: onCheckedChange ? (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					onCheckedChange(true);
+				} : void 0,
+				...checkbox(),
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					checked,
+					hidden: true,
+					pointerEvents: "none",
+					tabIndex: -1
+				})
+			}), addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, {
+				asChild: true,
+				children: icon
+			}) : null]
+		}),
+		ref,
+		...props
+	});
 });
 ListboxCheckboxItem.displayName = "@optiaxiom/react/ListboxCheckboxItem";
-
+//#endregion
 export { ListboxCheckboxItem };

package/dist/esm/packages/react/src/listbox/ListboxEmpty.js

@@ -1,29 +1,25 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-
-const ListboxEmpty = forwardRef(
-  ({ children = "No results found.", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        alignItems: "center",
-        "aria-hidden": true,
-        color: "fg.tertiary",
-        display: "flex",
-        flexDirection: "column",
-        fontSize: "md",
-        p: "10",
-        ref,
-        ...props,
-        children
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/listbox/ListboxEmpty.tsx
+/**
+* @group Listbox
+*/
+const ListboxEmpty = forwardRef(({ children = "No results found.", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		alignItems: "center",
+		"aria-hidden": true,
+		color: "fg.tertiary",
+		display: "flex",
+		flexDirection: "column",
+		fontSize: "md",
+		p: "10",
+		ref,
+		...props,
+		children
+	});
+});
 ListboxEmpty.displayName = "@optiaxiom/react/ListboxEmpty";
-
+//#endregion
 export { ListboxEmpty };

package/dist/esm/packages/react/src/listbox/ListboxGroup.js

@@ -1,18 +1,26 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { ListboxGroupProvider } from './ListboxGroupContext.js';
-
-const ListboxGroup = forwardRef(
-  ({ children, ...props }, ref) => {
-    const groupId = useId();
-    return /* @__PURE__ */ jsx(ListboxGroupProvider, { id: groupId, children: /* @__PURE__ */ jsx(Box, { "aria-labelledby": groupId, ref, role: "group", ...props, children }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { ListboxGroupProvider } from "./ListboxGroupContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/listbox/ListboxGroup.tsx
+/**
+* @group Listbox
+*/
+const ListboxGroup = forwardRef(({ children, ...props }, ref) => {
+	const groupId = useId();
+	return /* @__PURE__ */ jsx(ListboxGroupProvider, {
+		id: groupId,
+		children: /* @__PURE__ */ jsx(Box, {
+			"aria-labelledby": groupId,
+			ref,
+			role: "group",
+			...props,
+			children
+		})
+	});
+});
 ListboxGroup.displayName = "@optiaxiom/react/ListboxGroup";
-
+//#endregion
 export { ListboxGroup };

package/dist/esm/packages/react/src/listbox/ListboxGroupContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/listbox/ListboxGroupContext.ts
 const [ListboxGroupProvider, useListboxGroupContext] = createContext("@optiaxiom/react/ListboxGroup", { id: void 0 });
-
+//#endregion
 export { ListboxGroupProvider, useListboxGroupContext };

package/dist/esm/packages/react/src/listbox/ListboxItem-css.js

@@ -1,10 +1,36 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-bTTczoFG.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var addon$1 = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'8'},'njihvl'],variants:{slot:{after:{ml:'8'},before:{}}}});
-var description = recipeRuntime({base:[{fontSize:'sm'},'_10yig8q']});
-var item = recipeRuntime({base:[{alignItems:'start',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'jgim95'],variants:{intent:{danger:'m4dtg6',neutral:'_7fe22z'}}});
-var title = recipeRuntime({base:[{alignItems:'center',gap:'8'},'_1iv4ffq']});
-
-export { addon$1 as addon, description, item, title };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-C1nU32Df.css";
+//#region src/listbox/ListboxItem.css.ts
+var addon = recipeRuntime({
+	base: [{
+		alignItems: "center",
+		display: "flex",
+		gap: "8"
+	}, "_4agmxo"],
+	variants: { slot: {
+		after: { ml: "8" },
+		before: {}
+	} }
+});
+var description = recipeRuntime({ base: [{ fontSize: "sm" }, "_9p2p5x"] });
+var item = recipeRuntime({
+	base: [{
+		alignItems: "start",
+		fontSize: "md",
+		gap: "8",
+		p: "8",
+		rounded: "sm",
+		transition: "colors"
+	}, "_6fs7ms"],
+	variants: { intent: {
+		danger: "xx41h8",
+		neutral: "_15098zb"
+	} }
+});
+var title = recipeRuntime({ base: [{
+	alignItems: "center",
+	gap: "8"
+}, "_1t6tk6y"] });
+//#endregion
+export { addon, description, item, title };