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

package/dist/components/Table/Row.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ArrowUpIcon, ArrowDownIcon } from "@ultraviolet/icons";
 import { theme } from "@ultraviolet/themes";
 import { useRef, useEffect, useCallback, Children } from "react";
@@ -68,19 +68,75 @@ const Row = ({
     }
   }, [refList, setRefList]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("tr", { className: `${className ? `${className}` : ""}${highlightAnimation ? ` ${tableTrAnimation}` : ""}`, "data-testid": dataTestid, role: canClickRowToExpand ? "button row" : "row", style, children: [
-      selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: tableCheckboxContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select", checked: selectedRowIds[id], className: inRange?.includes(id) ? listCheckboxInRange : void 0, disabled: !!selectDisabled, name: "table-select-checkbox", onChange: () => handleOnChange(id, selectedRowIds[id]), ref: checkboxRowRef, value: id }) }) }) }) }) : null,
-      expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: !expandable, onClick: toggleRowExpand, sentiment: "neutral", size: "xsmall", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }) }) : null,
-      Children.map(children, (child, index) => {
-        const column = columns[index];
-        return /* @__PURE__ */ jsx(ColumnProvider, { maxWidth: column?.maxWidth, minWidth: column?.minWidth, width: column?.width, children: child });
-      })
-    ] }),
-    expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx("tr", { className: tableExpandableWrapper, "data-expandable-content": true, onClick: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, onKeyDown: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, children: /* @__PURE__ */ jsx(Cell, { colSpan: childrenLength, children: expandable }) }) : null
+    /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        className: `${className ? `${className}` : ""}${highlightAnimation ? ` ${tableTrAnimation}` : ""}`,
+        "data-testid": dataTestid,
+        role: canClickRowToExpand ? "button row" : "row",
+        style,
+        children: [
+          selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: tableCheckboxContainer, children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              text: typeof selectDisabled === "string" ? selectDisabled : void 0,
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": "select",
+                  checked: selectedRowIds[id],
+                  className: inRange?.includes(id) ? listCheckboxInRange : void 0,
+                  disabled: !!selectDisabled,
+                  name: "table-select-checkbox",
+                  onChange: () => handleOnChange(id, selectedRowIds[id]),
+                  ref: checkboxRowRef,
+                  value: id
+                }
+              )
+            }
+          ) }) }) }) : null,
+          expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "expand",
+              "data-testid": "list-expand-button",
+              disabled: !expandable,
+              onClick: toggleRowExpand,
+              sentiment: "neutral",
+              size: "xsmall",
+              variant: "ghost",
+              children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+            }
+          ) }) }) : null,
+          Children.map(children, (child, index) => {
+            const column = columns[index];
+            return /* @__PURE__ */ jsx(
+              ColumnProvider,
+              {
+                maxWidth: column?.maxWidth,
+                minWidth: column?.minWidth,
+                width: column?.width,
+                children: child
+              }
+            );
+          })
+        ]
+      }
+    ),
+    expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: tableExpandableWrapper,
+        "data-expandable-content": true,
+        onClick: canClickRowToExpand ? (e) => {
+          e.stopPropagation();
+        } : void 0,
+        onKeyDown: canClickRowToExpand ? (e) => {
+          e.stopPropagation();
+        } : void 0,
+        children: /* @__PURE__ */ jsx(Cell, { colSpan: childrenLength, children: expandable })
+      }
+    ) : null
   ] });
 };
 export {

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

@@ -11,5 +11,5 @@ type SelectBarProps<T> = {
      * */
     idKey: keyof T;
 };
-export declare const SelectBar: <T>({ children, data, idKey, className, }: SelectBarProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const SelectBar: <T>({ children, data, idKey, className, }: SelectBarProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Table/SelectBar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { ActionBar } from "../ActionBar/index.js";
 import { Stack } from "../Stack/index.js";
@@ -10,18 +10,28 @@ const SelectBar = ({
   idKey,
   className
 }) => {
-  const {
-    selectedRowIds,
-    unselectAll
-  } = useTableContext();
-  const selectedItems = useMemo(() => data.filter((item) => selectedRowIds[item[idKey]]), [data, idKey, selectedRowIds]);
+  const { selectedRowIds, unselectAll } = useTableContext();
+  const selectedItems = useMemo(
+    () => data.filter((item) => selectedRowIds[item[idKey]]),
+    [data, idKey, selectedRowIds]
+  );
   if (selectedItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ActionBar, { className, children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", direction: "row", flex: "1 1 auto", justifyContent: "space-between", width: "100%", children: children({
-    selectedItems,
-    unselectAll
-  }) }) });
+  return /* @__PURE__ */ jsx(ActionBar, { className, children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      alignItems: "center",
+      direction: "row",
+      flex: "1 1 auto",
+      justifyContent: "space-between",
+      width: "100%",
+      children: children({
+        selectedItems,
+        unselectAll
+      })
+    }
+  ) });
 };
 export {
   SelectBar

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

@@ -3,5 +3,5 @@ type SkeletonRowsProps = {
     rows: number;
     cols: number;
 };
-export declare const SkeletonRows: ({ selectable, rows, cols }: SkeletonRowsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SkeletonRows: ({ selectable, rows, cols }: SkeletonRowsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/SkeletonRows.js

@@ -1,23 +1,24 @@
 "use client";
-import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Skeleton } from "../Skeleton/index.js";
 import { Cell } from "./Cell.js";
 import { tableSkeletonRow, tableSkeleton } from "./styles.css.js";
-const SkeletonRows = ({
-  selectable,
-  rows,
-  cols
-}) => {
-  const rowArray = Array.from({
-    length: rows
-  }, (_, index) => index);
-  const colArray = Array.from({
-    length: cols
-  }, (_, index) => index);
-  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs("tr", { className: tableSkeletonRow, id: `skeleton-${index}`, role: "row", children: [
-    selectable ? /* @__PURE__ */ jsx(Cell, {}) : null,
-    colArray.map((columnIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: tableSkeleton, variant: "line" }) }, columnIndex))
-  ] }, index)) });
+const SkeletonRows = ({ selectable, rows, cols }) => {
+  const rowArray = Array.from({ length: rows }, (_, index) => index);
+  const colArray = Array.from({ length: cols }, (_, index) => index);
+  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: tableSkeletonRow,
+      id: `skeleton-${index}`,
+      role: "row",
+      children: [
+        selectable ? /* @__PURE__ */ jsx(Cell, {}) : null,
+        colArray.map((columnIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: tableSkeleton, variant: "line" }) }, columnIndex))
+      ]
+    },
+    index
+  )) });
 };
 export {
   SkeletonRows

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

@@ -9,6 +9,6 @@ export type TableProviderProps = Omit<ListProviderProps, 'columns'> & {
     bordered: boolean;
     columns: ColumnProps[];
 };
-export declare const TableProvider: ({ children, bordered, stripped, columns, ...props }: TableProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableProvider: ({ children, bordered, stripped, columns, ...props }: TableProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useTableContext: () => TableContextValue;
 export {};

package/dist/components/Table/TableContext.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, createContext, useEffect, useMemo } from "react";
 import { ListProvider, useListContext } from "../List/ListContext.js";
 const TableContext = createContext(void 0);
@@ -9,18 +9,18 @@ const Provider = ({
   stripped,
   columns
 }) => {
-  const {
-    subscribeHandler,
-    ...listContext
-  } = useListContext();
+  const { subscribeHandler, ...listContext } = useListContext();
   useEffect(subscribeHandler, [subscribeHandler]);
-  const value = useMemo(() => ({
-    ...listContext,
-    bordered,
-    columns,
-    stripped,
-    subscribeHandler
-  }), [bordered, columns, stripped, subscribeHandler, listContext]);
+  const value = useMemo(
+    () => ({
+      ...listContext,
+      bordered,
+      columns,
+      stripped,
+      subscribeHandler
+    }),
+    [bordered, columns, stripped, subscribeHandler, listContext]
+  );
   return /* @__PURE__ */ jsx(TableContext.Provider, { value, children });
 };
 const TableProvider = ({
@@ -29,7 +29,16 @@ const TableProvider = ({
   stripped,
   columns,
   ...props
-}) => /* @__PURE__ */ jsx(ListProvider, { columns: [], ...props, children: /* @__PURE__ */ jsx(Provider, { bordered, columns, stripped, ...props, children }) });
+}) => /* @__PURE__ */ jsx(ListProvider, { columns: [], ...props, children: /* @__PURE__ */ jsx(
+  Provider,
+  {
+    bordered,
+    columns,
+    stripped,
+    ...props,
+    children
+  }
+) });
 const useTableContext = () => {
   const context = useContext(TableContext);
   if (!context) {

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

@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { TableProviderProps } from './TableContext';
 import type { ColumnProps } from './types';
-export declare const BaseTable: import("react").ForwardRefExoticComponent<Omit<TableProviderProps, "columns" | "loading" | "bordered" | "autoCollapse" | "selectable" | "expandButton" | "stripped"> & {
+export declare const BaseTable: import("react").ForwardRefExoticComponent<Omit<TableProviderProps, "columns" | "bordered" | "loading" | "autoCollapse" | "selectable" | "expandButton" | "stripped"> & {
     selectable?: boolean;
     /**
      * Set it to true if you want to display a placeholder during loading
@@ -21,7 +21,7 @@ export declare const BaseTable: import("react").ForwardRefExoticComponent<Omit<T
 /**
  * Table is a component that displays data in a tabular format.
  */
-export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProviderProps, "columns" | "loading" | "bordered" | "autoCollapse" | "selectable" | "expandButton" | "stripped"> & {
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProviderProps, "columns" | "bordered" | "loading" | "autoCollapse" | "selectable" | "expandButton" | "stripped"> & {
     selectable?: boolean;
     /**
      * Set it to true if you want to display a placeholder during loading
@@ -40,7 +40,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<Table
 } & import("react").RefAttributes<HTMLTableElement>> & {
     Body: ({ children }: {
         children: ReactNode;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Cell: ({ children, className, colSpan, rowSpan, sentiment, align, style, }: {
         children?: ReactNode;
         className?: string;
@@ -49,7 +49,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<Table
         sentiment?: import("../../theme").Color;
         align?: "left" | "right" | "center";
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Row: ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, style, "data-testid": dataTestid, }: {
         children: ReactNode;
         expandable?: ReactNode;
@@ -60,7 +60,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<Table
         highlightAnimation?: boolean;
         expanded?: boolean;
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     SelectBar: <T>({ children, data, idKey, className, }: {
         className?: string;
         children: (p: {
@@ -69,7 +69,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<Table
         }) => ReactNode;
         data: T[];
         idKey: keyof T;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     useTableContext: () => Omit<import("../List/ListContext").ListContextValue, "columns"> & {
         stripped: boolean;
         columns: ColumnProps[];

package/dist/components/Table/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, Children, useEffect } from "react";
 import { useListContext } from "../List/ListContext.js";
 import { listContainer } from "../List/styles.css.js";
@@ -13,13 +13,11 @@ import { SelectBar } from "./SelectBar.js";
 import { SkeletonRows } from "./SkeletonRows.js";
 import { table, tableStripped, tableBordered } from "./styles.css.js";
 import { useTableContext, TableProvider } from "./TableContext.js";
-const TableContainer = ({
-  children
-}) => {
-  const [childrenMemory, setChildrenMemory] = useState(Children.toArray(children));
-  const {
-    setRefList
-  } = useListContext();
+const TableContainer = ({ children }) => {
+  const [childrenMemory, setChildrenMemory] = useState(
+    Children.toArray(children)
+  );
+  const { setRefList } = useListContext();
   useEffect(() => {
     if (Children.toArray(children) !== childrenMemory) {
       setRefList([]);
@@ -28,21 +26,64 @@ const TableContainer = ({
   }, [children, setRefList]);
   return /* @__PURE__ */ jsx("div", { className: listContainer, children });
 };
-const BaseTable = forwardRef(({
-  selectable = false,
-  expandable = false,
-  children,
-  columns,
-  loading,
-  bordered = false,
-  stripped = false,
-  autoCollapse = false,
-  onSelectedChange,
-  style
-}, ref) => /* @__PURE__ */ jsx(TableProvider, { autoCollapse, bordered, columns, expandButton: expandable, onSelectedChange, selectable, stripped, children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs("table", { className: `${table}${stripped ? ` ${tableStripped}` : ""}${bordered ? ` ${tableBordered}` : ""}`, ref, style, children: [
-  /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsx(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__ */ jsx(Body, { children: /* @__PURE__ */ jsx(SkeletonRows, { cols: columns.length, rows: 5, selectable }) }) : children
-] }) }) }));
+const BaseTable = forwardRef(
+  ({
+    selectable = false,
+    expandable = false,
+    children,
+    columns,
+    loading,
+    bordered = false,
+    stripped = false,
+    autoCollapse = false,
+    onSelectedChange,
+    style
+  }, ref) => /* @__PURE__ */ jsx(
+    TableProvider,
+    {
+      autoCollapse,
+      bordered,
+      columns,
+      expandButton: expandable,
+      onSelectedChange,
+      selectable,
+      stripped,
+      children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: `${table}${stripped ? ` ${tableStripped}` : ""}${bordered ? ` ${tableBordered}` : ""}`,
+          ref,
+          style,
+          children: [
+            /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsx(
+              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__ */ jsx(Body, { children: /* @__PURE__ */ jsx(
+              SkeletonRows,
+              {
+                cols: columns.length,
+                rows: 5,
+                selectable
+              }
+            ) }) : children
+          ]
+        }
+      ) })
+    }
+  )
+);
 const Table = Object.assign(BaseTable, {
   Body,
   Cell,

package/dist/components/Tabs/Tab.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { Badge } from "../Badge/index.js";
 import { Stack } from "../Stack/index.js";
@@ -7,46 +7,84 @@ import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { tabsButton, tabsBadge, tabsBadgeContainer, tabsTextSelected } from "./styles.css.js";
 import { useTabsContext } from "./TabsContext.js";
-const Tab = forwardRef(({
-  as,
-  badge,
-  children,
-  className,
-  counter,
-  disabled = false,
-  onClick,
-  onKeyDown,
-  subtitle,
-  tooltip,
-  value,
-  ...props
-}, ref) => {
-  const {
-    selected,
-    onChange
-  } = useTabsContext();
-  const computedAs = as ?? "button";
-  const ComputedComponent = as ?? "button";
-  const isSelected = useMemo(() => value !== void 0 && selected === value, [value, selected]);
-  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(ComputedComponent, { "aria-disabled": disabled, "aria-label": value ? `${value}` : void 0, "aria-selected": isSelected, className: `${className ? `${className} ` : ""}${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__ */ jsxs(Stack, { direction: "column", gap: 0.5, children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", children: [
-      children,
-      typeof counter === "number" || typeof counter === "string" ? /* @__PURE__ */ jsx(Badge, { className: tabsBadge, prominence: isSelected ? "strong" : "default", sentiment: isSelected ? "primary" : "neutral", size: "medium", children: counter }) : null,
-      badge ? /* @__PURE__ */ jsx("span", { className: tabsBadgeContainer, children: badge }) : null
-    ] }),
-    subtitle ? /* @__PURE__ */ jsx(Stack, { direction: "row", children: /* @__PURE__ */ jsx(Text, { as: "span", className: tabsTextSelected[isSelected ? "selected" : "default"], prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: subtitle }) }) : null
-  ] }) }) });
-});
+const Tab = forwardRef(
+  ({
+    as,
+    badge,
+    children,
+    className,
+    counter,
+    disabled = false,
+    onClick,
+    onKeyDown,
+    subtitle,
+    tooltip,
+    value,
+    ...props
+  }, ref) => {
+    const { selected, onChange } = useTabsContext();
+    const computedAs = as ?? "button";
+    const ComputedComponent = as ?? "button";
+    const isSelected = useMemo(
+      () => value !== void 0 && selected === value,
+      [value, selected]
+    );
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+      ComputedComponent,
+      {
+        "aria-disabled": disabled,
+        "aria-label": value ? `${value}` : void 0,
+        "aria-selected": isSelected,
+        className: `${className ? `${className} ` : ""}${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__ */ jsxs(Stack, { direction: "column", gap: 0.5, children: [
+          /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", children: [
+            children,
+            typeof counter === "number" || typeof counter === "string" ? /* @__PURE__ */ jsx(
+              Badge,
+              {
+                className: tabsBadge,
+                prominence: isSelected ? "strong" : "default",
+                sentiment: isSelected ? "primary" : "neutral",
+                size: "medium",
+                children: counter
+              }
+            ) : null,
+            badge ? /* @__PURE__ */ jsx("span", { className: tabsBadgeContainer, children: badge }) : null
+          ] }),
+          subtitle ? /* @__PURE__ */ jsx(Stack, { direction: "row", children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "span",
+              className: tabsTextSelected[isSelected ? "selected" : "default"],
+              prominence: "weak",
+              sentiment: "neutral",
+              variant: "bodySmall",
+              children: subtitle
+            }
+          ) }) : null
+        ] })
+      }
+    ) });
+  }
+);
 export {
   Tab
 };

package/dist/components/Tabs/TabMenu.js

@@ -1,32 +1,48 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDownIcon } from "@ultraviolet/icons";
 import { forwardRef } from "react";
 import { Menu } from "../Menu/index.js";
 import { tabsMenuWrapper, tabsButton, tabsArrowIcon } from "./styles.css.js";
-const TabMenu = forwardRef(({
-  children,
-  disclosure,
-  visible,
-  id,
-  disabled,
-  className,
-  "aria-selected": ariaSelected,
-  ...props
-}, ref) => /* @__PURE__ */ jsx("div", { className: tabsMenuWrapper, children: /* @__PURE__ */ jsx(
-  Menu,
-  {
-    disclosure: /* @__PURE__ */ jsxs("button", { "aria-disabled": disabled ?? "false", "aria-haspopup": "menu", "aria-selected": ariaSelected, className: `${className ? `${className} ` : ""}${tabsButton}`, disabled, role: "tab", type: "button", ...props, children: [
-      disclosure,
-      /* @__PURE__ */ jsx(ArrowDownIcon, { className: tabsArrowIcon })
-    ] }),
-    id,
-    portalTarget: document.body,
-    ref,
+const TabMenu = forwardRef(
+  ({
+    children,
+    disclosure,
     visible,
-    children
-  }
-) }));
+    id,
+    disabled,
+    className,
+    "aria-selected": ariaSelected,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx("div", { className: tabsMenuWrapper, children: /* @__PURE__ */ jsx(
+    Menu,
+    {
+      disclosure: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          "aria-disabled": disabled ?? "false",
+          "aria-haspopup": "menu",
+          "aria-selected": ariaSelected,
+          className: `${className ? `${className} ` : ""}${tabsButton}`,
+          disabled,
+          role: "tab",
+          type: "button",
+          ...props,
+          children: [
+            disclosure,
+            /* @__PURE__ */ jsx(ArrowDownIcon, { className: tabsArrowIcon })
+          ]
+        }
+      ),
+      id,
+      placement: "bottom",
+      portalTarget: document.body,
+      ref,
+      visible,
+      children
+    }
+  ) })
+);
 export {
   TabMenu
 };

package/dist/components/Tabs/TabMenuItem.d.ts

@@ -3,5 +3,5 @@ import { Menu } from '../Menu';
 type TabMenuItemProps = {
     value?: string | number;
 } & ComponentProps<typeof Menu.Item>;
-export declare const TabMenuItem: ({ value, children, onClick, ...props }: TabMenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TabMenuItem: ({ value, children, onClick, ...props }: TabMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};