@byline/ui 0.9.3 → 0.10.1

package/dist/components/scroll-area/scroll-area_module.css

@@ -0,0 +1,63 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.root-XJbuOo, .infonomic-scroll-area) {
+    background-color: inherit;
+    --scrollbar-size: 10px;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  :is(.viewport-TdOXwJ, .infonomic-scroll-area-viewport) {
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+  }
+
+  :is(.scrollbar-Y2nCxA, .infonomic-scroll-area-scrollbar) {
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: none;
+    background: var(--surface-panel-scrollbar);
+    padding: 2px;
+    transition: background .16s ease-out;
+    display: flex;
+  }
+
+  :is(.scrollbar-Y2nCxA, .infonomic-scroll-area-scrollbar):hover {
+    background: var(--surface-panel-scrollbar);
+  }
+
+  :is(.scrollbar-Y2nCxA, .infonomic-scroll-area-scrollbar)[data-orientation="vertical"] {
+    width: var(--scrollbar-size);
+  }
+
+  :is(.scrollbar-Y2nCxA, .infonomic-scroll-area-scrollbar)[data-orientation="horizontal"] {
+    height: var(--scrollbar-size);
+    flex-direction: column;
+  }
+
+  :is(.thumb-G2gkhj, .infonomic-scroll-area-thumb) {
+    background: var(--surface-panel-scrollbar-thumb);
+    border-radius: var(--border-radius-sm);
+    flex: 1;
+    position: relative;
+  }
+
+  :is(.thumb-G2gkhj, .infonomic-scroll-area-thumb):before {
+    content: "";
+    width: 100%;
+    min-width: 44px;
+    height: 100%;
+    min-height: 44px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  :is(.corner-kCiYUz, .infonomic-scroll-area-corner) {
+    background: var(--surface-panel-scrollbar);
+  }
+}
+

package/dist/components/scroll-to-top/scroll-to-top.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps } from 'react';
+export interface ScrollToTopProps extends ComponentProps<'button'> {
+    /**
+     * The scroll position (Y-axis) in pixels that triggers the button to appear.
+     * @default 200
+     */
+    showAt?: number;
+    /**
+     * The target scroll position (Y-axis) to scroll to when clicked.
+     * @default -65
+     */
+    offset?: number;
+}
+export declare function ScrollToTop({ className, showAt, offset, type, 'aria-label': ariaLabel, onClick, ...props }: ScrollToTopProps): import("react").JSX.Element;
+//# sourceMappingURL=scroll-to-top.d.ts.map

package/dist/components/scroll-to-top/scroll-to-top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to-top.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-to-top/scroll-to-top.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAwC,MAAM,OAAO,CAAA;AAMjF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAChE;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,MAAY,EACZ,MAAY,EACZ,IAAe,EACf,YAAY,EAAE,SAA2B,EACzC,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAyDlB"}

package/dist/components/scroll-to-top/scroll-to-top.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import classnames from "classnames";
+import scroll_to_top_module from "./scroll-to-top.module.js";
+function ScrollToTop({ className, showAt = 200, offset = -65, type = 'button', 'aria-label': ariaLabel = 'Scroll to top', onClick, ...props }) {
+    const [show, setShow] = useState(false);
+    const iconTitle = ariaLabel.trim() ? ariaLabel : 'Scroll to top';
+    const handleOnClick = (e)=>{
+        window.scrollTo({
+            top: offset,
+            left: 0,
+            behavior: 'smooth'
+        });
+        onClick?.(e);
+    };
+    useEffect(()=>{
+        let ticking = false;
+        const handleOnScroll = ()=>{
+            if (!ticking) {
+                window.requestAnimationFrame(()=>{
+                    setShow(window.scrollY > showAt);
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        };
+        window.addEventListener('scroll', handleOnScroll, {
+            passive: true
+        });
+        return ()=>{
+            window.removeEventListener('scroll', handleOnScroll);
+        };
+    }, [
+        showAt
+    ]);
+    return /*#__PURE__*/ jsx("button", {
+        type: type,
+        "aria-label": ariaLabel,
+        onClick: handleOnClick,
+        className: classnames('infonomic-scroll-to-top', scroll_to_top_module["scroll-to-top"], {
+            'infonomic-scroll-to-top-shown': show,
+            [scroll_to_top_module["scroll-to-top-shown"]]: show
+        }, className),
+        ...props,
+        children: /*#__PURE__*/ jsx("span", {
+            "aria-hidden": "true",
+            children: /*#__PURE__*/ jsxs("svg", {
+                className: "icon",
+                style: {
+                    fill: 'currentColor'
+                },
+                focusable: "false",
+                viewBox: "0 0 51 32",
+                children: [
+                    /*#__PURE__*/ jsx("title", {
+                        children: iconTitle
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"
+                    })
+                ]
+            })
+        })
+    });
+}
+export { ScrollToTop };

package/dist/components/scroll-to-top/scroll-to-top.module.js

@@ -0,0 +1,8 @@
+import "./scroll-to-top_module.css";
+const scroll_to_top_module = {
+    "scroll-to-top": "scroll-to-top-WYqAAl",
+    scrollToTop: "scroll-to-top-WYqAAl",
+    "scroll-to-top-shown": "scroll-to-top-shown-Wemu5m",
+    scrollToTopShown: "scroll-to-top-shown-Wemu5m"
+};
+export default scroll_to_top_module;

package/dist/components/scroll-to-top/scroll-to-top_module.css

@@ -0,0 +1,100 @@
+@layer byline-base, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.scroll-to-top-WYqAAl, .infonomic-scroll-to-top) {
+    opacity: 0;
+    visibility: hidden;
+    z-index: 20;
+    width: 0;
+    height: 0;
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+    cursor: pointer;
+    border-style: none;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    transition: all .3s cubic-bezier(.25, .8, .5, 1), color 1ms;
+    display: flex;
+    position: fixed;
+    bottom: 45px;
+    right: 30px;
+  }
+
+  .scroll-to-top-WYqAAl span {
+    width: 18px;
+    padding-bottom: 3px;
+  }
+
+  .infonomic-scroll-to-top span {
+    width: 18px;
+    padding-bottom: 3px;
+  }
+
+  .scroll-to-top-WYqAAl span svg path {
+    stroke: none;
+    fill: var(--text-on-primary-strong);
+  }
+
+  .infonomic-scroll-to-top span svg path {
+    stroke: none;
+    fill: var(--text-on-primary-strong);
+  }
+
+  .scroll-to-top-WYqAAl:hover, .scroll-to-top-WYqAAl:focus {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  .infonomic-scroll-to-top:hover {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  .infonomic-scroll-to-top:focus {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  :is(.scroll-to-top-shown-Wemu5m, .infonomic-scroll-to-top-shown) {
+    opacity: 1;
+    visibility: visible;
+    border-radius: 20px;
+    width: 40px;
+    min-width: 0;
+    height: 40px;
+    padding: 0;
+    bottom: 20px;
+    right: 10px;
+  }
+
+  @media screen and (min-width: 587px) {
+    :is(.scroll-to-top-WYqAAl, .infonomic-scroll-to-top) {
+      bottom: 45px;
+      right: 45px;
+    }
+
+    .scroll-to-top-WYqAAl span {
+      width: 18px;
+    }
+
+    .infonomic-scroll-to-top span {
+      width: 18px;
+    }
+
+    :is(.scroll-to-top-shown-Wemu5m, .infonomic-scroll-to-top-shown) {
+      border-radius: 21px;
+      width: 42px;
+      height: 42px;
+      bottom: 22px;
+      right: 22px;
+    }
+  }
+}
+

package/dist/components/section/section.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+type SectionIntrinsicProps = React.JSX.IntrinsicElements['section'];
+export interface SectionProps extends SectionIntrinsicProps {
+}
+export declare const Section: ({ ref, className, children, ...rest }: SectionProps & {
+    ref?: React.RefObject<HTMLElement>;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=section.d.ts.map

package/dist/components/section/section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/components/section/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAA;AACnE,MAAM,WAAW,YAAa,SAAQ,qBAAqB;CAAG;AAE9D,eAAO,MAAM,OAAO,GAAoB,uCAKrC,YAAY,GAAG;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;CACnC,KAAG,KAAK,CAAC,GAAG,CAAC,OAMb,CAAA"}

package/dist/components/section/section.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import section_module from "./section.module.js";
+const section_Section = function({ ref, className, children, ...rest }) {
+    return /*#__PURE__*/ jsx("section", {
+        className: classnames('infonomic-section', section_module.section, className),
+        ref: ref,
+        ...rest,
+        children: children
+    });
+};
+export { section_Section as Section };

package/dist/components/section/section.module.js

@@ -0,0 +1,5 @@
+import "./section_module.css";
+const section_module = {
+    section: "section-CEcZOp"
+};
+export default section_module;

package/dist/components/section/section_module.css

@@ -0,0 +1,9 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.section-CEcZOp, .infonomic-section) {
+    width: 100%;
+    position: relative;
+  }
+}
+

package/dist/components/shimmer/shimmer.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+interface ShimmerProps {
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string;
+    variant?: 'text' | 'rectangular' | 'circular';
+    lines?: number;
+    children?: React.ReactNode;
+}
+export declare function Shimmer({ className, width, height, borderRadius, variant, lines, children, ...other }: ShimmerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=shimmer.d.ts.map

package/dist/components/shimmer/shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer/shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,UAAU,CAAA;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,KAAc,EACd,MAAe,EACf,YAAY,EACZ,OAAuB,EACvB,KAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6ClC"}

package/dist/components/shimmer/shimmer.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import shimmer_module from "./shimmer.module.js";
+function Shimmer({ className, width = '100%', height = '1rem', borderRadius, variant = 'rectangular', lines = 1, children, ...other }) {
+    const shimmerStyle = {
+        width: 'number' == typeof width ? `${width}px` : width,
+        height: 'number' == typeof height ? `${height}px` : height,
+        borderRadius: borderRadius
+    };
+    const getVariantClass = ()=>{
+        switch(variant){
+            case 'text':
+                return shimmer_module.text;
+            case 'circular':
+                return shimmer_module.circular;
+            default:
+                return shimmer_module.rectangular;
+        }
+    };
+    if ('text' === variant && lines > 1) return /*#__PURE__*/ jsx("div", {
+        className: classnames(shimmer_module.shimmerContainer, className),
+        ...other,
+        children: Array.from({
+            length: lines
+        }, (_, index)=>/*#__PURE__*/ jsx("div", {
+                className: classnames(shimmer_module.shimmer, shimmer_module.text),
+                style: {
+                    ...shimmerStyle,
+                    width: index === lines - 1 ? '75%' : '100%',
+                    marginBottom: index === lines - 1 ? 0 : '0.5rem'
+                }
+            }, `shimmer-line-${index}`))
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames(shimmer_module.shimmer, getVariantClass(), className),
+        style: shimmerStyle,
+        ...other,
+        children: children
+    });
+}
+export { Shimmer };

package/dist/components/shimmer/shimmer.module.js

@@ -0,0 +1,9 @@
+import "./shimmer_module.css";
+const shimmer_module = {
+    shimmer: "shimmer-hQj5gn",
+    shimmerContainer: "shimmerContainer-YqBAXa",
+    rectangular: "rectangular-qx6oTl",
+    text: "text-syTLNh",
+    circular: "circular-KqBjEv"
+};
+export default shimmer_module;

package/dist/components/shimmer/shimmer_module.css

@@ -0,0 +1,47 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.shimmer-hQj5gn, .infonomic-shimmer) {
+    background-color: #f0f0f0;
+    background-image: linear-gradient(90deg, #0000, #fff9, #0000);
+    background-size: 200% 100%;
+    animation: 1.5s infinite shimmer-hQj5gn;
+    position: relative;
+    overflow: hidden;
+  }
+
+  :is(:is(.dark, [data-theme="dark"]) .shimmer-hQj5gn, :is(.dark, [data-theme="dark"]) .infonomic-shimmer) {
+    background-color: #141414;
+    background-image: linear-gradient(90deg, #0000, #ffffff03, #0000);
+  }
+
+  :is(.shimmerContainer-YqBAXa, .infonomic-shimmer-container) {
+    flex-direction: column;
+    display: flex;
+  }
+
+  :is(.rectangular-qx6oTl, .infonomic-shimmer-rectangular) {
+    border-radius: .25rem;
+  }
+
+  :is(.text-syTLNh, .infonomic-shimmer-text) {
+    border-radius: .125rem;
+    height: 1rem;
+  }
+
+  :is(.circular-KqBjEv, .infonomic-shimmer-circular) {
+    aspect-ratio: 1;
+    border-radius: 50%;
+  }
+
+  @keyframes shimmer-hQj5gn {
+    0% {
+      background-position: -200% 0;
+    }
+
+    100% {
+      background-position: 200% 0;
+    }
+  }
+}
+

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

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+export type TableProps = React.JSX.IntrinsicElements['table'];
+declare function Table({ ref, className, children, ...rest }: TableProps & {
+    ref?: React.RefObject<HTMLTableElement>;
+}): React.JSX.Element;
+declare namespace Table {
+    var Container: ({ ref, className, children, ...rest }: TableContainerProps & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }) => React.JSX.Element;
+    var Body: ({ ref, className, children, ...rest }: TableBodyProps & {
+        ref?: React.RefObject<HTMLTableSectionElement>;
+    }) => React.JSX.Element;
+    var Header: ({ ref, className, children, ...rest }: TableHeaderProps & {
+        ref?: React.RefObject<HTMLTableSectionElement>;
+    }) => React.JSX.Element;
+    var Row: ({ ref, className, children, ...rest }: TableRowProps & {
+        ref?: React.RefObject<HTMLTableRowElement>;
+    }) => React.JSX.Element;
+    var HeadingCell: ({ ref, className, children, ...rest }: TableHeadingCellProps & {
+        ref?: React.RefObject<HTMLTableCellElement>;
+    }) => React.JSX.Element;
+    var Cell: ({ ref, className, children, ...rest }: TableCellProps & {
+        ref?: React.RefObject<HTMLTableCellElement>;
+    }) => React.JSX.Element;
+    var Footer: ({ ref, className, children, ...rest }: TableFooterProps & {
+        ref?: React.RefObject<HTMLTableSectionElement>;
+    }) => React.JSX.Element;
+}
+export type TableContainerProps = React.JSX.IntrinsicElements['div'];
+export type TableBodyProps = React.JSX.IntrinsicElements['tbody'];
+export type TableHeaderProps = React.JSX.IntrinsicElements['thead'];
+export type TableRowProps = React.JSX.IntrinsicElements['tr'];
+export type TableHeadingCellProps = React.JSX.IntrinsicElements['th'];
+export type TableCellProps = React.JSX.IntrinsicElements['td'];
+export type TableFooterProps = React.JSX.IntrinsicElements['tfoot'];
+export { Table };
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;AAE7D,iBAAS,KAAK,CAAC,EACb,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAQpB;kBAfQ,KAAK;2DAwBX,mBAAmB,GAAG;QACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;sDAgBE,cAAc,GAAG;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;wDAelB,gBAAgB,GAAG;QACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;qDAiBlB,aAAa,GAAG;QACjB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAA;KAC3C,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;6DAiBlB,qBAAqB,GAAG;QACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;sDAqBlB,cAAc,GAAG;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;wDAiBlB,gBAAgB,GAAG;QACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;AA5HrB,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAkBpE,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;AAiBjE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;AAmBnE,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AAmB7D,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AAuBrE,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AAmB9D,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;AA8BnE,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/table/table.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import table_module from "./table.module.js";
+function Table({ ref, className, children, ...rest }) {
+    const classes = classnames(table_module.table, 'infonomic-table', className);
+    return /*#__PURE__*/ jsx("table", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: children
+    });
+}
+function Container({ ref, className, children, ...rest }) {
+    const classes = classnames(table_module["table-container"], 'infonomic-table-container', className);
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: /*#__PURE__*/ jsx("div", {
+            className: classnames('infonomic-table-scroller', table_module["table-scroller"]),
+            children: children
+        })
+    });
+}
+function Body({ ref, className, children, ...rest }) {
+    return /*#__PURE__*/ jsx("tbody", {
+        ref: ref,
+        className: classnames('infonomic-table-body', className),
+        ...rest,
+        children: children
+    });
+}
+function Header({ ref, className, children, ...rest }) {
+    const classes = classnames(table_module["table-header"], 'infonomic-table-header', className);
+    return /*#__PURE__*/ jsx("thead", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: children
+    });
+}
+function Row({ ref, className, children, ...rest }) {
+    const classes = classnames(table_module["table-row"], 'infonomic-table-row', className);
+    return /*#__PURE__*/ jsx("tr", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: children
+    });
+}
+function HeadingCell({ ref, className, children, ...rest }) {
+    const classes = classnames(table_module["table-heading-cell"], 'infonomic-table-heading-cell', 'not-prose', className);
+    return /*#__PURE__*/ jsx("th", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: children
+    });
+}
+function Cell({ ref, className, children, ...rest }) {
+    const classes = classnames(table_module["table-cell"], 'infonomic-table-cell', className);
+    return /*#__PURE__*/ jsx("td", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: children
+    });
+}
+function Footer({ ref, className, children, ...rest }) {
+    const classes = classnames('text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', className);
+    return /*#__PURE__*/ jsx("tfoot", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: children
+    });
+}
+Table.Container = Container;
+Table.Body = Body;
+Table.Header = Header;
+Table.Row = Row;
+Table.HeadingCell = HeadingCell;
+Table.Cell = Cell;
+Table.Footer = Footer;
+export { Table };

package/dist/components/table/table.module.js

@@ -0,0 +1,19 @@
+import "./table_module.css";
+const table_module = {
+    "table-container": "table-container-SdhhjR",
+    tableContainer: "table-container-SdhhjR",
+    "table-scroller": "table-scroller-lW0GHG",
+    tableScroller: "table-scroller-lW0GHG",
+    table: "table-TW0hN9",
+    "table-header": "table-header-D1lP7m",
+    tableHeader: "table-header-D1lP7m",
+    "table-row": "table-row-ufTNsI",
+    tableRow: "table-row-ufTNsI",
+    "table-heading-cell": "table-heading-cell-gB6ryy",
+    tableHeadingCell: "table-heading-cell-gB6ryy",
+    "table-cell": "table-cell-VRgkzQ",
+    tableCell: "table-cell-VRgkzQ",
+    "table-footer": "table-footer-JabMFD",
+    tableFooter: "table-footer-JabMFD"
+};
+export default table_module;

package/dist/components/table/table_module.css

@@ -0,0 +1,91 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.table-container-SdhhjR, .infonomic-table-container) {
+    word-break: normal;
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  :is(.table-scroller-lW0GHG, .infonomic-table-scroller) {
+    max-width: calc(100vw - 32px);
+    overflow-x: auto;
+  }
+
+  :is(.table-TW0hN9, .infonomic-table) {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: var(--font-size-sm);
+    text-align: left;
+    margin: 0;
+  }
+
+  :is(.table-header-D1lP7m, .infonomic-table-header) {
+    font-size: var(--font-size-sm);
+    background-color: var(--canvas-50);
+  }
+
+  :is(.table-row-ufTNsI, .infonomic-table-row) {
+    border-bottom: 1px solid var(--canvas-50);
+    background-color: #fff;
+  }
+
+  .table-row-ufTNsI:hover {
+    background-color: var(--canvas-50);
+  }
+
+  .infonomic-table-row:hover {
+    background-color: var(--canvas-50);
+  }
+
+  :is(.table-heading-cell-gB6ryy, .infonomic-table-heading-cell) {
+    white-space: nowrap;
+    padding: var(--spacing-8) var(--spacing-8);
+    background-color: var(--canvas-50);
+    font-size: .975rem;
+  }
+
+  :is(.table-cell-VRgkzQ, .infonomic-table-cell) {
+    padding: var(--spacing-8);
+    font-size: var(--font-size-sm);
+  }
+
+  :is(.table-cell-VRgkzQ, .infonomic-table-cell) a {
+    text-decoration: underline;
+  }
+
+  :is(.table-footer-JabMFD, .infonomic-table-footer) {
+    font-size: var(--font-size-sm);
+    background-color: var(--canvas-100);
+  }
+
+  :is(:is(.dark, [data-theme="dark"]) .table-header-D1lP7m, :is(.dark, [data-theme="dark"]) .infonomic-table-header) {
+    background-color: var(--canvas-700);
+  }
+
+  :is(:is(.dark, [data-theme="dark"]) .table-row-ufTNsI, :is(.dark, [data-theme="dark"]) .infonomic-table-row) {
+    border-bottom: 1px solid var(--canvas-700);
+    background-color: var(--canvas-800);
+  }
+
+  :is(.dark, [data-theme="dark"]) .table-row-ufTNsI:hover {
+    background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+  }
+
+  :is(.dark, [data-theme="dark"]) .infonomic-table-row:hover {
+    background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+  }
+
+  :is(:is(.dark, [data-theme="dark"]) .table-heading-cell-gB6ryy, :is(.dark, [data-theme="dark"]) .infonomic-table-heading-cell) {
+    background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+  }
+
+  :is(:is(.dark, [data-theme="dark"]) .table-footer-JabMFD, :is(.dark, [data-theme="dark"]) .infonomic-table-footer) {
+    background-color: var(--canvas-800);
+  }
+}
+