@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/components/client/motionFeatures/domAnimation.d.cts

@@ -0,0 +1,2 @@
+import { domAnimation } from "motion/react";
+export { domAnimation };

package/dist/components/client/motionFeatures/domAnimation.d.ts

@@ -0,0 +1,2 @@
+import { domAnimation } from "motion/react";
+export { domAnimation };

package/dist/components/client/motionFeatures/domAnimation.js

@@ -0,0 +1,5 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { domAnimation } from "motion/react";
+
+export { domAnimation };

package/dist/components/client/motionFeatures/domMax.cjs

@@ -0,0 +1,11 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let motion_react = require("motion/react");
+
+Object.defineProperty(exports, 'domMax', {
+  enumerable: true,
+  get: function () {
+    return motion_react.domMax;
+  }
+});

package/dist/components/client/motionFeatures/domMax.d.cts

@@ -0,0 +1,2 @@
+import { domMax } from "motion/react";
+export { domMax };

package/dist/components/client/motionFeatures/domMax.d.ts

@@ -0,0 +1,2 @@
+import { domMax } from "motion/react";
+export { domMax };

package/dist/components/client/motionFeatures/domMax.js

@@ -0,0 +1,5 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { domMax } from "motion/react";
+
+export { domMax };

package/dist/components/experimental/Spinner.cjs

@@ -0,0 +1,30 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
+const require_components_Icon = require('../Icon.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let __yahoo_uds_icons = require("@yahoo/uds-icons");
+
+//#region src/components/experimental/Spinner.tsx
+function Spinner({ className, color = "primary", size = "lg", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "status",
+		className: require_styles_styler.cx("self-center", "relative", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+			role: "img",
+			name: __yahoo_uds_icons.Progress,
+			className: "animate-spin",
+			size,
+			color,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})]
+	});
+}
+Spinner.displayName = "Spinner";
+
+//#endregion
+exports.Spinner = Spinner;

package/dist/components/experimental/Spinner.d.cts

@@ -0,0 +1,20 @@
+import { IconPropsWithSVGProps } from "../../tokens/types.cjs";
+import "../Icon.cjs";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
+
+//#region src/components/experimental/Spinner.d.ts
+type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {
+  color?: IconPropsWithSVGProps['color'];
+  size?: IconPropsWithSVGProps['size'];
+};
+declare function Spinner({
+  className,
+  color,
+  size,
+  ...props
+}: SpinnerProps): react_jsx_runtime21.JSX.Element;
+declare namespace Spinner {
+  var displayName: string;
+}
+//#endregion
+export { Spinner, type SpinnerProps };

package/dist/components/experimental/Spinner.d.ts

@@ -0,0 +1,20 @@
+import { IconPropsWithSVGProps } from "../../tokens/types.js";
+import "../Icon.js";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/components/experimental/Spinner.d.ts
+type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {
+  color?: IconPropsWithSVGProps['color'];
+  size?: IconPropsWithSVGProps['size'];
+};
+declare function Spinner({
+  className,
+  color,
+  size,
+  ...props
+}: SpinnerProps): react_jsx_runtime1.JSX.Element;
+declare namespace Spinner {
+  var displayName: string;
+}
+//#endregion
+export { Spinner, type SpinnerProps };

package/dist/components/experimental/Spinner.js

@@ -0,0 +1,29 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../styles/styler.js";
+import { Icon } from "../Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@yahoo/uds-icons";
+
+//#region src/components/experimental/Spinner.tsx
+function Spinner({ className, color = "primary", size = "lg", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: cx("self-center", "relative", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			role: "img",
+			name: Progress,
+			className: "animate-spin",
+			size,
+			color,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})]
+	});
+}
+Spinner.displayName = "Spinner";
+
+//#endregion
+export { Spinner };

package/dist/components/experimental/Table.cjs

@@ -0,0 +1,110 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
+const require_components_Box = require('../Box.cjs');
+const require_components_Text = require('../Text.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/experimental/Table.tsx
+const TableRoot = (0, react.forwardRef)(function TableRoot$1({ children, className, display = "table", overflow = "hidden", borderColor = "muted", borderRadius = "md", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		asChild: true,
+		borderColor,
+		borderRadius,
+		className,
+		overflow,
+		display,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			ref,
+			children
+		})
+	});
+});
+TableRoot.displayName = "TableRoot";
+const TableRow = (0, react.forwardRef)(function TableRow$1({ children, display = "table-row", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		asChild: true,
+		display,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			ref,
+			children
+		})
+	});
+});
+TableRow.displayName = "TableRow";
+const TableHeader = (0, react.forwardRef)(function TableHeader$1({ children, display = "table-header-group", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		asChild: true,
+		display,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+			ref,
+			children
+		})
+	});
+});
+TableHeader.displayName = "TableHeader";
+const TableBody = (0, react.forwardRef)(function TableBody$1({ children, display = "table-row-group", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		asChild: true,
+		display,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+			ref,
+			children
+		})
+	});
+});
+TableBody.displayName = "TableBody";
+const TableCell = (0, react.forwardRef)(function TableCell$1({ asHeaderCell, className, display = "table-cell", spacing = "3", borderBottomColor = "muted", color = "primary", ...props }, ref) {
+	const classNames = require_styles_styler.getStyles({
+		textAlign: "start",
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		asChild: true,
+		variant: asHeaderCell ? "headline1" : "body1",
+		color,
+		display,
+		spacing,
+		borderBottomColor,
+		borderBottomWidth: "thin",
+		className: classNames,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asHeaderCell ? "th" : "td", {
+			scope: asHeaderCell === "row" ? "row" : asHeaderCell ? "column" : void 0,
+			...props,
+			ref
+		})
+	});
+});
+TableCell.displayName = "TableCell";
+Table.Root = TableRoot;
+Table.Row = TableRow;
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Cell = TableCell;
+/**
+* The Table component renders a table with the given data and columns.
+* If you want more control over the table, or want to handle virtualization,
+* drag-n-drop, etc, Please can use the sub-components directly and build your own!
+*/
+function Table({ data, columns, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table.Root, {
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Header, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Row, { children: columns.map((column, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Cell, {
+			asHeaderCell: "column",
+			children: column.title
+		}, index)) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Body, { children: data.map((record, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Row, { children: columns.map((column, colIndex) => {
+			const cellData = record[column.dataIndex];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Cell, { children: column.render ? column.render(cellData, record, rowIndex) : (0, react.isValidElement)(cellData) ? cellData : String(cellData) }, colIndex);
+		}) }, rowIndex)) })]
+	});
+}
+Table.displayName = "Table";
+
+//#endregion
+exports.Table = Table;

package/dist/components/experimental/Table.d.cts

@@ -0,0 +1,84 @@
+import { UniversalTextProps } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import { BoxProps } from "../Box.cjs";
+import { TextProps } from "../Text.cjs";
+import "../index.cjs";
+import React, { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes } from "react";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
+
+//#region src/components/experimental/Table.d.ts
+/**
+ * TableColumn
+ * A TableColumn is a definition of a column in a table.
+ */
+type TableColumn<T> = {
+  title?: string;
+  dataIndex: keyof T;
+  render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
+};
+type TableRootProps = TableHTMLAttributes<HTMLTableElement> & BoxProps & {
+  /** Sets whether an element is treated as a block or inline box and the
+   *  layout used for its children, such as flow layout, grid or flex.
+   *  @default "table"
+   */
+  display?: BoxProps['display'];
+};
+type HTMLTableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'color' | 'height' | 'width'>;
+interface TableCellProps extends Omit<UniversalTextProps, 'color'>, HTMLTableCellProps {
+  /** asHeaderCell will return a th element instead of a td element.
+   *  If asHeaderCell is row, it will return a th element with scope="row"
+   *  @default false
+   */
+  asHeaderCell?: boolean | 'column' | 'row';
+  color?: TextProps['color'];
+}
+/**
+ * Table component props
+ * @template T The type of data in the table.
+ */
+type TableProps<T> = {
+  /** An array of data for the table. Each item represents a row in the table.
+   * The keys of each item should match the `dataIndex` of the columns.
+   */
+  data: T[];
+  /** An array of columns for the table. Each item defines a column in the table.
+   * The `dataIndex` should match the key of the data item.
+   */
+  columns: TableColumn<T>[];
+} & TableRootProps;
+/**
+ * The Table component renders a table with the given data and columns.
+ * If you want more control over the table, or want to handle virtualization,
+ * drag-n-drop, etc, Please can use the sub-components directly and build your own!
+ */
+declare function Table<T>({
+  data,
+  columns,
+  ...props
+}: TableProps<T>): react_jsx_runtime22.JSX.Element;
+declare namespace Table {
+  var Root: React.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & BoxProps & {
+    /** Sets whether an element is treated as a block or inline box and the
+     *  layout used for its children, such as flow layout, grid or flex.
+     *  @default "table"
+     */
+    display?: BoxProps["display"];
+  } & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableElement>>;
+  var Row: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & BoxProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableRowElement>>;
+  var Header: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableSectionElement>>;
+  var Body: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableSectionElement>>;
+  var Cell: React.ForwardRefExoticComponent<TableCellProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableCellElement | HTMLTableHeaderCellElement>>;
+  var displayName: string;
+}
+//#endregion
+export { Table, type TableColumn, type TableProps };

package/dist/components/experimental/Table.d.ts

@@ -0,0 +1,84 @@
+import { UniversalTextProps } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import { BoxProps } from "../Box.js";
+import { TextProps } from "../Text.js";
+import "../index.js";
+import React, { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes } from "react";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/components/experimental/Table.d.ts
+/**
+ * TableColumn
+ * A TableColumn is a definition of a column in a table.
+ */
+type TableColumn<T> = {
+  title?: string;
+  dataIndex: keyof T;
+  render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
+};
+type TableRootProps = TableHTMLAttributes<HTMLTableElement> & BoxProps & {
+  /** Sets whether an element is treated as a block or inline box and the
+   *  layout used for its children, such as flow layout, grid or flex.
+   *  @default "table"
+   */
+  display?: BoxProps['display'];
+};
+type HTMLTableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'color' | 'height' | 'width'>;
+interface TableCellProps extends Omit<UniversalTextProps, 'color'>, HTMLTableCellProps {
+  /** asHeaderCell will return a th element instead of a td element.
+   *  If asHeaderCell is row, it will return a th element with scope="row"
+   *  @default false
+   */
+  asHeaderCell?: boolean | 'column' | 'row';
+  color?: TextProps['color'];
+}
+/**
+ * Table component props
+ * @template T The type of data in the table.
+ */
+type TableProps<T> = {
+  /** An array of data for the table. Each item represents a row in the table.
+   * The keys of each item should match the `dataIndex` of the columns.
+   */
+  data: T[];
+  /** An array of columns for the table. Each item defines a column in the table.
+   * The `dataIndex` should match the key of the data item.
+   */
+  columns: TableColumn<T>[];
+} & TableRootProps;
+/**
+ * The Table component renders a table with the given data and columns.
+ * If you want more control over the table, or want to handle virtualization,
+ * drag-n-drop, etc, Please can use the sub-components directly and build your own!
+ */
+declare function Table<T>({
+  data,
+  columns,
+  ...props
+}: TableProps<T>): react_jsx_runtime2.JSX.Element;
+declare namespace Table {
+  var Root: React.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & BoxProps & {
+    /** Sets whether an element is treated as a block or inline box and the
+     *  layout used for its children, such as flow layout, grid or flex.
+     *  @default "table"
+     */
+    display?: BoxProps["display"];
+  } & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableElement>>;
+  var Row: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & BoxProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableRowElement>>;
+  var Header: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableSectionElement>>;
+  var Body: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & BoxProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableSectionElement>>;
+  var Cell: React.ForwardRefExoticComponent<TableCellProps & {
+    children?: React.ReactNode | undefined;
+  } & React.RefAttributes<HTMLTableCellElement | HTMLTableHeaderCellElement>>;
+  var displayName: string;
+}
+//#endregion
+export { Table, type TableColumn, type TableProps };

package/dist/components/experimental/Table.js

@@ -0,0 +1,108 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../../styles/styler.js";
+import { Box } from "../Box.js";
+import { Text } from "../Text.js";
+import React, { forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/experimental/Table.tsx
+const TableRoot = forwardRef(function TableRoot$1({ children, className, display = "table", overflow = "hidden", borderColor = "muted", borderRadius = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		borderColor,
+		borderRadius,
+		className,
+		overflow,
+		display,
+		...props,
+		children: /* @__PURE__ */ jsx("table", {
+			ref,
+			children
+		})
+	});
+});
+TableRoot.displayName = "TableRoot";
+const TableRow = forwardRef(function TableRow$1({ children, display = "table-row", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		display,
+		...props,
+		children: /* @__PURE__ */ jsx("tr", {
+			ref,
+			children
+		})
+	});
+});
+TableRow.displayName = "TableRow";
+const TableHeader = forwardRef(function TableHeader$1({ children, display = "table-header-group", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		display,
+		...props,
+		children: /* @__PURE__ */ jsx("thead", {
+			ref,
+			children
+		})
+	});
+});
+TableHeader.displayName = "TableHeader";
+const TableBody = forwardRef(function TableBody$1({ children, display = "table-row-group", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		display,
+		...props,
+		children: /* @__PURE__ */ jsx("tbody", {
+			ref,
+			children
+		})
+	});
+});
+TableBody.displayName = "TableBody";
+const TableCell = forwardRef(function TableCell$1({ asHeaderCell, className, display = "table-cell", spacing = "3", borderBottomColor = "muted", color = "primary", ...props }, ref) {
+	const classNames = getStyles({
+		textAlign: "start",
+		className
+	});
+	return /* @__PURE__ */ jsx(Text, {
+		asChild: true,
+		variant: asHeaderCell ? "headline1" : "body1",
+		color,
+		display,
+		spacing,
+		borderBottomColor,
+		borderBottomWidth: "thin",
+		className: classNames,
+		children: /* @__PURE__ */ jsx(asHeaderCell ? "th" : "td", {
+			scope: asHeaderCell === "row" ? "row" : asHeaderCell ? "column" : void 0,
+			...props,
+			ref
+		})
+	});
+});
+TableCell.displayName = "TableCell";
+Table.Root = TableRoot;
+Table.Row = TableRow;
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Cell = TableCell;
+/**
+* The Table component renders a table with the given data and columns.
+* If you want more control over the table, or want to handle virtualization,
+* drag-n-drop, etc, Please can use the sub-components directly and build your own!
+*/
+function Table({ data, columns, ...props }) {
+	return /* @__PURE__ */ jsxs(Table.Root, {
+		...props,
+		children: [/* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsx(Table.Row, { children: columns.map((column, index) => /* @__PURE__ */ jsx(Table.Cell, {
+			asHeaderCell: "column",
+			children: column.title
+		}, index)) }) }), /* @__PURE__ */ jsx(Table.Body, { children: data.map((record, rowIndex) => /* @__PURE__ */ jsx(Table.Row, { children: columns.map((column, colIndex) => {
+			const cellData = record[column.dataIndex];
+			return /* @__PURE__ */ jsx(Table.Cell, { children: column.render ? column.render(cellData, record, rowIndex) : isValidElement(cellData) ? cellData : String(cellData) }, colIndex);
+		}) }, rowIndex)) })]
+	});
+}
+Table.displayName = "Table";
+
+//#endregion
+export { Table };

package/dist/components/experimental/Table.mocks.cjs

@@ -0,0 +1,58 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/experimental/Table.mocks.tsx
+const data = [{
+	id: 1,
+	name: "John Doe"
+}, {
+	id: 2,
+	name: "Jane Doe"
+}];
+const columns = [
+	{
+		title: "ID",
+		dataIndex: "id"
+	},
+	{
+		title: "Name",
+		dataIndex: "name"
+	},
+	{
+		title: "Actions",
+		dataIndex: "actions",
+		render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", { children: "Edit" })
+	}
+];
+const productsData = [
+	{
+		id: 1,
+		product: "Laptop",
+		price: 1200,
+		inStock: true
+	},
+	{
+		id: 2,
+		product: "Smartphone",
+		price: 800,
+		inStock: false
+	},
+	{
+		id: 3,
+		product: "Tablet",
+		price: 700,
+		inStock: true
+	},
+	{
+		id: 4,
+		product: "Vision Pro",
+		price: 4700,
+		inStock: false
+	}
+];
+
+//#endregion
+exports.columns = columns;
+exports.data = data;
+exports.productsData = productsData;

package/dist/components/experimental/Table.mocks.d.cts

@@ -0,0 +1,19 @@
+import { TableColumn } from "./Table.cjs";
+
+//#region src/components/experimental/Table.mocks.d.ts
+type MockData = {
+  id: number;
+  name: string;
+  actions?: () => JSX.Element;
+};
+declare const data: MockData[];
+declare const columns: TableColumn<MockData>[];
+type ProductMockData = {
+  id: number;
+  product: string;
+  price: number;
+  inStock: boolean;
+};
+declare const productsData: ProductMockData[];
+//#endregion
+export { MockData, ProductMockData, columns, data, productsData };

package/dist/components/experimental/Table.mocks.d.ts

@@ -0,0 +1,19 @@
+import { TableColumn } from "./Table.js";
+
+//#region src/components/experimental/Table.mocks.d.ts
+type MockData = {
+  id: number;
+  name: string;
+  actions?: () => JSX.Element;
+};
+declare const data: MockData[];
+declare const columns: TableColumn<MockData>[];
+type ProductMockData = {
+  id: number;
+  product: string;
+  price: number;
+  inStock: boolean;
+};
+declare const productsData: ProductMockData[];
+//#endregion
+export { MockData, ProductMockData, columns, data, productsData };