@eightshift/ui-components 1.3.2 → 1.4.1

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-qjognpzK.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-D8qh3_U7.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,11 +1,276 @@
-import "react/jsx-runtime";
-import "../../Button-DTARR6Ff.js";
-import { B, a } from "../../button-IxfzzzbP.js";
-import "../../lite-DVmmD_-j.js";
-import "../../tooltip-DSk8I1SO.js";
-import "../../default-i18n-BqwLkgZv.js";
-import "../../utils-DC-UMp1n.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-uYE9D_E3.js";
+import { g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-B4IdLYb8.js";
+import { b as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-CVd6C65L.js";
+import React__default, { useState, useRef, forwardRef, createContext } from "react";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Bon2Gyx5.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { T as Tooltip } from "../../tooltip-C9mg1CP5.js";
+import { _ as __ } from "../../default-i18n-BqWys-1G.js";
+function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
+  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
+  let [isInToolbar, setInToolbar] = useState(false);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    var _ref_current_parentElement;
+    setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
+  });
+  const { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  const shouldReverse = direction === "rtl" && orientation === "horizontal";
+  let focusManager = $9bf71ea28793e738$export$c5251b9e124bf29(ref);
+  const onKeyDown = (e) => {
+    if (!e.currentTarget.contains(e.target)) return;
+    if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
+      if (shouldReverse) focusManager.focusPrevious();
+      else focusManager.focusNext();
+    } else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
+      if (shouldReverse) focusManager.focusNext();
+      else focusManager.focusPrevious();
+    } else if (e.key === "Tab") {
+      e.stopPropagation();
+      lastFocused.current = document.activeElement;
+      if (e.shiftKey) focusManager.focusFirst();
+      else focusManager.focusLast();
+      return;
+    } else
+      return;
+    e.stopPropagation();
+    e.preventDefault();
+  };
+  const lastFocused = useRef(null);
+  const onBlur = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
+  };
+  const onFocus = (e) => {
+    var _ref_current;
+    if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
+      var _lastFocused_current;
+      (_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
+      lastFocused.current = null;
+    }
+  };
+  return {
+    toolbarProps: {
+      role: !isInToolbar ? "toolbar" : "group",
+      "aria-orientation": orientation,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel == null ? ariaLabelledBy : void 0,
+      onKeyDownCapture: !isInToolbar ? onKeyDown : void 0,
+      onFocusCapture: !isInToolbar ? onFocus : void 0,
+      onBlurCapture: !isInToolbar ? onBlur : void 0
+    }
+  };
+}
+const $13c3c67164f4d5be$export$6311e7ab80ef752f = /* @__PURE__ */ createContext({});
+function $13c3c67164f4d5be$var$Toolbar(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $13c3c67164f4d5be$export$6311e7ab80ef752f);
+  let { toolbarProps } = $2680b1829e803644$export$fa142eb1681c520(props, ref);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      orientation: props.orientation || "horizontal"
+    },
+    defaultClassName: "react-aria-Toolbar"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(toolbarProps, DOMProps),
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-orientation": props.orientation || "horizontal"
+  }, renderProps.children);
+}
+const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef($13c3c67164f4d5be$var$Toolbar);
+/**
+ * A simple button component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display within the button.
+ * @param {ButtonSize} [props.size='default'] - The size of the button.
+ * @param {ButtonType} [props.type='default'] - The type of the button.
+ * @param {boolean} [props.disabled] - If `true`, the button is disabled.
+ * @param {string} [props.className] - Classes to pass to the button.
+ * @param {string} [props.tooltip] - Tooltip text to display on hover.
+ * @param {Function} [props.onPress] - Function to run when the button is pressed.
+ * @param {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
+ * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
+ * @param {Object} [props.tooltipProps] - Props to pass to the tooltip.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The Button component.
+ *
+ * @typedef {'small' | 'default' | 'large'} ButtonSize
+ * @typedef {'default' | 'selected' | 'ghost' | 'danger'} ButtonType
+ *
+ * @example
+ * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon} />
+ *
+ * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon}>My button</Button>
+ *
+ * @preserve
+ */
+const Button = (props) => {
+  var _a, _b, _c, _d;
+  const {
+    children,
+    icon,
+    size = "default",
+    type = "default",
+    disabled,
+    className,
+    tooltip,
+    onPress,
+    forwardedRef,
+    wrapperClassName,
+    tooltipProps,
+    "aria-label": ariaLabel = typeof children === "string" ? children : __("Menu item", "eightshift-ui-components"),
+    hidden,
+    ...other
+  } = props;
+  const objRef = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
+  if (hidden) {
+    return null;
+  }
+  const sizes = {
+    small: {
+      iconButton: "es-uic-size-7",
+      button: "es-uic-h-7 es-uic-min-w-7",
+      iconButtonPadding: "es-uic-px-1",
+      buttonPadding: "es-uic-px-2",
+      iconSize: "[&>svg]:es-uic-size-4.5"
+    },
+    default: {
+      iconButton: "es-uic-size-9",
+      button: "es-uic-h-9 es-uic-min-w-9",
+      iconButtonPadding: "es-uic-px-1.5",
+      buttonPadding: "es-uic-px-2",
+      iconSize: "[&>svg]:es-uic-size-5.5"
+    },
+    large: {
+      iconButton: "es-uic-size-10",
+      button: "es-uic-h-10 es-uic-min-w-10",
+      iconButtonPadding: "es-uic-px-2",
+      buttonPadding: "es-uic-px-4",
+      iconSize: "[&>svg]:es-uic-size-6"
+    }
+  };
+  const themes = {
+    default: {
+      regular: "es-uic-text-gray-700 es-uic-shadow-sm es-uic-border es-uic-border-gray-300 es-uic-bg-white",
+      hover: "hover:es-uic-border-gray-300 hover:es-uic-bg-gray-100",
+      disabled: "disabled:es-uic-border-gray-300 disabled:es-uic-bg-gray-50/50 disabled:es-uic-text-gray-300 es-uic-border",
+      focus: "focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
+    },
+    selected: {
+      regular: "es-uic-bg-teal-600 es-uic-text-white es-uic-border-teal-600 after:es-uic-opacity-45 es-uic-border es-uic-shadow-md es-uic-shadow-teal-500/25",
+      hover: "hover:es-uic-shadow-teal-600/50 hover:after:es-uic-opacity-60"
+    },
+    ghost: {
+      regular: "es-uic-border-transparent es-uic-text-gray-700",
+      hover: "hover:es-uic-bg-gray-100",
+      disabled: "disabled:es-uic-text-gray-300 disabled:es-uic-border-transparent"
+    },
+    danger: {
+      regular: "es-uic-border-red-300 es-uic-text-gray-700 es-uic-text-gray-900 es-uic-shadow-red-300/30 [&>svg]:es-uic-text-red-500 es-uic-shadow-sm es-uic-border",
+      hover: "hover:es-uic-border-red-400 hover:es-uic-bg-red-50 hover:es-uic-text-red-500 hover:es-uic-shadow-red-300/75",
+      focus: "focus-visible:es-uic-ring-red-500 focus-visible:es-uic-ring-opacity-50"
+    }
+  };
+  const component = /* @__PURE__ */ jsxs(
+    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+    {
+      onPress,
+      isDisabled: disabled,
+      className: clsx(
+        "es-uic-flex es-uic-items-center es-uic-gap-1 es-uic-rounded-md es-uic-transition es-uic-duration-300",
+        icon && children && "es-uic-justify-start",
+        icon && !children && "es-uic-justify-center",
+        !icon && children && "es-uic-justify-center",
+        !disabled && (((_a = themes[type]) == null ? void 0 : _a.regular) ?? themes.default.regular),
+        !disabled && (((_b = themes[type]) == null ? void 0 : _b.hover) ?? themes.default.hover),
+        "disabled:es-uic-shadow-none",
+        disabled && (((_c = themes[type]) == null ? void 0 : _c.disabled) ?? themes.default.disabled),
+        "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring",
+        ((_d = themes[type]) == null ? void 0 : _d.focus) ?? themes.default.focus,
+        icon && !children && sizes[size].iconButton,
+        children && "es-uic-text-sm",
+        children && sizes[size].button,
+        children && icon && sizes[size].iconButtonPadding,
+        children && !icon && sizes[size].buttonPadding,
+        "[.es-uic-button-group-h_&:not(:first-child)]:es-uic-rounded-l-none [.es-uic-button-group-h_&:not(:last-child)]:-es-uic-mr-px [.es-uic-button-group-h_&:not(:last-child)]:es-uic-rounded-r-none",
+        "[.es-uic-button-group-h_div:not(:first-child)_>_&]:es-uic-rounded-l-none [.es-uic-button-group-h_div:not(:last-child)_>_&]:-es-uic-mr-px [.es-uic-button-group-h_div:not(:last-child)_>_&]:es-uic-rounded-r-none",
+        sizes[size].iconSize,
+        type === "selected" && 'es-uic-relative es-uic-isolate after:es-uic-absolute after:es-uic-inset-0 after:-es-uic-z-10 after:es-uic-rounded-[0.3125rem] after:es-uic-bg-gradient-to-br after:es-uic-from-teal-100/40 after:es-uic-via-transparent after:es-uic-to-teal-200/50 after:es-uic-opacity-0 after:es-uic-transition-opacity after:es-uic-content-[""]',
+        type === "selected" && "[.es-uic-button-group-h_&:not(:first-child)]:after:es-uic-rounded-l-none [.es-uic-button-group-h_&:not(:last-child)]:after:es-uic-rounded-r-none",
+        type === "selected" && "[.es-uic-button-group-h_div:not(:first-child)_>_&]:after:es-uic-rounded-l-none [.es-uic-button-group-h_div:not(:last-child)_>_&]:after:es-uic-rounded-r-none",
+        "[.es-uic-button-group-v_&:not(:first-child)]:es-uic-rounded-t-none [.es-uic-button-group-v_&:not(:last-child)]:-es-uic-mb-px [.es-uic-button-group-v_&:not(:last-child)]:es-uic-rounded-b-none",
+        "[.es-uic-button-group-v_div:not(:first-child)_>_&]:es-uic-rounded-t-none [.es-uic-button-group-v_div:not(:last-child)_>_&]:-es-uic-mb-px [.es-uic-button-group-v_div:not(:last-child)_>_&]:es-uic-rounded-b-none",
+        type === "selected" && "[.es-uic-button-group-v_&:not(:first-child)]:after:es-uic-rounded-t-none [.es-uic-button-group-v_&:not(:last-child)]:after:es-uic-rounded-b-none",
+        type === "selected" && "[.es-uic-button-group-v_div:not(:first-child)_>_&]:after:es-uic-rounded-t-none [.es-uic-button-group-v_div:not(:last-child)_>_&]:after:es-uic-rounded-b-none",
+        className
+      ),
+      ref: objRef,
+      "aria-label": ariaLabel,
+      ...other,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+  if (!tooltip) {
+    return component;
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      text: tooltip,
+      wrapperClassName,
+      ...tooltipProps,
+      children: component
+    }
+  );
+};
+/**
+ * A wrapper for `Button` or `ToggleButton` components that visually groups them and ensures proper keyboard navigation.
+ *
+ * **Note**: Only intended for horizontal groups of buttons that don't wrap.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the button group container.
+ * @param {boolean} [props.vertical] - If `true`, the buttons are displayed vertically.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The ButtonGroup component.
+ *
+ * @example
+ * <ButtonGroup>
+ * 	<Button ... />
+ * 	<Button ... />
+ * 	<Button ... />
+ * </ButtonGroup>
+ *
+ * @preserve
+ */
+const ButtonGroup = ({ children, className, vertical, hidden, ...rest }) => {
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    $13c3c67164f4d5be$export$4c260019440d418f,
+    {
+      className: clsx("es-uic-flex", vertical ? "es-uic-button-group-v es-uic-flex-col" : "es-uic-button-group-h", className),
+      orientation: vertical ? "vertical" : "horizontal",
+      ...rest,
+      children
+    }
+  );
+};
 export {
-  B as Button,
-  a as ButtonGroup
+  Button,
+  ButtonGroup
 };

package/dist/components/checkbox/checkbox.js

@@ -1,9 +1,179 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-CiJIVbAP.js";
+import { $ as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-DQtGvvpM.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-B4IdLYb8.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$dad6ae84456c676a, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-DC5jbhBW.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-CJp2Fh_L.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-B4--Ski0.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DsxEaA2J.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-PMGZgZ9-.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DD480kAb.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";
+function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
+  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+    ...props,
+    value: state.isSelected
+  });
+  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577({
+    ...props,
+    isInvalid
+  }, state, inputRef);
+  $e93e671b31057976$export$b8473d3665f3a75a(props, validationState, inputRef);
+  let { isIndeterminate, isRequired, validationBehavior = "aria" } = props;
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = !!isIndeterminate;
+  });
+  return {
+    labelProps,
+    inputProps: {
+      ...inputProps,
+      checked: isSelected,
+      "aria-required": isRequired && validationBehavior === "aria" || void 0,
+      required: isRequired && validationBehavior === "native"
+    },
+    isSelected,
+    isPressed,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+const $1ae600c947479353$export$ec98120685d4f57d = /* @__PURE__ */ new WeakMap();
+function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
+  const toggleState = $3017fa7ffdddec74$export$8042c6c013fd5226({
+    isReadOnly: props.isReadOnly || state.isReadOnly,
+    isSelected: state.isSelected(props.value),
+    onChange(isSelected) {
+      if (isSelected) state.addValue(props.value);
+      else state.removeValue(props.value);
+      if (props.onChange) props.onChange(isSelected);
+    }
+  });
+  let { name, descriptionId, errorMessageId, validationBehavior } = $1ae600c947479353$export$ec98120685d4f57d.get(state);
+  var _props_validationBehavior;
+  validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
+  let { realtimeValidation } = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+    ...props,
+    value: toggleState.isSelected,
+    // Server validation is handled at the group level.
+    name: void 0,
+    validationBehavior: "aria"
+  });
+  let nativeValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let updateValidation = () => {
+    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+  };
+  useEffect(updateValidation);
+  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+  let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
+  var _props_isRequired;
+  let res = $406796ff087fe49b$export$e375f10ce42261c5({
+    ...props,
+    isReadOnly: props.isReadOnly || state.isReadOnly,
+    isDisabled: props.isDisabled || state.isDisabled,
+    name: props.name || name,
+    isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
+    validationBehavior,
+    [$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+      realtimeValidation: combinedRealtimeValidation,
+      displayValidation,
+      resetValidation: state.resetValidation,
+      commitValidation: state.commitValidation,
+      updateValidation(v) {
+        nativeValidation.current = v;
+        updateValidation();
+      }
+    }
+  }, toggleState, inputRef);
+  return {
+    ...res,
+    inputProps: {
+      ...res.inputProps,
+      "aria-describedby": [
+        props["aria-describedby"],
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
+      ].filter(Boolean).join(" ") || void 0
+    }
+  };
+}
+const $bc237834342dbd75$export$139c5b8563afc1fc = /* @__PURE__ */ createContext(null);
+function $bc237834342dbd75$var$Checkbox(props, ref) {
+  let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $4e85f108e88277b8$export$b085522c77523c51);
+  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 groupState = useContext($bc237834342dbd75$export$139c5b8563afc1fc);
+  let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid } = groupState ? $fba3e38d5ca8983f$export$353b32fc6898d37d({
+    ...props,
+    // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+    // it's passed explicitly here to avoid typescript error (requires ignore).
+    // @ts-ignore
+    value: props.value,
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === "function" ? true : props.children
+  }, groupState, inputRef) : $406796ff087fe49b$export$e375f10ce42261c5({
+    ...props,
+    children: typeof props.children === "function" ? true : props.children,
+    validationBehavior
+  }, $3017fa7ffdddec74$export$8042c6c013fd5226(props), inputRef);
+  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  let isInteractionDisabled = isDisabled || isReadOnly;
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+    ...props,
+    isDisabled: isInteractionDisabled
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    // TODO: should data attrs go on the label or on the <input>? useCheckbox passes them to the input...
+    ...props,
+    defaultClassName: "react-aria-Checkbox",
+    values: {
+      isSelected,
+      isIndeterminate: props.isIndeterminate || false,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired: props.isRequired || false
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("label", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
+    ref,
+    slot: props.slot || void 0,
+    "data-selected": isSelected || void 0,
+    "data-indeterminate": props.isIndeterminate || void 0,
+    "data-pressed": isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-readonly": isReadOnly || void 0,
+    "data-invalid": isInvalid || void 0,
+    "data-required": props.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
+    elementType: "span"
+  }, /* @__PURE__ */ React__default.createElement("input", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
+    ref: inputRef
+  })), renderProps.children);
+}
+const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef($bc237834342dbd75$var$Checkbox);
 /**
  * A simple checkbox.
  *

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
+import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { Menu, MenuSection, MenuItem } from "../menu/menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { RichLabel } from "../rich-label/rich-label.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-5bZ_yIMB.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-CkuKCPkT.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Bev-9Vbr.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-KQxgp5tS.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
+import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 /**
  * A simple color/gradient swatch.
  *

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

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __, s as sprintf } from "../../default-i18n-BqwLkgZv.js";
+import { _ as __, s as sprintf } from "../../default-i18n-BqWys-1G.js";
 import { useMemo, useState } from "react";
-import { B as Button, a as ButtonGroup } from "../../button-IxfzzzbP.js";
+import { Button, ButtonGroup } from "../button/button.js";
 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-5bZ_yIMB.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Bev-9Vbr.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Spacer } from "../spacer/spacer.js";