@flamingo-stack/openframe-frontend-core 0.0.659-2347.6820.1 → 0.0.659

package/src/components/ui/textarea.tsx

@@ -37,192 +37,190 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   hideBorder?: boolean;
 }
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      className,
-      invalid = false,
-      label,
-      labelVariant,
-      error,
-      endIcon,
-      endIconAsButton = false,
-      endIconButtonProps,
-      startIcon,
-      hideBorder = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const isInvalid = invalid || !!error;
-    const hasAdornment = !!endIcon || !!startIcon;
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref) => {
+  const {
+    className,
+    invalid = false,
+    label,
+    labelVariant,
+    error,
+    endIcon,
+    endIconAsButton = false,
+    endIconButtonProps,
+    startIcon,
+    hideBorder = false,
+    ...props
+  } = allProps;
+  // Wired for a message even while `error` is undefined — see `FieldWrapper.errorSlot`.
+  const errorSlot = 'error' in allProps;
+  const isInvalid = invalid || !!error;
+  const hasAdornment = !!endIcon || !!startIcon;
 
-    // The adorned layout wraps the field in a `<label>`. Without an explicit
-    // `htmlFor`, the label's control defaults to its FIRST labelable descendant
-    // — which is `startIcon` (e.g. the composer `+` button) when present, so a
-    // click anywhere on the field synthesises a click on that button. Bind the
-    // label to the textarea explicitly to keep clicks (and focus) on the input.
-    const reactId = useId();
-    const fieldId = props.id ?? reactId;
+  // The adorned layout wraps the field in a `<label>`. Without an explicit
+  // `htmlFor`, the label's control defaults to its FIRST labelable descendant
+  // — which is `startIcon` (e.g. the composer `+` button) when present, so a
+  // click anywhere on the field synthesises a click on that button. Bind the
+  // label to the textarea explicitly to keep clicks (and focus) on the input.
+  const reactId = useId();
+  const fieldId = props.id ?? reactId;
 
-    // Without any adornment we keep the historical layout: bare textarea, the
-    // border/bg/hover all live on the textarea itself.
-    if (!hasAdornment) {
-      return (
-        <FieldWrapper label={label} labelVariant={labelVariant} error={error}>
-          <textarea
-            className={cn(
-              'flex min-h-[96px] w-full rounded-[6px] border p-3',
-              'text-h4',
-              'focus:border-ods-accent focus-visible:outline-none',
-              'touch-manipulation transition-colors duration-200',
-              'border-ods-border bg-ods-card text-ods-text-primary placeholder:text-ods-text-secondary',
-              !props.disabled &&
-                'hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active',
-              props.disabled && '!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border',
-              'relative z-10 cursor-text',
-              'resize-y',
-              isInvalid && 'border-ods-error hover:border-ods-error focus:border-ods-error',
-              className,
-            )}
-            ref={ref}
-            {...props}
-          />
-        </FieldWrapper>
-      );
-    }
-
-    // With an end icon we lift border/bg onto a `<label>` wrapper so the icon
-    // sits visually inside the same field. The textarea becomes a transparent
-    // child. Wrapper classes mirror `Input` 1:1 (same items-center, same
-    // `has-[:focus]` selectors, same active state, same outline reset) so
-    // hover / focus / cursor behaviour matches the standard input exactly.
-    //
-    // Focus selector: historically `has-[:focus]` (any focusable descendant —
-    // textarea OR the end-icon submit button — lights the accent). We narrow it
-    // to `textarea:focus` ONLY when a `startIcon` is present, because that's the
-    // composer-context layout where the start adornment hosts the context
-    // picker's own `<input>` (search field) — which must NOT light the field
-    // chrome. End-icon-only consumers (ticket reply, contact form, …) keep the
-    // original any-focus behaviour so the submit-button focus ring is unchanged.
-    const accentBorder = startIcon ? 'has-[textarea:focus]:border-ods-accent' : 'has-[:focus]:border-ods-accent';
-    const accentBorderError = startIcon ? 'has-[textarea:focus]:border-ods-error' : 'has-[:focus]:border-ods-error';
-    const adornmentAccent = startIcon
-      ? 'group-has-[textarea:focus]:text-ods-accent'
-      : 'group-has-[:focus]:text-ods-accent';
-    const content = (
-      <label
-        htmlFor={fieldId}
-        data-invalid={isInvalid || undefined}
-        className={cn(
-          // Wrapper mirrors `Input`, but uses `items-end` so the icon sticks
-          // to the bottom-right when the textarea grows multi-line. Vertical
-          // padding lives here (not on the textarea) so both children share
-          // the same bottom baseline at any height.
-          //
-          // Padding is sized so the single-line height matches `Input` exactly
-          // (44px mobile / 48px desktop): line `leading-6` (24px) + 2× padding
-          // + 1px border top/bottom. `min-h-11 md:min-h-12` is the matching
-          // floor; with symmetric padding the single line stays centered.
-          'flex min-h-11 w-full cursor-text items-end gap-2 px-3 py-[9px] md:min-h-12 md:py-[11px]',
-          'has-[:focus-visible]:outline-none',
-          'group',
-          'transition-colors duration-200',
-          // Card chrome (border / bg / radius / hover / focus). Suppressed when
-          // `hideBorder` — an outer container owns it instead.
-          !hideBorder && cn('rounded-[6px] border border-ods-border bg-ods-card', accentBorder),
-          !hideBorder &&
-            !props.disabled &&
-            'hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active',
-          !hideBorder && props.disabled && '!cursor-not-allowed bg-ods-bg',
-          // Start / end icons carry their own colour — grey them with the value
-          // so a disabled field reads as one flat colour. Scoped to the DIRECT
-          // span children (the two icon wrappers): the nodes inside them are
-          // rendered verbatim so callers can pass an interactive trigger and own
-          // its styling, and a descendant rule would overwrite exactly that.
-          'has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled',
-          !hideBorder && isInvalid && cn('border-ods-error hover:border-ods-error', accentBorderError),
-          hideBorder && 'bg-transparent',
-        )}
-      >
-        {startIcon && (
-          // Start adornment (e.g. the composer `+`). `items-end` + `h-6`
-          // co-centers it with the first text line, matching `endIcon`. The
-          // node is rendered verbatim so callers can pass an interactive
-          // button / menu trigger and own its styling + active color.
-          <span className="flex h-6 shrink-0 items-center">{startIcon}</span>
-        )}
+  // Without any adornment we keep the historical layout: bare textarea, the
+  // border/bg/hover all live on the textarea itself.
+  if (!hasAdornment) {
+    return (
+      <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorSlot={errorSlot}>
         <textarea
-          ref={ref}
-          rows={1}
-          id={fieldId}
           className={cn(
-            'm-0 box-border min-w-0 flex-1 resize-none border-none bg-transparent p-0 outline-none',
-            // Native CSS auto-grow (Chrome 123+, FF 124+, Safari 16.4+) — no
-            // JS needed to size to content. Falls back to `rows={1}` natural
-            // height on older browsers.
-            '[field-sizing:content]',
-            // `!leading-6` (not plain `leading-6`): on mobile `text-h4` sets a
-            // 20px line-height of its own that otherwise overrides the leading,
-            // leaving the 20px text box short of the 24px icon box and dropping
-            // the text below center under `items-end`. Forcing 24px keeps text
-            // and icon co-centered and the single-line height at 44px.
-            '!leading-6 text-ods-text-primary text-h4 placeholder:text-ods-text-secondary',
-            // Hard cap on growth: beyond `max-h` the textarea scrolls
-            // internally instead of pushing the icon out of frame.
-            'max-h-[160px] overflow-y-auto',
-            'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30',
-            // Disabled - match Input exactly (value greys out, placeholder dims further)
-            'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border',
+            'flex min-h-[96px] w-full rounded-[6px] border p-3',
+            'text-h4',
+            'focus:border-ods-accent focus-visible:outline-none',
+            'touch-manipulation transition-colors duration-200',
+            'border-ods-border bg-ods-card text-ods-text-primary placeholder:text-ods-text-secondary',
+            !props.disabled &&
+              'hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active',
+            props.disabled && '!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border',
+            'relative z-10 cursor-text',
+            'resize-y',
+            isInvalid && 'border-ods-error hover:border-ods-error focus:border-ods-error',
             className,
           )}
+          ref={ref}
           {...props}
         />
+      </FieldWrapper>
+    );
+  }
 
-        {endIconAsButton ? (
-          <button
-            type="button"
-            aria-label={endIconButtonProps?.['aria-label'] ?? 'Submit'}
-            {...endIconButtonProps}
-            className={cn(
-              // `h-6` matches the textarea's `leading-6` line box so the icon's
-              // visual center lines up with the text on the first line. Without
-              // it, `items-end` bottom-aligns the smaller mobile icon (size-4)
-              // against the 24px text line and drops it below the text center.
-              'flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200',
-              adornmentAccent,
-              'group-data-[invalid]:text-ods-error',
-              '[&_svg]:size-4 md:[&_svg]:size-6',
-              'cursor-pointer hover:text-ods-text-primary',
-              'focus-visible:text-ods-accent focus-visible:outline-none',
-              'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary',
-              endIconButtonProps?.className,
-            )}
-          >
-            {endIcon}
-          </button>
-        ) : (
-          <span
-            className={cn(
-              'flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200',
-              adornmentAccent,
-              'group-data-[invalid]:text-ods-error',
-              '[&_svg]:size-4 md:[&_svg]:size-6',
-            )}
-          >
-            {endIcon}
-          </span>
+  // With an end icon we lift border/bg onto a `<label>` wrapper so the icon
+  // sits visually inside the same field. The textarea becomes a transparent
+  // child. Wrapper classes mirror `Input` 1:1 (same items-center, same
+  // `has-[:focus]` selectors, same active state, same outline reset) so
+  // hover / focus / cursor behaviour matches the standard input exactly.
+  //
+  // Focus selector: historically `has-[:focus]` (any focusable descendant —
+  // textarea OR the end-icon submit button — lights the accent). We narrow it
+  // to `textarea:focus` ONLY when a `startIcon` is present, because that's the
+  // composer-context layout where the start adornment hosts the context
+  // picker's own `<input>` (search field) — which must NOT light the field
+  // chrome. End-icon-only consumers (ticket reply, contact form, …) keep the
+  // original any-focus behaviour so the submit-button focus ring is unchanged.
+  const accentBorder = startIcon ? 'has-[textarea:focus]:border-ods-accent' : 'has-[:focus]:border-ods-accent';
+  const accentBorderError = startIcon ? 'has-[textarea:focus]:border-ods-error' : 'has-[:focus]:border-ods-error';
+  const adornmentAccent = startIcon
+    ? 'group-has-[textarea:focus]:text-ods-accent'
+    : 'group-has-[:focus]:text-ods-accent';
+  const content = (
+    <label
+      htmlFor={fieldId}
+      data-invalid={isInvalid || undefined}
+      className={cn(
+        // Wrapper mirrors `Input`, but uses `items-end` so the icon sticks
+        // to the bottom-right when the textarea grows multi-line. Vertical
+        // padding lives here (not on the textarea) so both children share
+        // the same bottom baseline at any height.
+        //
+        // Padding is sized so the single-line height matches `Input` exactly
+        // (44px mobile / 48px desktop): line `leading-6` (24px) + 2× padding
+        // + 1px border top/bottom. `min-h-11 md:min-h-12` is the matching
+        // floor; with symmetric padding the single line stays centered.
+        'flex min-h-11 w-full cursor-text items-end gap-2 px-3 py-[9px] md:min-h-12 md:py-[11px]',
+        'has-[:focus-visible]:outline-none',
+        'group',
+        'transition-colors duration-200',
+        // Card chrome (border / bg / radius / hover / focus). Suppressed when
+        // `hideBorder` — an outer container owns it instead.
+        !hideBorder && cn('rounded-[6px] border border-ods-border bg-ods-card', accentBorder),
+        !hideBorder &&
+          !props.disabled &&
+          'hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active',
+        !hideBorder && props.disabled && '!cursor-not-allowed bg-ods-bg',
+        // Start / end icons carry their own colour — grey them with the value
+        // so a disabled field reads as one flat colour. Scoped to the DIRECT
+        // span children (the two icon wrappers): the nodes inside them are
+        // rendered verbatim so callers can pass an interactive trigger and own
+        // its styling, and a descendant rule would overwrite exactly that.
+        'has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled',
+        !hideBorder && isInvalid && cn('border-ods-error hover:border-ods-error', accentBorderError),
+        hideBorder && 'bg-transparent',
+      )}
+    >
+      {startIcon && (
+        // Start adornment (e.g. the composer `+`). `items-end` + `h-6`
+        // co-centers it with the first text line, matching `endIcon`. The
+        // node is rendered verbatim so callers can pass an interactive
+        // button / menu trigger and own its styling + active color.
+        <span className="flex h-6 shrink-0 items-center">{startIcon}</span>
+      )}
+      <textarea
+        ref={ref}
+        rows={1}
+        id={fieldId}
+        className={cn(
+          'm-0 box-border min-w-0 flex-1 resize-none border-none bg-transparent p-0 outline-none',
+          // Native CSS auto-grow (Chrome 123+, FF 124+, Safari 16.4+) — no
+          // JS needed to size to content. Falls back to `rows={1}` natural
+          // height on older browsers.
+          '[field-sizing:content]',
+          // `!leading-6` (not plain `leading-6`): on mobile `text-h4` sets a
+          // 20px line-height of its own that otherwise overrides the leading,
+          // leaving the 20px text box short of the 24px icon box and dropping
+          // the text below center under `items-end`. Forcing 24px keeps text
+          // and icon co-centered and the single-line height at 44px.
+          '!leading-6 text-ods-text-primary text-h4 placeholder:text-ods-text-secondary',
+          // Hard cap on growth: beyond `max-h` the textarea scrolls
+          // internally instead of pushing the icon out of frame.
+          'max-h-[160px] overflow-y-auto',
+          'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30',
+          // Disabled - match Input exactly (value greys out, placeholder dims further)
+          'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border',
+          className,
         )}
-      </label>
-    );
+        {...props}
+      />
 
-    return (
-      <FieldWrapper label={label} labelVariant={labelVariant} error={error}>
-        {content}
-      </FieldWrapper>
-    );
-  },
-);
+      {endIconAsButton ? (
+        <button
+          type="button"
+          aria-label={endIconButtonProps?.['aria-label'] ?? 'Submit'}
+          {...endIconButtonProps}
+          className={cn(
+            // `h-6` matches the textarea's `leading-6` line box so the icon's
+            // visual center lines up with the text on the first line. Without
+            // it, `items-end` bottom-aligns the smaller mobile icon (size-4)
+            // against the 24px text line and drops it below the text center.
+            'flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200',
+            adornmentAccent,
+            'group-data-[invalid]:text-ods-error',
+            '[&_svg]:size-4 md:[&_svg]:size-6',
+            'cursor-pointer hover:text-ods-text-primary',
+            'focus-visible:text-ods-accent focus-visible:outline-none',
+            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary',
+            endIconButtonProps?.className,
+          )}
+        >
+          {endIcon}
+        </button>
+      ) : (
+        <span
+          className={cn(
+            'flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200',
+            adornmentAccent,
+            'group-data-[invalid]:text-ods-error',
+            '[&_svg]:size-4 md:[&_svg]:size-6',
+          )}
+        >
+          {endIcon}
+        </span>
+      )}
+    </label>
+  );
+
+  return (
+    <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorSlot={errorSlot}>
+      {content}
+    </FieldWrapper>
+  );
+});
 Textarea.displayName = 'Textarea';
 
 export { Textarea };

package/dist/chunk-IWISVG4P.js

@@ -1,198 +0,0 @@
-"use client";
-import {
-  Label
-} from "./chunk-XBTZOO74.js";
-import {
-  CheckboxCheckmarkIcon
-} from "./chunk-6U3IUD57.js";
-import {
-  cn
-} from "./chunk-OXB6LRBK.js";
-
-// src/components/ui/required-mark.tsx
-import { jsx } from "react/jsx-runtime";
-function RequiredMark() {
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-ods-accent", children: "*" });
-}
-
-// src/components/ui/field-wrapper.tsx
-import { forwardRef } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var errorVariantClasses = {
-  error: "text-ods-error",
-  warning: "text-ods-warning",
-  success: "text-ods-success",
-  muted: "text-ods-text-secondary"
-};
-var FieldWrapper = forwardRef(
-  ({ label, htmlFor, error, errorVariant = "error", labelVariant = "default", required = false, className, children }, ref) => {
-    const hasChrome = label != null || error != null;
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn(hasChrome ? "relative flex w-full flex-col" : "contents", className), children: [
-      label && // Default is text-h6, NOT text-h4: `Field` (ui/field.tsx) renders its label via
-      // `Label variant="small"` = text-h6, and every form that mixes
-      // Field-wrapped controls with `label=`-prop controls showed two label
-      // sizes side by side — the exact inconsistency the admin editors kept
-      // reporting. One label scale, owned here and in Field together.
-      /* @__PURE__ */ jsxs(Label, { className: "mb-1", htmlFor, variant: labelVariant, children: [
-        label,
-        required && /* @__PURE__ */ jsx2(RequiredMark, {})
-      ] }),
-      children,
-      error && /* @__PURE__ */ jsx2(
-        "p",
-        {
-          className: cn(
-            "absolute bottom-0 left-0 right-0 translate-y-full truncate text-h6",
-            errorVariantClasses[errorVariant]
-          ),
-          title: error,
-          children: error
-        }
-      )
-    ] });
-  }
-);
-FieldWrapper.displayName = "FieldWrapper";
-
-// src/components/ui/input.tsx
-import { Loader2 } from "lucide-react";
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var invalidBorderClasses = {
-  error: "border-ods-error hover:border-ods-error has-[:focus]:border-ods-error",
-  warning: "!border-ods-warning hover:!border-ods-warning has-[:focus]:!border-ods-warning"
-};
-var Input = forwardRef2(
-  ({
-    className,
-    type,
-    invalid = false,
-    startAdornment,
-    endAdornment,
-    label,
-    labelVariant,
-    error,
-    errorVariant = "error",
-    loading = false,
-    ...props
-  }, ref) => {
-    const variantIsInvalid = errorVariant === "error" || errorVariant === "warning";
-    const isInvalid = invalid || !!error && variantIsInvalid;
-    if (type === "range") {
-      const rangeInput = /* @__PURE__ */ jsx3(
-        "input",
-        {
-          type: "range",
-          className: cn(
-            "h-1 w-full cursor-pointer appearance-none rounded-full bg-white/30",
-            // Webkit (Chrome/Safari) thumb
-            "[&::-webkit-slider-thumb]:appearance-none",
-            "[&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3",
-            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white",
-            "[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-sm",
-            // Firefox thumb
-            "[&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3",
-            "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white",
-            "[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0",
-            // Firefox track
-            "[&::-moz-range-track]:bg-transparent",
-            // Disabled
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            className
-          ),
-          ref,
-          ...props
-        }
-      );
-      return label ? /* @__PURE__ */ jsx3(FieldWrapper, { label, labelVariant, error, errorVariant, children: rangeInput }) : rangeInput;
-    }
-    const content = /* @__PURE__ */ jsxs2(
-      "label",
-      {
-        "data-invalid": isInvalid || void 0,
-        className: cn(
-          // Layout & spacing
-          "flex h-11 w-full cursor-text items-center gap-2 rounded-[6px] border px-3 md:h-12",
-          // Focus-within states
-          "has-[:focus-visible]:outline-none",
-          "group",
-          // Animations & touch UX
-          "transition-colors duration-200",
-          // Theme palette
-          "border-ods-border bg-ods-card has-[:focus]:border-ods-accent",
-          // Hover & active (not disabled)
-          !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
-          // Disabled. The adornments (and any icon inside them) carry their own
-          // `text-ods-text-secondary`, so grey them from here — a disabled field
-          // must read as one flat colour, not grey text next to a live icon.
-          // Scoped to the DIRECT span children (the two adornment wrappers): a
-          // descendant rule would also repaint whatever the caller renders INSIDE
-          // an adornment, which is passed verbatim precisely so it can own its
-          // colour (a `Tag` there went invisible against its own fill).
-          props.disabled && "!cursor-not-allowed bg-ods-bg",
-          "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
-          // Invalid
-          isInvalid && invalidBorderClasses[variantIsInvalid ? errorVariant : "error"],
-          className
-        ),
-        children: [
-          startAdornment && /* @__PURE__ */ jsx3("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment }),
-          /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type,
-              className: cn(
-                // Layout
-                "min-w-0 flex-1 border-none bg-transparent outline-none",
-                // Typography
-                "text-h4",
-                // Colors
-                "text-ods-text-primary placeholder:text-ods-text-secondary",
-                // File input adjustments
-                "file:border-0 file:bg-transparent",
-                // Disabled
-                "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
-                // Touch
-                "touch-manipulation",
-                // Autofill override
-                "[&:-webkit-autofill]:[-webkit-box-shadow:0_0_0_9999px_transparent_inset] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-text-primary)] [&:-webkit-autofill]:[caret-color:var(--color-text-primary)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s]"
-              ),
-              ref,
-              ...props
-            }
-          ),
-          loading && /* @__PURE__ */ jsx3(Loader2, { className: "size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" }),
-          !loading && endAdornment && /* @__PURE__ */ jsx3("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
-        ]
-      }
-    );
-    return /* @__PURE__ */ jsx3(FieldWrapper, { label, labelVariant, error, errorVariant, children: content });
-  }
-);
-Input.displayName = "Input";
-
-// src/components/ui/checkbox.tsx
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Checkbox = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-ods-accent data-[state=checked]:bg-ods-accent",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx4(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-ods-text-on-accent"), children: /* @__PURE__ */ jsx4(CheckboxCheckmarkIcon, { size: 10 }) })
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export {
-  RequiredMark,
-  FieldWrapper,
-  Input,
-  Checkbox
-};
-//# sourceMappingURL=chunk-IWISVG4P.js.map

package/dist/chunk-IWISVG4P.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ui/required-mark.tsx","../src/components/ui/field-wrapper.tsx","../src/components/ui/input.tsx","../src/components/ui/checkbox.tsx"],"sourcesContent":["/**\n * The design system's required-field mark: an accent asterisk after the label.\n * `aria-hidden` on purpose — the CONTROL carries `required`/`aria-required` for\n * assistive tech; the star is only the visual. ONE owner, used by `Field`,\n * `FieldWrapper` and every form that marks its own labels.\n */\nexport function RequiredMark() {\n  return (\n    <span aria-hidden className=\"text-ods-accent\">\n      *\n    </span>\n  );\n}\n","'use client';\n\nimport { type ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from './label';\nimport { RequiredMark } from './required-mark';\n\nexport interface FieldWrapperProps {\n  /** Label text displayed above the field */\n  label?: string;\n  /**\n   * `id` of the control the label names. Without it the label is decoration:\n   * clicking it focuses nothing and assistive tech reads the field unnamed,\n   * which is why every caller that cared was rendering its own <Label> instead\n   * of using `label` here.\n   */\n  htmlFor?: string;\n  /**\n   * Status message displayed below the field, on ONE line, ellipsized on\n   * overflow (full text via the native `title`).\n   *\n   * It is positioned OUT OF FLOW (absolute, hanging below the wrapper), so it\n   * never changes the field's height when it appears — the same treatment\n   * `CheckboxBlock` uses. The trade is that it overlaps whatever sits directly\n   * below: a form stacking fields needs at least ~20px of vertical gap (e.g.\n   * `gap-[var(--spacing-system-lf)]`) for the message to land in clear space.\n   */\n  error?: string;\n  /** Color variant for the message: \"error\" (red), \"warning\" (yellow), \"success\" (green) or \"muted\" (grey) */\n  errorVariant?: 'error' | 'warning' | 'success' | 'muted';\n  /**\n   * Label scale. Default is the standard form-label scale (text-h6).\n   * 'large' (text-h4) is for screens whose design specifies body-scale field\n   * titles (e.g. the devices New Device page) — opt in per call site, the\n   * default stays the converged small scale.\n   */\n  labelVariant?: 'default' | 'large';\n  /**\n   * Marks the label with the `RequiredMark` `ContactForm` draws on its required\n   * fields, so a form mixing both never shows two conventions. Visual only — the\n   * CONTROL carries `required`/`aria-required` for assistive tech; the star is\n   * `aria-hidden`.\n   */\n  required?: boolean;\n  /** Additional className for the outer wrapper */\n  className?: string;\n  children: ReactNode;\n}\n\nconst errorVariantClasses = {\n  error: 'text-ods-error',\n  warning: 'text-ods-warning',\n  success: 'text-ods-success',\n  muted: 'text-ods-text-secondary',\n} as const;\n\nconst FieldWrapper = forwardRef<HTMLDivElement, FieldWrapperProps>(\n  (\n    { label, htmlFor, error, errorVariant = 'error', labelVariant = 'default', required = false, className, children },\n    ref,\n  ) => {\n    const hasChrome = label != null || error != null;\n\n    return (\n      <div ref={ref} className={cn(hasChrome ? 'relative flex w-full flex-col' : 'contents', className)}>\n        {label && (\n          // Default is text-h6, NOT text-h4: `Field` (ui/field.tsx) renders its label via\n          // `Label variant=\"small\"` = text-h6, and every form that mixes\n          // Field-wrapped controls with `label=`-prop controls showed two label\n          // sizes side by side — the exact inconsistency the admin editors kept\n          // reporting. One label scale, owned here and in Field together.\n          <Label className=\"mb-1\" htmlFor={htmlFor} variant={labelVariant}>\n            {label}\n            {required && <RequiredMark />}\n          </Label>\n        )}\n        {children}\n        {error && (\n          <p\n            className={cn(\n              'absolute bottom-0 left-0 right-0 translate-y-full truncate text-h6',\n              errorVariantClasses[errorVariant],\n            )}\n            title={error}\n          >\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\nFieldWrapper.displayName = 'FieldWrapper';\n\nexport { FieldWrapper };\n","'use client';\n\nimport { Loader2 } from 'lucide-react';\nimport { type InputHTMLAttributes, type ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport { FieldWrapper } from './field-wrapper';\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** When true, renders error border & ring */\n  invalid?: boolean;\n  /** Element displayed at the start (left) of the input */\n  startAdornment?: ReactNode;\n  /** Element displayed at the end (right) of the input */\n  endAdornment?: ReactNode;\n  /** Label text displayed above the input */\n  label?: string;\n  /** Label scale forwarded to FieldWrapper ('large' = text-h4 for designs with body-scale field titles) */\n  labelVariant?: 'default' | 'large';\n  /** Status message displayed below the input */\n  error?: string;\n  /** Color variant for the message: \"error\" (red), \"warning\" (yellow), \"success\" (green) or \"muted\" (grey).\n      Only \"error\" and \"warning\" mark the field invalid (colored border). */\n  errorVariant?: 'error' | 'warning' | 'success' | 'muted';\n  /** When true, shows a loading spinner as end adornment */\n  loading?: boolean;\n}\n\nconst invalidBorderClasses = {\n  error: 'border-ods-error hover:border-ods-error has-[:focus]:border-ods-error',\n  warning: '!border-ods-warning hover:!border-ods-warning has-[:focus]:!border-ods-warning',\n} as const;\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      label,\n      labelVariant,\n      error,\n      errorVariant = 'error',\n      loading = false,\n      ...props\n    },\n    ref,\n  ) => {\n    // success/muted are informational — they never paint the invalid border\n    const variantIsInvalid = errorVariant === 'error' || errorVariant === 'warning';\n    const isInvalid = invalid || (!!error && variantIsInvalid);\n\n    // Range inputs get a clean slider rendering — no label wrapper, borders, or adornments\n    if (type === 'range') {\n      const rangeInput = (\n        <input\n          type=\"range\"\n          className={cn(\n            'h-1 w-full cursor-pointer appearance-none rounded-full bg-white/30',\n            // Webkit (Chrome/Safari) thumb\n            '[&::-webkit-slider-thumb]:appearance-none',\n            '[&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3',\n            '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white',\n            '[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-sm',\n            // Firefox thumb\n            '[&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3',\n            '[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white',\n            '[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0',\n            // Firefox track\n            '[&::-moz-range-track]:bg-transparent',\n            // Disabled\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            className,\n          )}\n          ref={ref}\n          {...props}\n        />\n      );\n      return label ? (\n        <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorVariant={errorVariant}>\n          {rangeInput}\n        </FieldWrapper>\n      ) : (\n        rangeInput\n      );\n    }\n\n    const content = (\n      <label\n        data-invalid={isInvalid || undefined}\n        className={cn(\n          // Layout & spacing\n          'flex h-11 w-full cursor-text items-center gap-2 rounded-[6px] border px-3 md:h-12',\n          // Focus-within states\n          'has-[:focus-visible]:outline-none',\n          'group',\n          // Animations & touch UX\n          'transition-colors duration-200',\n          // Theme palette\n          'border-ods-border bg-ods-card has-[:focus]:border-ods-accent',\n          // Hover & active (not disabled)\n          !props.disabled &&\n            'hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active',\n          // Disabled. The adornments (and any icon inside them) carry their own\n          // `text-ods-text-secondary`, so grey them from here — a disabled field\n          // must read as one flat colour, not grey text next to a live icon.\n          // Scoped to the DIRECT span children (the two adornment wrappers): a\n          // descendant rule would also repaint whatever the caller renders INSIDE\n          // an adornment, which is passed verbatim precisely so it can own its\n          // colour (a `Tag` there went invisible against its own fill).\n          props.disabled && '!cursor-not-allowed bg-ods-bg',\n          'has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled',\n          // Invalid\n          isInvalid && invalidBorderClasses[variantIsInvalid ? errorVariant : 'error'],\n          className,\n        )}\n      >\n        {startAdornment && (\n          <span className=\"flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6\">\n            {startAdornment}\n          </span>\n        )}\n        <input\n          type={type}\n          className={cn(\n            // Layout\n            'min-w-0 flex-1 border-none bg-transparent outline-none',\n            // Typography\n            'text-h4',\n            // Colors\n            'text-ods-text-primary placeholder:text-ods-text-secondary',\n            // File input adjustments\n            'file:border-0 file:bg-transparent',\n            // Disabled\n            'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border',\n            // Touch\n            'touch-manipulation',\n            // Autofill override\n            '[&:-webkit-autofill]:[-webkit-box-shadow:0_0_0_9999px_transparent_inset] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-text-primary)] [&:-webkit-autofill]:[caret-color:var(--color-text-primary)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s]',\n          )}\n          ref={ref}\n          {...props}\n        />\n        {loading && <Loader2 className=\"size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6\" />}\n        {!loading && endAdornment && (\n          <span className=\"flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6\">\n            {endAdornment}\n          </span>\n        )}\n      </label>\n    );\n\n    return (\n      <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorVariant={errorVariant}>\n        {content}\n      </FieldWrapper>\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n","'use client';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';\n\nconst Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      'peer h-4 w-4 shrink-0 rounded-sm border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-ods-accent data-[state=checked]:bg-ods-accent',\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-ods-text-on-accent')}>\n      <CheckboxCheckmarkIcon size={10} />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\n"],"mappings":"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","names":["jsx","forwardRef","jsx","jsxs","forwardRef","forwardRef","jsx","forwardRef"]}