@ultraviolet/ui 3.0.0-beta.25 → 3.0.0-beta.27

package/dist/components/Table/Cell.cjs

@@ -1,35 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const dynamic = require("@vanilla-extract/dynamic");
-const ColumnProvider = require("../List/ColumnProvider.cjs");
-const styles_css = require("./styles.css.cjs");
-const variables_css = require("./variables.css.cjs");
-const Cell = ({
-  children,
-  className,
-  colSpan,
-  rowSpan,
-  sentiment,
-  align = "left",
-  style
-}) => {
-  const {
-    maxWidth,
-    minWidth,
-    width
-  } = ColumnProvider.useColumnProvider();
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { align, className: `${className ? `${className} ` : ""}${styles_css.tableCell({
-    align,
-    sentiment
-  })}`, colSpan, rowSpan, style: {
-    ...dynamic.assignInlineVars({
-      [variables_css.widthCell]: width,
-      [variables_css.minWidthCell]: minWidth,
-      [variables_css.maxWidthCell]: maxWidth
-    }),
-    ...style
-  }, children });
-};
-exports.Cell = Cell;

package/dist/components/Table/Header.cjs

@@ -1,9 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const styles_css = require("./styles.css.cjs");
-const Header = ({
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className: styles_css.tableHeader, children });
-exports.Header = Header;

package/dist/components/Table/HeaderCell.cjs

@@ -1,55 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Icon = require("@ultraviolet/icons");
-const dynamic = require("@vanilla-extract/dynamic");
-const styles_css$1 = require("../List/styles.css.cjs");
-const index = require("../Text/index.cjs");
-const index$1 = require("../Tooltip/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const variables_css = require("./variables.css.cjs");
-const SortIcon = ({
-  order
-}) => order ? /* @__PURE__ */ jsxRuntime.jsx(Icon.SouthShortIcon, { className: styles_css$1.listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.SortIcon, { sentiment: "neutral" });
-const HeaderCell = ({
-  children,
-  className,
-  isOrdered,
-  onOrder,
-  orderDirection,
-  info,
-  align,
-  width,
-  maxWidth,
-  minWidth,
-  isCheckbox
-}) => {
-  let order;
-  if (isOrdered && orderDirection === "asc") {
-    order = "ascending";
-  } else if (isOrdered && orderDirection === "desc") {
-    order = "descending";
-  }
-  const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("th", { align, "aria-sort": order, className: `${className ? `${className} ` : ""}${styles_css.tableHeaderCell({
-    align,
-    checked: isCheckbox
-  })}`, onClick: handleOrder, onKeyDown: handleOrder ? (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      handleOrder();
-      if (event.key === " ") {
-        event.preventDefault();
-      }
-    }
-  } : void 0, role: onOrder ? "button columnheader" : void 0, style: dynamic.assignInlineVars({
-    [variables_css.headerCellWidth]: width ?? "auto",
-    [variables_css.headerCellMaxWidth]: maxWidth ?? "none",
-    [variables_css.headerCellMinWidth]: minWidth ?? "auto"
-  }), tabIndex: handleOrder ? 0 : -1, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Text, { as: "div", className: styles_css.headerCellText, sentiment: order !== void 0 ? "primary" : "neutral", variant: "bodySmall", children: [
-    children,
-    info ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Tooltip, { text: info, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }) }) : null,
-    orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { "aria-disabled": !onOrder, order }) : null
-  ] }) });
-};
-exports.HeaderCell = HeaderCell;

package/dist/components/Table/HeaderRow.cjs

@@ -1,28 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const themes = require("@ultraviolet/themes");
-const index = require("../Checkbox/index.cjs");
-const constants = require("./constants.cjs");
-const HeaderCell = require("./HeaderCell.cjs");
-const TableContext = require("./TableContext.cjs");
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAllHandler,
-    selectedRowIds,
-    expandButton
-  } = TableContext.useTableContext();
-  const theme = themes.useTheme();
-  const selectableRowCount = Object.keys(selectedRowIds).length;
-  return /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", children: [
-    hasSelectAllColumn ? /* @__PURE__ */ jsxRuntime.jsx(HeaderCell.HeaderCell, { isCheckbox: true, maxWidth: theme.sizing[constants.SELECTABLE_CHECKBOX_SIZE], children: /* @__PURE__ */ jsxRuntime.jsx(index.Checkbox, { "aria-label": "select all", checked: allRowSelectValue, disabled: selectableRowCount === 0, name: "table-select-all-checkbox", onChange: selectAllHandler, value: "all" }) }) : null,
-    expandButton ? /* @__PURE__ */ jsxRuntime.jsx(HeaderCell.HeaderCell, { children: null }) : null,
-    children
-  ] });
-};
-exports.HeaderRow = HeaderRow;

package/dist/components/Table/Row.cjs

@@ -1,88 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Icon = require("@ultraviolet/icons");
-const themes = require("@ultraviolet/themes");
-const react = require("react");
-const index$2 = require("../Button/index.cjs");
-const index$1 = require("../Checkbox/index.cjs");
-const ColumnProvider = require("../List/ColumnProvider.cjs");
-const styles_css$1 = require("../List/styles.css.cjs");
-const index = require("../Tooltip/index.cjs");
-const Cell = require("./Cell.cjs");
-const styles_css = require("./styles.css.cjs");
-const TableContext = require("./TableContext.cjs");
-const Row = ({
-  children,
-  className,
-  id,
-  selectDisabled,
-  highlightAnimation,
-  expandable,
-  expanded,
-  style,
-  "data-testid": dataTestid
-}) => {
-  const {
-    selectable,
-    registerExpandableRow,
-    expandedRowIds,
-    expandRow,
-    collapseRow,
-    registerSelectableRow,
-    selectedRowIds,
-    expandButton,
-    inRange,
-    columns,
-    refList,
-    setRefList,
-    handleOnChange
-  } = TableContext.useTableContext();
-  const checkboxRowRef = react.useRef(null);
-  const hasExpandable = !!expandable;
-  react.useEffect(() => {
-    if (hasExpandable) {
-      const unregisterCallback = registerExpandableRow(id, expanded);
-      return unregisterCallback;
-    }
-    return void 0;
-  }, [id, hasExpandable, registerExpandableRow, expanded, expandRow]);
-  react.useEffect(() => {
-    if (!selectDisabled) {
-      const unregisterCallback = registerSelectableRow(id);
-      return unregisterCallback;
-    }
-    return void 0;
-  }, [id, registerSelectableRow, selectDisabled]);
-  const toggleRowExpand = react.useCallback(() => {
-    if (expandedRowIds[id]) {
-      collapseRow(id);
-    } else {
-      expandRow(id);
-    }
-  }, [collapseRow, expandRow, expandedRowIds, id]);
-  const canClickRowToExpand = hasExpandable && !expandButton;
-  const childrenLength = react.Children.count(children) + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
-  react.useEffect(() => {
-    if (refList && checkboxRowRef.current !== null && !refList.includes(checkboxRowRef)) {
-      setRefList([...refList, checkboxRowRef]);
-    }
-  }, [refList, setRefList]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: `${className ? `${className}` : ""}${highlightAnimation ? ` ${styles_css.tableTrAnimation}` : ""}`, "data-testid": dataTestid, role: canClickRowToExpand ? "button row" : "row", style, children: [
-      selectable ? /* @__PURE__ */ jsxRuntime.jsx(ColumnProvider.ColumnProvider, { width: themes.theme.sizing[300], children: /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { className: styles_css$1.listNoPaddingCell, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.tableCheckboxContainer, children: /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Checkbox, { "aria-label": "select", checked: selectedRowIds[id], className: inRange?.includes(id) ? styles_css$1.listCheckboxInRange : void 0, disabled: !!selectDisabled, name: "table-select-checkbox", onChange: () => handleOnChange(id, selectedRowIds[id]), ref: checkboxRowRef, value: id }) }) }) }) }) : null,
-      expandButton ? /* @__PURE__ */ jsxRuntime.jsx(ColumnProvider.ColumnProvider, { width: themes.theme.sizing[300], children: /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { className: styles_css$1.listNoPaddingCell, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: !expandable, onClick: toggleRowExpand, sentiment: "neutral", size: "xsmall", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowDownIcon, {}) }) }) }) : null,
-      react.Children.map(children, (child, index2) => {
-        const column = columns[index2];
-        return /* @__PURE__ */ jsxRuntime.jsx(ColumnProvider.ColumnProvider, { maxWidth: column?.maxWidth, minWidth: column?.minWidth, width: column?.width, children: child });
-      })
-    ] }),
-    expandable && expandedRowIds[id] ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: styles_css.tableExpandableWrapper, "data-expandable-content": true, onClick: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, onKeyDown: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { colSpan: childrenLength, children: expandable }) }) : null
-  ] });
-};
-exports.Row = Row;

package/dist/components/Table/SelectBar.cjs

@@ -1,28 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const index = require("../ActionBar/index.cjs");
-const index$1 = require("../Stack/index.cjs");
-const TableContext = require("./TableContext.cjs");
-const SelectBar = ({
-  children,
-  data,
-  idKey,
-  className
-}) => {
-  const {
-    selectedRowIds,
-    unselectAll
-  } = TableContext.useTableContext();
-  const selectedItems = react.useMemo(() => data.filter((item) => selectedRowIds[item[idKey]]), [data, idKey, selectedRowIds]);
-  if (selectedItems.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.ActionBar, { className, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { alignItems: "center", direction: "row", flex: "1 1 auto", justifyContent: "space-between", width: "100%", children: children({
-    selectedItems,
-    unselectAll
-  }) }) });
-};
-exports.SelectBar = SelectBar;

package/dist/components/Table/SkeletonRows.cjs

@@ -1,24 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const index = require("../Skeleton/index.cjs");
-const Cell = require("./Cell.cjs");
-const styles_css = require("./styles.css.cjs");
-const SkeletonRows = ({
-  selectable,
-  rows,
-  cols
-}) => {
-  const rowArray = Array.from({
-    length: rows
-  }, (_, index2) => index2);
-  const colArray = Array.from({
-    length: cols
-  }, (_, index2) => index2);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rowArray.map((index$1) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles_css.tableSkeletonRow, id: `skeleton-${index$1}`, role: "row", children: [
-    selectable ? /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, {}) : null,
-    colArray.map((columnIndex) => /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(index.Skeleton, { className: styles_css.tableSkeleton, variant: "line" }) }, columnIndex))
-  ] }, index$1)) });
-};
-exports.SkeletonRows = SkeletonRows;

package/dist/components/Table/TableContext.cjs

@@ -1,43 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const ListContext = require("../List/ListContext.cjs");
-const TableContext = react.createContext(void 0);
-const Provider = ({
-  children,
-  bordered,
-  stripped,
-  columns
-}) => {
-  const {
-    subscribeHandler,
-    ...listContext
-  } = ListContext.useListContext();
-  react.useEffect(subscribeHandler, [subscribeHandler]);
-  const value = react.useMemo(() => ({
-    ...listContext,
-    bordered,
-    columns,
-    stripped,
-    subscribeHandler
-  }), [bordered, columns, stripped, subscribeHandler, listContext]);
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value, children });
-};
-const TableProvider = ({
-  children,
-  bordered,
-  stripped,
-  columns,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(ListContext.ListProvider, { columns: [], ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Provider, { bordered, columns, stripped, ...props, children }) });
-const useTableContext = () => {
-  const context = react.useContext(TableContext);
-  if (!context) {
-    throw new Error("useTableContext should be used inside a Table component");
-  }
-  return context;
-};
-exports.TableProvider = TableProvider;
-exports.useTableContext = useTableContext;

package/dist/components/Table/constants.cjs

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SELECTABLE_CHECKBOX_SIZE = "500";
-exports.SELECTABLE_CHECKBOX_SIZE = SELECTABLE_CHECKBOX_SIZE;

package/dist/components/Table/index.cjs

@@ -1,56 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const ListContext = require("../List/ListContext.cjs");
-const styles_css$1 = require("../List/styles.css.cjs");
-const Body = require("./Body.cjs");
-const Cell = require("./Cell.cjs");
-const Header = require("./Header.cjs");
-const HeaderCell = require("./HeaderCell.cjs");
-const HeaderRow = require("./HeaderRow.cjs");
-const Row = require("./Row.cjs");
-const SelectBar = require("./SelectBar.cjs");
-const SkeletonRows = require("./SkeletonRows.cjs");
-const styles_css = require("./styles.css.cjs");
-const TableContext = require("./TableContext.cjs");
-const TableContainer = ({
-  children
-}) => {
-  const [childrenMemory, setChildrenMemory] = react.useState(react.Children.toArray(children));
-  const {
-    setRefList
-  } = ListContext.useListContext();
-  react.useEffect(() => {
-    if (react.Children.toArray(children) !== childrenMemory) {
-      setRefList([]);
-      setChildrenMemory(react.Children.toArray(children));
-    }
-  }, [children, setRefList]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css$1.listContainer, children });
-};
-const BaseTable = react.forwardRef(({
-  selectable = false,
-  expandable = false,
-  children,
-  columns,
-  loading,
-  bordered = false,
-  stripped = false,
-  autoCollapse = false,
-  onSelectedChange,
-  style
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(TableContext.TableProvider, { autoCollapse, bordered, columns, expandButton: expandable, onSelectedChange, selectable, stripped, children: /* @__PURE__ */ jsxRuntime.jsx(TableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles_css.table}${stripped ? ` ${styles_css.tableStripped}` : ""}${bordered ? ` ${styles_css.tableBordered}` : ""}`, ref, style, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(Header.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow.HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(HeaderCell.HeaderCell, { align: column.align, info: column.info, isOrdered: column.isOrdered, maxWidth: column.maxWidth, minWidth: column.minWidth, onOrder: column.onOrder, orderDirection: column.orderDirection, width: column.width, children: column.label }, `header-column-${index}`)) }) }),
-  loading ? /* @__PURE__ */ jsxRuntime.jsx(Body.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonRows.SkeletonRows, { cols: columns.length, rows: 5, selectable }) }) : children
-] }) }) }));
-const Table = Object.assign(BaseTable, {
-  Body: Body.Body,
-  Cell: Cell.Cell,
-  Row: Row.Row,
-  SelectBar: SelectBar.SelectBar,
-  useTableContext: TableContext.useTableContext
-});
-exports.BaseTable = BaseTable;
-exports.Table = Table;

package/dist/components/Table/styles.css.cjs

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                               */
-;/* empty css                            */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var table = "uv_1cpcscz1";
-var tableStripped = "uv_1cpcscz2";
-var tableBordered = "uv_1cpcscz3";
-var tableCell = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_1cpcscz4", variantClassNames: { align: { left: "uv_1cpcscz5", center: "uv_1cpcscz6", right: "uv_1cpcscz7" }, sentiment: { primary: "uv_1cpcscz8", secondary: "uv_1cpcscz9", danger: "uv_1cpcscza", info: "uv_1cpcsczb", success: "uv_1cpcsczc", warning: "uv_1cpcsczd", neutral: "uv_1cpcscze" } }, defaultVariants: {}, compoundVariants: [] });
-var tableHeader = "uv_1cpcsczf";
-var tableHeaderCell = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_1cpcsczg", variantClassNames: { checked: { true: "uv_1cpcsczh" }, align: { left: "uv_1cpcsczi", center: "uv_1cpcsczj", right: "uv_1cpcsczk" } }, defaultVariants: {}, compoundVariants: [] });
-var headerCellText = "uv_1cpcsczl";
-var tableExpandableWrapper = "uv_1cpcsczm";
-var tableCheckboxContainer = "uv_1cpcsczn";
-var tableTrAnimation = "uv_1cpcsczo";
-var tableSkeletonRow = "uv_1cpcsczp";
-var tableSkeleton = "uv_1cpcsczq";
-exports.headerCellText = headerCellText;
-exports.table = table;
-exports.tableBordered = tableBordered;
-exports.tableCell = tableCell;
-exports.tableCheckboxContainer = tableCheckboxContainer;
-exports.tableExpandableWrapper = tableExpandableWrapper;
-exports.tableHeader = tableHeader;
-exports.tableHeaderCell = tableHeaderCell;
-exports.tableSkeleton = tableSkeleton;
-exports.tableSkeletonRow = tableSkeletonRow;
-exports.tableStripped = tableStripped;
-exports.tableTrAnimation = tableTrAnimation;

package/dist/components/Table/variables.css.cjs

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var headerCellWidth = "var(--uv_z5q4ow0)";
-var headerCellMinWidth = "var(--uv_z5q4ow1)";
-var headerCellMaxWidth = "var(--uv_z5q4ow2)";
-var widthCell = "var(--uv_z5q4ow3)";
-var maxWidthCell = "var(--uv_z5q4ow4)";
-var minWidthCell = "var(--uv_z5q4ow5)";
-exports.headerCellMaxWidth = headerCellMaxWidth;
-exports.headerCellMinWidth = headerCellMinWidth;
-exports.headerCellWidth = headerCellWidth;
-exports.maxWidthCell = maxWidthCell;
-exports.minWidthCell = minWidthCell;
-exports.widthCell = widthCell;

package/dist/components/Tabs/Tab.cjs

@@ -1,52 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const index$2 = require("../Badge/index.cjs");
-const index$1 = require("../Stack/index.cjs");
-const index$3 = require("../Text/index.cjs");
-const index = require("../Tooltip/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const TabsContext = require("./TabsContext.cjs");
-const Tab = react.forwardRef(({
-  as,
-  badge,
-  children,
-  className,
-  counter,
-  disabled = false,
-  onClick,
-  onKeyDown,
-  subtitle,
-  tooltip,
-  value,
-  ...props
-}, ref) => {
-  const {
-    selected,
-    onChange
-  } = TabsContext.useTabsContext();
-  const computedAs = as ?? "button";
-  const ComputedComponent = as ?? "button";
-  const isSelected = react.useMemo(() => value !== void 0 && selected === value, [value, selected]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(ComputedComponent, { "aria-disabled": disabled, "aria-label": value ? `${value}` : void 0, "aria-selected": isSelected, className: `${className ? `${className} ` : ""}${styles_css.tabsButton}`, "data-is-selected": isSelected, disabled: computedAs === "button" ? disabled : void 0, onClick: (event) => {
-    if (value !== void 0) {
-      onChange(value);
-    }
-    onClick?.(event);
-  }, onKeyDown: (event) => {
-    onKeyDown?.(event);
-    if (!event.defaultPrevented && !disabled && value) {
-      onChange(value);
-    }
-  }, ref, role: "tab", type: computedAs === "button" ? "button" : void 0, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { direction: "column", gap: 0.5, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { alignItems: "center", direction: "row", children: [
-      children,
-      typeof counter === "number" || typeof counter === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Badge, { className: styles_css.tabsBadge, prominence: isSelected ? "strong" : "default", sentiment: isSelected ? "primary" : "neutral", size: "medium", children: counter }) : null,
-      badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_css.tabsBadgeContainer, children: badge }) : null
-    ] }),
-    subtitle ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { direction: "row", children: /* @__PURE__ */ jsxRuntime.jsx(index$3.Text, { as: "span", className: styles_css.tabsTextSelected[isSelected ? "selected" : "default"], prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: subtitle }) }) : null
-  ] }) }) });
-});
-exports.Tab = Tab;

package/dist/components/Tabs/TabMenu.cjs

@@ -1,32 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Icon = require("@ultraviolet/icons");
-const react = require("react");
-const index = require("../Menu/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const TabMenu = react.forwardRef(({
-  children,
-  disclosure,
-  visible,
-  id,
-  disabled,
-  className,
-  "aria-selected": ariaSelected,
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.tabsMenuWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
-  index.Menu,
-  {
-    disclosure: /* @__PURE__ */ jsxRuntime.jsxs("button", { "aria-disabled": disabled ?? "false", "aria-haspopup": "menu", "aria-selected": ariaSelected, className: `${className ? `${className} ` : ""}${styles_css.tabsButton}`, disabled, role: "tab", type: "button", ...props, children: [
-      disclosure,
-      /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowDownIcon, { className: styles_css.tabsArrowIcon })
-    ] }),
-    id,
-    portalTarget: document.body,
-    ref,
-    visible,
-    children
-  }
-) }));
-exports.TabMenu = TabMenu;

package/dist/components/Tabs/TabMenuItem.cjs

@@ -1,27 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const index = require("../Menu/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const TabsContext = require("./TabsContext.cjs");
-const TabMenuItem = ({
-  value,
-  children,
-  onClick,
-  ...props
-}) => {
-  const {
-    selected,
-    onChange
-  } = TabsContext.useTabsContext();
-  const isSelected = react.useMemo(() => value !== void 0 && selected === value, [value, selected]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Menu.Item, { "aria-selected": isSelected, className: styles_css.tabsTextSelected[isSelected ? "selected" : "default"], onClick: (event) => {
-    if (value !== void 0) {
-      onChange(value);
-    }
-    onClick?.(event);
-  }, ...props, children });
-};
-exports.TabMenuItem = TabMenuItem;

package/dist/components/Tabs/TabsContext.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const TabsContext = react.createContext({});
-const useTabsContext = () => react.useContext(TabsContext);
-exports.TabsContext = TabsContext;
-exports.useTabsContext = useTabsContext;

package/dist/components/Tabs/index.cjs

@@ -1,74 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const styles_css = require("./styles.css.cjs");
-const Tab = require("./Tab.cjs");
-const TabMenu = require("./TabMenu.cjs");
-const TabMenuItem = require("./TabMenuItem.cjs");
-const TabsContext = require("./TabsContext.cjs");
-const SHADOW_THRESHOLD = 10;
-const Tabs = ({
-  children = null,
-  onChange,
-  moreDisclosure = "More",
-  selected,
-  className,
-  "data-testid": dataTestId,
-  ...props
-}) => {
-  const tabsRef = react.useRef({});
-  const moreStaticRef = react.useRef(null);
-  const [displayMore, setDisplayMore] = react.useState(false);
-  const value = react.useMemo(() => ({
-    onChange,
-    selected
-  }), [selected, onChange]);
-  react.useEffect(() => {
-    setDisplayMore(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
-  }, [children]);
-  react.useEffect(() => {
-    const tab = tabsRef.current.querySelector(`[role='tab'][aria-selected='true']`);
-    if (tab && tabsRef.current.scrollTo) {
-      tabsRef.current.scrollTo({
-        behavior: "smooth",
-        left: tab.offsetLeft
-      });
-    }
-  }, [selected]);
-  react.useEffect(() => {
-    const element = tabsRef.current;
-    const moreElement = moreStaticRef.current;
-    const handler = () => {
-      if (moreElement?.style) {
-        moreElement.style.boxShadow = element.scrollLeft + SHADOW_THRESHOLD > element.scrollWidth - element.clientWidth ? "none" : "";
-      }
-    };
-    if (displayMore) {
-      element.addEventListener("scroll", handler);
-    }
-    return () => {
-      if (displayMore) {
-        element.removeEventListener("scroll", handler);
-      }
-    };
-  }, [displayMore]);
-  const menuItemChildren = react.Children.map(children, (child) => {
-    if (react.isValidElement(child)) {
-      return react.cloneElement(child, {
-        ...child.props,
-        subtitle: null
-      });
-    }
-    return null;
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.TabsContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className ? `${className} ` : ""}${styles_css.tabsContainer}`, "data-testid": dataTestId, ref: tabsRef, role: "tablist", ...props, children: [
-    children,
-    displayMore ? /* @__PURE__ */ jsxRuntime.jsx(TabMenu.TabMenu, { className: styles_css.tabsMenu, disclosure: moreDisclosure, ref: moreStaticRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.tabsMenuContainer, children: menuItemChildren }) }) : null
-  ] }) });
-};
-Tabs.Tab = Tab.Tab;
-Tabs.Menu = TabMenu.TabMenu;
-Tabs.MenuItem = TabMenuItem.TabMenuItem;
-exports.Tabs = Tabs;

package/dist/components/Tabs/styles.css.cjs

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                            */
-var tabsMenuContainer = "uv_1xz9hlg0";
-var tabsMenu = "uv_1xz9hlg1";
-var tabsContainer = "uv_1xz9hlg2";
-var tabsBadge = "uv_1xz9hlg3";
-var tabsTextSelected = { selected: "uv_1xz9hlg4", "default": "uv_1xz9hlg5" };
-var tabsBadgeContainer = "uv_1xz9hlg6";
-var tabsButton = "uv_1xz9hlg7";
-var tabsArrowIcon = "uv_1xz9hlg8";
-var tabsMenuWrapper = "uv_1xz9hlg9";
-exports.tabsArrowIcon = tabsArrowIcon;
-exports.tabsBadge = tabsBadge;
-exports.tabsBadgeContainer = tabsBadgeContainer;
-exports.tabsButton = tabsButton;
-exports.tabsContainer = tabsContainer;
-exports.tabsMenu = tabsMenu;
-exports.tabsMenuContainer = tabsMenuContainer;
-exports.tabsMenuWrapper = tabsMenuWrapper;
-exports.tabsTextSelected = tabsTextSelected;