@apify/ui-library 1.148.0 → 1.148.1-featuremigrateapifyuilibrary-48563e.13

package/dist/components/table/table_cell.js

@@ -0,0 +1,27 @@
+import { Link as e } from "../link/link.js";
+import { tableClassNames as t } from "./table.styled.js";
+import { tableTestIds as n } from "./table.test_ids.js";
+import { TableRowLinkContext as r } from "./table.context.js";
+import { useContext as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "clsx";
+//#region src/components/table/table_cell.tsx
+var c = ({ className: c, children: l, ...u }) => {
+	let d = i(r);
+	return /* @__PURE__ */ o("td", {
+		"data-test": n.CELL,
+		className: s(t.BODY_CELL, c),
+		...u,
+		children: [d && /* @__PURE__ */ a(e, {
+			className: t.CELL_OVERLAY_LINK,
+			to: d,
+			tabIndex: -1,
+			ariaHidden: !0
+		}), l]
+	});
+}, l = ({ className: n, ...r }) => /* @__PURE__ */ a(e, {
+	className: s(t.CELL_LINK, n),
+	...r
+});
+//#endregion
+export { c as TableCell, l as TableCellLink };

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

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export declare const TableEmptyRow: FC<{
+    colSpan: number;
+    children: ReactNode;
+}>;
+//# sourceMappingURL=table_empty_row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_empty_row.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_empty_row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3C,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAMtE,CAAC"}

package/dist/components/table/table_empty_row.js

@@ -0,0 +1,15 @@
+import { tableClassNames as e } from "./table.styled.js";
+import { tableTestIds as t } from "./table.test_ids.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/table/table_empty_row.tsx
+var r = ({ colSpan: r, children: i }) => /* @__PURE__ */ n("tr", {
+	"data-test": t.EMPTY_ROW,
+	className: e.ROW_EMPTY,
+	children: /* @__PURE__ */ n("td", {
+		colSpan: r,
+		className: e.ROW_EMPTY_CELL,
+		children: i
+	})
+});
+//#endregion
+export { r as TableEmptyRow };

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

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from 'react';
+export declare const TableErrorRow: FC<{
+    colSpan: number;
+    children?: ReactNode;
+    error?: Error | null;
+}>;
+//# sourceMappingURL=table_error_row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_error_row.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_error_row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3C,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAU7F,CAAC"}

package/dist/components/table/table_error_row.js

@@ -0,0 +1,19 @@
+import { TextShared as e } from "../text/text_shared.js";
+import { tableClassNames as t } from "./table.styled.js";
+import { tableTestIds as n } from "./table.test_ids.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/table/table_error_row.tsx
+var i = ({ colSpan: i, children: a, error: o }) => /* @__PURE__ */ r("tr", {
+	"data-test": n.ERROR_ROW,
+	className: t.ROW_EMPTY,
+	children: /* @__PURE__ */ r("td", {
+		colSpan: i,
+		className: t.ROW_EMPTY_CELL,
+		children: a ?? /* @__PURE__ */ r(e, {
+			color: "error",
+			children: o?.message ?? "Failed to load data"
+		})
+	})
+});
+//#endregion
+export { i as TableErrorRow };

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

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+import { TableExpansion } from './table.types';
+export declare const TableExpansionRow: FC<{
+    colSpan: number;
+    children: ReactNode;
+    expansion: TableExpansion;
+    itemId: string;
+    className?: string;
+}>;
+//# sourceMappingURL=table_expansion_row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_expansion_row.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_expansion_row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAUA,CAAC"}

package/dist/components/table/table_expansion_row.js

@@ -0,0 +1,16 @@
+import { tableClassNames as e } from "./table.styled.js";
+import { tableTestIds as t } from "./table.test_ids.js";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/components/table/table_expansion_row.tsx
+var i = ({ colSpan: i, children: a, expansion: o, itemId: s, className: c }) => o.isExpanded(s) ? /* @__PURE__ */ n("tr", {
+	"data-test": t.EXPANSION_ROW,
+	className: r(e.ROW_EXPANSION, c),
+	children: /* @__PURE__ */ n("td", {
+		colSpan: i,
+		className: e.ROW_EXPANSION_CELL,
+		children: a
+	})
+}) : null;
+//#endregion
+export { i as TableExpansionRow };

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

@@ -0,0 +1,3 @@
+import { FC, HTMLAttributes } from 'react';
+export declare const TableFoot: FC<HTMLAttributes<HTMLTableSectionElement>>;
+//# sourceMappingURL=table_foot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_foot.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_foot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAEjE,CAAC"}

package/dist/components/table/table_foot.js

@@ -0,0 +1,12 @@
+import { tableClassNames as e } from "./table.styled.js";
+import { tableTestIds as t } from "./table.test_ids.js";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/components/table/table_foot.tsx
+var i = ({ className: i, ...a }) => /* @__PURE__ */ n("tfoot", {
+	"data-test": t.FOOT,
+	className: r(e.FOOT, i),
+	...a
+});
+//#endregion
+export { i as TableFoot };

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

@@ -0,0 +1,3 @@
+import { FC, HTMLAttributes } from 'react';
+export declare const TableHead: FC<HTMLAttributes<HTMLTableSectionElement>>;
+//# sourceMappingURL=table_head.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_head.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_head.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAEjE,CAAC"}

package/dist/components/table/table_head.js

@@ -0,0 +1,12 @@
+import { tableClassNames as e } from "./table.styled.js";
+import { tableTestIds as t } from "./table.test_ids.js";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/components/table/table_head.tsx
+var i = ({ className: i, ...a }) => /* @__PURE__ */ n("thead", {
+	"data-test": t.HEAD,
+	className: r(e.HEAD, i),
+	...a
+});
+//#endregion
+export { i as TableHead };

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

@@ -0,0 +1,3 @@
+import { FC, ThHTMLAttributes } from 'react';
+export declare const TableHeadCell: FC<ThHTMLAttributes<HTMLTableCellElement>>;
+//# sourceMappingURL=table_head_cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_head_cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_head_cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAKlD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAEpE,CAAC"}

package/dist/components/table/table_head_cell.js

@@ -0,0 +1,12 @@
+import { tableClassNames as e } from "./table.styled.js";
+import { tableTestIds as t } from "./table.test_ids.js";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/components/table/table_head_cell.tsx
+var i = ({ className: i, ...a }) => /* @__PURE__ */ n("th", {
+	"data-test": t.HEAD_CELL,
+	className: r(e.HEAD_CELL, i),
+	...a
+});
+//#endregion
+export { i as TableHeadCell };

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

@@ -0,0 +1,3 @@
+import { FC, HTMLAttributes } from 'react';
+export declare const TableHeadRow: FC<HTMLAttributes<HTMLTableRowElement>>;
+//# sourceMappingURL=table_head_row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_head_row.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_head_row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAEhE,CAAC"}

package/dist/components/table/table_head_row.js

@@ -0,0 +1,12 @@
+import { tableClassNames as e } from "./table.styled.js";
+import { tableTestIds as t } from "./table.test_ids.js";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/components/table/table_head_row.tsx
+var i = ({ className: i, ...a }) => /* @__PURE__ */ n("tr", {
+	"data-test": t.HEAD_ROW,
+	className: r(e.HEAD_ROW, i),
+	...a
+});
+//#endregion
+export { i as TableHeadRow };

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

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export declare const TableLoadingRow: FC<{
+    colSpan: number;
+    children?: ReactNode;
+}>;
+//# sourceMappingURL=table_loading_row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_loading_row.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_loading_row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3C,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAMzE,CAAC"}

package/dist/components/table/table_loading_row.js

@@ -0,0 +1,16 @@
+import { InlineSpinner as e } from "../spinner/spinner.js";
+import { tableClassNames as t } from "./table.styled.js";
+import { tableTestIds as n } from "./table.test_ids.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/table/table_loading_row.tsx
+var i = ({ colSpan: i, children: a }) => /* @__PURE__ */ r("tr", {
+	"data-test": n.LOADING_ROW,
+	className: t.ROW_EMPTY,
+	children: /* @__PURE__ */ r("td", {
+		colSpan: i,
+		className: t.ROW_EMPTY_CELL,
+		children: a ?? /* @__PURE__ */ r(e, {})
+	})
+});
+//#endregion
+export { i as TableLoadingRow };

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TableRowProps } from './table.types';
+export declare const TableRow: FC<TableRowProps>;
+//# sourceMappingURL=table_row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_row.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiBtC,CAAC"}

package/dist/components/table/table_row.js

@@ -0,0 +1,19 @@
+import { tableClassNames as e } from "./table.styled.js";
+import { tableTestIds as t } from "./table.test_ids.js";
+import { TableRowLinkContext as n } from "./table.context.js";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
+//#region src/components/table/table_row.tsx
+var a = ({ className: a, clickable: o, expanded: s, to: c, ...l }) => {
+	let u = /* @__PURE__ */ r("tr", {
+		"data-test": t.ROW,
+		className: i(e.BODY_ROW, (o || c) && e.BODY_ROW_CLICKABLE, s && e.BODY_ROW_EXPANDED, a),
+		...l
+	});
+	return c ? /* @__PURE__ */ r(n.Provider, {
+		value: c,
+		children: u
+	}) : u;
+};
+//#endregion
+export { a as TableRow };

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { HorizontallyScrollableTableWrapperProps } from './table.types';
+export declare const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableWrapperProps>;
+//# sourceMappingURL=table_wrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table_wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,KAAK,EAAE,uCAAuC,EAAE,MAAM,eAAe,CAAC;AAE7E,eAAO,MAAM,kCAAkC,EAAE,EAAE,CAAC,uCAAuC,CA8D1F,CAAC"}

package/dist/components/table/table_wrapper.js

@@ -0,0 +1,36 @@
+import { Box as e } from "../box/box.js";
+import { StyledHorizontallyScrollableTableWrapper as t, StyledTableFooterWrapper as n, tableClassNames as r } from "./table.styled.js";
+import { tableTestIds as i } from "./table.test_ids.js";
+import { useCallback as a, useEffect as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/table/table_wrapper.tsx
+var u = ({ children: u, footer: d, className: f }) => {
+	let p = s(null), m = s(null), h = s(0), g = a(() => {
+		let e = p.current, t = m.current;
+		if (!e || !t) return;
+		let n = e.scrollWidth > e.clientWidth;
+		e.scrollLeft > 0 ? t.classList.add(r.WRAPPER_SHADOW_LEFT) : t.classList.remove(r.WRAPPER_SHADOW_LEFT), n && e.scrollLeft < e.scrollWidth - e.clientWidth - 1 ? t.classList.add(r.WRAPPER_SHADOW_RIGHT) : t.classList.remove(r.WRAPPER_SHADOW_RIGHT);
+	}, []), _ = a(() => {
+		cancelAnimationFrame(h.current), h.current = requestAnimationFrame(g);
+	}, [g]);
+	return o(() => {
+		let e = p.current;
+		if (!e) return;
+		g(), e.addEventListener("scroll", _);
+		let t = new ResizeObserver(_);
+		return t.observe(e), () => {
+			cancelAnimationFrame(h.current), e.removeEventListener("scroll", _), t.disconnect();
+		};
+	}, [g, _]), /* @__PURE__ */ l(t, {
+		"data-test": i.WRAPPER,
+		ref: m,
+		className: f,
+		children: [/* @__PURE__ */ c(e, {
+			className: r.WRAPPER_SCROLLABLE,
+			ref: p,
+			children: u
+		}), d && /* @__PURE__ */ c(n, { children: d })]
+	});
+};
+//#endregion
+export { u as HorizontallyScrollableTableWrapper };

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

@@ -0,0 +1,3 @@
+export * from './tabs';
+export * from './tab';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC"}

package/dist/components/tabs/tab.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { IconComponent } from '@apify/ui-icons';
+import { MarginSpacingProps, RegularBoxProps } from '../box';
+import { RegularLinkProps } from '../link';
+type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
+export type TabVariant = 'default' | 'boxed' | 'buttoned';
+export type TabData = SharedTabProps & {
+    id: string;
+    title: string;
+    Icon?: IconComponent;
+    chip?: number | string;
+    rollout?: 'alpha' | 'beta';
+    disabled?: boolean;
+};
+export type TabProps = TabData & {
+    variant?: TabVariant;
+    active?: boolean;
+    onSelect?: (data: {
+        id: string;
+        href: string;
+        event: React.MouseEvent;
+    }) => void;
+};
+export declare const TAB_CLASSNAMES: {
+    ICON: string;
+    TITLE: string;
+};
+export declare const Tab: ({ variant, id, to, Icon, title, chip, rollout, className, onSelect, active, disabled, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tab.d.ts.map

package/dist/components/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GACzD,kBAAkB,GAClB,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAEpE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AA4GF,eAAO,MAAM,cAAc;;;CAG1B,CAAC;AAoCF,eAAO,MAAM,GAAG,GAAI,kGAajB,QAAQ,4CA8BV,CAAC"}

package/dist/components/tabs/tab.js

@@ -0,0 +1,186 @@
+import { theme as e } from "../../design_system/theme.js";
+import { TextShared as t } from "../text/text_shared.js";
+import { Link as n } from "../link/link.js";
+import { Badge as r } from "../badge/badge.js";
+import i, { css as a } from "styled-components";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "clsx";
+import { createPath as l } from "history";
+//#region src/components/tabs/tab.tsx
+var u = {
+	default: "regular",
+	boxed: "regular",
+	buttoned: "small"
+}, d = {
+	default: "small",
+	boxed: "small",
+	buttoned: "extra_small"
+}, f = {
+	default: a`
+        height: 3.6rem;
+        padding: 0 ${e.space.space8};
+        color: ${e.color.neutral.textSubtle};
+
+        &:hover {
+            color: ${e.color.primaryBlack.actionHover};
+        }
+
+        &.active {
+            color: ${e.color.neutral.text};
+
+            &::after {
+                bottom: -${e.space.space4};
+                right: 0;
+                left: 0;
+                height: 2px;
+                background-color: ${e.color.primaryBlack.action};
+                border-radius: ${e.radius.radiusFull};
+                content: '';
+                display: block;
+                pointer-events: none;
+                position: absolute;
+            }
+
+            &.disabled::after {
+                background-color: ${e.color.neutral.textDisabled};
+            }
+        }
+    `,
+	boxed: a`
+        height: 3.6rem;
+        border: 1px solid transparent;
+        border-top-right-radius: ${e.radius.radius6};
+        border-top-left-radius: ${e.radius.radius6};
+        padding: 0 ${e.space.space12};
+        color: ${e.color.neutral.textMuted};
+
+        &::after {
+            inset: ${e.space.space4};
+            background-color: transparent;
+            border-radius: ${e.radius.radius6};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+            transition: background-color ${e.transition.fastEaseOut};
+            z-index: -1;
+        }
+
+        &:hover {
+            color: ${e.color.neutral.text};
+
+            &::after {
+                background-color: ${e.color.neutral.hover};
+            }
+        }
+
+        &.active {
+            color: ${e.color.neutral.text};
+            border-color: ${e.color.neutral.border};
+            border-bottom-color: ${e.color.neutral.background};
+
+            &::after {
+                background-color: transparent;
+            }
+        }
+    `,
+	buttoned: a`
+        height: 3.2rem;
+        padding: 0 ${e.space.space8};
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: ${e.radius.radius6};
+        color: ${e.color.neutral.textMuted};
+
+        &:hover {
+            background-color: ${e.color.neutral.hover};
+            color: ${e.color.neutral.text};
+        }
+
+        &.active {
+            background-color: ${e.color.neutral.background};
+            border-color: ${e.color.neutral.border};
+            color: ${e.color.neutral.text};
+        }
+    `
+}, p = {
+	ICON: "Tab-icon",
+	TITLE: "Tab-title"
+}, m = i(n)`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${e.space.space4};
+    flex-shrink: 0;
+    cursor: pointer;
+    position: relative;
+    transition:
+        background-color ${e.transition.fastEaseOut},
+        border-color ${e.transition.fastEaseOut},
+        color ${e.transition.fastEaseOut};
+    z-index: 1;
+
+    ${({ $variant: e }) => f[e]};
+
+    &.disabled {
+        color: ${e.color.neutral.textDisabled};
+        pointer-events: none;
+    }
+
+    .${p.ICON} {
+        color: inherit;
+        flex-shrink: 0;
+        transition: color ${e.transition.fastEaseOut};
+    }
+
+    .${p.TITLE} {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`, h = ({ variant: e = "default", id: n, to: i, Icon: a, title: f, chip: h, rollout: g, className: _, onSelect: v, active: y = !1, disabled: b = !1, ...x }) => {
+	let S = typeof i == "string" ? i : l(i);
+	return /* @__PURE__ */ s(m, {
+		"data-test": "tab",
+		...x,
+		id: n,
+		to: i,
+		role: "tab",
+		"data-test-url": S,
+		className: c(_, {
+			active: y,
+			disabled: b
+		}),
+		onClick: v ? (e) => v({
+			id: n,
+			href: S,
+			event: e
+		}) : void 0,
+		$variant: e,
+		children: [
+			a && /* @__PURE__ */ o(a, {
+				size: "16",
+				className: p.ICON
+			}),
+			/* @__PURE__ */ o(t, {
+				size: u[e],
+				className: p.TITLE,
+				weight: "bold",
+				as: "div",
+				children: f
+			}),
+			h && /* @__PURE__ */ o(r, {
+				size: d[e],
+				variant: y ? "primary_black" : "neutral_subtle",
+				children: h
+			}),
+			g && /* @__PURE__ */ o(r, {
+				size: d[e],
+				variant: "primary_blue",
+				children: g
+			})
+		]
+	});
+};
+//#endregion
+export { p as TAB_CLASSNAMES, h as Tab };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { MarginSpacingProps, RegularBoxProps } from '../box';
+import { TabData, TabVariant } from './tab';
+type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+export type TabsProps = SharedTabsProps & {
+    variant?: TabVariant;
+    tabs: TabData[];
+    activeTab?: string;
+    onSelect?: (data: {
+        id: string;
+        href: string;
+        event: React.MouseEvent;
+    }) => void;
+};
+export declare const Tabs: ({ variant, tabs, activeTab, onSelect, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAElE,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGjD,KAAK,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AACpF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACtC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AA+HF,eAAO,MAAM,IAAI,GAAI,kDAA8D,SAAS,4CAoB3F,CAAC"}