@telia/teddy 0.4.19 → 0.5.0

package/dist/components/ribbon/ribbon-root.js

@@ -3,12 +3,13 @@ import React__default from "react";
 import clsx from "clsx";
 import { Flex } from "../flex/flex.js";
 const styles = {
-  "teddy-ribbon": "_teddy-ribbon_14u2k_2",
-  "teddy-ribbon--rounded": "_teddy-ribbon--rounded_14u2k_6",
-  "teddy-ribbon--backgroundColor-orange-100": "_teddy-ribbon--backgroundColor-orange-100_14u2k_9",
-  "teddy-ribbon--backgroundColor-green-50": "_teddy-ribbon--backgroundColor-green-50_14u2k_12",
-  "teddy-ribbon--iconPlacement-top": "_teddy-ribbon--iconPlacement-top_14u2k_19",
-  "teddy-ribbon--iconPlacement-center": "_teddy-ribbon--iconPlacement-center_14u2k_22"
+  "teddy-ribbon": "_teddy-ribbon_4vjnf_2",
+  "teddy-ribbon--rounded": "_teddy-ribbon--rounded_4vjnf_6",
+  "teddy-ribbon--backgroundColor-orange-50": "_teddy-ribbon--backgroundColor-orange-50_4vjnf_9",
+  "teddy-ribbon--backgroundColor-orange-100": "_teddy-ribbon--backgroundColor-orange-100_4vjnf_12",
+  "teddy-ribbon--backgroundColor-green-50": "_teddy-ribbon--backgroundColor-green-50_4vjnf_15",
+  "teddy-ribbon--iconPlacement-top": "_teddy-ribbon--iconPlacement-top_4vjnf_22",
+  "teddy-ribbon--iconPlacement-center": "_teddy-ribbon--iconPlacement-center_4vjnf_25"
 };
 const rootClassName = "teddy-ribbon";
 const Root = React__default.forwardRef(

package/dist/components/scroll-area/index.d.ts

@@ -21,7 +21,7 @@ export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("default" | "dashed") | undefined;
     } & {
         iconOnly: true;
@@ -33,7 +33,7 @@ export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "text" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("default" | "dashed") | undefined;
     } & {
         iconOnly?: false | undefined;

package/dist/components/scroll-area/scroll-area-button.d.ts

@@ -17,7 +17,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly: true;
@@ -29,7 +29,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "primary" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly?: false | undefined;

package/dist/components/table/index.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_table_tableBody = require("./table-body.cjs");
+const components_table_tableCell = require("./table-cell.cjs");
+const components_table_tableFooter = require("./table-footer.cjs");
+const components_table_tableHead = require("./table-head.cjs");
+const components_table_tableHeader = require("./table-header.cjs");
+const components_table_tableRoot = require("./table-root.cjs");
+const components_table_tableRow = require("./table-row.cjs");
+const Table = components_table_tableRoot.Root;
+Table.displayName = "Table";
+Table.Header = components_table_tableHeader.Header;
+Table.Header.displayName = "Table.Header";
+Table.Body = components_table_tableBody.Body;
+Table.Body.displayName = "Table.Body";
+Table.Footer = components_table_tableFooter.Footer;
+Table.Footer.displayName = "Table.Footer";
+Table.Row = components_table_tableRow.Row;
+Table.Row.displayName = "Table.Row";
+Table.Head = components_table_tableHead.Head;
+Table.Head.displayName = "Table.Head";
+Table.Cell = components_table_tableCell.Cell;
+Table.Cell.displayName = "Table.Cell";
+exports.Table = Table;

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

@@ -0,0 +1,121 @@
+import { Body, BodyProps } from './table-body';
+import { Cell, CellProps } from './table-cell';
+import { Footer, FooterProps } from './table-footer';
+import { Head, HeadProps } from './table-head';
+import { Header, HeaderProps } from './table-header';
+import { RootProps } from './table-root';
+import { Row, RowProps } from './table-row';
+
+type TableProps = {
+    Root: RootProps;
+    Header: HeaderProps;
+    Body: BodyProps;
+    Footer: FooterProps;
+    Row: RowProps;
+    Head: HeadProps;
+    Cell: CellProps;
+};
+/**
+ * Table is a component for displaying data in a tabular format.
+ * It provides a set of composable components to build tables with headers, footers,
+ * rows, and cells.
+ *
+ * @component
+ *
+ * @example
+ * // Basic usage
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Head>Name</Table.Head>
+ *       <Table.Head>Email</Table.Head>
+ *       <Table.Head>Role</Table.Head>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John Doe</Table.Cell>
+ *       <Table.Cell>john@example.com</Table.Cell>
+ *       <Table.Cell>Admin</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ */
+declare const Table: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLTableElement> & {
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+} & import('react').RefAttributes<HTMLTableElement>> & {
+    /**
+     * Header component for the table. Contains header rows and cells.
+     *
+     * @component
+     *
+     * @example
+     * <Table.Header>
+     *   <Table.Row>
+     *     <Table.Head>Name</Table.Head>
+     *     <Table.Head>Email</Table.Head>
+     *   </Table.Row>
+     * </Table.Header>
+     */
+    Header: typeof Header;
+    /**
+     * Body component for the table. Contains the main data rows and cells.
+     *
+     * @component
+     *
+     * @example
+     * <Table.Body>
+     *   <Table.Row>
+     *     <Table.Cell>John Doe</Table.Cell>
+     *     <Table.Cell>john@example.com</Table.Cell>
+     *   </Table.Row>
+     * </Table.Body>
+     */
+    Body: typeof Body;
+    /**
+     * Footer component for the table. Contains footer rows and cells.
+     *
+     * @component
+     *
+     * @example
+     * <Table.Footer>
+     *   <Table.Row>
+     *     <Table.Cell colSpan={2}>Total: 3 users</Table.Cell>
+     *   </Table.Row>
+     * </Table.Footer>
+     */
+    Footer: typeof Footer;
+    /**
+     * Row component for organizing cells horizontally in the table.
+     *
+     * @component
+     *
+     * @example
+     * <Table.Row>
+     *   <Table.Cell>John Doe</Table.Cell>
+     *   <Table.Cell>john@example.com</Table.Cell>
+     * </Table.Row>
+     */
+    Row: typeof Row;
+    /**
+     * Head component for table header cells. Used within Table.Header rows.
+     *
+     * @component
+     *
+     * @example
+     * <Table.Head>Name</Table.Head>
+     */
+    Head: typeof Head;
+    /**
+     * Cell component for displaying data in the table. Used within Table.Row.
+     *
+     * @component
+     *
+     * @example
+     * <Table.Cell>John Doe</Table.Cell>
+     */
+    Cell: typeof Cell;
+};
+export { Table };
+export type { TableProps };

package/dist/components/table/index.js

@@ -0,0 +1,24 @@
+import { Body } from "./table-body.js";
+import { Cell } from "./table-cell.js";
+import { Footer } from "./table-footer.js";
+import { Head } from "./table-head.js";
+import { Header } from "./table-header.js";
+import { Root } from "./table-root.js";
+import { Row } from "./table-row.js";
+const Table = Root;
+Table.displayName = "Table";
+Table.Header = Header;
+Table.Header.displayName = "Table.Header";
+Table.Body = Body;
+Table.Body.displayName = "Table.Body";
+Table.Footer = Footer;
+Table.Footer.displayName = "Table.Footer";
+Table.Row = Row;
+Table.Row.displayName = "Table.Row";
+Table.Head = Head;
+Table.Head.displayName = "Table.Head";
+Table.Cell = Cell;
+Table.Cell.displayName = "Table.Cell";
+export {
+  Table
+};

package/dist/components/table/table-body.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_table_tableRoot = require("./table-root.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Body = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: clsx(components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__body`], className), ...props }));
+Body.displayName = "Body";
+exports.Body = Body;

package/dist/components/table/table-body.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+export declare const Body: React.ForwardRefExoticComponent<BodyProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/components/table/table-body.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./table-root.js";
+const Body = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: clsx(styles[`${rootClassName}__body`], className), ...props }));
+Body.displayName = "Body";
+export {
+  Body
+};

package/dist/components/table/table-cell.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_table_tableRoot = require("./table-root.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Cell = React__namespace.forwardRef(
+  ({ className, numeric, stickyLeft, stickyRight, stickyTop, stickyBottom, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: clsx(
+        components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__cell`],
+        { [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__cell--numeric`]]: numeric },
+        { [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__cell--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom },
+        { [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__cell--sticky-left`]]: stickyLeft },
+        { [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__cell--sticky-right`]]: stickyRight },
+        { [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__cell--sticky-top`]]: stickyTop },
+        { [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__cell--sticky-bottom`]]: stickyBottom },
+        className
+      ),
+      ...props
+    }
+  )
+);
+Cell.displayName = "Cell";
+exports.Cell = Cell;

package/dist/components/table/table-cell.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export type CellProps = React.TdHTMLAttributes<HTMLTableCellElement> & {
+    /**
+     * Whether this cell contains numeric data (will be right-aligned)
+     */
+    numeric?: boolean;
+    stickyLeft?: boolean;
+    stickyRight?: boolean;
+    stickyTop?: boolean;
+    stickyBottom?: boolean;
+};
+export declare const Cell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
+    /**
+     * Whether this cell contains numeric data (will be right-aligned)
+     */
+    numeric?: boolean | undefined;
+    stickyLeft?: boolean | undefined;
+    stickyRight?: boolean | undefined;
+    stickyTop?: boolean | undefined;
+    stickyBottom?: boolean | undefined;
+} & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/table-cell.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./table-root.js";
+const Cell = React.forwardRef(
+  ({ className, numeric, stickyLeft, stickyRight, stickyTop, stickyBottom, ...props }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: clsx(
+        styles[`${rootClassName}__cell`],
+        { [styles[`${rootClassName}__cell--numeric`]]: numeric },
+        { [styles[`${rootClassName}__cell--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom },
+        { [styles[`${rootClassName}__cell--sticky-left`]]: stickyLeft },
+        { [styles[`${rootClassName}__cell--sticky-right`]]: stickyRight },
+        { [styles[`${rootClassName}__cell--sticky-top`]]: stickyTop },
+        { [styles[`${rootClassName}__cell--sticky-bottom`]]: stickyBottom },
+        className
+      ),
+      ...props
+    }
+  )
+);
+Cell.displayName = "Cell";
+export {
+  Cell
+};

package/dist/components/table/table-footer.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_table_tableRoot = require("./table-root.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Footer = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tfoot", { ref, className: clsx(components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__footer`], className), ...props }));
+Footer.displayName = "Footer";
+exports.Footer = Footer;

package/dist/components/table/table-footer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type FooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
+export declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/components/table/table-footer.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./table-root.js";
+const Footer = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: clsx(styles[`${rootClassName}__footer`], className), ...props }));
+Footer.displayName = "Footer";
+export {
+  Footer
+};

package/dist/components/table/table-head.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_table_tableRoot = require("./table-root.cjs");
+const components_heading_heading = require("../heading/heading.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Head = React__namespace.forwardRef(
+  ({ className, stickyLeft, stickyRight, stickyTop, stickyBottom, numeric, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { variant: "title-100", asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: clsx(
+        components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head`],
+        {
+          [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom,
+          [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-left`]]: stickyLeft,
+          [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-right`]]: stickyRight,
+          [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-top`]]: stickyTop,
+          [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--sticky-bottom`]]: stickyBottom,
+          [components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__head--numeric`]]: numeric
+        },
+        className
+      ),
+      children
+    }
+  ) })
+);
+Head.displayName = "Head";
+exports.Head = Head;

package/dist/components/table/table-head.d.ts

@@ -0,0 +1,18 @@
+import { ChildrenLayoutProps } from '../../utils/generate-styling';
+import * as React from 'react';
+export type HeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & ChildrenLayoutProps & {
+    stickyLeft?: boolean;
+    stickyRight?: boolean;
+    stickyTop?: boolean;
+    stickyBottom?: boolean;
+    numeric?: boolean;
+};
+export declare const Head: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/radius').RadiusProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & {
+    stickyLeft?: boolean | undefined;
+    stickyRight?: boolean | undefined;
+    stickyTop?: boolean | undefined;
+    stickyBottom?: boolean | undefined;
+    numeric?: boolean | undefined;
+} & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/table-head.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./table-root.js";
+import { Heading } from "../heading/heading.js";
+const Head = React.forwardRef(
+  ({ className, stickyLeft, stickyRight, stickyTop, stickyBottom, numeric, children, ...props }, ref) => /* @__PURE__ */ jsx(Heading, { variant: "title-100", asChild: true, ...props, children: /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      className: clsx(
+        styles[`${rootClassName}__head`],
+        {
+          [styles[`${rootClassName}__head--sticky`]]: stickyLeft || stickyRight || stickyTop || stickyBottom,
+          [styles[`${rootClassName}__head--sticky-left`]]: stickyLeft,
+          [styles[`${rootClassName}__head--sticky-right`]]: stickyRight,
+          [styles[`${rootClassName}__head--sticky-top`]]: stickyTop,
+          [styles[`${rootClassName}__head--sticky-bottom`]]: stickyBottom,
+          [styles[`${rootClassName}__head--numeric`]]: numeric
+        },
+        className
+      ),
+      children
+    }
+  ) })
+);
+Head.displayName = "Head";
+export {
+  Head
+};

package/dist/components/table/table-header.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_table_tableRoot = require("./table-root.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Header = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "thead",
+  {
+    ref,
+    className: clsx(
+      components_table_tableRoot.styles[`${components_table_tableRoot.rootClassName}__header`],
+      className
+    ),
+    ...props
+  }
+));
+Header.displayName = "Header";
+exports.Header = Header;

package/dist/components/table/table-header.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/components/table/table-header.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./table-root.js";
+const Header = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: clsx(
+      styles[`${rootClassName}__header`],
+      className
+    ),
+    ...props
+  }
+));
+Header.displayName = "Header";
+export {
+  Header
+};

package/dist/components/table/table-root.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_scrollArea_index = require("../scroll-area/index.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const styles = {
+  "teddy-table": "_teddy-table_uodq1_1",
+  "teddy-table-wrapper": "_teddy-table-wrapper_uodq1_7",
+  "teddy-table__header": "_teddy-table__header_uodq1_15",
+  "teddy-table__body": "_teddy-table__body_uodq1_22",
+  "teddy-table__footer": "_teddy-table__footer_uodq1_25",
+  "teddy-table__row": "_teddy-table__row_uodq1_28",
+  "teddy-table__head": "_teddy-table__head_uodq1_15",
+  "teddy-table__head--numeric": "_teddy-table__head--numeric_uodq1_46",
+  "teddy-table__head--sticky": "_teddy-table__head--sticky_uodq1_49",
+  "teddy-table__head--sticky-left": "_teddy-table__head--sticky-left_uodq1_53",
+  "teddy-table__head--sticky-right": "_teddy-table__head--sticky-right_uodq1_56",
+  "teddy-table__head--sticky-top": "_teddy-table__head--sticky-top_uodq1_59",
+  "teddy-table__head--sticky-bottom": "_teddy-table__head--sticky-bottom_uodq1_62",
+  "teddy-table__cell": "_teddy-table__cell_uodq1_65",
+  "teddy-table__cell--numeric": "_teddy-table__cell--numeric_uodq1_69",
+  "teddy-table__cell--sticky": "_teddy-table__cell--sticky_uodq1_72",
+  "teddy-table__cell--sticky-left": "_teddy-table__cell--sticky-left_uodq1_76",
+  "teddy-table__cell--sticky-right": "_teddy-table__cell--sticky-right_uodq1_79",
+  "teddy-table__cell--sticky-top": "_teddy-table__cell--sticky-top_uodq1_82",
+  "teddy-table__cell--sticky-bottom": "_teddy-table__cell--sticky-bottom_uodq1_85"
+};
+const rootClassName = "teddy-table";
+const Root = React__namespace.forwardRef(({ className, height, width, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea, { className: styles[`${rootClassName}-wrapper`], style: { height, width }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: clsx(styles[rootClassName], className), ...props }) }));
+Root.displayName = "Root";
+exports.Root = Root;
+exports.rootClassName = rootClassName;
+exports.styles = styles;

package/dist/components/table/table-root.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare const rootClassName = "teddy-table";
+export type RootProps = React.HTMLAttributes<HTMLTableElement> & {
+    height?: string | number;
+    width?: string | number;
+};
+export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+} & React.RefAttributes<HTMLTableElement>>;