@eightshift/ui-components 5.1.2 → 5.1.4

package/README.md

@@ -7,11 +7,11 @@ Built using [React Aria components](https://react-spectrum.adobe.com/react-aria/
 ## Local setup
 
 > [!IMPORTANT]
-> Uses [`pnpm`](https://pnpm.io/) for package management.
+> Uses [Bun](https://bun.com/) for package management.
 
 1. Clone the repository
-2. `pnpm install`
-3. `pnpm start` to run the example
+2. `bun install`
+3. `bun start` to run the example
 
 ## Who do I talk to?
 
@@ -24,9 +24,6 @@ Eightshift UI components is maintained and sponsored by
 ## License
 Eightshift UI components are provided by [Team Eightshift](https://eightshift.com) at [Infinum](https://infinum.com). This is free software, and may be redistributed under the terms specified in the LICENSE file.
 
-## To-do
-[] AdvancedColorPicker
-
 ### Won't bring over from Frontend libs
 - BlockInserter
 - Responsive components (ResponsiveNumberPicker, ResponsiveSlider, ResponsiveToggleButton)

package/dist/assets/style-admin.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);
@@ -2174,23 +2173,13 @@
   }
 }
 
-:is(body, body #wpwrap) .es\:border-blue-400\/75 {
-  border-color: var(--es-color-blue-400);
+:is(body, body #wpwrap) .es\:border-blue-500\/75 {
+  border-color: var(--es-color-blue-500);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:border-blue-400\/75 {
-    border-color: color-mix(in oklab, var(--es-color-blue-400) 75%, transparent);
-  }
-}
-
-:is(body, body #wpwrap) .es\:border-emerald-500\/75 {
-  border-color: var(--es-color-emerald-500);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:border-emerald-500\/75 {
-    border-color: color-mix(in oklab, var(--es-color-emerald-500) 75%, transparent);
+  :is(body, body #wpwrap) .es\:border-blue-500\/75 {
+    border-color: color-mix(in oklab, var(--es-color-blue-500) 75%, transparent);
   }
 }
 
@@ -2206,6 +2195,26 @@
   border-color: var(--es-color-gray-300);
 }
 
+:is(body, body #wpwrap) .es\:border-green-600\/75 {
+  border-color: var(--es-color-green-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:border-green-600\/75 {
+    border-color: color-mix(in oklab, var(--es-color-green-600) 75%, transparent);
+  }
+}
+
+:is(body, body #wpwrap) .es\:border-indigo-600\/60 {
+  border-color: var(--es-color-indigo-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:border-indigo-600\/60 {
+    border-color: color-mix(in oklab, var(--es-color-indigo-600) 60%, transparent);
+  }
+}
+
 :is(body, body #wpwrap) .es\:border-orange-500\/75 {
   border-color: var(--es-color-orange-500);
 }
@@ -2220,8 +2229,14 @@
   border-color: var(--es-color-red-200) !important;
 }
 
-:is(body, body #wpwrap) .es\:border-red-300 {
-  border-color: var(--es-color-red-300);
+:is(body, body #wpwrap) .es\:border-red-600\/60 {
+  border-color: var(--es-color-red-600);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:border-red-600\/60 {
+    border-color: color-mix(in oklab, var(--es-color-red-600) 60%, transparent);
+  }
 }
 
 :is(body, body #wpwrap) .es\:border-red-700\/50 {
@@ -2394,16 +2409,6 @@
   background-color: var(--es-color-cyan-500);
 }
 
-:is(body, body #wpwrap) .es\:bg-emerald-200\/5 {
-  background-color: var(--es-color-emerald-200);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:bg-emerald-200\/5 {
-    background-color: color-mix(in oklab, var(--es-color-emerald-200) 5%, transparent);
-  }
-}
-
 :is(body, body #wpwrap) .es\:bg-fuchsia-500 {
   background-color: var(--es-color-fuchsia-500);
 }
@@ -2412,6 +2417,16 @@
   background-color: var(--es-color-gray-100);
 }
 
+:is(body, body #wpwrap) .es\:bg-green-200\/5 {
+  background-color: var(--es-color-green-200);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:bg-green-200\/5 {
+    background-color: color-mix(in oklab, var(--es-color-green-200) 5%, transparent);
+  }
+}
+
 :is(body, body #wpwrap) .es\:bg-green-500 {
   background-color: var(--es-color-green-500);
 }
@@ -2944,10 +2959,6 @@
   padding-inline: calc(var(--es-spacing) * 2.5);
 }
 
-:is(body, body #wpwrap) .es\:px-3 {
-  padding-inline: calc(var(--es-spacing) * 3);
-}
-
 :is(body, body #wpwrap) .es\:px-4 {
   padding-inline: calc(var(--es-spacing) * 4);
 }
@@ -2964,6 +2975,10 @@
   padding-block: calc(var(--es-spacing) * .5);
 }
 
+:is(body, body #wpwrap) .es\:py-0\.25 {
+  padding-block: calc(var(--es-spacing) * .25);
+}
+
 :is(body, body #wpwrap) .es\:py-1 {
   padding-block: calc(var(--es-spacing) * 1);
 }
@@ -2992,6 +3007,10 @@
   padding-block: calc(var(--es-spacing) * 4);
 }
 
+:is(body, body #wpwrap) .es\:pt-0\.5 {
+  padding-top: calc(var(--es-spacing) * .5);
+}
+
 :is(body, body #wpwrap) .es\:pt-1 {
   padding-top: calc(var(--es-spacing) * 1);
 }
@@ -3076,6 +3095,10 @@
   padding-left: calc(var(--es-spacing) * 2);
 }
 
+:is(body, body #wpwrap) .es\:pl-2\.5 {
+  padding-left: calc(var(--es-spacing) * 2.5);
+}
+
 :is(body, body #wpwrap) .es\:pl-3 {
   padding-left: calc(var(--es-spacing) * 3);
 }
@@ -3245,24 +3268,6 @@
   color: var(--es-color-cyan-500);
 }
 
-:is(body, body #wpwrap) .es\:text-emerald-500 {
-  color: var(--es-color-emerald-500);
-}
-
-:is(body, body #wpwrap) .es\:text-emerald-600 {
-  color: var(--es-color-emerald-600);
-}
-
-:is(body, body #wpwrap) .es\:text-emerald-950\/60 {
-  color: var(--es-color-emerald-950);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:text-emerald-950\/60 {
-    color: color-mix(in oklab, var(--es-color-emerald-950) 60%, transparent);
-  }
-}
-
 :is(body, body #wpwrap) .es\:text-fuchsia-500 {
   color: var(--es-color-fuchsia-500);
 }
@@ -3289,10 +3294,46 @@
   color: var(--es-color-green-500);
 }
 
+:is(body, body #wpwrap) .es\:text-green-600 {
+  color: var(--es-color-green-600);
+}
+
+:is(body, body #wpwrap) .es\:text-green-700 {
+  color: var(--es-color-green-700);
+}
+
+:is(body, body #wpwrap) .es\:text-green-950\/60 {
+  color: var(--es-color-green-950);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:text-green-950\/60 {
+    color: color-mix(in oklab, var(--es-color-green-950) 60%, transparent);
+  }
+}
+
 :is(body, body #wpwrap) .es\:text-indigo-500 {
   color: var(--es-color-indigo-500);
 }
 
+:is(body, body #wpwrap) .es\:text-indigo-600 {
+  color: var(--es-color-indigo-600);
+}
+
+:is(body, body #wpwrap) .es\:text-indigo-700 {
+  color: var(--es-color-indigo-700);
+}
+
+:is(body, body #wpwrap) .es\:text-indigo-800\/70 {
+  color: var(--es-color-indigo-800);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:text-indigo-800\/70 {
+    color: color-mix(in oklab, var(--es-color-indigo-800) 70%, transparent);
+  }
+}
+
 :is(body, body #wpwrap) .es\:text-lime-500 {
   color: var(--es-color-lime-500);
 }
@@ -3327,13 +3368,13 @@
   color: var(--es-color-red-700);
 }
 
-:is(body, body #wpwrap) .es\:text-red-950\/60 {
-  color: var(--es-color-red-950);
+:is(body, body #wpwrap) .es\:text-red-900\/70 {
+  color: var(--es-color-red-900);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:text-red-950\/60 {
-    color: color-mix(in oklab, var(--es-color-red-950) 60%, transparent);
+  :is(body, body #wpwrap) .es\:text-red-900\/70 {
+    color: color-mix(in oklab, var(--es-color-red-900) 70%, transparent);
   }
 }
 
@@ -3505,6 +3546,11 @@
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
+:is(body, body #wpwrap) .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);
+}
+
 :is(body, body #wpwrap) .es\:shadow-accent-500\/25 {
   --tw-shadow-color: var(--es-color-accent-500);
 }
@@ -3575,13 +3621,23 @@
   }
 }
 
-:is(body, body #wpwrap) .es\:shadow-emerald-500\/15 {
-  --tw-shadow-color: var(--es-color-emerald-500);
+:is(body, body #wpwrap) .es\:shadow-green-500\/15 {
+  --tw-shadow-color: var(--es-color-green-500);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .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);
+  :is(body, body #wpwrap) .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);
+  }
+}
+
+:is(body, body #wpwrap) .es\:shadow-indigo-500\/15 {
+  --tw-shadow-color: var(--es-color-indigo-500);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .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);
   }
 }
 
@@ -3697,6 +3753,28 @@
   --tw-inset-ring-color: var(--es-color-accent-600);
 }
 
+:is(body, body #wpwrap) .es\:inset-ring-blue-100 {
+  --tw-inset-ring-color: var(--es-color-blue-100);
+}
+
+:is(body, body #wpwrap) .es\:inset-ring-green-100 {
+  --tw-inset-ring-color: var(--es-color-green-100);
+}
+
+:is(body, body #wpwrap) .es\:inset-ring-indigo-100\/0 {
+  --tw-inset-ring-color: var(--es-color-indigo-100);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:inset-ring-indigo-100\/0 {
+    --tw-inset-ring-color: color-mix(in oklab, var(--es-color-indigo-100) 0%, transparent);
+  }
+}
+
+:is(body, body #wpwrap) .es\:inset-ring-orange-100 {
+  --tw-inset-ring-color: var(--es-color-orange-100);
+}
+
 :is(body, body #wpwrap) .es\:inset-ring-red-100 {
   --tw-inset-ring-color: var(--es-color-red-100);
 }
@@ -3743,6 +3821,15 @@
   }
 }
 
+:is(body, body #wpwrap) .es\:outline-2 {
+  outline-style: var(--tw-outline-style);
+  outline-width: 2px;
+}
+
+:is(body, body #wpwrap) .es\:outline-white {
+  outline-color: var(--es-color-white);
+}
+
 :is(body, body #wpwrap) .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, );
@@ -4162,7 +4249,7 @@
   background-color: var(--es-color-accent-50);
 }
 
-:is(body, body #wpwrap) .es\:group-selected\:bg-accent-500\/10:is(:where(.es\:group)[data-selected] *) {
+:is(body, body #wpwrap) .es\:group-selected\:bg-accent-500:is(:where(.es\:group)[data-selected] *), :is(body, body #wpwrap) .es\:group-selected\:bg-accent-500\/10:is(:where(.es\:group)[data-selected] *) {
   background-color: var(--es-color-accent-500);
 }
 
@@ -5635,6 +5722,10 @@
   }
 }
 
+:is(body, body #wpwrap) .es\:selected\:border-accent-500[data-selected] {
+  border-color: var(--es-color-accent-500);
+}
+
 :is(body, body #wpwrap) .es\:selected\:border-accent-600[data-selected] {
   border-color: var(--es-color-accent-600);
 }
@@ -5654,17 +5745,31 @@
   background-image: linear-gradient(var(--tw-gradient-stops));
 }
 
-:is(body, body #wpwrap) .es\:selected\:from-accent-300\/10[data-selected] {
-  --tw-gradient-from: var(--es-color-accent-300);
+:is(body, body #wpwrap) .es\:selected\:from-accent-400\/10[data-selected] {
+  --tw-gradient-from: var(--es-color-accent-400);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :is(body, body #wpwrap) .es\:selected\:from-accent-400\/10[data-selected] {
+    --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-400) 10%, transparent);
+  }
+}
+
+:is(body, body #wpwrap) .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));
+}
+
+:is(body, body #wpwrap) .es\:selected\:from-accent-400\/15[data-selected] {
+  --tw-gradient-from: var(--es-color-accent-400);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  :is(body, body #wpwrap) .es\:selected\:from-accent-300\/10[data-selected] {
-    --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-300) 10%, transparent);
+  :is(body, body #wpwrap) .es\:selected\:from-accent-400\/15[data-selected] {
+    --tw-gradient-from: color-mix(in oklab, var(--es-color-accent-400) 15%, transparent);
   }
 }
 
-:is(body, body #wpwrap) .es\:selected\:from-accent-300\/10[data-selected] {
+:is(body, body #wpwrap) .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));
 }
 
@@ -5692,6 +5797,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));
 }
 
+:is(body, body #wpwrap) .es\:selected\:text-accent-700[data-selected] {
+  color: var(--es-color-accent-700);
+}
+
 :is(body, body #wpwrap) .es\:selected\:text-accent-900[data-selected] {
   color: var(--es-color-accent-900);
 }
@@ -6704,6 +6813,12 @@
   initial-value: 0 0 #0000;
 }
 
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-blur {
   syntax: "*";
   inherits: false