@eightshift/ui-components 1.9.0 → 2.0.0

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

@@ -31,13 +31,13 @@ const DraggableListItem = (props) => {
       icon,
       label,
       subtitle,
-      className: clsx("es-uic-w-full", className),
+      className: clsx("es:w-full", className),
       fullWidthLabel: true,
       inline: true,
       ...rest,
       children: [
         cloneElement(icons.reorderGrabberV, {
-          className: "es-uic-opacity-0 es-uic-transition-opacity group-focus-visible:es-uic-opacity-100 es-uic-text-gray-400 es-uic-size-4 group-hover:es-uic-opacity-100"
+          className: "es:opacity-0 es:transition-opacity es:group-focus-visible:opacity-100 es:text-secondary-400 es:size-4 es:group-hover:opacity-100"
         }),
         children
       ]
@@ -63,7 +63,7 @@ const DraggableListItemHandle = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: className ?? 'es-uic-relative es-uic-h-6 es-uic-w-2 es-uic-cursor-pointer es-uic-items-center es-uic-justify-center es-uic-self-center es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-transition after:es-uic-absolute after:es-uic-inset-0 after:es-uic-m-auto after:es-uic-h-4 after:es-uic-w-px after:es-uic-bg-gray-200 after:es-uic-transition after:es-uic-content-[""] hover:es-uic-border-teal-500 hover:es-uic-bg-teal-400 hover:after:es-uic-bg-teal-500',
+      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',
       ...rest,
       "data-movable-handle": true,
       tabIndex: -1,

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

@@ -3,7 +3,7 @@ import { useId } from "react";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { L as List, a as arrayRemove, b as arrayMove } from "../../List-Ct3nzFZG.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-Br274SP1.js";
 const fixIds = (items, itemIdBase) => {
   return items == null ? void 0 : items.map((item, i) => ({
     ...item,
@@ -87,7 +87,7 @@ const DraggableList = (props) => {
       subtitle,
       help,
       actions,
-      className: "es-uic-w-full",
+      className: "es:w-full",
       ...rest,
       children: /* @__PURE__ */ jsx(
         List,
@@ -99,7 +99,7 @@ const DraggableList = (props) => {
             return /* @__PURE__ */ jsx(
               "ul",
               {
-                className: "es-uic-w-full es-uic-list-none",
+                className: "es:w-full es:list-none",
                 ...rest2,
                 children: children2
               },
@@ -112,15 +112,15 @@ const DraggableList = (props) => {
               "li",
               {
                 className: clsx(
-                  "es-uic-group",
-                  "es-uic-min-h-8 es-uic-w-full",
-                  "es-uic-flex es-uic-items-center es-uic-gap-1 es-uic-rounded-lg",
-                  "es-uic-transition-[box-shadow,_background-color,_filter,_opacity,_border-color]",
-                  "focus:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
-                  isDisabled && "es-uic-grayscale",
-                  isDragged && "es-uic-bg-white es-uic-opacity-50",
-                  isSelected && "es-uic-bg-teal-50",
-                  isDragged ? "es-uic-cursor-grabbing" : "es-uic-cursor-grab"
+                  "es:group",
+                  "es:min-h-8 es:w-full",
+                  "es:flex es:items-center es:gap-1 es:rounded-lg",
+                  "es:transition-[box-shadow,background-color,filter,opacity,border-color]",
+                  "es:focus:outline-hidden es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+                  isDisabled && "es:grayscale",
+                  isDragged && "es:bg-white es:opacity-50",
+                  isSelected && "es:bg-accent-50",
+                  isDragged ? "es:cursor-grabbing" : "es:cursor-grab"
                 ),
                 ...rest2,
                 children: children({

package/dist/components/expandable/expandable.js

@@ -6,14 +6,14 @@ import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BMFbEXg1.js";
-import { f as $bdb11010cef70236$export$f680877a34711e37, e as $b5e257d569688ac6$export$535bd6ca7f90a273, l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, n as $5dc95899b306f630$export$c9058316764c140e, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-BSLBwuuO.js";
-import { r as reactDomExports } from "../../index-BYHhzLf-.js";
-import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-B0yfN_Zu.js";
-import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-CZY36ssv.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-OQ5EIPvt.js";
+import { f as $bdb11010cef70236$export$f680877a34711e37, e as $b5e257d569688ac6$export$535bd6ca7f90a273, l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, n as $5dc95899b306f630$export$c9058316764c140e, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-39D0mStj.js";
+import { r as reactDomExports } from "../../index-BRp93Yfa.js";
+import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-cLDJlznQ.js";
+import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-CiqTTjWy.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DMAlRYjX.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BtoiUpt8.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
 function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
   let { isDisabled } = props;
   let triggerId = $bdb11010cef70236$export$f680877a34711e37();
@@ -103,7 +103,7 @@ const $28f4fd908f0de97f$export$1d40e3e0cc4d5de = /* @__PURE__ */ createContext(n
 const $28f4fd908f0de97f$export$d665dd135a51b28a = /* @__PURE__ */ createContext(null);
 const $28f4fd908f0de97f$export$dab3ea4a6ef094da = /* @__PURE__ */ createContext(null);
 const $28f4fd908f0de97f$var$InternalDisclosureContext = /* @__PURE__ */ createContext(null);
-function $28f4fd908f0de97f$var$Disclosure(props, ref) {
+const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef(function Disclosure(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $28f4fd908f0de97f$export$d665dd135a51b28a);
   let groupState = useContext($28f4fd908f0de97f$export$1d40e3e0cc4d5de);
   let { id, ...otherProps } = props;
@@ -173,8 +173,8 @@ function $28f4fd908f0de97f$var$Disclosure(props, ref) {
     ...focusWithinProps,
     ...renderProps
   }, renderProps.children));
-}
-function $28f4fd908f0de97f$var$DisclosurePanel(props, ref) {
+});
+const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef(function DisclosurePanel(props, ref) {
   let { role = "group" } = props;
   let { panelProps, panelRef } = useContext($28f4fd908f0de97f$var$InternalDisclosureContext);
   let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
@@ -203,9 +203,7 @@ function $28f4fd908f0de97f$var$DisclosurePanel(props, ref) {
       ]
     ]
   }, props.children));
-}
-const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef($28f4fd908f0de97f$var$Disclosure);
-const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef($28f4fd908f0de97f$var$DisclosurePanel);
+});
 /**
  * A component that allows hiding content in an expandable panel, to declutter the UI.
  *
@@ -274,78 +272,68 @@ const Expandable = (props) => {
           onOpenChange(!isOpen);
         }
       },
-      className: clsx(
-        "es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300/0 es-uic-text-sm es-uic-transition",
-        isOpen && "es-uic-border-gray-300/100 es-uic-shadow-lg",
-        className
-      ),
+      className: clsx("es:w-full es:rounded-xl es:border es:border-secondary-300/0 es:text-sm es:transition", isOpen && "es:border-secondary-300/100 es:shadow-lg", className),
       ...other,
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx("es-uic-flex es-uic-h-10 es-uic-items-center es-uic-gap-1 es-uic-transition-[padding]", isOpen && "es-uic-py-1 es-uic-pl-2 es-uic-pr-1", headerClassName),
-            children: [
-              /* @__PURE__ */ jsx(
-                RichLabel,
-                {
-                  icon,
-                  label,
-                  subtitle,
-                  className: labelClassName,
-                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-                  fullWidth: true
+        /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:h-10 es:items-center es:gap-1 es:transition-[padding]", isOpen && "es:py-1 es:pl-2 es:pr-1", headerClassName), children: [
+          /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              icon,
+              label,
+              subtitle,
+              className: labelClassName,
+              as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+              fullWidth: true
+            }
+          ),
+          actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
+            AnimatedVisibility,
+            {
+              visible: !isOpen,
+              className: "es:ml-auto es:flex es:gap-2",
+              transition: "slideFadeDownSlight",
+              noInitial: true,
+              children: actions
+            }
+          ),
+          actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:flex es:gap-2", children: actions }),
+          customOpenButton && customOpenButton({
+            open: isOpen,
+            toggleOpen: () => {
+              setIsOpen(!isOpen);
+              if (onOpenChange) {
+                onOpenChange(!isOpen);
+              }
+            },
+            tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+            disabled
+          }),
+          !customOpenButton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              slot: "trigger",
+              type: "ghost",
+              icon: isOpen ? icons.caretDownFill : icons.caretDown,
+              onPress: () => {
+                setIsOpen(!isOpen);
+                if (onOpenChange) {
+                  onOpenChange(!isOpen);
                 }
-              ),
-              actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
-                AnimatedVisibility,
-                {
-                  visible: !isOpen,
-                  className: "es-uic-ml-auto es-uic-flex es-uic-gap-2",
-                  transition: "scaleFade",
-                  noInitial: true,
-                  children: actions
-                }
-              ),
-              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es-uic-ml-auto es-uic-flex es-uic-gap-2", children: actions }),
-              customOpenButton && customOpenButton({
-                open: isOpen,
-                toggleOpen: () => {
-                  setIsOpen(!isOpen);
-                  if (onOpenChange) {
-                    onOpenChange(!isOpen);
-                  }
-                },
-                tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
-                disabled
-              }),
-              !customOpenButton && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  slot: "trigger",
-                  type: "ghost",
-                  icon: isOpen ? icons.caretDownFill : icons.caretDown,
-                  onPress: () => {
-                    setIsOpen(!isOpen);
-                    if (onOpenChange) {
-                      onOpenChange(!isOpen);
-                    }
-                  },
-                  tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
-                  disabled,
-                  className: clsx("[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform", isOpen && "[&>svg]:-es-uic-scale-y-100"),
-                  size: "small"
-                }
-              )
-            ]
-          }
-        ),
+              },
+              tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+              disabled,
+              className: clsx("es:icon:size-5 es:icon:transition-transform", isOpen && "es:icon:-scale-y-100"),
+              size: "small"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           $28f4fd908f0de97f$export$feabaa331e1d464c,
           {
             className: clsx(
-              isOpen && "es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-2",
-              isOpen && "es-uic-animate-in es-uic-fade-in-0 es-uic-slide-in-from-top-3 es-uic-fill-mode-forwards",
+              isOpen && "es:space-y-2.5 es:border-t es:border-t-secondary-200 es:p-2",
+              isOpen && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-ease-spring-smooth es:motion-safe:motion-ease-linear/opacity es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
               contentClassName
             ),
             children

package/dist/components/index.js

@@ -22,7 +22,6 @@ import { InputField } from "./input-field/input-field.js";
 import { ImagePlaceholder } from "./placeholders/image-placeholder.js";
 import { ItemCollection } from "./item-collection/item-collection.js";
 import { LinkInput } from "./link-input/link-input.js";
-import { ListBox } from "./list-box/list-box.js";
 import { MatrixAlign } from "./matrix-align/matrix-align.js";
 import { MediaPlaceholder } from "./placeholders/media-placeholder.js";
 import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./menu/menu.js";
@@ -44,7 +43,7 @@ import { Modal } from "./modal/modal.js";
 import { MultiSelect } from "./select/multi-select.js";
 import { RSClearIndicator, RSDropdownIndicator, RSMultiValue, RSMultiValueContainer, RSMultiValueLabel, RSMultiValueRemove, RSOption, RSSingleValue } from "./select/react-select-component-wrappers.js";
 import { OptionSelect } from "./option-select/option-select.js";
-import { OptionsPanel, OptionsPanelHeader, OptionsPanelSection } from "./options-panel/options-panel.js";
+import { OptionsPanel, OptionsPanelHeader, OptionsPanelIntro, OptionsPanelSection } from "./options-panel/options-panel.js";
 import { Select } from "./select/single-select.js";
 import { Slider } from "./slider/slider.js";
 import { SolidColorPicker } from "./color-pickers/solid-color-picker.js";
@@ -85,7 +84,6 @@ export {
   InputField,
   ItemCollection,
   LinkInput,
-  ListBox,
   MatrixAlign,
   MediaPlaceholder,
   Menu,
@@ -100,6 +98,7 @@ export {
   OptionSelect,
   OptionsPanel,
   OptionsPanelHeader,
+  OptionsPanelIntro,
   OptionsPanelSection,
   Popover,
   RSClearIndicator,

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

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { b as $2d73ec29415bd339$export$712718f7aec83d5, a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BXSxJ_44.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BtoiUpt8.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-BSLBwuuO.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, b as $2d73ec29415bd339$export$712718f7aec83d5, $ 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 $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-39D0mStj.js";
 import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CZY36ssv.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DMAlRYjX.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DKicm3R0.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-D7A6s7O5.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-DNDWaukZ.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-aOUPPvTO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -16,7 +16,7 @@ let $216918bed6669f72$var$filterHoverProps = (props) => {
   let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
   return otherProps;
 };
-function $216918bed6669f72$var$TextArea(props, ref) {
+const $216918bed6669f72$export$f5c9f3c2c4054eec = /* @__PURE__ */ forwardRef(function TextArea(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $216918bed6669f72$export$2dc6166a7e65358c);
   let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
@@ -45,15 +45,15 @@ function $216918bed6669f72$var$TextArea(props, ref) {
     "data-focus-visible": isFocusVisible || void 0,
     "data-invalid": isInvalid || void 0
   });
-}
-const $216918bed6669f72$export$f5c9f3c2c4054eec = /* @__PURE__ */ forwardRef($216918bed6669f72$var$TextArea);
+});
 const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
-function $bcdf0525bf22703d$var$TextField(props, ref) {
+const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef(function TextField(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
   let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
   var _props_validationBehavior, _ref;
   let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
   let inputRef = useRef(null);
+  let [inputContextProps, mergedInputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415({}, inputRef, $3985021b0ad6602f$export$37fb8590cf2c088c);
   let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8();
   let [inputElementType, setInputElementType] = useState("input");
   let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $2d73ec29415bd339$export$712718f7aec83d5({
@@ -61,11 +61,13 @@ function $bcdf0525bf22703d$var$TextField(props, ref) {
     inputElementType,
     label,
     validationBehavior
-  }, inputRef);
+  }, mergedInputRef);
   let inputOrTextAreaRef = useCallback((el) => {
-    inputRef.current = el;
+    mergedInputRef.current = el;
     if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
-  }, []);
+  }, [
+    mergedInputRef
+  ]);
   let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
     ...props,
     values: {
@@ -99,7 +101,7 @@ function $bcdf0525bf22703d$var$TextField(props, ref) {
       [
         $3985021b0ad6602f$export$37fb8590cf2c088c,
         {
-          ...inputProps,
+          ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, inputContextProps),
           ref: inputOrTextAreaRef
         }
       ],
@@ -125,8 +127,7 @@ function $bcdf0525bf22703d$var$TextField(props, ref) {
       ]
     ]
   }, renderProps.children));
-}
-const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bcdf0525bf22703d$var$TextField);
+});
 /**
  * An input field.
  *
@@ -137,6 +138,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @param {string} [props.subtitle] - Subtitle to display.
  * @param {string} [props.help] - Help text to display below the input.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {boolean} [props.inline] - Whether the element menu is displayed inline with the label, to the right of it.
  * @param {string} [props.value] - The current value of the input.
  * @param {Function} [props.onChange] - Function to run when the input value changes.
  * @param {InputType} [props.type='text'] - The input type. Renders a `<textarea>` instead of `<input>` if set to 'multiline'.
@@ -144,6 +146,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @param {boolean} [props.readOnly] - If `true`, the input is read-only.
  * @param {string} [props.className] - Classes to pass to the input field.
  * @param {string} [props.wrapperClassName] - Classes to pass to the input field wrapping element.
+ * @param {boolean} [props.monospaceFont] - If `true`, the input uses a monospace font. Useful for things like IDs to make them easier to read.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The InputField component.
@@ -160,7 +163,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @preserve
  */
 const InputField = (props) => {
-  const { icon, label, subtitle, help, actions, value, onChange, type = "text", disabled, readOnly, className, wrapperClassName, hidden, ...other } = props;
+  const { icon, label, subtitle, help, actions, inline, value, onChange, type = "text", disabled, readOnly, className, wrapperClassName, hidden, monospaceFont, ...other } = props;
   if (hidden) {
     return null;
   }
@@ -180,6 +183,7 @@ const InputField = (props) => {
           label,
           subtitle,
           actions,
+          inline,
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           help,
           children: [
@@ -189,8 +193,13 @@ const InputField = (props) => {
                 ...other,
                 type,
                 className: clsx(
-                  "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
-                  "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                  "es:min-h-10 es:w-full es:rounded-lg es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                  "es:any-focus:outline-hidden",
+                  "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                  "es:focus-visible:border-accent-500",
+                  "es:inset-ring es:inset-ring-secondary-100",
+                  "es:disabled:shadow-none! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
+                  (monospaceFont || type === "password") && "es:font-mono",
                   className
                 )
               }
@@ -200,8 +209,12 @@ const InputField = (props) => {
               {
                 ...other,
                 className: clsx(
-                  "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
-                  "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                  "es:min-h-10 es:w-full es:rounded-lg es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                  "es:any-focus:outline-hidden",
+                  "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                  "es:focus-visible:border-accent-500",
+                  "es:inset-ring es:inset-ring-secondary-100",
+                  "es:disabled:shadow-none! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
                   className
                 )
               }

package/dist/components/layout/hstack.js

@@ -23,7 +23,7 @@ const HStack = (props) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-x-1.5 es-uic-gap-y-2", !noWrap && "es-uic-flex-wrap", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:items-center es:gap-x-1.5 es:gap-y-2", !noWrap && "es:flex-wrap", className), children });
 };
 export {
   HStack

package/dist/components/layout/vstack.js

@@ -23,7 +23,7 @@ const VStack = (props) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es-uic-flex es-uic-flex-col es-uic-gap-x-1.5 es-uic-gap-y-1.5", !noWrap && "es-uic-flex-wrap", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-x-1.5 es:gap-y-1.5", !noWrap && "es:flex-wrap", className), children });
 };
 export {
   VStack