@helpwave/hightide 0.1.24 → 0.1.26

package/dist/components/properties/CheckboxProperty.js

@@ -34,92 +34,810 @@ __export(CheckboxProperty_exports, {
 module.exports = __toCommonJS(CheckboxProperty_exports);
 var import_lucide_react3 = require("lucide-react");
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
 // src/components/user-action/Checkbox.tsx
 var import_react = require("react");
-var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_lucide_react = require("lucide-react");
-var import_clsx2 = __toESM(require("clsx"));
-
-// src/components/user-action/Label.tsx
 var import_clsx = __toESM(require("clsx"));
+
+// node_modules/@radix-ui/react-checkbox/dist/index.mjs
+var React10 = __toESM(require("react"), 1);
+
+// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+var React = __toESM(require("react"), 1);
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+// node_modules/@radix-ui/react-context/dist/index.mjs
+var React2 = __toESM(require("react"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-var styleMapping = {
-  labelSmall: "textstyle-label-sm",
-  labelMedium: "textstyle-label-md",
-  labelBig: "textstyle-label-lg"
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext3(rootComponentName, defaultContext) {
+    const BaseContext = React2.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      const { scope, children, ...context } = props;
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const value = React2.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext22(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const context = React2.useContext(Context);
+      if (context) return context;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext22];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React2.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React2.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React2.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+
+// node_modules/@radix-ui/primitive/dist/index.mjs
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var React4 = __toESM(require("react"), 1);
+
+// node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+var React3 = __toESM(require("react"), 1);
+var useLayoutEffect2 = globalThis?.document ? React3.useLayoutEffect : () => {
 };
-var Label = ({
-  children,
-  name,
-  labelType = "labelSmall",
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...props, className: (0, import_clsx.default)(styleMapping[labelType], className), children: children ? children : name });
+
+// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var React22 = __toESM(require("react"), 1);
+var useInsertionEffect = React4[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  if (true) {
+    const isControlledRef = React4.useRef(prop !== void 0);
+    React4.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React4.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          onChangeRef.current?.(value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React4.useState(defaultProp);
+  const prevValueRef = React4.useRef(value);
+  const onChangeRef = React4.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React4.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
+
+// node_modules/@radix-ui/react-use-previous/dist/index.mjs
+var React5 = __toESM(require("react"), 1);
+function usePrevious(value) {
+  const ref = React5.useRef({ value, previous: value });
+  return React5.useMemo(() => {
+    if (ref.current.value !== value) {
+      ref.current.previous = ref.current.value;
+      ref.current.value = value;
+    }
+    return ref.current.previous;
+  }, [value]);
+}
+
+// node_modules/@radix-ui/react-use-size/dist/index.mjs
+var React6 = __toESM(require("react"), 1);
+function useSize(element) {
+  const [size, setSize] = React6.useState(void 0);
+  useLayoutEffect2(() => {
+    if (element) {
+      setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries)) {
+          return;
+        }
+        if (!entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        let width;
+        let height;
+        if ("borderBoxSize" in entry) {
+          const borderSizeEntry = entry["borderBoxSize"];
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+          width = borderSize["inlineSize"];
+          height = borderSize["blockSize"];
+        } else {
+          width = element.offsetWidth;
+          height = element.offsetHeight;
+        }
+        setSize({ width, height });
+      });
+      resizeObserver.observe(element, { box: "border-box" });
+      return () => resizeObserver.unobserve(element);
+    } else {
+      setSize(void 0);
+    }
+  }, [element]);
+  return size;
+}
+
+// node_modules/@radix-ui/react-presence/dist/index.mjs
+var React23 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
+function useStateMachine(initialState, machine) {
+  return React7.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React23.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React23.cloneElement(child, { ref }) : null;
 };
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React23.useState();
+  const stylesRef = React23.useRef(null);
+  const prevPresentRef = React23.useRef(present);
+  const prevAnimationNameRef = React23.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React23.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React23.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 
-// src/components/user-action/Checkbox.tsx
+// node_modules/@radix-ui/react-primitive/dist/index.mjs
+var React9 = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+
+// node_modules/@radix-ui/react-slot/dist/index.mjs
+var React8 = __toESM(require("react"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React8.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React8.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React8.Children.count(newElement) > 1) return React8.Children.only(null);
+          return React8.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React8.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React8.isValidElement(children)) {
+      const childrenRef = getElementRef2(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React8.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React8.cloneElement(children, props2);
+    }
+    return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React8.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef2(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// node_modules/@radix-ui/react-primitive/dist/index.mjs
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot = createSlot(`Primitive.${node}`);
+  const Node = React9.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node };
+}, {});
+
+// node_modules/@radix-ui/react-checkbox/dist/index.mjs
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function CheckboxProvider(props) {
+  const {
+    __scopeCheckbox,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required,
+    value = "on",
+    // @ts-expect-error
+    internal_do_not_use_render
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange,
+    caller: CHECKBOX_NAME
+  });
+  const [control, setControl] = React10.useState(null);
+  const [bubbleInput, setBubbleInput] = React10.useState(null);
+  const hasConsumerStoppedPropagationRef = React10.useRef(false);
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    setChecked,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required,
+    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    CheckboxProviderImpl,
+    {
+      scope: __scopeCheckbox,
+      ...context,
+      children: isFunction2(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+    }
+  );
+}
+var TRIGGER_NAME = "CheckboxTrigger";
+var CheckboxTrigger = React10.forwardRef(
+  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
+    const {
+      control,
+      value,
+      disabled,
+      checked,
+      required,
+      setControl,
+      setChecked,
+      hasConsumerStoppedPropagationRef,
+      isFormControl,
+      bubbleInput
+    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setControl);
+    const initialCheckedStateRef = React10.useRef(checked);
+    React10.useEffect(() => {
+      const form = control?.form;
+      if (form) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+      }
+    }, [control, setChecked]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Primitive.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        "aria-required": required,
+        "data-state": getState(checked),
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        value,
+        ...checkboxProps,
+        ref: composedRefs,
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+          if (event.key === "Enter") event.preventDefault();
+        }),
+        onClick: composeEventHandlers(onClick, (event) => {
+          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+          if (bubbleInput && isFormControl) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+          }
+        })
+      }
+    );
+  }
+);
+CheckboxTrigger.displayName = TRIGGER_NAME;
+var Checkbox = React10.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCheckbox,
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      value,
+      onCheckedChange,
+      form,
+      ...checkboxProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      CheckboxProvider,
+      {
+        __scopeCheckbox,
+        checked,
+        defaultChecked,
+        disabled,
+        required,
+        onCheckedChange,
+        name,
+        form,
+        value,
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            CheckboxTrigger,
+            {
+              ...checkboxProps,
+              ref: forwardedRef,
+              __scopeCheckbox
+            }
+          ),
+          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            CheckboxBubbleInput,
+            {
+              __scopeCheckbox
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME = "CheckboxIndicator";
+var CheckboxIndicator = React10.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Presence,
+      {
+        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Primitive.span,
+          {
+            "data-state": getState(context.checked),
+            "data-disabled": context.disabled ? "" : void 0,
+            ...indicatorProps,
+            ref: forwardedRef,
+            style: { pointerEvents: "none", ...props.style }
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxIndicator.displayName = INDICATOR_NAME;
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = React10.forwardRef(
+  ({ __scopeCheckbox, ...props }, forwardedRef) => {
+    const {
+      control,
+      hasConsumerStoppedPropagationRef,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      name,
+      value,
+      form,
+      bubbleInput,
+      setBubbleInput
+    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    React10.useEffect(() => {
+      const input = bubbleInput;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate(checked);
+        setChecked.call(input, isIndeterminate(checked) ? false : checked);
+        input.dispatchEvent(event);
+      }
+    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
+    const defaultCheckedRef = React10.useRef(isIndeterminate(checked) ? false : checked);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Primitive.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        required,
+        disabled,
+        name,
+        value,
+        form,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isFunction2(value) {
+  return typeof value === "function";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+// src/components/user-action/Checkbox.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
-  small: "size-5",
-  medium: "size-6",
-  large: "size-8"
+  sm: "size-5 border-1",
+  md: "size-6 border-1",
+  lg: "size-8 border-2"
 };
 var checkboxIconSizeMapping = {
-  small: "size-4",
-  medium: "size-5",
-  large: "size-7"
+  sm: "size-4 stroke-3",
+  md: "size-5 stroke-3",
+  lg: "size-7 stroke-3"
 };
-var Checkbox = ({
-  id,
-  label,
-  checked,
+var Checkbox2 = ({
   disabled,
+  checked = false,
+  indeterminate = false,
   onChange,
-  onChangeTristate,
-  size = "medium",
+  size = "md",
   className = "",
-  containerClassName
+  ...props
 }) => {
   const usedSizeClass = checkboxSizeMapping[size];
   const innerIconSize = checkboxIconSizeMapping[size];
-  const propagateChange = (checked2) => {
-    if (onChangeTristate) {
-      onChangeTristate(checked2);
-    }
-    if (onChange) {
-      onChange(checked2 === "indeterminate" ? false : checked2);
-    }
-  };
-  const changeValue = () => {
-    const newValue = checked === "indeterminate" ? false : !checked;
-    propagateChange(newValue);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx2.default)("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      CheckboxPrimitive.Root,
-      {
-        onCheckedChange: propagateChange,
-        checked,
-        disabled,
-        id,
-        className: (0, import_clsx2.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Checkbox,
+    {
+      ...props,
+      disabled,
+      checked: indeterminate ? "indeterminate" : checked,
+      onCheckedChange: onChange,
+      className: (0, import_clsx.default)(
+        usedSizeClass,
+        `flex-col-0 items-center justify-center rounded outline-none`,
+        {
           "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "focus:border-primary group-hover:border-primary ": !disabled,
+          "hover:border-primary": !disabled,
           "bg-input-background": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
-        }, className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Minus, { className: innerIconSize })
-        ] })
-      }
-    ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { ...label, className: (0, import_clsx2.default)(label.className), htmlFor: id })
-  ] });
+          "bg-primary/30 border-primary text-primary": !disabled && (checked || indeterminate)
+        },
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxIndicator, { children: [
+        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx.default)("bg-input-background", innerIconSize) }),
+        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Check, { className: innerIconSize }),
+        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Minus, { className: innerIconSize })
+      ] })
+    }
+  );
 };
 
 // src/localization/LanguageProvider.tsx
@@ -142,7 +860,7 @@ var LanguageUtil = {
 };
 
 // src/localization/LanguageProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var LanguageContext = (0, import_react3.createContext)({
   language: LanguageUtil.DEFAULT_LANGUAGE,
   setLanguage: (v) => v
@@ -211,12 +929,12 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_clsx4 = __toESM(require("clsx"));
+var import_clsx3 = __toESM(require("clsx"));
 
 // src/components/user-action/Button.tsx
 var import_react4 = require("react");
-var import_clsx3 = __toESM(require("clsx"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ButtonColorUtil = {
   solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
   text: ["primary", "negative", "neutral"],
@@ -242,7 +960,6 @@ var ButtonUtil = {
 };
 var SolidButton = (0, import_react4.forwardRef)(function SolidButton2({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -252,58 +969,56 @@ var SolidButton = (0, import_react4.forwardRef)(function SolidButton2({
   ...restProps
 }, ref) {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-solid-primary-icon",
-    secondary: "text-button-solid-secondary-icon",
-    tertiary: "text-button-solid-tertiary-icon",
-    positive: "text-button-solid-positive-icon",
-    warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon",
-    neutral: "text-button-solid-neutral-icon"
+    primary: "not-group-disabled:text-button-solid-primary-icon",
+    secondary: "not-group-disabled:text-button-solid-secondary-icon",
+    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
+    positive: "not-group-disabled:text-button-solid-positive-icon",
+    warning: "not-group-disabled:text-button-solid-warning-icon",
+    negative: "not-group-disabled:text-button-solid-negative-icon",
+    neutral: "not-group-disabled:text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       ref,
       onClick,
-      disabled,
-      className: (0, import_clsx3.default)(
-        "font-semibold",
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [(0, import_clsx3.default)(colorClasses, "hover:brightness-90")]: !disabled
-        },
+      className: (0, import_clsx2.default)(
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
-            className: (0, import_clsx3.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx2.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
-            className: (0, import_clsx3.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx2.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -313,7 +1028,6 @@ var SolidButton = (0, import_react4.forwardRef)(function SolidButton2({
 });
 var TextButton = ({
   children,
-  disabled = false,
   color = "neutral",
   size = "medium",
   startIcon,
@@ -324,56 +1038,55 @@ var TextButton = ({
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "bg-transparent text-button-text-primary-text",
-    negative: "bg-transparent text-button-text-negative-text",
-    neutral: "bg-transparent text-button-text-neutral-text"
+    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-primary-text",
+    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-negative-text",
+    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-neutral-text"
   }[color];
   const backgroundColor = {
-    primary: "hover:bg-button-text-primary-text/20",
-    negative: "hover:bg-button-text-negative-text/20",
-    neutral: "hover:bg-button-text-neutral-text/20"
+    primary: "not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20",
+    negative: "not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20",
+    neutral: "not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-text-primary-icon",
-    negative: "text-button-text-negative-icon",
-    neutral: "text-button-text-neutral-icon"
+    primary: "not-group-disabled:text-button-text-primary-icon",
+    negative: "not-group-disabled:text-button-text-negative-icon",
+    neutral: "not-group-disabled:text-button-text-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       onClick,
-      disabled,
-      className: (0, import_clsx3.default)(
-        "font-semibold",
+      className: (0, import_clsx2.default)(
+        "group font-semibold",
+        "disabled:text-disabled-text",
+        colorClasses,
         {
-          "text-disabled-text cursor-not-allowed": disabled,
-          [colorClasses]: !disabled,
-          [backgroundColor]: !disabled && coloredHoverBackground,
-          "hover:bg-button-text-hover-background": !disabled && !coloredHoverBackground
+          [backgroundColor]: coloredHoverBackground,
+          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
         },
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
-            className: (0, import_clsx3.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx2.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "span",
           {
-            className: (0, import_clsx3.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx2.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -381,6 +1094,44 @@ var TextButton = ({
     }
   );
 };
+var IconButton = (0, import_react4.forwardRef)(function IconButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "button",
+    {
+      ref,
+      className: (0, import_clsx2.default)(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
+        {
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+});
 
 // src/localization/defaults/form.ts
 var formTranslation = {
@@ -418,6 +1169,7 @@ var formTranslation = {
     next: "Next",
     no: "No",
     none: "None",
+    nothingFound: "Nothing found",
     of: "of",
     optional: "Optional",
     pleaseWait: "Please wait...",
@@ -474,6 +1226,7 @@ var formTranslation = {
     next: "Weiter",
     no: "Nein",
     none: "Nichts",
+    nothingFound: "Nichts gefunden",
     of: "von",
     optional: "Optional",
     pleaseWait: "Bitte warten...",
@@ -499,7 +1252,7 @@ var formTranslation = {
 };
 
 // src/components/properties/PropertyBase.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var PropertyBase = ({
   overwriteTranslation,
   name,
@@ -513,11 +1266,11 @@ var PropertyBase = ({
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("flex-row-0 group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx3.default)("flex-row-0 group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
-        className: (0, import_clsx4.default)(
+        className: (0, import_clsx3.default)(
           "flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center rounded-l-xl border-2 border-r-0",
           {
             "bg-property-title-background text-property-title-text group-hover:border-primary": !requiredAndNoValue,
@@ -526,15 +1279,15 @@ var PropertyBase = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold", children: name })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-semibold", children: name })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
-        className: (0, import_clsx4.default)(
+        className: (0, import_clsx3.default)(
           "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
           {
             "bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
@@ -544,14 +1297,14 @@ var PropertyBase = ({
         ),
         children: [
           input({ softRequired, hasValue }),
-          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.AlertTriangle, { size: 24 }) }),
-          onRemove && hasValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.AlertTriangle, { size: 24 }) }),
+          onRemove && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: (0, import_clsx4.default)("items-center", { "!text-transparent": !hasValue || readOnly }),
-              disabled: !hasValue || readOnly,
+              className: (0, import_clsx3.default)("items-center"),
+              disabled: !hasValue,
               children: translation("remove")
             }
           )
@@ -562,7 +1315,26 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react5 = require("react");
+
+// src/components/user-action/Label.tsx
+var import_clsx4 = __toESM(require("clsx"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var styleMapping = {
+  sm: "typography-label-xs color-label-text",
+  md: "typography-label-md color-label-text"
+};
+var Label = ({
+  children,
+  size = "md",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { ...props, className: (0, import_clsx4.default)(styleMapping[size], className), children });
+};
+
+// src/components/properties/CheckboxProperty.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   overwriteTranslation,
   value,
@@ -571,23 +1343,27 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const id = (0, import_react5.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Check, { size: 24 }),
-      input: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        Checkbox,
-        {
-          checked: value ?? true,
-          disabled: readOnly,
-          onChange,
-          label: { name: `${translation("yes")}/${translation("no")}`, labelType: "labelMedium" },
-          containerClassName: "w-full"
-        }
-      )
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { size: 24 }),
+      input: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Checkbox2,
+          {
+            id,
+            checked: value ?? true,
+            disabled: readOnly,
+            onChange,
+            "aria-labelledby": id + "label"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
+      ] })
     }
   );
 };