@eightshift/ui-components 6.0.3 → 6.0.5

package/dist/assets/style.css

@@ -2244,8 +2244,8 @@ input[data-rac]::-webkit-search-cancel-button {
     margin-right: calc(var(--es-spacing) * 1.25);
   }
 
-  .es\:mr-4\.25 {
-    margin-right: calc(var(--es-spacing) * 4.25);
+  .es\:mr-1\.75 {
+    margin-right: calc(var(--es-spacing) * 1.75);
   }
 
   .es\:mr-auto {
@@ -2288,8 +2288,8 @@ input[data-rac]::-webkit-search-cancel-button {
     margin-left: calc(var(--es-spacing) * 1.25);
   }
 
-  .es\:ml-4\.25 {
-    margin-left: calc(var(--es-spacing) * 4.25);
+  .es\:ml-1\.75 {
+    margin-left: calc(var(--es-spacing) * 1.75);
   }
 
   .es\:ml-auto {
@@ -2874,11 +2874,6 @@ input[data-rac]::-webkit-search-cancel-button {
     transform-origin: top;
   }
 
-  .es\:-translate-x-0\.25 {
-    --tw-translate-x: calc(var(--es-spacing) * -.25);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .es\:-translate-x-1 {
     --tw-translate-x: calc(var(--es-spacing) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2899,13 +2894,13 @@ input[data-rac]::-webkit-search-cancel-button {
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .es\:translate-x-0 {
-    --tw-translate-x: calc(var(--es-spacing) * 0);
+  .es\:-translate-x-px {
+    --tw-translate-x: -1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .es\:translate-x-0\.25 {
-    --tw-translate-x: calc(var(--es-spacing) * .25);
+  .es\:translate-x-0 {
+    --tw-translate-x: calc(var(--es-spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
@@ -2934,6 +2929,11 @@ input[data-rac]::-webkit-search-cancel-button {
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .es\:translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .es\:-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2949,6 +2949,11 @@ input[data-rac]::-webkit-search-cancel-button {
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .es\:-translate-y-4 {
+    --tw-translate-y: calc(var(--es-spacing) * -4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .es\:translate-y-0 {
     --tw-translate-y: calc(var(--es-spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3219,10 +3224,6 @@ input[data-rac]::-webkit-search-cancel-button {
     cursor: not-allowed;
   }
 
-  .es\:cursor-pointer {
-    cursor: pointer;
-  }
-
   .es\:cursor-wait {
     cursor: wait;
   }
@@ -3555,6 +3556,10 @@ input[data-rac]::-webkit-search-cancel-button {
     justify-self: flex-end;
   }
 
+  .es\:justify-self-start {
+    justify-self: flex-start;
+  }
+
   .es\:overflow-clip {
     overflow: clip;
   }
@@ -6345,11 +6350,21 @@ input[data-rac]::-webkit-search-cancel-button {
     line-height: var(--tw-leading, var(--es-text-12--line-height));
   }
 
+  .es\:text-12\! {
+    font-size: var(--es-text-12) !important;
+    line-height: var(--tw-leading, var(--es-text-12--line-height)) !important;
+  }
+
   .es\:text-13 {
     font-size: var(--es-text-13);
     line-height: var(--tw-leading, var(--es-text-13--line-height));
   }
 
+  .es\:text-13\! {
+    font-size: var(--es-text-13) !important;
+    line-height: var(--tw-leading, var(--es-text-13--line-height)) !important;
+  }
+
   .es\:text-14 {
     font-size: var(--es-text-14);
     line-height: var(--tw-leading, var(--es-text-14--line-height));
@@ -6803,6 +6818,11 @@ input[data-rac]::-webkit-search-cancel-button {
     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-xs\! {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d) !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;
+  }
+
   .es\:ring, .es\:ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-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);
@@ -6828,6 +6848,11 @@ input[data-rac]::-webkit-search-cancel-button {
     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\! {
+    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor) !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;
+  }
+
   .es\:shadow-accent-600\/25 {
     --tw-shadow-color: var(--es-color-accent-600);
   }
@@ -7708,6 +7733,18 @@ input[data-rac]::-webkit-search-cancel-button {
     }
   }
 
+  .es\:outline-hidden\! {
+    --tw-outline-style: none !important;
+    outline-style: none !important;
+  }
+
+  @media (forced-colors: active) {
+    .es\:outline-hidden\! {
+      outline-offset: 2px !important;
+      outline: 2px solid #0000 !important;
+    }
+  }
+
   .es\:outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -8281,10 +8318,6 @@ input[data-rac]::-webkit-search-cancel-button {
     border-bottom-left-radius: var(--es-radius-md);
   }
 
-  .es\:not-disabled\:cursor-pointer:not(:is(:disabled, [data-rac][data-disabled])) {
-    cursor: pointer;
-  }
-
   .es\:not-has-any-icon\:aspect-5\/3:not(:has(* svg)) {
     aspect-ratio: 5 / 3;
   }
@@ -8850,11 +8883,6 @@ input[data-rac]::-webkit-search-cancel-button {
     border-bottom-left-radius: var(--es-radius-2xl);
   }
 
-  .es\:first\:rounded-l-xl:first-child {
-    border-top-left-radius: var(--es-radius-xl);
-    border-bottom-left-radius: var(--es-radius-xl);
-  }
-
   .es\:first\:pt-2:first-child {
     padding-top: calc(var(--es-spacing) * 2);
   }
@@ -8868,11 +8896,6 @@ input[data-rac]::-webkit-search-cancel-button {
     border-bottom-right-radius: var(--es-radius-2xl);
   }
 
-  .es\:last\:rounded-r-xl:last-child {
-    border-top-right-radius: var(--es-radius-xl);
-    border-bottom-right-radius: var(--es-radius-xl);
-  }
-
   .es\:last\:rounded-b-2xl:last-child {
     border-bottom-right-radius: var(--es-radius-2xl);
     border-bottom-left-radius: var(--es-radius-2xl);
@@ -8950,6 +8973,16 @@ input[data-rac]::-webkit-search-cancel-button {
     }
   }
 
+  .es\:hover\:rounded-18:where([data-rac])[data-hovered] {
+    border-radius: var(--es-radius-18);
+  }
+
+  @media (hover: hover) {
+    .es\:hover\:rounded-18:where(:not([data-rac])):hover {
+      border-radius: var(--es-radius-18);
+    }
+  }
+
   .es\:hover\:rounded-lg:where([data-rac])[data-hovered] {
     border-radius: var(--es-radius-lg);
   }
@@ -11677,9 +11710,14 @@ input[data-rac]::-webkit-search-cancel-button {
     border-bottom-left-radius: var(--es-radius-20) !important;
   }
 
-  .es\:before-current\:rounded-l-xl:has( + :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"])) {
-    border-top-left-radius: var(--es-radius-xl);
-    border-bottom-left-radius: var(--es-radius-xl);
+  .es\:before-current\:rounded-r-2xl:has( + :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"])) {
+    border-top-right-radius: var(--es-radius-2xl);
+    border-bottom-right-radius: var(--es-radius-2xl);
+  }
+
+  .es\:before-current\:rounded-b-2xl:has( + :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"])) {
+    border-bottom-right-radius: var(--es-radius-2xl);
+    border-bottom-left-radius: var(--es-radius-2xl);
   }
 
   .es\:before-current\:rounded-b-lg:has( + :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"])) {
@@ -11692,6 +11730,11 @@ input[data-rac]::-webkit-search-cancel-button {
     border-bottom-left-radius: var(--es-radius-xl);
   }
 
+  :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"]) + .es\:after-current\:rounded-t-2xl {
+    border-top-left-radius: var(--es-radius-2xl);
+    border-top-right-radius: var(--es-radius-2xl);
+  }
+
   :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"]) + .es\:after-current\:rounded-t-lg {
     border-top-left-radius: var(--es-radius-lg);
     border-top-right-radius: var(--es-radius-lg);
@@ -11702,9 +11745,9 @@ input[data-rac]::-webkit-search-cancel-button {
     border-top-right-radius: var(--es-radius-xl);
   }
 
-  :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"]) + .es\:after-current\:rounded-r-xl {
-    border-top-right-radius: var(--es-radius-xl);
-    border-bottom-right-radius: var(--es-radius-xl);
+  :where(:pressed, :active, [data-selected="true"], [data-focus-visible="true"], [data-hovered="true"], [aria-expanded="true"], [data-expanded="true"]) + .es\:after-current\:rounded-l-2xl {
+    border-top-left-radius: var(--es-radius-2xl);
+    border-bottom-left-radius: var(--es-radius-2xl);
   }
 
   .es\:before-selected\:rounded-b-md:has( + :where([data-selected="true"])) {

package/dist/{color-swatch-CFIuSPcO.js → color-swatch-BEBLRxTy.js}

@@ -6,7 +6,7 @@ import { $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4, b as $9446cca9a3875146$
 import { a as $5b160d28a433310d$export$c17fa47878dc55b6, b as $6db58dc88e78b024$export$2f817fcdc4b89ae0, $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-NETP-8H8.js";
 import { $ as $488c6ddbf4ef74c2$export$cc77c4ff7e8673c5 } from "./NumberFormatter-DA8u1Ot7.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-BQvmiUqb.js";
-import { c as clsx } from "./lite-DVmmD_-j.js";
+import { c as clsx } from "./clsx-DgYk2OaC.js";
 import { _ as __ } from "./default-i18n-CnQeC5Pl.js";
 var $eccab2b0118aef08$exports = {};
 $eccab2b0118aef08$exports = {

package/dist/components/animated-visibility/animated-visibility.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { useState, useEffect } from "react";
 /**
  * Component that allows animating the visibility of its children.

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-ztX6G1zR.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * Component that allows wrapping components with a common layout that includes a label and optional icon, subtitle, actions, and help text.

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as cva } from "../../index-BHpUy2Ix.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { forwardRef, cloneElement } from "react";
 /**
  * @typedef {Object} ContainerProps

package/dist/components/breakpoint-preview/breakpoint-preview.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { upperFirst } from "../../utilities/es-dash.js";
 /**
  * Component that renders a preview of the breakpoints to help users visualize the options they set.

package/dist/components/button/button.js

@@ -5,7 +5,7 @@ import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
 import $dbSRa$react__default, { useState, useRef, forwardRef, createContext } from "react";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BQvmiUqb.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";

package/dist/components/checkbox/checkbox.js

@@ -12,7 +12,7 @@ import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRi
 import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
 import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DTUuKFiI.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
-import { C as ColorSwatch } from "../../color-swatch-CFIuSPcO.js";
+import { C as ColorSwatch } from "../../color-swatch-BEBLRxTy.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { icons } from "../../icons/icons.js";
 /**
  * Color picker.

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

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import { C } from "../../color-swatch-CFIuSPcO.js";
-import "../../lite-DVmmD_-j.js";
+import { C } from "../../color-swatch-BEBLRxTy.js";
+import "../../clsx-DgYk2OaC.js";
 import "../../default-i18n-CnQeC5Pl.js";
 export {
   C as ColorSwatch

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

@@ -7,7 +7,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 "../../color-swatch-CFIuSPcO.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../color-swatch-BEBLRxTy.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Toggle } from "../toggle/toggle.js";
@@ -15,10 +15,10 @@ import { OptionSelect } from "../option-select/option-select.js";
 import { DraggableList } from "../draggable-list/draggable-list.js";
 import { DraggableListItem } from "../draggable-list/draggable-list-item.js";
 import { TriggeredPopover } from "../popover/popover.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { ContainerGroup, Container } from "../base-control/container.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { s as srgb, i as isColorDark } from "../../general-lYMgCPqJ.js";
+import { s as srgb, i as isColorDark } from "../../general-ChNQK6O9.js";
 function c(e, o = ",") {
   let t = [], n = 0, i = 0;
   o = new RegExp(o);
@@ -247,7 +247,7 @@ const GradientEditor = (props) => {
         "button",
         {
           className: clsx(
-            "es:shadow-sm, es:mx-auto es:block es:h-40 es:cursor-pointer es:rounded-lg es:border es:border-secondary-300 es:transition-[width] es:duration-300 es:ease-spring-snappy",
+            "es:shadow-sm, es:mx-auto es:block es:h-40 es:rounded-lg es:border es:border-secondary-300 es:transition-[width] es:duration-300 es:ease-spring-snappy",
             "es:mb-2",
             squarePreview ? "es:w-40" : "es:w-full"
           ),

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

@@ -5,7 +5,7 @@ import { a as $3ef42575df84b30b$export$9d1611c77c2fe928, b as $bdb11010cef70236$
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
 import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
 import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, e as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, n as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, b as $c87311424ea30a05$export$fedb369cb70207f1, s as $c87311424ea30a05$export$a11b0059900ceec8, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
-import { a as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, c as $3493a52097159720$exports, C as ColorSwatch } from "../../color-swatch-CFIuSPcO.js";
+import { a as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, c as $3493a52097159720$exports, C as ColorSwatch } from "../../color-swatch-BEBLRxTy.js";
 import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-7sOvrqo0.js";
 import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B49ptFDX.js";
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-WUv2PdFO.js";
@@ -19,7 +19,7 @@ import { a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-D8a3
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-ztX6G1zR.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-D2fUHql3.js";
 import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-DQeXkyLm.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { TriggeredPopover } from "../popover/popover.js";
@@ -1324,6 +1324,7 @@ const SolidColorPicker = (props) => {
   };
   const valueInputClassName = clsx(
     "es:leading-none",
+    "es:border-none!",
     "es:max-w-14",
     "es:min-h-9",
     "es:px-3",
@@ -1331,7 +1332,7 @@ const SolidColorPicker = (props) => {
     "es:rounded-lg es:focus:rounded-xl es:aria-[controls]:rounded-xl",
     "es:transition-plus",
     "es:any-focus:outline-hidden",
-    "es:inset-ring",
+    "es:inset-ring!",
     "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
     "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
     "es:focus:placeholder:text-surface-400",

package/dist/components/component-toggle/component-toggle.js

@@ -9,7 +9,7 @@ import { ButtonGroup } from "../button/button.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { Spacer } from "../spacer/spacer.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 /**
  * A component that provides a nice way to toggle a component on and off, and display its content in an expandable panel.

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { Switch } from "../toggle/switch.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { Button } from "../button/button.js";

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import "../../default-i18n-CnQeC5Pl.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
@@ -26,7 +26,7 @@ const DraggableHandle = (props) => {
     "div",
     {
       className: clsx(
-        "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded-sm es:hover:rounded-md es:inset-ring es:inset-ring-surface-400/10 es:bg-surface-50 es:text-surface-500/80 es:transition-plus",
+        "es:flex es:h-5 es:w-4 es:items-center es:justify-center es:rounded-sm es:hover:rounded-md es:inset-ring es:inset-ring-surface-400/10 es:bg-surface-50 es:text-surface-500/80 es:transition-plus",
         "es:shadow-2xs es:shadow-surface-900/2",
         "es:icon:size-4 es:icon:shrink-0",
         "es:active:inset-ring-accent-500/30 es:active:bg-surface-100 es:active:text-accent-500 es:active:rounded-xl",

package/dist/components/draggable/draggable.js

@@ -7321,7 +7321,7 @@ const Draggable3 = (props) => {
           children: items.map((item, index) => /* @__PURE__ */ jsx(
             SortableItem,
             {
-              id: item.id,
+              id: item?.id ?? index,
               index,
               item,
               disabled: noReorder,
@@ -7350,7 +7350,7 @@ const Draggable3 = (props) => {
                 item.id
               )
             },
-            item.id
+            item?.id ?? index
           ))
         }
       )

package/dist/components/draggable-list/draggable-list-item.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import "../../default-i18n-CnQeC5Pl.js";
 import { HStack } from "../layout/hstack.js";
 import { RichLabel } from "../rich-label/rich-label.js";
@@ -72,7 +72,7 @@ const DraggableListItemHandle = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: className ?? 'es:relative es:h-6 es:w-2 es:cursor-pointer es:items-center es:justify-center es:self-center es:rounded es:border es:border-secondary-300 es:bg-secondary-50 es:transition es:after:absolute es:after:inset-0 es:after:m-auto es:after:h-4 es:after:w-px es:after:bg-secondary-200 es:after:transition es:after:content-[""] es:hover:border-accent-500 es:hover:bg-accent-400 es:hover:after:bg-accent-500',
+      className: className ?? 'es:relative es:h-6 es:w-2 es:items-center es:justify-center es:self-center es:rounded es:border es:border-secondary-300 es:bg-secondary-50 es:transition es:after:absolute es:after:inset-0 es:after:m-auto es:after:h-4 es:after:w-px es:after:bg-secondary-200 es:after:transition es:after:content-[""] es:hover:border-accent-500 es:hover:bg-accent-400 es:hover:after:bg-accent-500',
       ...rest,
       "data-movable-handle": true,
       tabIndex: -1,

package/dist/components/expandable/expandable.js

@@ -4,7 +4,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BXjXzdW_.js";
 import { b as $bdb11010cef70236$export$f680877a34711e37, m as $b5e257d569688ac6$export$535bd6ca7f90a273, j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $64fa3d84918910a7$export$2881499e37b75b9a, n as $64fa3d84918910a7$export$c62b8e45d58ddad9, a as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-DGpXyJOJ.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";

package/dist/components/index.js

@@ -5,7 +5,7 @@ import { Button, ButtonGroup } from "./button/button.js";
 import { Checkbox } from "./checkbox/checkbox.js";
 import { ComponentToggle } from "./component-toggle/component-toggle.js";
 import { ContainerPanel } from "./container-panel/container-panel.js";
-import { C } from "../color-swatch-CFIuSPcO.js";
+import { C } from "../color-swatch-BEBLRxTy.js";
 import { ColorPicker } from "./color-pickers/color-picker.js";
 import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./slider/column-config-slider.js";
 import { Container, ContainerGroup } from "./base-control/container.js";

package/dist/components/input-field/input-field.js

@@ -204,7 +204,7 @@ const InputField = (props) => {
   const inputClass = cva(
     [
       "es:leading-none",
-      "es:border-none",
+      "es:border-none!",
       "es:w-fill",
       "es:rounded-lg es:focus:rounded-xl",
       "es:transition-plus",
@@ -224,9 +224,9 @@ const InputField = (props) => {
           large: ["es:min-h-12", "es:px-4"]
         },
         mono: {
-          true: "es:font-mono es:text-12",
+          true: "es:font-mono es:text-12!",
           false: [
-            'es:text-13 es:font-variation-["wdth"_80,"YTLC"_520,"wght"_300,"slnt"_0]',
+            'es:text-13! es:font-variation-["wdth"_80,"YTLC"_520,"wght"_300,"slnt"_0]',
             'es:tracking-wide es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8]'
           ]
         },

package/dist/components/layout/hstack.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * Allows for stacking elements horizontally, with a gap between them.
  *

package/dist/components/layout/vstack.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * Allows for stacking elements vertically, with a gap between them.
  *

package/dist/components/link-input/link-input.js

@@ -24,12 +24,13 @@ import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocaliz
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { icons } from "../../icons/icons.js";
 import { Spinner } from "../../icons/spinner.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
+import { randomId } from "../../utilities/hash.js";
 import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-D52mQcrH.js";
 function $4f58c5f72bcf79f7$export$496315a1608d9602(effect, dependencies) {
   const isInitialMount = useRef(true);
@@ -1503,6 +1504,7 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props, collection, comboBoxRef: r
  * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.keyboardShortcuts] - If `true`, keyboard shortcuts are shown in the suggestion list.
  * @param {InputSize} [props.size='default'] - Sets the size of the input field.
+ * @param {boolean} [props.inline] - If `true`, the component is displayed inline - icon/label/subtitle are on the left, the passed content is on the right. **Note:** not compatible with `actions`.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @typedef {'small' | 'medium' | 'default' | 'large'} InputSize
@@ -1525,6 +1527,7 @@ const LinkInput = (props) => {
     subtitle,
     help,
     actions,
+    inline,
     placeholder = __("Type to search or enter URL", "eightshift-ui-components"),
     icon = icons.globe,
     removeIcon = icons.clearAlt,
@@ -1560,18 +1563,19 @@ const LinkInput = (props) => {
   });
   const inputClass = cva(
     [
-      "es:text-13 es:leading-none",
+      "es:text-13! es:leading-none",
       "es:w-fill",
-      "es:border-none",
+      "es:border-none!",
       "es:rounded-lg es:focus:rounded-xl es:aria-[controls]:rounded-xl",
       "es:transition-plus",
       "es:any-focus:outline-hidden",
-      "es:inset-ring",
+      "es:inset-ring!",
       "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
       "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
       "es:placeholder-shown:pr-0 es:pr-10",
       "es:focus:placeholder:text-surface-400",
       'es:font-variation-["wdth"_80,"YTLC"_520,"wght"_300,"slnt"_0] es:tracking-wide es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8]',
+      inline && "es:min-w-48",
       className
     ],
     {
@@ -1595,7 +1599,7 @@ const LinkInput = (props) => {
             "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
             "es:hover:placeholder:text-surface-400",
             "es:placeholder:text-secondary-400",
-            "es:shadow-xs es:shadow-black/5"
+            "es:shadow-xs! es:shadow-black/5"
           ]
         },
         {
@@ -1607,7 +1611,7 @@ const LinkInput = (props) => {
             "es:placeholder:text-secondary-500/80",
             "es:bg-secondary-100 es:focus:bg-surface-50",
             "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200",
-            "es:shadow-none"
+            "es:shadow-none!"
           ]
         },
         { disabled: true, class: ["es:bg-white es:inset-ring-secondary-200 es:text-secondary-400"] }
@@ -1644,6 +1648,7 @@ const LinkInput = (props) => {
             subtitle,
             actions,
             labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            inline,
             help,
             children: /* @__PURE__ */ jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: "es:relative es:group", children: [
               /* @__PURE__ */ jsx(
@@ -1673,7 +1678,7 @@ const LinkInput = (props) => {
                           {
                             className: clsx(
                               "es:opacity-0 es:group-hover:opacity-100 es:group-focus-within:opacity-100 es:focus-visible:opacity-100",
-                              "es:flex es:size-8 es:items-center es:justify-center es:rounded-md es:text-secondary-600 es:backdrop-blur es:transition es:cursor-pointer",
+                              "es:flex es:size-8 es:items-center es:justify-center es:rounded-md es:text-secondary-600 es:backdrop-blur es:transition",
                               "es:hover:bg-red-600/5 es:hover:text-red-600",
                               "es:icon:size-6"
                             ),
@@ -1760,7 +1765,7 @@ const LinkInput = (props) => {
                   return /* @__PURE__ */ jsx(
                     $eed445e0843c11d0$export$a11e76429ed99b4,
                     {
-                      id: item.value,
+                      id: item?.value ?? randomId(8),
                       className: clsx(
                         "es:transition-plus",
                         "es:px-2 es:py-2.5",