@eightshift/ui-components 5.1.2 → 5.1.3

package/dist/assets/style.css

@@ -43,6 +43,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -150,7 +151,6 @@
   --es-color-secondary-900: var(--es-color-zinc-900);
   --es-color-accent-50: var(--es-color-teal-50);
   --es-color-accent-100: var(--es-color-teal-100);
-  --es-color-accent-300: var(--es-color-teal-300);
   --es-color-accent-400: var(--es-color-teal-400);
   --es-color-accent-500: var(--es-color-teal-500);
   --es-color-accent-600: var(--es-color-teal-600);
@@ -161,13 +161,12 @@
   --es-color-red-50: oklch(97.1% .013 17.38);
   --es-color-red-100: oklch(93.6% .032 17.717);
   --es-color-red-200: oklch(88.5% .062 18.334);
-  --es-color-red-300: oklch(80.8% .114 19.571);
   --es-color-red-500: oklch(63.7% .237 25.331);
   --es-color-red-600: oklch(57.7% .245 27.325);
   --es-color-red-700: oklch(50.5% .213 27.518);
   --es-color-red-800: oklch(44.4% .177 26.899);
   --es-color-red-900: oklch(39.6% .141 25.723);
-  --es-color-red-950: oklch(25.8% .092 26.042);
+  --es-color-orange-100: oklch(95.4% .038 75.164);
   --es-color-orange-200: oklch(90.1% .076 70.697);
   --es-color-orange-500: oklch(70.5% .213 47.604);
   --es-color-orange-700: oklch(55.3% .195 38.402);
@@ -197,10 +196,6 @@
   --es-color-green-800: oklch(44.8% .119 151.328);
   --es-color-green-900: oklch(39.3% .095 152.535);
   --es-color-green-950: oklch(26.6% .065 152.934);
-  --es-color-emerald-200: oklch(90.5% .093 164.15);
-  --es-color-emerald-500: oklch(69.6% .17 162.48);
-  --es-color-emerald-600: oklch(59.6% .145 163.225);
-  --es-color-emerald-950: oklch(26.2% .051 172.552);
   --es-color-teal-50: oklch(98.4% .014 180.72);
   --es-color-teal-100: oklch(95.3% .051 180.801);
   --es-color-teal-200: oklch(91% .096 180.426);
@@ -225,7 +220,11 @@
   --es-color-blue-800: oklch(42.4% .199 265.638);
   --es-color-blue-900: oklch(37.9% .146 265.522);
   --es-color-blue-950: oklch(28.2% .091 267.935);
+  --es-color-indigo-100: oklch(93% .034 272.788);
   --es-color-indigo-500: oklch(58.5% .233 277.117);
+  --es-color-indigo-600: oklch(51.1% .262 276.966);
+  --es-color-indigo-700: oklch(45.7% .24 277.023);
+  --es-color-indigo-800: oklch(39.8% .195 277.366);
   --es-color-violet-50: oklch(96.9% .016 293.756);
   --es-color-violet-100: oklch(94.3% .029 294.588);
   --es-color-violet-200: oklch(89.4% .057 293.283);
@@ -2659,23 +2658,13 @@
     }
   }
 
-  .es\:border-blue-400\/75 {
-    border-color: var(--es-color-blue-400);
+  .es\:border-blue-500\/75 {
+    border-color: var(--es-color-blue-500);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:border-blue-400\/75 {
-      border-color: color-mix(in oklab, var(--es-color-blue-400) 75%, transparent);
-    }
-  }
-
-  .es\:border-emerald-500\/75 {
-    border-color: var(--es-color-emerald-500);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:border-emerald-500\/75 {
-      border-color: color-mix(in oklab, var(--es-color-emerald-500) 75%, transparent);
+    .es\:border-blue-500\/75 {
+      border-color: color-mix(in oklab, var(--es-color-blue-500) 75%, transparent);
     }
   }
 
@@ -2691,6 +2680,26 @@
     border-color: var(--es-color-gray-300);
   }
 
+  .es\:border-green-600\/75 {
+    border-color: var(--es-color-green-600);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:border-green-600\/75 {
+      border-color: color-mix(in oklab, var(--es-color-green-600) 75%, transparent);
+    }
+  }
+
+  .es\:border-indigo-600\/60 {
+    border-color: var(--es-color-indigo-600);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:border-indigo-600\/60 {
+      border-color: color-mix(in oklab, var(--es-color-indigo-600) 60%, transparent);
+    }
+  }
+
   .es\:border-orange-500\/75 {
     border-color: var(--es-color-orange-500);
   }
@@ -2705,8 +2714,14 @@
     border-color: var(--es-color-red-200) !important;
   }
 
-  .es\:border-red-300 {
-    border-color: var(--es-color-red-300);
+  .es\:border-red-600\/60 {
+    border-color: var(--es-color-red-600);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:border-red-600\/60 {
+      border-color: color-mix(in oklab, var(--es-color-red-600) 60%, transparent);
+    }
   }
 
   .es\:border-red-700\/50 {
@@ -2879,16 +2894,6 @@
     background-color: var(--es-color-cyan-500);
   }
 
-  .es\:bg-emerald-200\/5 {
-    background-color: var(--es-color-emerald-200);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:bg-emerald-200\/5 {
-      background-color: color-mix(in oklab, var(--es-color-emerald-200) 5%, transparent);
-    }
-  }
-
   .es\:bg-fuchsia-500 {
     background-color: var(--es-color-fuchsia-500);
   }
@@ -2897,6 +2902,16 @@
     background-color: var(--es-color-gray-100);
   }
 
+  .es\:bg-green-200\/5 {
+    background-color: var(--es-color-green-200);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:bg-green-200\/5 {
+      background-color: color-mix(in oklab, var(--es-color-green-200) 5%, transparent);
+    }
+  }
+
   .es\:bg-green-500 {
     background-color: var(--es-color-green-500);
   }
@@ -3429,10 +3444,6 @@
     padding-inline: calc(var(--es-spacing) * 2.5);
   }
 
-  .es\:px-3 {
-    padding-inline: calc(var(--es-spacing) * 3);
-  }
-
   .es\:px-4 {
     padding-inline: calc(var(--es-spacing) * 4);
   }
@@ -3449,6 +3460,10 @@
     padding-block: calc(var(--es-spacing) * .5);
   }
 
+  .es\:py-0\.25 {
+    padding-block: calc(var(--es-spacing) * .25);
+  }
+
   .es\:py-1 {
     padding-block: calc(var(--es-spacing) * 1);
   }
@@ -3477,6 +3492,10 @@
     padding-block: calc(var(--es-spacing) * 4);
   }
 
+  .es\:pt-0\.5 {
+    padding-top: calc(var(--es-spacing) * .5);
+  }
+
   .es\:pt-1 {
     padding-top: calc(var(--es-spacing) * 1);
   }
@@ -3561,6 +3580,10 @@
     padding-left: calc(var(--es-spacing) * 2);
   }
 
+  .es\:pl-2\.5 {
+    padding-left: calc(var(--es-spacing) * 2.5);
+  }
+
   .es\:pl-3 {
     padding-left: calc(var(--es-spacing) * 3);
   }
@@ -3730,24 +3753,6 @@
     color: var(--es-color-cyan-500);
   }
 
-  .es\:text-emerald-500 {
-    color: var(--es-color-emerald-500);
-  }
-
-  .es\:text-emerald-600 {
-    color: var(--es-color-emerald-600);
-  }
-
-  .es\:text-emerald-950\/60 {
-    color: var(--es-color-emerald-950);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .es\:text-emerald-950\/60 {
-      color: color-mix(in oklab, var(--es-color-emerald-950) 60%, transparent);
-    }
-  }
-
   .es\:text-fuchsia-500 {
     color: var(--es-color-fuchsia-500);
   }
@@ -3774,10 +3779,46 @@
     color: var(--es-color-green-500);
   }
 
+  .es\:text-green-600 {
+    color: var(--es-color-green-600);
+  }
+
+  .es\:text-green-700 {
+    color: var(--es-color-green-700);
+  }
+
+  .es\:text-green-950\/60 {
+    color: var(--es-color-green-950);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:text-green-950\/60 {
+      color: color-mix(in oklab, var(--es-color-green-950) 60%, transparent);
+    }
+  }
+
   .es\:text-indigo-500 {
     color: var(--es-color-indigo-500);
   }
 
+  .es\:text-indigo-600 {
+    color: var(--es-color-indigo-600);
+  }
+
+  .es\:text-indigo-700 {
+    color: var(--es-color-indigo-700);
+  }
+
+  .es\:text-indigo-800\/70 {
+    color: var(--es-color-indigo-800);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:text-indigo-800\/70 {
+      color: color-mix(in oklab, var(--es-color-indigo-800) 70%, transparent);
+    }
+  }
+
   .es\:text-lime-500 {
     color: var(--es-color-lime-500);
   }
@@ -3812,13 +3853,13 @@
     color: var(--es-color-red-700);
   }
 
-  .es\:text-red-950\/60 {
-    color: var(--es-color-red-950);
+  .es\:text-red-900\/70 {
+    color: var(--es-color-red-900);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:text-red-950\/60 {
-      color: color-mix(in oklab, var(--es-color-red-950) 60%, transparent);
+    .es\:text-red-900\/70 {
+      color: color-mix(in oklab, var(--es-color-red-900) 70%, transparent);
     }
   }
 
@@ -3990,6 +4031,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .es\:inset-ring-1 {
+    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .es\:shadow-accent-500\/25 {
     --tw-shadow-color: var(--es-color-accent-500);
   }
@@ -4060,13 +4106,23 @@
     }
   }
 
-  .es\:shadow-emerald-500\/15 {
-    --tw-shadow-color: var(--es-color-emerald-500);
+  .es\:shadow-green-500\/15 {
+    --tw-shadow-color: var(--es-color-green-500);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:shadow-emerald-500\/15 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-emerald-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
+    .es\:shadow-green-500\/15 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-green-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+
+  .es\:shadow-indigo-500\/15 {
+    --tw-shadow-color: var(--es-color-indigo-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:shadow-indigo-500\/15 {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--es-color-indigo-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
 
@@ -4182,6 +4238,28 @@
     --tw-inset-ring-color: var(--es-color-accent-600);
   }
 
+  .es\:inset-ring-blue-100 {
+    --tw-inset-ring-color: var(--es-color-blue-100);
+  }
+
+  .es\:inset-ring-green-100 {
+    --tw-inset-ring-color: var(--es-color-green-100);
+  }
+
+  .es\:inset-ring-indigo-100\/0 {
+    --tw-inset-ring-color: var(--es-color-indigo-100);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:inset-ring-indigo-100\/0 {
+      --tw-inset-ring-color: color-mix(in oklab, var(--es-color-indigo-100) 0%, transparent);
+    }
+  }
+
+  .es\:inset-ring-orange-100 {
+    --tw-inset-ring-color: var(--es-color-orange-100);
+  }
+
   .es\:inset-ring-red-100 {
     --tw-inset-ring-color: var(--es-color-red-100);
   }
@@ -4228,6 +4306,15 @@
     }
   }
 
+  .es\:outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+
+  .es\:outline-white {
+    outline-color: var(--es-color-white);
+  }
+
   .es\:blur-\[0\.5px\] {
     --tw-blur: blur(.5px);
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
@@ -4647,7 +4734,7 @@
     background-color: var(--es-color-accent-50);
   }
 
-  .es\:group-selected\:bg-accent-500\/10:is(:where(.es\:group)[data-selected] *) {
+  .es\:group-selected\:bg-accent-500:is(:where(.es\:group)[data-selected] *), .es\:group-selected\:bg-accent-500\/10:is(:where(.es\:group)[data-selected] *) {
     background-color: var(--es-color-accent-500);
   }
 
@@ -6120,6 +6207,10 @@
     }
   }
 
+  .es\:selected\:border-accent-500[data-selected] {
+    border-color: var(--es-color-accent-500);
+  }
+
   .es\:selected\:border-accent-600[data-selected] {
     border-color: var(--es-color-accent-600);
   }
@@ -6139,17 +6230,31 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
-  .es\:selected\:from-accent-300\/10[data-selected] {
-    --tw-gradient-from: var(--es-color-accent-300);
+  .es\:selected\:from-accent-400\/10[data-selected] {
+    --tw-gradient-from: var(--es-color-accent-400);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .es\:selected\:from-accent-400\/10[data-selected] {
+      --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-400) 10%, transparent);
+    }
+  }
+
+  .es\:selected\:from-accent-400\/10[data-selected] {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .es\:selected\:from-accent-400\/15[data-selected] {
+    --tw-gradient-from: var(--es-color-accent-400);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .es\:selected\:from-accent-300\/10[data-selected] {
-      --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-300) 10%, transparent);
+    .es\:selected\:from-accent-400\/15[data-selected] {
+      --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-400) 15%, transparent);
     }
   }
 
-  .es\:selected\:from-accent-300\/10[data-selected] {
+  .es\:selected\:from-accent-400\/15[data-selected] {
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
@@ -6177,6 +6282,10 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .es\:selected\:text-accent-700[data-selected] {
+    color: var(--es-color-accent-700);
+  }
+
   .es\:selected\:text-accent-900[data-selected] {
     color: var(--es-color-accent-900);
   }
@@ -6710,6 +6819,12 @@
   initial-value: 0 0 #0000;
 }
 
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-blur {
   syntax: "*";
   inherits: false

package/dist/components/notice/notice.js

@@ -30,64 +30,64 @@ const Notice = (props) => {
   }
   const styles = {
     info: {
-      icon: icons.infoCircle,
-      className: "es:border-blue-400/75 es:shadow-blue-500/15 es:bg-blue-200/5",
-      iconColor: "es:text-blue-400",
-      textColor: "es:text-blue-500 es:saturate-75",
-      subtitleColor: "es:text-blue-950/60"
+      icon: icons.info,
+      className: "es:border-blue-500/75 es:shadow-blue-500/15 es:bg-blue-200/5 es:inset-ring-blue-100",
+      iconColorClassName: "es:text-blue-500",
+      textColorClassName: "es:text-blue-500 es:saturate-75",
+      subtitleColorClassName: "es:text-blue-950/60"
     },
     success: {
       icon: icons.checkSquare,
-      className: "es:border-emerald-500/75 es:shadow-emerald-500/15 es:bg-emerald-200/5",
-      iconColor: "es:text-emerald-500",
-      textColor: "es:text-emerald-600",
-      subtitleColor: "es:text-emerald-950/60"
+      className: "es:border-green-600/75 es:shadow-green-500/15 es:bg-green-200/5 es:inset-ring-green-100",
+      iconColorClassName: "es:text-green-600",
+      textColorClassName: "es:text-green-700",
+      subtitleColorClassName: "es:text-green-950/60"
     },
     warning: {
       icon: icons.warning,
-      className: "es:border-orange-500/75 es:shadow-orange-500/15 es:bg-orange-200/5",
-      iconColor: "es:text-orange-500",
-      textColor: "es:text-orange-700",
-      subtitleColor: "es:text-orange-950/60"
+      className: "es:border-orange-500/75 es:shadow-orange-500/15 es:bg-orange-200/5 es:inset-ring-orange-100",
+      iconColorClassName: "es:text-orange-500",
+      textColorClassName: "es:text-orange-700",
+      subtitleColorClassName: "es:text-orange-950/60"
     },
     error: {
       icon: icons.errorCircle,
-      className: "es:border-red-300 es:shadow-red-500/15 es:bg-red-200/5",
-      iconColor: "es:text-red-500",
-      textColor: "es:text-red-700",
-      subtitleColor: "es:text-red-950/60"
+      className: "es:border-red-600/60 es:shadow-red-500/15 es:bg-red-200/5 es:inset-ring-red-100",
+      iconColorClassName: "es:text-red-600",
+      textColorClassName: "es:text-red-700",
+      subtitleColorClassName: "es:text-red-900/70"
     },
     placeholder: {
       icon: icons.componentGeneric,
-      className: "es:border-secondary-400 es:shadow-secondary-300/25 es:border-dashed es:bg-secondary-200/5",
-      iconColor: "es:text-secondary-400",
-      textColor: "es:text-secondary-900",
-      subtitleColor: "es:text-secondary-500"
+      className: "es:border-indigo-600/60 es:shadow-indigo-500/15 es:bg-white es:outline-2 es:outline-white es:inset-ring-indigo-100/0 es:border-dashed",
+      iconColorClassName: "es:text-indigo-600",
+      textColorClassName: "es:text-indigo-700",
+      subtitleColorClassName: "es:text-indigo-800/70"
     },
     default: {
-      className: "es:border-secondary-300 es:shadow-secondary-300/25 es:bg-secondary-200/5",
-      iconColor: "es:text-secondary-400",
-      textColor: "es:text-secondary-900",
-      subtitleColor: "es:text-secondary-500"
+      className: "es:border-secondary-400 es:shadow-secondary-300/25 es:bg-secondary-200/5 es:inset-ring-secondary-100",
+      iconColorClassName: "es:text-secondary-500",
+      textColorClassName: "es:text-secondary-900",
+      subtitleColorClassName: "es:text-secondary-500"
     }
   };
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx(
-        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-xl es:border es:bg-linear-to-tr es:shadow-sm",
+        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-xl es:border es:bg-linear-to-tr es:shadow-sm es:inset-ring-1",
         styles[type].className,
-        icon || styles[type].icon ? "es:gap-x-1.5 es:p-2" : "es:px-2 es:py-2",
+        icon || styles[type].icon ? "es:gap-x-1.5 es:p-2 es:pr-3 es:pl-2.5" : "es:px-2.5 es:py-2",
         className
       ),
       children: [
         (icon || styles[type].icon) && /* @__PURE__ */ jsx(
-          "span",
+          "div",
           {
             className: clsx(
               "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-6",
               alignIconToTitle ? "es:self-baseline" : "es:self-center",
-              styles[type].iconColor
+              styles[type].iconColorClassName
             ),
             children: icon ?? styles[type].icon
           }
@@ -98,7 +98,7 @@ const Notice = (props) => {
             className: clsx(
               "es:col-span-2 es:col-start-2 es:text-balance es:text-sm es:leading-tight",
               subtitle ? "es:self-end" : "es:row-span-2 es:self-center",
-              styles[type].textColor
+              styles[type].textColorClassName
             ),
             children: label
           }
@@ -107,8 +107,8 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight",
-              styles[type].subtitleColor,
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight es:pt-0.5",
+              styles[type].subtitleColorClassName,
               label ? "es:self-start" : "es:row-span-2 es:self-center"
             ),
             children: subtitle

package/dist/components/tabs/tabs.js

@@ -443,7 +443,7 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
  *
  * @returns {JSX.Element} The Tabs component.
  *
- * @typedef {'underline' | 'pill' | 'pillInverse' | 'pillCompact' | 'pillCompactInverse'} TabsType
+ * @typedef {'underline' | 'pill' | 'pillInverse' | 'pillCompact' | 'pillCompactInverse' | 'pillOutline' | 'pillCompactOutline'} TabsType
  *
  * @example
  * <Tabs>
@@ -592,8 +592,8 @@ const Tab = (props) => {
       "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") && "es:min-h-9.5",
-      isParentVertical && (type === "pillCompact" || type === "pillCompactInverse") && "es:min-h-8",
+      !(type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:min-h-9.5",
+      isParentVertical && (type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:min-h-8",
       invisible && "es:hidden",
       className
     ],
@@ -601,10 +601,12 @@ const Tab = (props) => {
       variants: {
         type: {
           underline: "es:disabled:text-secondary-400 es:selected:text-accent-950",
-          pill: "es:font-[450] es:border es:border-transparent es:px-3 es:py-1.5 es:rounded-xl 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-300/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",
-          pillInverse: "es:font-[450] es:border es:border-transparent es:px-3 es:py-1.5 es:rounded-xl 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-2.5 es:py-1 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-300/10 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-2.5 es:py-1 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-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75"
+          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"
         }
       },
       compoundVariants: [
@@ -645,7 +647,7 @@ const Tab = (props) => {
             label: label ?? children,
             subtitle,
             noColor: true,
-            iconClassName: clsx((type === "pillCompact" || type === "pillCompactInverse") && "es:icon:size-4!")
+            iconClassName: clsx((type === "pillCompact" || type === "pillCompactInverse" || type === "pillCompactOutline") && "es:icon:size-4!")
           }
         ),
         !(icon || subtitle) && (label ?? children),
@@ -659,7 +661,8 @@ const Tab = (props) => {
               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 === "pillCompact" || type === "pillCompactInverse") && "es:[&_svg]:size-4!"
+              (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
           }

package/dist/icons/icons.js

@@ -4849,14 +4849,14 @@ const icons = {
             cy: "8.5",
             r: "8.5",
             transform: "matrix(1 0 0 -1 1.5 18.5)",
-            stroke: "#0D3636"
+            stroke: "currentColor"
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5",
-            stroke: "#0D3636",
+            stroke: "currentColor",
             "stroke-linecap": "round"
           }
         )
@@ -8639,7 +8639,7 @@ const icons = {
         "path",
         {
           d: "M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19ZM10 14.75C9.58579 14.75 9.25 14.4142 9.25 14V10.75H6C5.58579 10.75 5.25 10.4142 5.25 10C5.25 9.58579 5.58579 9.25 6 9.25H9.25V6C9.25 5.58579 9.58579 5.25 10 5.25C10.4142 5.25 10.75 5.58579 10.75 6V9.25H14C14.4142 9.25 14.75 9.58579 14.75 10C14.75 10.4142 14.4142 10.75 14 10.75H10.75V14C10.75 14.4142 10.4142 14.75 10 14.75Z",
-          fill: "#0D3636"
+          fill: "currentColor"
         }
       )
     }
@@ -19062,14 +19062,14 @@ const icons = {
           {
             opacity: "0.25",
             d: "M8.65836 1.68328L1.08541 16.8292C0.586734 17.8265 1.31198 19 2.42705 19H17.573C18.688 19 19.4133 17.8265 18.9146 16.8292L11.3416 1.68328C10.7889 0.577709 9.21114 0.577712 8.65836 1.68328Z",
-            fill: "#0D3636"
+            fill: "currentColor"
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M11 7C11.0306 6.73478 10.952 6.48043 10.7639 6.29289C10.5769 6.10536 10.2958 6 10 6C9.70423 6 9.4231 6.10536 9.23608 6.29289C9.04803 6.48043 8.96944 6.73478 9 7C9.01042 7.09167 9.02083 7.18333 9.03125 7.275C9.21875 8.925 9.40625 10.575 9.59375 12.225C9.60417 12.3167 9.61458 12.4083 9.625 12.5C9.63523 12.5888 9.6837 12.674 9.75386 12.7367C9.82435 12.7995 9.91077 12.8348 10 12.8348C10.0892 12.8348 10.1756 12.7995 10.2461 12.7367C10.3163 12.674 10.3648 12.5888 10.375 12.5C10.3854 12.4083 10.3958 12.3167 10.4062 12.225C10.5937 10.575 10.7812 8.925 10.9687 7.275C10.9792 7.18333 10.9896 7.09167 11 7Z",
-            fill: "#0D3636"
+            fill: "currentColor"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -19078,7 +19078,7 @@ const icons = {
             cx: "10",
             cy: "15.5",
             r: "1",
-            fill: "#0D3636"
+            fill: "currentColor"
           }
         )
       ]