@mattermost/compass-ui 0.1.0-alpha.16 → 0.1.0-alpha.17

package/dist/components/password-input/PasswordInput.css

@@ -0,0 +1 @@
+._password-input_d44ti_2{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._password-input__wrapper_d44ti_8{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:not(:disabled)):hover:not(:focus-within) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:focus-visible) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:disabled) ._password-input__wrapper_d44ti_8{background-color:var(--center-channel-bg);opacity:.56}._password-input__label_d44ti_28{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.72);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.72)}._password-input__inner_d44ti_55{display:flex;align-items:center;flex:1;min-width:0}._password-input__input_d44ti_18{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._password-input__input_d44ti_18:focus{outline:none}._password-input__input_d44ti_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._password-input__input_d44ti_18:disabled{cursor:not-allowed}._password-input__trailing-icon_d44ti_83{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--spacing-xs);color:rgba(var(--center-channel-color-rgb),.64)}._password-input__reveal_d44ti_91{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;cursor:pointer;color:inherit;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._password-input__reveal_d44ti_91:hover:not(:disabled){color:var(--center-channel-color)}._password-input__reveal_d44ti_91:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._password-input__reveal_d44ti_91:disabled{cursor:not-allowed}._password-input--size-small_d44ti_116 ._password-input__wrapper_d44ti_8{min-height:32px}._password-input--size-small_d44ti_116 ._password-input__inner_d44ti_55{padding:var(--spacing-xs) var(--spacing-m)}._password-input--size-small_d44ti_116 ._password-input__input_d44ti_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._password-input--size-small_d44ti_116._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input--size-medium_d44ti_132 ._password-input__wrapper_d44ti_8{min-height:40px}._password-input--size-medium_d44ti_132 ._password-input__inner_d44ti_55{padding:var(--spacing-s) var(--spacing-l)}._password-input--size-medium_d44ti_132 ._password-input__input_d44ti_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._password-input--size-medium_d44ti_132 ._password-input__label_d44ti_28{font-size:var(--font-size-100);left:var(--spacing-m)}._password-input--size-medium_d44ti_132._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input--size-large_d44ti_152 ._password-input__wrapper_d44ti_8{min-height:48px}._password-input--size-large_d44ti_152 ._password-input__inner_d44ti_55{padding:var(--spacing-m) var(--spacing-l)}._password-input--size-large_d44ti_152 ._password-input__input_d44ti_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._password-input--size-large_d44ti_152 ._password-input__label_d44ti_28{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._password-input--size-large_d44ti_152._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input_d44ti_2:has(._password-input__input_d44ti_18:focus-visible) ._password-input__label_d44ti_28{color:var(--button-bg)}._password-input_d44ti_2:has(._password-input__label_d44ti_28):not(._password-input--label-floated_d44ti_48) ._password-input__input_d44ti_18::placeholder{color:transparent}._password-input--invalid_d44ti_179 ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179:has(._password-input__input_d44ti_18:focus-visible) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179 ._password-input__label_d44ti_28{color:var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179:has(._password-input__input_d44ti_18:focus-visible) ._password-input__label_d44ti_28{color:var(--error-text, var(--color-danger))}

package/dist/components/password-input/PasswordInput.d.ts

@@ -0,0 +1,49 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
+import { BuiltInButtonProps } from '../../utils/props';
+export type PasswordInputSize = 'small' | 'medium' | 'large';
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** When true, shows invalid/error styling. */
+    invalid?: boolean;
+    /** Floating label. Floats above the border when focused or filled. */
+    label?: ReactNode;
+    /** Size variant. Default: Medium. */
+    size?: PasswordInputSize;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
+    /**
+     * Accessible name for the reveal toggle when the password is hidden.
+     * Default: `"Show password"`.
+     */
+    showPasswordLabel?: string;
+    /**
+     * Accessible name for the reveal toggle when the password is visible.
+     * Default: `"Hide password"`.
+     */
+    hidePasswordLabel?: string;
+    /** Extra attributes for the reveal toggle (e.g. `data-testid`). */
+    revealButtonProps?: BuiltInButtonProps;
+    /**
+     * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).
+     */
+    revealed?: boolean;
+    /** Uncontrolled initial reveal state. Default: `false`. */
+    defaultRevealed?: boolean;
+    /** Called when the reveal toggle changes visibility. */
+    onRevealedChange?: (revealed: boolean) => void;
+}
+/**
+ * Password Inputs are the dedicated field for secrets — login, signup, invite
+ * passwords. They look like a text input with a built-in show/hide toggle so the
+ * affordance is obvious, the same way Search Input always ships a magnifier.
+ */
+declare const PasswordInput: import('react').ForwardRefExoticComponent<PasswordInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default PasswordInput;
+//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/components/password-input/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAS7D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,QAAA,MAAM,aAAa,iHAuLlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/password-input/PasswordInput.js

@@ -0,0 +1,140 @@
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
+import { forwardRef as ds, useId as cs, useRef as ps, useState as y, useCallback as l } from "react";
+import __us from "@mattermost/compass-icons/components/eye-off-outline.js";const us=__us&&__us.default?__us.default:__us;
+import __ms from "@mattermost/compass-icons/components/eye-outline.js";const ms=__ms&&__ms.default?__ms.default:__ms;
+import fs from "../icon/Icon.js";
+import { mergeFieldDescribedBy as vs, hasFieldMessage as ws, isFieldInvalid as Is } from "../field/fieldDescribedBy.js";
+import _s from "../field-message/FieldMessage.js";
+import { mergeClassNames as bs } from "../../utils/props.js";
+import { toKebab as Ns } from "../../utils/string.js";
+import t from "./PasswordInput.module.scss.js";
+const ys = {
+  small: "12",
+  medium: "16",
+  large: "16"
+}, Ds = ds(
+  function({
+    className: z = "",
+    size: h = "medium",
+    label: c,
+    invalid: C = !1,
+    message: p,
+    messageTone: F,
+    showPasswordLabel: D = "Show password",
+    hidePasswordLabel: E = "Hide password",
+    revealButtonProps: k,
+    revealed: x,
+    defaultRevealed: O = !1,
+    onRevealedChange: a,
+    id: U,
+    value: u,
+    defaultValue: M,
+    placeholder: $,
+    onFocus: n,
+    onBlur: r,
+    onChange: d,
+    disabled: m,
+    "aria-describedby": A,
+    ...H
+  }, o) {
+    const K = cs(), f = U ?? K, P = ps(null), i = u !== void 0, [Z, q] = y(
+      M ?? ""
+    ), g = i ? u : Z, G = g != null && g !== "", v = x !== void 0, [J, L] = y(O), w = v ? x : J, I = w && !m, [Q, R] = y(!1), T = Q || G, W = l(
+      (s) => {
+        R(!0), n == null || n(s);
+      },
+      [n]
+    ), X = l(
+      (s) => {
+        R(!1), r == null || r(s);
+      },
+      [r]
+    ), Y = l(
+      (s) => {
+        i || q(s.target.value), d == null || d(s);
+      },
+      [i, d]
+    ), B = l(
+      (s) => {
+        P.current = s, typeof o == "function" ? o(s) : o && (o.current = s);
+      },
+      [o]
+    ), ss = l(() => {
+      const s = !w;
+      v || L(s), a == null || a(s);
+    }, [v, a, w]), {
+      className: ts,
+      onClick: _,
+      onMouseDown: b,
+      ...es
+    } = k ?? {}, S = Is(C, p, F), V = ws(p), os = t[`password-input--size-${Ns(h)}`], is = S ? t["password-input--invalid"] : "", ls = c != null && T ? t["password-input--label-floated"] : "", as = ys[h], ns = [
+      t["password-input"],
+      os,
+      is,
+      ls,
+      t["password-input--has-trailing-icon"],
+      z
+    ].filter(Boolean).join(" "), j = V ? `${f}-message` : void 0, rs = F ?? "error";
+    return /* @__PURE__ */ N("div", { className: ns, children: [
+      /* @__PURE__ */ N("div", { className: t["password-input__wrapper"], children: [
+        c != null && /* @__PURE__ */ e("label", { className: t["password-input__label"], htmlFor: f, children: c }),
+        /* @__PURE__ */ N("div", { className: t["password-input__inner"], children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: B,
+              id: f,
+              type: I ? "text" : "password",
+              className: t["password-input__input"],
+              value: i ? u : void 0,
+              defaultValue: i ? void 0 : M,
+              placeholder: $,
+              disabled: m,
+              onFocus: W,
+              onBlur: X,
+              onChange: Y,
+              "aria-invalid": S ? !0 : void 0,
+              "aria-describedby": vs(
+                A,
+                j,
+                void 0
+              ),
+              ...H
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: t["password-input__trailing-icon"], children: /* @__PURE__ */ e(
+            "button",
+            {
+              ...es,
+              type: "button",
+              className: bs(
+                t["password-input__reveal"],
+                ts
+              ),
+              "aria-label": I ? E : D,
+              disabled: m,
+              onClick: (s) => {
+                _ == null || _(s), !s.defaultPrevented && ss();
+              },
+              onMouseDown: (s) => {
+                s.preventDefault(), b == null || b(s);
+              },
+              children: /* @__PURE__ */ e(
+                fs,
+                {
+                  size: as,
+                  glyph: I ? /* @__PURE__ */ e(us, {}) : /* @__PURE__ */ e(ms, {})
+                }
+              )
+            }
+          ) })
+        ] })
+      ] }),
+      V && /* @__PURE__ */ e(_s, { id: j, message: p, tone: rs })
+    ] });
+  }
+);
+export {
+  Ds as default
+};
+//# sourceMappingURL=PasswordInput.js.map

package/dist/components/password-input/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useCallback, useId, useRef, useState } from 'react';\nimport EyeOffOutlineIcon from '@mattermost/compass-icons/components/eye-off-outline';\nimport EyeOutlineIcon from '@mattermost/compass-icons/components/eye-outline';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './PasswordInput.module.scss';\n\nexport type PasswordInputSize = 'small' | 'medium' | 'large';\n\n/** Matches Text Input / FieldClearButton trailing chrome per size. */\nconst ICON_SIZE_MAP: Record<PasswordInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface PasswordInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label. Floats above the border when focused or filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: PasswordInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /**\n   * Accessible name for the reveal toggle when the password is hidden.\n   * Default: `\"Show password\"`.\n   */\n  showPasswordLabel?: string;\n  /**\n   * Accessible name for the reveal toggle when the password is visible.\n   * Default: `\"Hide password\"`.\n   */\n  hidePasswordLabel?: string;\n  /** Extra attributes for the reveal toggle (e.g. `data-testid`). */\n  revealButtonProps?: BuiltInButtonProps;\n  /**\n   * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).\n   */\n  revealed?: boolean;\n  /** Uncontrolled initial reveal state. Default: `false`. */\n  defaultRevealed?: boolean;\n  /** Called when the reveal toggle changes visibility. */\n  onRevealedChange?: (revealed: boolean) => void;\n}\n\n/**\n * Password Inputs are the dedicated field for secrets — login, signup, invite\n * passwords. They look like a text input with a built-in show/hide toggle so the\n * affordance is obvious, the same way Search Input always ships a magnifier.\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      revealButtonProps,\n      revealed: revealedProp,\n      defaultRevealed = false,\n      onRevealedChange,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isValueControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isValueControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const isRevealControlled = revealedProp !== undefined;\n    const [uncontrolledRevealed, setUncontrolledRevealed] =\n      useState(defaultRevealed);\n    const revealed = isRevealControlled ? revealedProp : uncontrolledRevealed;\n    const visible = revealed && !disabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isValueControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isValueControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const toggleRevealed = useCallback(() => {\n      const next = !revealed;\n      if (!isRevealControlled) setUncontrolledRevealed(next);\n      onRevealedChange?.(next);\n    }, [isRevealControlled, onRevealedChange, revealed]);\n\n    const {\n      className: revealClassName,\n      onClick: revealOnClick,\n      onMouseDown: revealOnMouseDown,\n      ...revealRest\n    } = revealButtonProps ?? {};\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`password-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['password-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['password-input--label-floated']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['password-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      styles['password-input--has-trailing-icon'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['password-input__wrapper']}>\n          {label != null && (\n            <label className={styles['password-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['password-input__inner']}>\n            <input\n              ref={setInputRef}\n              id={id}\n              type={visible ? 'text' : 'password'}\n              className={styles['password-input__input']}\n              value={isValueControlled ? valueProp : undefined}\n              defaultValue={isValueControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            <span className={styles['password-input__trailing-icon']}>\n              <button\n                {...revealRest}\n                type=\"button\"\n                className={mergeClassNames(\n                  styles['password-input__reveal'],\n                  revealClassName,\n                )}\n                aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n                disabled={disabled}\n                onClick={(e) => {\n                  revealOnClick?.(e);\n                  if (e.defaultPrevented) return;\n                  toggleRevealed();\n                }}\n                onMouseDown={(e) => {\n                  // Keep focus in the field when pressing the toggle.\n                  e.preventDefault();\n                  revealOnMouseDown?.(e);\n                }}\n              >\n                <Icon\n                  size={iconSize}\n                  glyph={visible ? <EyeOffOutlineIcon /> : <EyeOutlineIcon />}\n                />\n              </button>\n            </span>\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default PasswordInput;\n"],"names":["ICON_SIZE_MAP","PasswordInput","forwardRef","className","size","label","invalid","message","messageTone","showPasswordLabel","hidePasswordLabel","revealButtonProps","revealedProp","defaultRevealed","onRevealedChange","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isRevealControlled","uncontrolledRevealed","setUncontrolledRevealed","revealed","visible","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","toggleRevealed","next","revealClassName","revealOnClick","revealOnMouseDown","revealRest","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","mergeClassNames","Icon","EyeOffOutlineIcon","EyeOutlineIcon","FieldMessage"],"mappings":";;;;;;;;;;AAqBA,MAAMA,KAAqD;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAgDMC,KAAgBC;AAAA,EACpB,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,mBAAAC,IAAoB;AAAA,IACpB,mBAAAC;AAAA,IACA,UAAUC;AAAA,IACV,iBAAAC,IAAkB;AAAA,IAClB,kBAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAcC,GAAA,GACdC,IAAKb,KAAUW,GACfG,IAAWC,GAAgC,IAAI,GAE/CC,IAAoBf,MAAc,QAClC,CAACgB,GAAmBC,CAAoB,IAAIC;AAAA,MAChDjB,KAAgB;AAAA,IAAA,GAEZkB,IAAQJ,IAAqBf,IAAuBgB,GACpDI,IAAWD,KAAS,QAAQA,MAAU,IAEtCE,IAAqBzB,MAAiB,QACtC,CAAC0B,GAAsBC,CAAuB,IAClDL,EAASrB,CAAe,GACpB2B,IAAWH,IAAqBzB,IAAe0B,GAC/CG,IAAUD,KAAY,CAAClB,GAEvB,CAACoB,GAAWC,CAAY,IAAIT,EAAS,EAAK,GAC1CU,IAAeF,KAAaN,GAE5BS,IAAcC;AAAA,MAClB,CAACC,MAA0C;AACzC,QAAAJ,EAAa,EAAI,GACjBxB,KAAA,QAAAA,EAAU4B;AAAA,MACZ;AAAA,MACA,CAAC5B,CAAO;AAAA,IAAA,GAEJ6B,IAAaF;AAAA,MACjB,CAACC,MAA0C;AACzC,QAAAJ,EAAa,EAAK,GAClBvB,KAAA,QAAAA,EAAS2B;AAAA,MACX;AAAA,MACA,CAAC3B,CAAM;AAAA,IAAA,GAEH6B,IAAeH;AAAA,MACnB,CAACC,MAAqC;AACpC,QAAKhB,KAAmBE,EAAqBc,EAAE,OAAO,KAAK,GAC3D1B,KAAA,QAAAA,EAAW0B;AAAA,MACb;AAAA,MACA,CAAChB,GAAmBV,CAAQ;AAAA,IAAA,GAGxB6B,IAAcJ;AAAA,MAClB,CAACK,MAAkC;AACjC,QAAAtB,EAAS,UAAUsB,GACf,OAAO1B,KAAQ,aACjBA,EAAI0B,CAAI,IACC1B,MACTA,EAAI,UAAU0B;AAAA,MAElB;AAAA,MACA,CAAC1B,CAAG;AAAA,IAAA,GAGA2B,KAAiBN,EAAY,MAAM;AACvC,YAAMO,IAAO,CAACb;AACd,MAAKH,KAAoBE,EAAwBc,CAAI,GACrDvC,KAAA,QAAAA,EAAmBuC;AAAA,IACrB,GAAG,CAAChB,GAAoBvB,GAAkB0B,CAAQ,CAAC,GAE7C;AAAA,MACJ,WAAWc;AAAA,MACX,SAASC;AAAA,MACT,aAAaC;AAAA,MACb,GAAGC;AAAA,IAAA,IACD9C,KAAqB,CAAA,GAEnB+C,IAAcC,GAAerD,GAASC,GAASC,CAAW,GAC1DoD,IAAcC,GAAgBtD,CAAO,GACrCuD,KAAYC,EAAO,wBAAwBC,GAAQ5D,CAAI,CAAC,EAAE,GAC1D6D,KAAeP,IAAcK,EAAO,yBAAyB,IAAI,IACjEG,KACJ7D,KAAS,QAAQuC,IACbmB,EAAO,+BAA+B,IACtC,IACAI,KAAWnE,GAAcI,CAAI,GAE7BgE,KAAY;AAAA,MAChBL,EAAO,gBAAgB;AAAA,MACvBD;AAAA,MACAG;AAAA,MACAC;AAAA,MACAH,EAAO,mCAAmC;AAAA,MAC1C5D;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELkE,IAAYT,IAAc,GAAGhC,CAAE,aAAa,QAC5C0C,KAAe9D,KAAe;AAEpC,WACE,gBAAA+D,EAAC,OAAA,EAAI,WAAWH,IACd,UAAA;AAAA,MAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWR,EAAO,yBAAyB,GAC7C,UAAA;AAAA,QAAA1D,KAAS,0BACP,SAAA,EAAM,WAAW0D,EAAO,uBAAuB,GAAG,SAASnC,GACzD,UAAAvB,EAAA,CACH;AAAA,QAEF,gBAAAkE,EAAC,OAAA,EAAI,WAAWR,EAAO,uBAAuB,GAC5C,UAAA;AAAA,UAAA,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKtB;AAAA,cACL,IAAAtB;AAAA,cACA,MAAMa,IAAU,SAAS;AAAA,cACzB,WAAWsB,EAAO,uBAAuB;AAAA,cACzC,OAAOhC,IAAoBf,IAAY;AAAA,cACvC,cAAce,IAAoB,SAAYd;AAAA,cAC9C,aAAAC;AAAA,cACA,UAAAI;AAAA,cACA,SAASuB;AAAA,cACT,QAAQG;AAAA,cACR,UAAUC;AAAA,cACV,gBAAcS,IAAc,KAAO;AAAA,cACnC,oBAAkBe;AAAA,gBAChBlD;AAAA,gBACA8C;AAAA,gBACA;AAAA,cAAA;AAAA,cAED,GAAG7C;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN,gBAAAgD,EAAC,QAAA,EAAK,WAAWT,EAAO,+BAA+B,GACrD,UAAA,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGf;AAAA,cACJ,MAAK;AAAA,cACL,WAAWiB;AAAA,gBACTX,EAAO,wBAAwB;AAAA,gBAC/BT;AAAA,cAAA;AAAA,cAEF,cAAYb,IAAU/B,IAAoBD;AAAA,cAC1C,UAAAa;AAAA,cACA,SAAS,CAACyB,MAAM;AAEd,gBADAQ,KAAA,QAAAA,EAAgBR,IACZ,CAAAA,EAAE,oBACNK,GAAA;AAAA,cACF;AAAA,cACA,aAAa,CAACL,MAAM;AAElB,gBAAAA,EAAE,eAAA,GACFS,KAAA,QAAAA,EAAoBT;AAAA,cACtB;AAAA,cAEA,UAAA,gBAAAyB;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAMR;AAAA,kBACN,OAAO1B,IAAU,gBAAA+B,EAACI,IAAA,CAAA,CAAkB,sBAAMC,IAAA,CAAA,CAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC3D;AAAA,UAAA,EACF,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MACCjB,KACC,gBAAAY,EAACM,IAAA,EAAa,IAAIT,GAAW,SAAA9D,GAAkB,MAAM+D,GAAA,CAAc;AAAA,IAAA,GAEvE;AAAA,EAEJ;AACF;"}

package/dist/components/password-input/PasswordInput.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PasswordInput.css');const s={"password-input":"_password-input_d44ti_2","password-input__wrapper":"_password-input__wrapper_d44ti_8","password-input__input":"_password-input__input_d44ti_18","password-input__label":"_password-input__label_d44ti_28","password-input--label-floated":"_password-input--label-floated_d44ti_48","password-input__inner":"_password-input__inner_d44ti_55","password-input__trailing-icon":"_password-input__trailing-icon_d44ti_83","password-input__reveal":"_password-input__reveal_d44ti_91","password-input--size-small":"_password-input--size-small_d44ti_116","password-input--size-medium":"_password-input--size-medium_d44ti_132","password-input--size-large":"_password-input--size-large_d44ti_152","password-input--invalid":"_password-input--invalid_d44ti_179"};exports.default=s;
+//# sourceMappingURL=PasswordInput.module.scss.cjs.map

package/dist/components/password-input/PasswordInput.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/password-input/PasswordInput.module.scss.js

@@ -0,0 +1,18 @@
+import './PasswordInput.css';const s = {
+  "password-input": "_password-input_d44ti_2",
+  "password-input__wrapper": "_password-input__wrapper_d44ti_8",
+  "password-input__input": "_password-input__input_d44ti_18",
+  "password-input__label": "_password-input__label_d44ti_28",
+  "password-input--label-floated": "_password-input--label-floated_d44ti_48",
+  "password-input__inner": "_password-input__inner_d44ti_55",
+  "password-input__trailing-icon": "_password-input__trailing-icon_d44ti_83",
+  "password-input__reveal": "_password-input__reveal_d44ti_91",
+  "password-input--size-small": "_password-input--size-small_d44ti_116",
+  "password-input--size-medium": "_password-input--size-medium_d44ti_132",
+  "password-input--size-large": "_password-input--size-large_d44ti_152",
+  "password-input--invalid": "_password-input--invalid_d44ti_179"
+};
+export {
+  s as default
+};
+//# sourceMappingURL=PasswordInput.module.scss.js.map

package/dist/components/password-input/PasswordInput.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/password-input/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PasswordInput.cjs");exports.PasswordInput=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/password-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/password-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PasswordInput } from './PasswordInput';
+export type { PasswordInputProps, PasswordInputSize } from './PasswordInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/password-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/password-input/index.js

@@ -0,0 +1,5 @@
+import { default as r } from "./PasswordInput.js";
+export {
+  r as PasswordInput
+};
+//# sourceMappingURL=index.js.map

package/dist/components/password-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/search-input/SearchInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),D=require("../../utils/string.cjs"),q=require("../icon/Icon.cjs"),__K=require("@mattermost/compass-icons/components/magnify.js"),K=__K?.default??__K,__P=require("@mattermost/compass-icons/components/close-circle.js"),P=__P?.default??__P,B=require("../../utils/props.cjs"),s=require("./SearchInput.module.scss.cjs"),ee={small:"12",medium:"16",large:"20"},se={small:"12",medium:"16",large:"16"},te=a.forwardRef(function({className:R="",size:h="medium",label:m,invalid:j=!1,onClear:p,clearLabel:y="Clear search",clearButtonProps:c,id:M,value:_,defaultValue:x,placeholder:z,onFocus:r,onBlur:d,onChange:l,disabled:u,onKeyDown:f,...E},n){const A=a.useId(),b=M??A,I=a.useRef(null),i=_!==void 0,[O,C]=a.useState(x??""),N=i?_:O,o=N!=null&&N!=="",[T,S]=a.useState(!1),V=T||o,F=a.useCallback(e=>{S(!0),r==null||r(e)},[r]),L=a.useCallback(e=>{S(!1),d==null||d(e)},[d]),Z=a.useCallback(e=>{i||C(e.target.value),l==null||l(e)},[i,l]),U=a.useCallback(e=>{I.current=e,typeof n=="function"?n(e):n&&(n.current=e)},[n]),v=a.useCallback(()=>{var k;if(u)return;if(p){p(),(k=I.current)==null||k.focus();return}const e=I.current;e!=null&&(e.value="",i||C(""),l==null||l({target:e,currentTarget:e}),e.focus())},[u,i,l,p]),$=a.useCallback(e=>{f==null||f(e),!(e.defaultPrevented||u)&&e.key==="Escape"&&o&&(e.preventDefault(),v())},[u,v,o,f]),g=o&&!u,w=s.default[`search-input--size-${D.toKebab(h)}`],G=j?s.default["search-input--invalid"]:"",H=m!=null&&V?s.default["search-input--label-floated"]:"",J=s.default["search-input--has-leading-icon"],Q=g?s.default["search-input--has-trailing-icon"]:"",W=ee[h],X=se[h],Y=[s.default["search-input"],w,G,H,J,Q,R].filter(Boolean).join(" ");return t.jsx("div",{className:Y,children:t.jsxs("div",{className:s.default["search-input__wrapper"],children:[m!=null&&t.jsx("label",{className:s.default["search-input__label"],htmlFor:b,children:m}),t.jsxs("div",{className:s.default["search-input__inner"],children:[t.jsx("span",{className:s.default["search-input__leading-icon"],"aria-hidden":!0,children:t.jsx(q.default,{size:W,glyph:t.jsx(K,{})})}),t.jsx("input",{ref:U,id:b,type:"search",className:s.default["search-input__input"],value:i?_:void 0,defaultValue:i?void 0:x,placeholder:z,disabled:u,onFocus:F,onBlur:L,onChange:Z,onKeyDown:$,"aria-invalid":j?!0:void 0,...E}),g&&t.jsx("span",{className:s.default["search-input__trailing-icon"],children:t.jsx("button",{...c,type:"button",className:B.mergeClassNames(s.default["search-input__clear-button"],c==null?void 0:c.className),onClick:v,"aria-label":y,tabIndex:(c==null?void 0:c.tabIndex)??-1,children:t.jsx(q.default,{size:X,glyph:t.jsx(P,{})})})})]})]})})});exports.default=te;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),l=require("react"),ae=require("../../utils/string.cjs"),le=require("../icon/Icon.cjs"),__te=require("@mattermost/compass-icons/components/magnify.js"),te=__te?.default??__te,ie=require("../field/FieldClearButton.cjs"),p=require("../field/fieldDescribedBy.cjs"),ne=require("../field/useFieldClear.cjs"),ce=require("../field-message/FieldMessage.cjs"),e=require("./SearchInput.module.scss.cjs"),de={small:"12",medium:"16",large:"20"},ue=l.forwardRef(function({className:M="",size:r="medium",label:o,invalid:R=!1,message:h,messageTone:v,onClear:k,clearLabel:D="Clear search",clearButtonProps:n,id:K,value:f,defaultValue:_,placeholder:V,onFocus:c,onBlur:d,onChange:u,disabled:C,readOnly:m,onKeyDown:z,"aria-describedby":E,...T},i){const $=l.useId(),b=K??$,I=l.useRef(null),t=f!==void 0,[A,g]=l.useState(_??""),j=t?f:A,x=j!=null&&j!=="",[L,q]=l.useState(!1),O=L||x,U=l.useCallback(a=>{q(!0),c==null||c(a)},[c]),Z=l.useCallback(a=>{q(!1),d==null||d(a)},[d]),y=l.useCallback(a=>{t||g(a.target.value),u==null||u(a)},[t,u]),G=l.useCallback(a=>{I.current=a,typeof i=="function"?i(a):i&&(i.current=a)},[i]),{showClearButton:F,handleClear:H,handleKeyDown:J}=ne.useFieldClear({disabled:!!(C||m),hasValue:x,clearEnabled:!0,isControlled:t,onClear:k,onChange:y,onKeyDown:z,inputRef:I,setUncontrolledValue:g}),S=p.isFieldInvalid(R,h,v),N=p.hasFieldMessage(h),Q=e.default[`search-input--size-${ae.toKebab(r)}`],W=S?e.default["search-input--invalid"]:"",X=o!=null&&O?e.default["search-input--label-floated"]:"",Y=e.default["search-input--has-leading-icon"],B=F?e.default["search-input--has-trailing-icon"]:"",P=de[r],ee=[e.default["search-input"],Q,W,X,Y,B,M].filter(Boolean).join(" "),w=N?`${b}-message`:void 0,se=v??"error";return s.jsxs("div",{className:ee,children:[s.jsxs("div",{className:e.default["search-input__wrapper"],children:[o!=null&&s.jsx("label",{className:e.default["search-input__label"],htmlFor:b,children:o}),s.jsxs("div",{className:e.default["search-input__inner"],children:[s.jsx("span",{className:e.default["search-input__leading-icon"],"aria-hidden":!0,children:s.jsx(le.default,{size:P,glyph:s.jsx(te,{})})}),s.jsx("input",{ref:G,id:b,type:"search",className:e.default["search-input__input"],value:t?f:void 0,defaultValue:t?void 0:_,placeholder:V,disabled:C,readOnly:m,onFocus:U,onBlur:Z,onChange:y,onKeyDown:J,"aria-invalid":S?!0:void 0,"aria-describedby":p.mergeFieldDescribedBy(E,w,void 0),...T}),F&&s.jsx("span",{className:e.default["search-input__trailing-icon"],children:s.jsx(ie.default,{size:r,clearLabel:D,clearButtonProps:n,onClick:H,tabIndex:(n==null?void 0:n.tabIndex)??-1})})]})]}),N&&s.jsx(ce.default,{id:w,message:h,tone:se})]})});exports.default=ue;
 //# sourceMappingURL=SearchInput.cjs.map

package/dist/components/search-input/SearchInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nconst CLEAR_ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default: \"Clear search\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      onClear,\n      clearLabel = 'Clear search',\n      clearButtonProps,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      onKeyDown,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleClear = useCallback(() => {\n      if (disabled) return;\n\n      if (onClear) {\n        onClear();\n        inputRef.current?.focus();\n        return;\n      }\n\n      const input = inputRef.current;\n      if (input == null) return;\n\n      input.value = '';\n      if (!isControlled) setUncontrolledValue('');\n\n      onChange?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(e);\n        if (e.defaultPrevented || disabled) return;\n        if (e.key === 'Escape' && hasValue) {\n          e.preventDefault();\n          handleClear();\n        }\n      },\n      [disabled, handleClear, hasValue, onKeyDown],\n    );\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['search-input--label-floated']\n        : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n    const clearIconSize = CLEAR_ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={invalid ? true : undefined}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <button\n                  {...clearButtonProps}\n                  type=\"button\"\n                  className={mergeClassNames(\n                    styles['search-input__clear-button'],\n                    clearButtonProps?.className,\n                  )}\n                  onClick={handleClear}\n                  aria-label={clearLabel}\n                  tabIndex={clearButtonProps?.tabIndex ?? -1}\n                >\n                  <Icon size={clearIconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","CLEAR_ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","onClear","clearLabel","clearButtonProps","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","onKeyDown","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","handleKeyDown","showClearButton","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","clearIconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","mergeClassNames","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport FieldClearButton from '@/components/field/FieldClearButton';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport { useFieldClear } from '@/components/field/useFieldClear';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default: \"Clear search\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      onClear,\n      clearLabel = 'Clear search',\n      clearButtonProps,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      onKeyDown,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const { showClearButton, handleClear, handleKeyDown } = useFieldClear({\n      disabled: Boolean(disabled || readOnly),\n      hasValue,\n      clearEnabled: true,\n      isControlled,\n      onClear,\n      onChange: handleChange,\n      onKeyDown: onKeyDown as\n        | ((e: KeyboardEvent<HTMLInputElement>) => void)\n        | undefined,\n      inputRef,\n      setUncontrolledValue,\n    });\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['search-input--label-floated']\n        : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              readOnly={readOnly}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <FieldClearButton\n                  size={size}\n                  clearLabel={clearLabel}\n                  clearButtonProps={clearButtonProps}\n                  onClick={handleClear}\n                  tabIndex={clearButtonProps?.tabIndex ?? -1}\n                />\n              </span>\n            )}\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","message","messageTone","onClear","clearLabel","clearButtonProps","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","onKeyDown","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","showClearButton","handleClear","handleKeyDown","useFieldClear","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","Icon","MagnifyIcon","mergeFieldDescribedBy","FieldClearButton","FieldMessage"],"mappings":"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"}

package/dist/components/search-input/SearchInput.css

@@ -1 +1 @@
-._search-input_1iq6i_2{display:flex;flex-direction:column;width:100%}._search-input__wrapper_1iq6i_7{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:not(:disabled)):hover:not(:focus-within) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:disabled) ._search-input__wrapper_1iq6i_7{background-color:var(--center-channel-bg);opacity:.56}._search-input__label_1iq6i_27{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__inner_1iq6i_54{display:flex;align-items:center;flex:1;min-width:0}._search-input__input_1iq6i_17{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._search-input__input_1iq6i_17::-webkit-search-decoration,._search-input__input_1iq6i_17::-webkit-search-cancel-button{-webkit-appearance:none}._search-input__input_1iq6i_17:focus{outline:none}._search-input__input_1iq6i_17::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._search-input__input_1iq6i_17:disabled{cursor:not-allowed}._search-input__leading-icon_1iq6i_85,._search-input__trailing-icon_1iq6i_85{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__leading-icon_1iq6i_85{margin-right:var(--spacing-xs);pointer-events:none}._search-input__trailing-icon_1iq6i_85{margin-left:var(--spacing-xs)}._search-input__clear-button_1iq6i_99{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;transition:color var(--duration-quick) var(--ease-transition)}._search-input__clear-button_1iq6i_99:hover{color:var(--center-channel-color)}._search-input--size-small_1iq6i_114 ._search-input__wrapper_1iq6i_7{min-height:32px}._search-input--size-small_1iq6i_114 ._search-input__inner_1iq6i_54{padding:var(--spacing-xs) var(--spacing-m)}._search-input--size-small_1iq6i_114 ._search-input__input_1iq6i_17{font-size:var(--font-size-75);line-height:var(--line-height-25)}._search-input--size-small_1iq6i_114._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-medium_1iq6i_130 ._search-input__wrapper_1iq6i_7{min-height:40px}._search-input--size-medium_1iq6i_130 ._search-input__inner_1iq6i_54{padding:var(--spacing-s) var(--spacing-l)}._search-input--size-medium_1iq6i_130 ._search-input__input_1iq6i_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._search-input--size-medium_1iq6i_130 ._search-input__label_1iq6i_27{font-size:var(--font-size-100);left:var(--spacing-m)}._search-input--size-medium_1iq6i_130._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-large_1iq6i_150 ._search-input__wrapper_1iq6i_7{min-height:48px}._search-input--size-large_1iq6i_150 ._search-input__inner_1iq6i_54{padding:var(--spacing-m) var(--spacing-l)}._search-input--size-large_1iq6i_150 ._search-input__input_1iq6i_17{font-size:var(--font-size-200);line-height:var(--line-height-200)}._search-input--size-large_1iq6i_150 ._search-input__label_1iq6i_27{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._search-input--size-large_1iq6i_150._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--has-leading-icon_1iq6i_171 ._search-input__label_1iq6i_27{left:var(--spacing-xxxl)}._search-input--has-leading-icon_1iq6i_171._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{left:var(--spacing-xs)}._search-input--has-leading-icon_1iq6i_171._search-input--size-medium_1iq6i_130 ._search-input__label_1iq6i_27,._search-input--has-leading-icon_1iq6i_171._search-input--size-large_1iq6i_150 ._search-input__label_1iq6i_27{left:36px}._search-input--has-leading-icon_1iq6i_171._search-input--size-medium_1iq6i_130._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27,._search-input--has-leading-icon_1iq6i_171._search-input--size-large_1iq6i_150._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{left:var(--spacing-m)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__label_1iq6i_27{color:var(--button-bg)}._search-input_1iq6i_2:has(._search-input__label_1iq6i_27):not(._search-input--label-floated_1iq6i_47) ._search-input__input_1iq6i_17::placeholder{color:transparent}._search-input--invalid_1iq6i_189 ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189 ._search-input__label_1iq6i_27{color:var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__label_1iq6i_27{color:var(--error-text, var(--color-danger))}
+._search-input_1h7hr_2{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._search-input__wrapper_1h7hr_8{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._search-input_1h7hr_2:has(._search-input__input_1h7hr_18:not(:disabled)):hover:not(:focus-within) ._search-input__wrapper_1h7hr_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._search-input_1h7hr_2:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__wrapper_1h7hr_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._search-input_1h7hr_2:has(._search-input__input_1h7hr_18:disabled) ._search-input__wrapper_1h7hr_8{background-color:var(--center-channel-bg);opacity:.56}._search-input__label_1h7hr_28{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__inner_1h7hr_55{display:flex;align-items:center;flex:1;min-width:0}._search-input__input_1h7hr_18{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._search-input__input_1h7hr_18::-webkit-search-decoration,._search-input__input_1h7hr_18::-webkit-search-cancel-button{-webkit-appearance:none}._search-input__input_1h7hr_18:focus{outline:none}._search-input__input_1h7hr_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._search-input__input_1h7hr_18:disabled{cursor:not-allowed}._search-input__leading-icon_1h7hr_86,._search-input__trailing-icon_1h7hr_86{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__leading-icon_1h7hr_86{margin-right:var(--spacing-xs);pointer-events:none}._search-input__trailing-icon_1h7hr_86{margin-left:var(--spacing-xs)}._search-input--size-small_1h7hr_100 ._search-input__wrapper_1h7hr_8{min-height:32px}._search-input--size-small_1h7hr_100 ._search-input__inner_1h7hr_55{padding:var(--spacing-xs) var(--spacing-m)}._search-input--size-small_1h7hr_100 ._search-input__input_1h7hr_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._search-input--size-small_1h7hr_100._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-medium_1h7hr_116 ._search-input__wrapper_1h7hr_8{min-height:40px}._search-input--size-medium_1h7hr_116 ._search-input__inner_1h7hr_55{padding:var(--spacing-s) var(--spacing-l)}._search-input--size-medium_1h7hr_116 ._search-input__input_1h7hr_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._search-input--size-medium_1h7hr_116 ._search-input__label_1h7hr_28{font-size:var(--font-size-100);left:var(--spacing-m)}._search-input--size-medium_1h7hr_116._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-large_1h7hr_136 ._search-input__wrapper_1h7hr_8{min-height:48px}._search-input--size-large_1h7hr_136 ._search-input__inner_1h7hr_55{padding:var(--spacing-m) var(--spacing-l)}._search-input--size-large_1h7hr_136 ._search-input__input_1h7hr_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._search-input--size-large_1h7hr_136 ._search-input__label_1h7hr_28{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._search-input--size-large_1h7hr_136._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--has-leading-icon_1h7hr_157 ._search-input__label_1h7hr_28{left:28px}._search-input--has-leading-icon_1h7hr_157._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{left:var(--spacing-xs)}._search-input--has-leading-icon_1h7hr_157._search-input--size-medium_1h7hr_116 ._search-input__label_1h7hr_28{left:36px}._search-input--has-leading-icon_1h7hr_157._search-input--size-medium_1h7hr_116._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{left:var(--spacing-m)}._search-input--has-leading-icon_1h7hr_157._search-input--size-large_1h7hr_136 ._search-input__label_1h7hr_28{left:40px}._search-input--has-leading-icon_1h7hr_157._search-input--size-large_1h7hr_136._search-input--label-floated_1h7hr_48 ._search-input__label_1h7hr_28{left:var(--spacing-m)}._search-input_1h7hr_2:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__label_1h7hr_28{color:var(--button-bg)}._search-input_1h7hr_2:has(._search-input__label_1h7hr_28):not(._search-input--label-floated_1h7hr_48) ._search-input__input_1h7hr_18::placeholder{color:transparent}._search-input--invalid_1h7hr_181 ._search-input__wrapper_1h7hr_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1h7hr_181:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__wrapper_1h7hr_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1h7hr_181 ._search-input__label_1h7hr_28{color:var(--error-text, var(--color-danger))}._search-input--invalid_1h7hr_181:has(._search-input__input_1h7hr_18:focus-visible) ._search-input__label_1h7hr_28{color:var(--error-text, var(--color-danger))}

package/dist/components/search-input/SearchInput.d.ts

@@ -1,4 +1,5 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
 import { BuiltInButtonProps } from '../../utils/props';
 export type SearchInputSize = 'small' | 'medium' | 'large';
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
@@ -10,6 +11,13 @@ export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
     label?: ReactNode;
     /** Size variant. Default: Medium. */
     size?: SearchInputSize;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
     /** Called when the clear button is pressed. Omit to use built-in clearing. */
     onClear?: () => void;
     /** Accessible name for the clear button. Default: "Clear search". */

package/dist/components/search-input/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAc3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GAuLhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAQ3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA2KhB,CAAC;AAEF,eAAe,WAAW,CAAC"}