@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/tabs/tabs.js

@@ -1,23 +1,23 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { e as $880e95eb8b93ba9a$export$ecf600387e221c37, m as $ae20dd8cbca75726$export$d6daf82dcd84e87c, f as $e1995378a142960e$export$18af5c7a9e9b3664, h as $e1995378a142960e$export$fb8073518f34e6ec, j as $7135fc7d473fd974$export$4feb769f8ddf26c5, n as $7135fc7d473fd974$export$a164736487e3f0ae, g as $e1995378a142960e$export$bf788dd355e3a401, o as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, p as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "../../SelectionManager-D77bfEbg.js";
-import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, l as $df56164dff5785e2$export$4338b53315abf666, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-cvK1vxO7.js";
+import { e as $880e95eb8b93ba9a$export$ecf600387e221c37, m as $ae20dd8cbca75726$export$d6daf82dcd84e87c, f as $e1995378a142960e$export$18af5c7a9e9b3664, h as $e1995378a142960e$export$fb8073518f34e6ec, j as $7135fc7d473fd974$export$4feb769f8ddf26c5, n as $7135fc7d473fd974$export$a164736487e3f0ae, g as $e1995378a142960e$export$bf788dd355e3a401, o as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, p as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "../../SelectionManager-N8X7T_4D.js";
+import { j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $3ef42575df84b30b$export$9d1611c77c2fe928, b as $bdb11010cef70236$export$f680877a34711e37, k as $df56164dff5785e2$export$4338b53315abf666, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-DGpXyJOJ.js";
 import { $ as $1d5b8b8664671ef2$export$c9549807523555e0 } from "../../SelectionIndicator-D7WMzeAW.js";
-import { $ as $c8a5a149f625efcf$export$758399f318e6385a } from "../../SharedElementTransition-BjRNHsjx.js";
-import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
+import { $ as $c8a5a149f625efcf$export$758399f318e6385a } from "../../SharedElementTransition-BDT84GtD.js";
+import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-Rfj-STx7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-DZycqxCn.js";
-import React__default, { useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, isValidElement, useId, cloneElement } from "react";
-import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-BCEPS3hl.js";
-import { $ as $f645667febf57a63$export$4c014de7c8940b4c, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-BRDW3y7-.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Cdxi6JSa.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-B5vxRkHm.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-BFZEfeqI.js";
+import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-ZKhRO8ML.js";
+import $dbSRa$react__default, { useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, isValidElement, useId, cloneElement } from "react";
+import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-B8OteQMu.js";
+import { $ as $f645667febf57a63$export$4c014de7c8940b4c, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B49ptFDX.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-BMk5oZCk.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BQvmiUqb.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-BBTu4shO.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { c as cva } from "../../index-Dq3gT5pW.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 import { Notice } from "../notice/notice.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
@@ -257,9 +257,9 @@ const $5e8ad37a45e1c704$export$b2539bed5023c21c = /* @__PURE__ */ forwardRef(fun
     children,
     orientation
   ]);
-  return /* @__PURE__ */ React__default.createElement($e1995378a142960e$export$bf788dd355e3a401, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($e1995378a142960e$export$bf788dd355e3a401, {
     content: children
-  }, (collection) => /* @__PURE__ */ React__default.createElement($5e8ad37a45e1c704$var$TabsInner, {
+  }, (collection) => /* @__PURE__ */ $dbSRa$react__default.createElement($5e8ad37a45e1c704$var$TabsInner, {
     props,
     collection,
     tabsRef: ref
@@ -292,7 +292,7 @@ function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
   let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
     global: true
   });
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, focusProps),
     ref,
     slot: props.slot || void 0,
@@ -300,7 +300,7 @@ function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
     "data-orientation": orientation,
     "data-focus-visible": isFocusVisible || void 0,
     "data-disabled": state.isDisabled || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f,
@@ -315,10 +315,10 @@ function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
 }
 const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = /* @__PURE__ */ forwardRef(function TabList(props, ref) {
   let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
-  return state ? /* @__PURE__ */ React__default.createElement($5e8ad37a45e1c704$var$TabListInner, {
+  return state ? /* @__PURE__ */ $dbSRa$react__default.createElement($5e8ad37a45e1c704$var$TabListInner, {
     props,
     forwardedRef: ref
-  }) : /* @__PURE__ */ React__default.createElement($e1995378a142960e$export$fb8073518f34e6ec, props);
+  }) : /* @__PURE__ */ $dbSRa$react__default.createElement($e1995378a142960e$export$fb8073518f34e6ec, props);
 });
 function $5e8ad37a45e1c704$var$TabListInner({ props, forwardedRef: ref }) {
   let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
@@ -343,11 +343,11 @@ function $5e8ad37a45e1c704$var$TabListInner({ props, forwardedRef: ref }) {
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tabListProps),
     ref: objectRef,
     "data-orientation": orientation || void 0
-  }, /* @__PURE__ */ React__default.createElement($c8a5a149f625efcf$export$758399f318e6385a, null, /* @__PURE__ */ React__default.createElement(CollectionRoot, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($c8a5a149f625efcf$export$758399f318e6385a, null, /* @__PURE__ */ $dbSRa$react__default.createElement(CollectionRoot, {
     collection: state.collection,
     persistedKeys: $7135fc7d473fd974$export$90e00781bc59d8f9(state.selectionManager.focusedKey)
   })));
@@ -389,7 +389,7 @@ const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ $e1995378a1429
   });
   delete DOMProps.id;
   delete DOMProps.onClick;
-  return /* @__PURE__ */ React__default.createElement(ElementType, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement(ElementType, {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, tabProps, focusProps, hoverProps),
     ref,
     "data-selected": isSelected || void 0,
@@ -398,7 +398,7 @@ const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ $e1995378a1429
     "data-focus-visible": isFocusVisible || void 0,
     "data-pressed": isPressed || void 0,
     "data-hovered": isHovered || void 0
-  }, /* @__PURE__ */ React__default.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, {
     value: {
       isSelected
     }
@@ -428,7 +428,7 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
   });
   delete DOMProps.id;
   let domProps = isSelected ? $3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, tabPanelProps, focusProps, renderProps) : renderProps;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...domProps,
     ref,
     "data-focused": isFocused || void 0,
@@ -436,7 +436,7 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
     // @ts-ignore
     inert: $cdc5a6778b766db2$export$a9d04c5684123369(!isSelected || props.inert),
     "data-inert": !isSelected ? "true" : void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f,
@@ -447,7 +447,7 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
         null
       ]
     ]
-  }, /* @__PURE__ */ React__default.createElement($7135fc7d473fd974$export$4feb769f8ddf26c5.Provider, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($7135fc7d473fd974$export$4feb769f8ddf26c5.Provider, {
     value: $7135fc7d473fd974$export$a164736487e3f0ae
   }, renderProps.children)));
 });
@@ -459,11 +459,12 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
  * @param {boolean} [props.vertical=false] - Whether the tabs are vertical.
  * @param {string} [props.className] - Classes to pass to the tabs container.
  * @param {TabsType} [props.type='underline'] - Design of the tabs.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Tabs component.
  *
- * @typedef {'underline' | 'pill' | 'pillInverse' | 'pillCompact' | 'pillCompactInverse' | 'pillOutline' | 'pillCompactOutline'} TabsType
+ * @typedef {'underline' | 'underlineSecondary' | 'pill' | 'pillCompact' | 'bubble' | 'chips'} TabsType
  *
  * @example
  * <Tabs>
@@ -478,7 +479,7 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
  * @preserve
  */
 const Tabs2 = (props) => {
-  const { children, vertical, className, hidden, type = "underline", ...rest } = props;
+  const { children, vertical, className, hidden, type = "underline", flat, ...rest } = props;
   const baseId = useId();
   if (hidden) {
     return null;
@@ -506,7 +507,8 @@ const Tabs2 = (props) => {
               id: `tab-${baseId}-${i + 1}`,
               key: i,
               isParentVertical: vertical,
-              type
+              type,
+              flat
             })
           )
         )
@@ -518,7 +520,10 @@ const Tabs2 = (props) => {
         cloneElement(child, {
           id: `tab-${baseId}-${tabPanelCounter++}`,
           key: index,
-          className: clsx(child.props.className, vertical && "es:pl-3")
+          className: child.props.className,
+          flat,
+          type,
+          vertical
         })
       ];
     }
@@ -544,7 +549,12 @@ const Tabs2 = (props) => {
     {
       ...rest,
       orientation: vertical ? "vertical" : "horizontal",
-      className: clsx(vertical ? "es:grid es:size-full es:min-h-40 es:grid-cols-[minmax(0,15rem)_2fr] es:gap-4" : "es:flex-col", className),
+      className: clsx(
+        vertical ? "es:grid es:gap-4" : "es:flex-col",
+        vertical && ["underline", "underlineSecondary", "bubble"].includes(type) && "es:grid-cols-[minmax(0,7.5rem)_minmax(0,1fr)]",
+        vertical && !["underline", "underlineSecondary", "bubble"].includes(type) && "es:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]",
+        className
+      ),
       children: childrenWithIds
     }
   );
@@ -564,22 +574,92 @@ Tabs2.displayName = "Tabs";
  * @preserve
  */
 const TabList2 = (props) => {
-  const { children, "aria-label": ariaLabel, className, type, ...other } = props;
+  const { children, "aria-label": ariaLabel, className, type, flat, ...other } = props;
+  const tabListClasses = cva(["es:flex", className], {
+    variants: {
+      type: {
+        bubble: "es:bg-white es:rounded-28 es:p-1.5 es:gap-px"
+      },
+      orientation: {
+        horizontal: "es:overflow-x-auto es:overflow-y-visible es:max-h-none es:items-stretch",
+        vertical: "es:flex-col es:gap-0.75 es:overflow-y-auto es:self-start es:max-h-[85vh]"
+      }
+    },
+    compoundVariants: [
+      {
+        type: ["underline", "underlineSecondary"],
+        orientation: "vertical",
+        class: "es:bg-white"
+      },
+      {
+        type: ["underline", "underlineSecondary"],
+        orientation: "horizontal",
+        class: "es:border-b es:border-b-secondary-200 es:justify-center-safe es:rounded-t-lg"
+      },
+      {
+        type: ["underline", "underlineSecondary"],
+        orientation: "horizontal",
+        class: "es:px-1"
+      },
+      {
+        type: ["underline", "underlineSecondary"],
+        orientation: "vertical",
+        class: "es:rounded-28 es:p-1.5"
+      },
+      {
+        type: "underline",
+        orientation: "horizontal",
+        class: "es:gap-px"
+      },
+      //
+      {
+        type: ["bubble"],
+        orientation: "horizontal",
+        class: "es:h-15 es:has-any-icon:h-20"
+      },
+      //
+      {
+        type: ["pill", "pillCompact"],
+        class: "es:bg-secondary-50"
+      },
+      {
+        type: ["pill", "pillCompact"],
+        orientation: "horizontal",
+        class: "es:rounded-full es:gap-0.5 es:mx-auto es:w-fit"
+      },
+      {
+        type: ["pill"],
+        orientation: "vertical",
+        class: "es:rounded-4xl es:p-3"
+      },
+      {
+        type: ["pillCompact"],
+        orientation: "vertical",
+        class: "es:rounded-3xl es:p-3"
+      },
+      //
+      {
+        type: ["chips"],
+        orientation: "horizontal",
+        class: "es:flex es:gap-0.75 es:rounded-xl"
+      },
+      // Flat.
+      {
+        type: ["pill", "pillCompact"],
+        flat: false,
+        class: "es:shadow es:shadow-black/5"
+      }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      flat: false
+    }
+  });
   return /* @__PURE__ */ jsx(
     $5e8ad37a45e1c704$export$e51a686c67fdaa2d,
     {
       "aria-label": ariaLabel ?? __("tabs", "eightshift-ui-components"),
-      className: ({ orientation }) => {
-        const horizontal = orientation === "horizontal";
-        const vertical = orientation === "vertical";
-        return clsx(
-          "es:flex es:p-0.5 es:-m-0.5",
-          vertical && "es:h-full es:flex-col es:gap-1.5 es:pr-1.5 es:overflow-y-auto es:overflow-x-visible",
-          horizontal && "es:w-full es:items-stretch es:gap-1.5 es:overflow-x-auto es:overflow-y-visible es:mb-3",
-          horizontal && type === "underline" && 'es:relative es:isolate es:after:content-[""] es:after:-z-10 es:after:absolute es:after:bottom-0.5 es:after:left-0 es:after:w-full es:after:h-px es:after:bg-secondary-300',
-          className
-        );
-      },
+      className: ({ orientation }) => tabListClasses({ orientation, type, flat }),
       ...other,
       children
     }
@@ -606,88 +686,258 @@ TabList2.displayName = "TabList";
  * @preserve
  */
 const Tab = (props) => {
-  const { children, disabled, isParentVertical, className, icon, label, subtitle, type, badge, invisible, ...other } = props;
+  const { children, disabled, isParentVertical, className, badgeClassName, icon, label, subtitle, type, badge, invisible, flat, ...other } = props;
   const componentClasses = cva(
     [
-      "es:group es:flex es:items-center es:gap-1.5 es:relative es:shrink-0",
-      "es:select-none es:text-sm es:transition es:not-disabled:cursor-pointer",
-      "es:any-focus:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-      !(type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:min-h-9.5",
-      isParentVertical && (type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:min-h-8",
+      "es:group es:relative es:shrink-0",
+      "es:flex es:items-center es:gap-1.5",
+      "es:select-none es:not-disabled:cursor-pointer",
+      "es:transition-plus es:text-center es:text-12 es:leading-[1.15] es:text-box-trim",
+      "es:any-focus:outline-hidden",
+      "es:contrast-more:inset-ring es:contrast-more:inset-ring-accent-500/0 es:contrast-more:focus-visible:inset-ring-accent-500",
+      "es:disabled:text-secondary-400",
+      'es:font-variation-["wdth"_120,"YTLC"_560,"wght"_375] es:selected:font-variation-["wdth"_120,"YTLC"_560,"wght"_375,"GRAD"_80]',
       invisible && "es:hidden",
       className
     ],
     {
-      variants: {
-        type: {
-          underline: "es:disabled:text-secondary-400 es:selected:text-accent-950",
-          pill: "es:font-[450] es:border es:border-transparent es:px-2.5 es:py-0.25 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-gradient-to-br es:selected:from-accent-400/10 es:selected:to-accent-400/20 es:selected:border-accent-400/10 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillOutline: "es:font-[450] es:border es:border-transparent es:selected:border-accent-500 es:px-2.5 es:py-0.25 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-700 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillInverse: "es:font-[450] es:border es:border-transparent es:px-2.5 es:py-0.25 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-accent-600 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillCompact: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-gradient-to-br es:selected:from-accent-400/15 es:selected:to-accent-400/20 es:selected:border-accent-400/10 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillCompactInverse: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-accent-600 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillCompactOutline: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:selected:border-accent-500 es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-700 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75"
-        }
-      },
+      variants: {},
       compoundVariants: [
+        { type: ["underline", "underlineSecondary", "bubble"], class: ["es:flex-col es:justify-center-safe", "es:text-secondary-700 es:selected:text-accent-700"] },
+        {
+          type: ["pill", "pillCompact"],
+          vertical: true,
+          flat: false,
+          class: "es:selected:shadow-md es:selected:shadow-accent-700/10"
+        },
         {
           vertical: false,
           type: "underline",
           class: [
-            "es:px-2 es:py-2.5 es:rounded-lg",
-            'es:after:content-[""] es:after:absolute es:after:bottom-px es:after:left-0 es:after:right-0 es:after:w-5/6 es:after:mx-auto es:after:h-0.75',
+            "es:px-3 es:not-has-any-icon:py-3 es:has-any-icon:py-2.5 es:rounded-t-lg es:min-h-12",
+            'es:after:content-[""] es:after:absolute es:after:bottom-0 es:after:left-0 es:after:right-0 es:after:w-3/5 es:after:mx-auto es:after:h-0.75 es:selected:after:bg-accent-600',
+            "es:selected:after:inset-shadow-xs es:selected:after:inset-shadow-accent-50/30",
+            "es:not-selected:hover:bg-secondary-50 es:selected:hover:bg-accent-600/5",
+            "es:selected:text-accent-600",
+            "es:after:rounded-t-full es:after:transition"
+          ]
+        },
+        {
+          vertical: false,
+          type: "underlineSecondary",
+          class: [
+            "es:px-3 es:pt-2 es:pb-2.5 es:rounded-t-sm es:min-h-12",
+            "es:not-selected:hover:bg-secondary-50 es:selected:hover:bg-accent-600/5",
+            'es:after:content-[""] es:after:absolute es:after:bottom-0 es:after:left-0 es:after:right-0 es:after:w-full es:after:mx-auto es:after:h-0.75',
             "es:after:bg-linear-to-b es:hover:not-selected:not-disabled:after:from-secondary-200 es:hover:not-selected:not-disabled:after:to-secondary-300 es:selected:after:from-accent-500 es:selected:after:to-accent-600",
-            "es:after:rounded-t-full es:selected:after:shadow-sm es:selected:after:shadow-accent-700/30 es:after:transition"
+            "es:after:transition"
           ]
         },
         {
           vertical: true,
-          type: "underline",
+          type: ["underline", "underlineSecondary"],
+          class: [
+            "es:p-2 es:rounded-xl es:not-has-any-icon:rounded-3xl es:has-any-icon:aspect-4/3 es:not-has-any-icon:aspect-5/3",
+            "es:text-secondary-500 es:selected:text-accent-800",
+            "es:not-has-any-icon:selected:bg-accent-600/5 es:not-has-any-icon:not-selected:hover:bg-secondary-50"
+          ]
+        },
+        //
+        {
+          type: ["bubble"],
+          class: [
+            "es:rounded-xl es:not-has-any-icon:rounded-3xl",
+            "es:text-secondary-500 es:selected:text-accent-800",
+            "es:not-has-any-icon:selected:bg-accent-600/5 es:not-has-any-icon:not-selected:hover:bg-secondary-50"
+          ]
+        },
+        {
+          type: ["bubble"],
+          vertical: false,
+          class: "es:px-2 es:py-0.5 es:grow"
+        },
+        {
+          type: ["bubble"],
+          vertical: true,
+          class: "es:p-2 es:has-any-icon:aspect-4/3 es:not-has-any-icon:aspect-5/3"
+        },
+        //
+        {
+          type: ["pill", "pillCompact"],
+          class: [
+            "es:rounded-full",
+            "es:selected:bg-accent-50 es:not-selected:hover:bg-secondary-100 es:selected:text-accent-900",
+            "es:bg-linear-to-br es:selected:from-accent-600/5 es:selected:to-accent-600/15",
+            "es:selected:inset-ring es:selected:inset-ring-accent-600/10"
+          ]
+        },
+        {
+          type: ["pill"],
+          class: ["es:py-3 es:min-h-12"]
+        },
+        {
+          type: ["pillCompact"],
+          class: ["es:py-2 es:min-h-9.5"]
+        },
+        //
+        {
+          type: ["pill"],
+          vertical: false,
+          class: ["es:justify-center es:px-6"]
+        },
+        {
+          type: ["pillCompact"],
+          vertical: false,
+          class: ["es:justify-center es:px-3"]
+        },
+        {
+          type: ["pill"],
+          vertical: true,
+          class: ["es:pl-5 es:has-any-icon:pl-4 es:pr-6"]
+        },
+        {
+          type: ["pillCompact"],
+          vertical: true,
+          class: ["es:pl-4 es:has-any-icon:pl-3 es:pr-3"]
+        },
+        //
+        {
+          type: ["chips"],
           class: [
-            "es:pl-3 es:pr-2 es:py-2.5 es:rounded-lg es:selected:bg-accent-50/50 es:selected:text-accent-950 es:transition",
-            'es:after:content-[""] es:after:absolute es:after:-left-0 es:after:top-0 es:after:bottom-0 es:after:h-5/6 es:after:my-auto es:after:w-1',
-            "es:after:bg-linear-to-r es:hover:not-selected:not-disabled:after:from-secondary-200 es:hover:not-selected:not-disabled:after:to-secondary-300 es:selected:after:from-accent-500 es:selected:after:to-accent-600",
-            "es:after:rounded-full es:selected:after:shadow-sm es:selected:after:shadow-accent-700/30 es:after:transition"
+            "es:bg-secondary-50 es:selected:bg-accent-500",
+            "es:inset-ring es:inset-ring-secondary-200/30 es:selected:inset-ring-accent-600/30",
+            "es:bg-linear-to-b es:from-25% es:from-accent-700/0 es:to-accent-700/0 es:selected:from-accent-700/10 es:selected:to-accent-700/30",
+            "es:selected:inset-shadow-sm es:selected:inset-shadow-accent-50/30",
+            "es:text-secondary-700 es:selected:text-white",
+            "es:min-h-7.5 es:rounded-lg es:selected:rounded-xl",
+            "es:transition-plus",
+            "es:pl-3 es:has-any-icon:pl-2 es:pr-3 es:py-1.5",
+            !flat && "es:selected:shadow-xs es:selected:shadow-black/5"
           ]
         }
       ]
     }
   );
+  const iconClasses = cva("es:transition es:duration-200 es:ease-spring-bouncy", {
+    variants: {},
+    compoundVariants: [
+      {
+        vertical: true,
+        type: ["underline", "underlineSecondary"],
+        class: [
+          "es:bg-white es:px-3.5 es:py-1.25 es:rounded-full",
+          "es:group-hover:bg-surface-500/7",
+          "es:group-selected:bg-accent-500/10 es:group-selected:text-accent-800",
+          "es:group-hover:group-selected:ring es:group-hover:group-selected:ring-accent-500/10"
+        ]
+      },
+      {
+        type: ["bubble"],
+        class: [
+          "es:bg-white es:px-3.5 es:py-1.25 es:rounded-full",
+          "es:group-hover:bg-surface-500/7",
+          "es:group-selected:bg-accent-500/10 es:group-selected:text-accent-800",
+          "es:group-hover:group-selected:ring es:group-hover:group-selected:ring-accent-500/10"
+        ]
+      }
+    ]
+  });
+  const badgeClasses = cva(
+    [
+      "es:transition-plus",
+      "es:flex es:items-center-safe es:justify-center-safe",
+      "es:min-h-4.5 es:min-w-4.5 es:leading-none es:rounded-full es:shrink-0",
+      "es:text-12 es:leading-none es:text-box-trim",
+      "es:any-icon:size-2.5",
+      badgeClassName
+    ],
+    {
+      variants: {},
+      compoundVariants: [
+        {
+          type: ["underline", "underlineSecondary", "bubble"],
+          class: ["es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white", "es:group-hover:ring es:group-hover:ring-white"]
+        },
+        {
+          vertical: true,
+          icon: false,
+          type: ["underline", "underlineSecondary"],
+          class: "es:absolute es:top-0 es:right-0"
+        },
+        {
+          vertical: true,
+          icon: true,
+          type: ["underline", "underlineSecondary"],
+          class: "es:absolute es:top-1.5 es:right-6 es:group-hover:bg-surface-100"
+        },
+        //
+        {
+          type: ["pill", "pillCompact"],
+          class: "es:ml-auto es:bg-white es:group-selected:bg-accent-600 es:group-selected:text-white"
+        },
+        //
+        {
+          icon: false,
+          type: ["bubble"],
+          vertical: true,
+          class: "es:absolute es:top-0 es:right-0"
+        },
+        {
+          icon: true,
+          type: ["bubble"],
+          class: "es:absolute es:group-hover:bg-surface-100"
+        },
+        {
+          icon: true,
+          type: ["bubble"],
+          vertical: false,
+          class: "es:top-1 es:right-11.5"
+        },
+        {
+          icon: true,
+          type: ["bubble"],
+          vertical: true,
+          class: "es:top-1.5 es:right-6"
+        },
+        //
+        {
+          type: ["chips"],
+          class: "es:bg-secondary-200/50 es:group-selected:bg-accent-600 es:group-selected:text-white"
+        },
+        {
+          type: ["chips"],
+          vertical: true,
+          class: "es:ml-auto"
+        }
+      ],
+      defaultVariants: {
+        vertical: false,
+        simple: false,
+        icon: false,
+        flat: false
+      }
+    }
+  );
   return /* @__PURE__ */ jsxs(
     $5e8ad37a45e1c704$export$3e41faf802a29e71,
     {
       ...other,
       isDisabled: disabled || invisible,
-      className: componentClasses({ vertical: Boolean(isParentVertical), type }),
+      className: componentClasses({ vertical: Boolean(isParentVertical), type, flat: Boolean(flat) }),
       children: [
-        (icon || subtitle) && /* @__PURE__ */ jsx(
-          RichLabel,
-          {
-            icon,
-            label: label ?? children,
-            subtitle,
-            noColor: true,
-            iconClassName: clsx((type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:icon:size-4!")
-          }
-        ),
-        !(icon || subtitle) && (label ?? children),
-        badge && !isValidElement(badge) && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "es:transition-colors es:px-1.5 es:py-1 es:leading-none es:rounded-md es:text-xs es:font-medium",
-              type === "underline" && "es:inset-ring es:inset-ring-secondary-200/20 es:bg-secondary-100 es:group-selected:bg-accent-500/10 es:group-selected:text-accent-900 es:group-selected:inset-ring-accent-500/10",
-              type === "pill" && "es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white",
-              type === "pillInverse" && "es:bg-secondary-100 es:group-selected:bg-accent-50 es:group-selected:text-accent-900",
-              type === "pillCompact" && "es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white",
-              type === "pillCompactInverse" && "es:bg-secondary-100 es:group-selected:bg-accent-50 es:group-selected:text-accent-900",
-              (type === "pillOutline" || type === "pillCompactOutline") && "es:bg-secondary-100 es:text-secondary-900 es:group-selected:bg-accent-500 es:group-selected:text-white",
-              (type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:[&_svg]:size-4!"
-            ),
-            children: badge
-          }
-        ),
-        badge && isValidElement(badge) && /* @__PURE__ */ jsx("div", { children: badge })
+        icon && /* @__PURE__ */ jsx("div", { className: iconClasses({ vertical: Boolean(isParentVertical), type }), children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: clsx(!isParentVertical && "es:flex es:items-center-safe es:gap-1.5", isParentVertical && "es:contents"), children: [
+          subtitle && /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              label: label ?? children,
+              subtitle,
+              noColor: true
+            }
+          ),
+          !subtitle && (label ?? children),
+          badge && /* @__PURE__ */ jsx("span", { className: badgeClasses({ vertical: Boolean(isParentVertical), type, simple: !isValidElement(badge), icon: Boolean(icon) }), children: badge })
+        ] })
       ]
     }
   );
@@ -707,12 +957,31 @@ Tab.displayName = "Tab";
  * @preserve
  */
 const TabPanel2 = (props) => {
-  const { children, className, ...other } = props;
+  const { children, className, type, vertical, ...other } = props;
+  const tabPanelClasses = cva(["es:space-y-3 es:text-13 es:any-focus:outline-hidden", className], {
+    variants: {},
+    compoundVariants: [
+      {
+        type: ["pill", "pillCompact", "bubble", "chips"],
+        vertical: false,
+        class: "es:mt-4"
+      },
+      {
+        type: ["underline", "underlineSecondary"],
+        vertical: false,
+        class: "es:mt-1"
+      }
+    ],
+    defaultVariants: {
+      flat: false,
+      vertical: false
+    }
+  });
   return /* @__PURE__ */ jsx(
     $5e8ad37a45e1c704$export$3d96ec278d3efce4,
     {
       ...other,
-      className: clsx("es:space-y-2.5 es:text-sm es:any-focus:outline-hidden", className),
+      className: tabPanelClasses({ type, vertical }),
       children
     }
   );