@eightshift/ui-components 2.0.1 → 3.0.0

package/dist/assets/wp-font-enhancements.css

@@ -1,8 +1,8 @@
-/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
 .edit-post-header, .components-popover, .edit-post-sidebar, .wp-block-post-title, .components-select-control__input, .components-base-control__field, .components-base-control__label, .components-combobox-control__suggestions-container, .components-input-control__label, .components-input-control__input, .components-checkbox-control__label, .components-menu-group__label, .components-menu-item__button, .components-notice .components-notice__content, .components-tooltip, .components-modal__header, .preferences-modal__section-title, .preferences-modal__section-description, .block-editor-inserter__tabs, .editor-list-view-sidebar, .edit-post-layout__footer, .components-snackbar, .components-text-control__input {
-  font-family: var(--es-font-sans);
+  font-family: var(--es-font-sans, "Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
 }
 
 body.wp-admin {
-  font-family: var(--es-font-sans) !important;
+  font-family: var(--es-font-sans, "Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !important;
 }

package/dist/assets/wp-ui-enhancements.css

@@ -1,6 +1,6 @@
-/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
 .edit-post-header__toolbar .components-button, .edit-post-header__settings .components-button, .editor-document-tools__left .components-button, .editor-header__center .components-button, .editor-header__settings .components-button, .edit-post-sidebar .components-button:not(.components-panel__body-toggle, .editor-post-last-revision__title), .components-snackbar, .components-toggle-group-control, .editor-post-publish-panel .components-button, .edit-post-text-editor__toolbar .components-button, .edit-post-text-editor__body .components-textarea-control__input, .media-modal-content, .media-modal-content .components-button, .components-guide__container .components-button, .components-notice__content .components-button, .editor-post-featured-image__toggle.components-button {
-  border-radius: var(--es-radius-md) !important;
+  border-radius: var(--es-radius-md, .375rem) !important;
 }
 
 .components-input-control__container, .components-combobox-control__suggestions-container, .components-checkbox-control__input, button.components-toggle-group-control-option-base, .editor-post-visibility__password-input {
@@ -8,80 +8,80 @@
 }
 
 .components-button-group .components-button:first-child {
-  border-top-left-radius: var(--es-radius-md) !important;
-  border-bottom-left-radius: var(--es-radius-md) !important;
+  border-top-left-radius: var(--es-radius-md, .375rem) !important;
+  border-bottom-left-radius: var(--es-radius-md, .375rem) !important;
 }
 
 .components-button-group .components-button:last-child {
-  border-top-right-radius: var(--es-radius-md) !important;
-  border-bottom-right-radius: var(--es-radius-md) !important;
+  border-top-right-radius: var(--es-radius-md, .375rem) !important;
+  border-bottom-right-radius: var(--es-radius-md, .375rem) !important;
 }
 
 .components-popover__content, .components-guide {
-  border-radius: var(--es-radius-lg) !important;
+  border-radius: var(--es-radius-lg, .5rem) !important;
 }
 
 .block-editor-inserter__search {
-  border-top-left-radius: var(--es-radius-lg) !important;
-  border-top-right-radius: var(--es-radius-lg) !important;
+  border-top-left-radius: var(--es-radius-lg, .5rem) !important;
+  border-top-right-radius: var(--es-radius-lg, .5rem) !important;
 }
 
 .media-menu-item.active {
-  border-top-left-radius: var(--es-radius-md) !important;
-  border-top-right-radius: var(--es-radius-md) !important;
+  border-top-left-radius: var(--es-radius-md, .375rem) !important;
+  border-top-right-radius: var(--es-radius-md, .375rem) !important;
 }
 
 .components-base-control__label, .components-input-control__label, .components-custom-select-control__label {
-  --tw-font-weight: var(--es-font-weight-normal) !important;
+  --tw-font-weight: var(--es-font-weight-normal, 400) !important;
   font-size: 13px !important;
-  font-weight: var(--es-font-weight-normal) !important;
-  --tw-tracking: var(--es-tracking-normal) !important;
-  letter-spacing: var(--es-tracking-normal) !important;
+  font-weight: var(--es-font-weight-normal, 400) !important;
+  --tw-tracking: var(--es-tracking-normal, 0em) !important;
+  letter-spacing: var(--es-tracking-normal, 0em) !important;
   text-transform: none !important;
 }
 
 .edit-post-sidebar, .interface-interface-skeleton__sidebar:not(:empty) > .interface-complementary-area__fill[style="width: 280px;"], .interface-complementary-area.editor-sidebar {
-  width: calc(var(--es-spacing) * 80) !important;
+  width: calc(var(--es-spacing, .25rem) * 80) !important;
 }
 
 .block-editor-block-list__block-crash-warning {
-  border-radius: var(--es-radius-lg) !important;
-  border-color: color-mix(in oklab, var(--es-color-red-700) 15%, transparent) !important;
+  border-radius: var(--es-radius-lg, .5rem) !important;
+  border-color: color-mix(in oklab, var(--es-color-red-700, oklch(.505 .213 27.518)) 15%, transparent) !important;
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
-  --tw-shadow-color: color-mix(in oklab, var(--es-color-red-700) 10%, transparent) !important;
+  --tw-shadow-color: color-mix(in oklab, var(--es-color-red-700, oklch(.505 .213 27.518)) 10%, transparent) !important;
 }
 
 .block-editor-block-list__block-crash-warning .block-editor-warning__message {
-  color: var(--es-color-red-950) !important;
+  color: var(--es-color-red-950, oklch(.258 .092 26.042)) !important;
 }
 
 .wp-block-missing div.block-editor-warning {
-  border-radius: var(--es-radius-lg) !important;
-  border-color: var(--es-color-zinc-300) !important;
-  background-color: color-mix(in oklab, var(--es-color-zinc-50) 75%, transparent) !important;
+  border-radius: var(--es-radius-lg, .5rem) !important;
+  border-color: var(--es-color-zinc-300, oklch(.871 .006 286.286)) !important;
+  background-color: color-mix(in oklab, var(--es-color-zinc-50, oklch(.985 0 0)) 75%, transparent) !important;
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
-  --tw-shadow-color: color-mix(in oklab, var(--es-color-zinc-700) 20%, transparent) !important;
+  --tw-shadow-color: color-mix(in oklab, var(--es-color-zinc-700, oklch(.37 .013 285.805)) 20%, transparent) !important;
 }
 
 .wp-block-missing div.block-editor-warning .block-editor-warning__message {
-  color: var(--es-color-zinc-950) !important;
+  color: var(--es-color-zinc-950, oklch(.141 .005 285.823)) !important;
 }
 
 .block-editor-block-contextual-toolbar, .block-editor-block-parent-selector__button {
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-radius: var(--es-radius-lg) !important;
+  border-radius: var(--es-radius-lg, .5rem) !important;
 }
 
 .block-editor-block-types-list .block-editor-block-types-list__item {
-  border-radius: var(--es-radius-lg) !important;
+  border-radius: var(--es-radius-lg, .5rem) !important;
 }
 
 .block-editor-block-types-list .block-editor-block-types-list__item:after {
   content: var(--tw-content);
-  border-radius: var(--es-radius-lg) !important;
+  border-radius: var(--es-radius-lg, .5rem) !important;
 }
 
 .block-editor-block-types-list .block-editor-block-types-list__item svg {
@@ -96,13 +96,13 @@
 }
 
 .block-editor-list-view-tree .block-editor-list-view-leaf > :first-child {
-  border-top-left-radius: var(--es-radius-lg) !important;
-  border-bottom-left-radius: var(--es-radius-lg) !important;
+  border-top-left-radius: var(--es-radius-lg, .5rem) !important;
+  border-bottom-left-radius: var(--es-radius-lg, .5rem) !important;
 }
 
 .block-editor-list-view-tree .block-editor-list-view-leaf > :last-child {
-  border-top-right-radius: var(--es-radius-lg) !important;
-  border-bottom-right-radius: var(--es-radius-lg) !important;
+  border-top-right-radius: var(--es-radius-lg, .5rem) !important;
+  border-bottom-right-radius: var(--es-radius-lg, .5rem) !important;
 }
 
 .block-editor-block-inspector .block-editor-block-card .block-editor-block-icon {
@@ -110,12 +110,12 @@
 }
 
 .block-editor-inserter__toggle {
-  border-radius: var(--es-radius-md) !important;
+  border-radius: var(--es-radius-md, .375rem) !important;
 }
 
 :is(.edit-post-header__toolbar, .edit-post-header__settings, .editor-document-tools__left, .editor-header__center, .editor-header__settings) .components-button {
-  min-height: calc(var(--es-spacing) * 9) !important;
-  min-width: calc(var(--es-spacing) * 9) !important;
+  min-height: calc(var(--es-spacing, .25rem) * 9) !important;
+  min-width: calc(var(--es-spacing, .25rem) * 9) !important;
 }
 
 .editor-styles-wrapper .wp-block:not(.editor-post-title, .block-list-appender) {
@@ -125,25 +125,25 @@
 .components-tooltip {
   border-style: var(--tw-border-style);
   border-width: 1px;
-  border-color: var(--es-color-gray-800);
-  background-color: color-mix(in oklab, var(--es-color-gray-950) 70%, transparent);
-  padding-inline: calc(var(--es-spacing) * 1);
-  padding-block: calc(var(--es-spacing) * .5);
-  color: var(--es-color-white);
+  border-color: var(--es-color-gray-800, oklch(.278 .033 256.848));
+  background-color: color-mix(in oklab, var(--es-color-gray-950, oklch(.13 .028 261.692)) 70%, transparent);
+  padding-inline: calc(var(--es-spacing, .25rem) * 1);
+  padding-block: calc(var(--es-spacing, .25rem) * .5);
+  color: var(--es-color-white, #fff);
   --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  --tw-backdrop-blur: blur(var(--es-blur-xl));
+  --tw-backdrop-blur: blur(var(--es-blur-xl, 24px));
   -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   --tw-backdrop-brightness: brightness(105%);
   --tw-backdrop-saturate: saturate(150%);
-  border-radius: var(--es-radius-md) !important;
+  border-radius: var(--es-radius-md, .375rem) !important;
 }
 
 .components-tooltip:has( > :first-child) {
-  border-color: var(--es-color-gray-200);
-  background-color: color-mix(in oklab, var(--es-color-white) 80%, transparent);
-  color: var(--es-color-gray-700);
+  border-color: var(--es-color-gray-200, oklch(.928 .006 264.531));
+  background-color: color-mix(in oklab, var(--es-color-white, #fff) 80%, transparent);
+  color: var(--es-color-gray-700, oklch(.373 .034 259.733));
 }
 
 @property --tw-font-weight {

package/dist/components/base-control/base-control.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-aOUPPvTO.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-DVSAPY-K.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**

package/dist/components/button/button.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-OQ5EIPvt.js";
-import { l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-39D0mStj.js";
-import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-Cs5_OoeA.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-D7c-vzAt.js";
+import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-DkCSC521.js";
+import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-DbqfVa2Z.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useState, useRef, forwardRef, createContext } from "react";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-CDOs-GuR.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-D2KUdwNL.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { c as cva } from "../../index-CcCn9HWX.js";
+import { c as cva } from "../../index-BKGQ6jGS.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {

package/dist/components/checkbox/checkbox.js

@@ -1,16 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { a as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-2lR5GG9p.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, m as $df56164dff5785e2$export$4338b53315abf666, n as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-39D0mStj.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-DkCSC521.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useEffect, useRef, forwardRef, useContext, createContext } from "react";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-BWwmZQE2.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-rg_OQIGW.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-DzlgBLAJ.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DhSBQxkp.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-ClTQo25k.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-BgSHI8kQ.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-C3dxzVyi.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-DyZydSPy.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-BZoo5qt_.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CxlVCVpL.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-B-8Wji4B.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-ooItkWYR.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";

package/dist/components/color-pickers/color-swatch.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Dv3Wxdl_.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-B0HgM8f4.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BqQfVu4L.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-MV5kBVXr.js";
 /**
  * A simple color/gradient swatch.
  *

package/dist/components/color-pickers/gradient-editor.js

@@ -6,7 +6,7 @@ import { icons } from "../../icons/icons.js";
 import { SolidColorPicker } from "./solid-color-picker.js";
 import { Slider } from "../slider/slider.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Dv3Wxdl_.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BqQfVu4L.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Spacer } from "../spacer/spacer.js";
@@ -262,7 +262,7 @@ const GradientEditor = (props) => {
         onChange: (value2) => onChange(getGradientResult({ stops: gradientData.stops }, value2)),
         options: gradientTypes,
         wrapperProps: { className: "es:mx-auto es:w-fit" },
-        type: "toggleButtonsSplit"
+        type: "toggleButtons"
       }
     ),
     gradientType === "linear" && /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-1", children: [

package/dist/components/color-pickers/solid-color-picker.js

@@ -1,26 +1,24 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useMemo, useRef, useState, useCallback, forwardRef, useContext, createContext } from "react";
 import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-2lR5GG9p.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-39D0mStj.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-DkCSC521.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
-import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, p as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, m as $c87311424ea30a05$export$fedb369cb70207f1, i as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-B0HgM8f4.js";
+import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CxlVCVpL.js";
+import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, g as $03deb23ff14920c4$export$4eaf04e54aa8eed6, y as $7215afc6de606d6b$export$de79e2c695e052f3, z as $46d819fcbaf35654$export$8f71654801c2f7cd, o as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, c as $c87311424ea30a05$export$fedb369cb70207f1, u as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-B-8Wji4B.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-MV5kBVXr.js";
 import { $ as $9446cca9a3875146$export$cb6e0bb50bc19463, a as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-GajL10e1.js";
-import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-BlTDSskG.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-C_2wWraB.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-NpLM2e3G.js";
-import { b as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-087cO5Ct.js";
-import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-BZNaJylD.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-CDOs-GuR.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-BQ4TF72x.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-ClTQo25k.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-D7A6s7O5.js";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-Se0m3ubj.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-aOUPPvTO.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-BWwmZQE2.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-Bm6_BVl9.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-D8cxd1Z8.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-C5OggHsw.js";
+import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-BZO0Tvut.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-D2KUdwNL.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-CFP1YZWQ.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-ooItkWYR.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-52GVSGgC.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CTTTeCpo.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-DVSAPY-K.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-ecr8uK6_.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-BgSHI8kQ.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
@@ -1083,7 +1081,7 @@ function $3ada01a82feafb94$var$ColorChannelField(props) {
     locale
   });
   let inputRef = useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8();
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
   var _props_validationBehavior;
   let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $5e632d1ff0188f00$export$e55dd820142d3131({
     ...$64fa3d84918910a7$export$ef03459518577ad4(props),
@@ -1103,7 +1101,7 @@ function $3ada01a82feafb94$var$HexColorField(props) {
     validationBehavior: (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : "native"
   });
   let inputRef = useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8();
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
   var _props_validationBehavior1;
   let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $f6896b05b2ecad12$export$77e32ca575a28fdf({
     ...$64fa3d84918910a7$export$ef03459518577ad4(props),
@@ -1179,7 +1177,7 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(fun
   });
   let trackRef = React__default.useRef(null);
   let inputRef = React__default.useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8();
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
   let { trackProps, thumbProps, inputProps, labelProps, outputProps } = $40af666d6c251e36$export$106b7a4e66508f66({
     ...props,
     label,
@@ -1307,7 +1305,7 @@ const SolidColorPicker = (props) => {
         yChannel: "lightness",
         className: clsx(
           "es:size-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm es:transition",
-          'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+          'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
           "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
         ),
         onChange: handleChange,
@@ -1328,7 +1326,7 @@ const SolidColorPicker = (props) => {
           {
             className: clsx(
               "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
-              'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+              'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
               "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
             children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:top-3.25 es:size-5 es:rounded-full es:border es:border-white es:shadow-[0_0_0_1px_black] es:transition es:dragging:scale-110! es:disabled:invisible" })
@@ -1348,7 +1346,7 @@ const SolidColorPicker = (props) => {
           {
             className: clsx(
               "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
-              'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+              'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
               "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
             style: () => {
@@ -1401,7 +1399,7 @@ const SolidColorPicker = (props) => {
           hidden: noAdvancedOptions,
           children: [
             /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "es:text-sm es:tracking-tight es:mb-2 es:inline-block", children: __("Advanced color options", "eightshift-ui-components") }),
-            /* @__PURE__ */ jsxs(Tabs, { type: "pillInverse", children: [
+            /* @__PURE__ */ jsxs(Tabs, { type: "pillCompactInverse", children: [
               /* @__PURE__ */ jsxs(TabList, { children: [
                 /* @__PURE__ */ jsx(Tab, { children: "RGB" }),
                 /* @__PURE__ */ jsx(Tab, { children: "HSL" }),

package/dist/components/container-panel/container-panel.js

@@ -23,6 +23,7 @@ import { BaseControl } from "../base-control/base-control.js";
  * @param {boolean} [props.closable] - If `true`, the panel can be closed. Will not show if `title` is not set.
  * @param {boolean} [props.startOpen=false] - Controls whether the panel is open by default.
  * @param {JSX.Element} [props.actions] - Actions to show at the end
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ContainerPanel component.
  *
@@ -34,10 +35,13 @@ import { BaseControl } from "../base-control/base-control.js";
  * @preserve
  */
 const ContainerPanel = (props) => {
-  const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions } = props;
+  const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions, hidden } = props;
   const [open, setOpen] = useState(startOpen);
+  if (hidden) {
+    return null;
+  }
   if (!title && typeof use === "undefined") {
-    return /* @__PURE__ */ jsx("div", { className: "es:space-y-2 es:border-t es:border-t-secondary-200 es:p-4", children });
+    return /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-2 es:border-t es:border-t-secondary-200 es:p-4", className), children });
   }
   const justUse = !closable && typeof onUseChange !== "undefined";
   const justClosable = closable && typeof onUseChange === "undefined";
@@ -93,7 +97,7 @@ const ContainerPanel = (props) => {
         !closable && !onUseChange && typeof use === "undefined" && "es:px-4",
         className
       ),
-      labelContainerClassName: clsx((closable || onUseChange) && "es:pl-4 es:pr-3 es:min-h-12", !(closable || onUseChange) && "es:mt-3", "es:pb-0!"),
+      labelContainerClassName: clsx((closable || onUseChange) && "es:pl-4 es:pr-3 es:min-h-12", !(closable || onUseChange) && "es:mt-3 es:mb-3", "es:pb-0!"),
       controlContainerClassName: "es:px-4",
       labelClassName: "es:text-secondary-600!",
       children: [
@@ -104,6 +108,7 @@ const ContainerPanel = (props) => {
             visible: open,
             className: "es:space-y-2 es:px-4",
             transition: "slideFadeDownSlight",
+            noInitial: true,
             children
           }
         ),
@@ -113,6 +118,7 @@ const ContainerPanel = (props) => {
             visible: closable ? use && open : use,
             className: "es:space-y-2 es:px-4",
             transition: "slideFadeDownSlight",
+            noInitial: true,
             children
           }
         )

package/dist/components/draggable/draggable-handle.js

@@ -4,7 +4,7 @@ import "../../default-i18n-CM1-Xvzf.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-CVit0rZn.js";
+import "../../react-jsx-parser.min-DZCiis5V.js";
 /**
  * A Draggable item handle.
  *
@@ -29,9 +29,10 @@ const DraggableHandle = (props) => {
         "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded es:border es:border-secondary-200 es:bg-white es:text-secondary-400 es:transition",
         "es:icon:size-4 es:icon:shrink-0",
         "es:active:border-accent-500/30 es:active:bg-accent-50 es:active:text-accent-500",
-        "es:focus:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:outline-hidden es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+        "es:any-focus:outline-hidden",
+        status !== "dragging" && "es:focus:border-accent-500 es:focus:ring-2 es:focus:ring-accent-500/50",
         "es:hover:text-accent-500",
-        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30",
+        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30 es:ring-3 es:ring-accent-500/50",
         className
       ),
       ref: handleRef,