@eyesee/ui-components 0.7.0 → 0.9.0

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,115 @@
+/**
+ * @callback ToggleChangeHandler
+ * @param {import('react').ChangeEvent<HTMLInputElement>} event
+ * @returns {void}
+ */
+/**
+ * @typedef {object} ToggleProps
+ *
+ * @property {boolean} [checked=false]
+ *   On state. Default `false`.
+ * @property {ToggleChangeHandler} [onChange]
+ *   Input change handler. Default `undefined`.
+ * @property {boolean} [disabled=false]
+ *   Native disabled. Default `false`.
+ * @property {'lg'|'md'} [size='lg']
+ *   `lg` → 40×20px; `md` → 32×16px. Default `'lg'`.
+ * @property {string} [id]
+ *   Input id. Auto-generated when omitted.
+ * @property {string} [name]
+ *   Input `name`.
+ * @property {string} [value]
+ *   Input `value`.
+ * @property {string} [label]
+ *   Label text after the switch.
+ * @property {string} [aria-label]
+ *   Accessible name when `label` is omitted. Falls back to `'toggle'`.
+ */
+/**
+ * Design-system switch. Track is 2×1 pill; off = neutral track, on = brand track.
+ *
+ * ## Props
+ *
+ * **checked** `boolean` — default `false`
+ * On state.
+ *
+ * **onChange** `(event: ChangeEvent<HTMLInputElement>) => void` — no default
+ * Input change handler.
+ *
+ * **disabled** `boolean` — default `false`
+ * Native disabled.
+ *
+ * **size** `'lg' | 'md'` — default `'lg'`
+ * `lg` → 40×20px; `md` → 32×16px.
+ *
+ * **id** `string` — no default
+ * Input id. Auto-generated when omitted.
+ *
+ * **name** `string` — no default
+ * Input `name`.
+ *
+ * **value** `string` — no default
+ * Input `value`.
+ *
+ * **label** `string` — no default
+ * Label text after the switch.
+ *
+ * **aria-label** `string` — no default
+ * Accessible name when `label` is omitted. Falls back to `'toggle'`.
+ *
+ * @param {ToggleProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { Toggle } from '@eyesee/ui-components';
+ *
+ * <Toggle size="lg" checked={false} aria-label="Example toggle" />
+ *
+ * @example <caption>Grid (Figma-like)</caption>
+ * import { Toggle } from '@eyesee/ui-components';
+ *
+ * <Toggle size="lg" checked aria-label="Large on" />
+ * <Toggle size="lg" disabled aria-label="Large disabled off" />
+ * <Toggle size="md" checked aria-label="Medium on" />
+ * <Toggle size="md" disabled checked aria-label="Medium disabled on" />
+ */
+export function Toggle({ label, checked, onChange, disabled, size, id: idProp, name, value, "aria-label": ariaLabel, }: ToggleProps): import("react").ReactElement;
+export type ToggleChangeHandler = (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+export type ToggleProps = {
+    /**
+     * On state. Default `false`.
+     */
+    checked?: boolean;
+    /**
+     * Input change handler. Default `undefined`.
+     */
+    onChange?: ToggleChangeHandler;
+    /**
+     * Native disabled. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * `lg` → 40×20px; `md` → 32×16px. Default `'lg'`.
+     */
+    size?: "lg" | "md";
+    /**
+     * Input id. Auto-generated when omitted.
+     */
+    id?: string;
+    /**
+     * Input `name`.
+     */
+    name?: string;
+    /**
+     * Input `value`.
+     */
+    value?: string;
+    /**
+     * Label text after the switch.
+     */
+    label?: string;
+    /**
+     * Accessible name when `label` is omitted. Falls back to `'toggle'`.
+     */
+    "aria-label"?: string;
+};

package/dist/components/Toggle/Toggle.js

@@ -15,7 +15,8 @@ const v = {
     default: "var(--color--icon--secondary--default)",
     disabled: "var(--color--icon--disabled--default)"
   }
-}, E = ({
+};
+function E({
   label: l,
   checked: r = !1,
   onChange: n,
@@ -25,8 +26,8 @@ const v = {
   name: i,
   value: m,
   "aria-label": u
-}) => {
-  const h = k(), s = d ?? h, p = v[a], f = r ? "checked" : "unchecked", b = c ? "disabled" : "default", t = y[f][b];
+}) {
+  const h = k(), s = d ?? h, f = v[a], p = r ? "checked" : "unchecked", b = c ? "disabled" : "default", t = y[p][b];
   return /* @__PURE__ */ g(
     "label",
     {
@@ -48,12 +49,12 @@ const v = {
             onChange: n
           }
         ),
-        /* @__PURE__ */ e("span", { className: o.track, "aria-hidden": !0, children: /* @__PURE__ */ e("span", { className: o.thumb, children: /* @__PURE__ */ e(N, { iconSize: p, strokeColor: t, fill: t }) }) }),
+        /* @__PURE__ */ e("span", { className: o.track, "aria-hidden": !0, children: /* @__PURE__ */ e("span", { className: o.thumb, children: /* @__PURE__ */ e(N, { iconSize: f, strokeColor: t, fill: t }) }) }),
         l ? /* @__PURE__ */ e("span", { className: o.labelText, children: l }) : null
       ]
     }
   );
-};
+}
 export {
   E as Toggle
 };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,294 @@
+/**
+ * @callback TooltipOpenChangeHandler
+ * @param {boolean} open Next open state.
+ * @returns {void}
+ */
+/**
+ * @typedef {object} TooltipProps
+ *
+ * @property {React.ReactNode} children
+ *   Trigger element wrapped by the tooltip.
+ * @property {React.ReactNode} content
+ *   Tooltip body. When empty, children render without a tooltip.
+ * @property {string}          [title]
+ *   Optional heading above the body.
+ * @property {boolean}         [showInfoIcon=false]
+ *   Show help icon beside title or content. Default `false`.
+ * @property {'dark'|'light'}  [variant='dark']
+ *   Visual style. Default `'dark'`.
+ * @property {boolean}         [showArrow=false]
+ *   Directional arrow pointing at the trigger. Default `false`.
+ * @property {boolean}         [defaultVisible=false]
+ *   Start open and stay open until dismissed. Default `false`.
+ * @property {boolean}         [closable=false]
+ *   Show close button. Default `false`.
+ * @property {boolean}         [disabled=false]
+ *   Disable tooltip entirely. Default `false`.
+ * @property {string}          [className]
+ *   Extra class on the wrapper `<div>`.
+ * @property {string}          [contentClassName]
+ *   Extra class on the tooltip panel.
+ * @property {'top'|'bottom'|'left'|'right'} [position='top']
+ *   Preferred placement; flips when viewport is tight. Default `'top'`.
+ * @property {number}          [maxWidth=240]
+ *   Maximum tooltip width in pixels. Default `240`.
+ * @property {boolean}         [fullWidth=false]
+ *   Wrapper stretches to 100% of parent. Default `false`.
+ * @property {boolean}         [open]
+ *   Controlled open state. When set, internal hover state is bypassed.
+ * @property {TooltipOpenChangeHandler} [onOpenChange]
+ *   Fired when open state changes (hover, close, or controlled updates).
+ * @property {Element}         [portalContainer]
+ *   Portal target. Default `document.body`.
+ */
+/**
+ * Hover tooltip with viewport-aware positioning and optional close control.
+ *
+ * ## Props
+ *
+ * **children** `ReactNode` — no default
+ * Trigger element wrapped by the tooltip.
+ *
+ * **content** `ReactNode` — no default
+ * Tooltip body. When empty, children render without a tooltip.
+ *
+ * **title** `string` — no default
+ * Optional heading above the body.
+ *
+ * **showInfoIcon** `boolean` — default `false`
+ * Show help icon beside title or content.
+ *
+ * **variant** `'dark' | 'light'` — default `'dark'`
+ * Visual style.
+ *
+ * **showArrow** `boolean` — default `false`
+ * Directional arrow pointing at the trigger.
+ *
+ * **defaultVisible** `boolean` — default `false`
+ * Start open and stay open until dismissed.
+ *
+ * **closable** `boolean` — default `false`
+ * Show close button.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disable tooltip entirely.
+ *
+ * **className** `string` — no default
+ * Extra class on the wrapper `<div>`.
+ *
+ * **contentClassName** `string` — no default
+ * Extra class on the tooltip panel.
+ *
+ * **position** `'top' | 'bottom' | 'left' | 'right'` — default `'top'`
+ * Preferred placement; flips when viewport is tight.
+ *
+ * **maxWidth** `number` — default `240`
+ * Maximum tooltip width in pixels.
+ *
+ * **fullWidth** `boolean` — default `false`
+ * Wrapper stretches to 100% of parent.
+ *
+ * **open** `boolean` — no default
+ * Controlled open state. When set, internal hover state is bypassed.
+ *
+ * **onOpenChange** `(open: boolean) => void` — no default
+ * Fired when open state changes.
+ *
+ * **portalContainer** `Element` — default `document.body`
+ * Portal target for the tooltip panel.
+ *
+ * @param {TooltipProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Playground</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="dark"
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ *   closable
+ *   position="right"
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>With title</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>With info icon on title</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>With info icon on content</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Light with arrow</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="light"
+ *   showArrow
+ *   position="right"
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Dark closable</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="dark"
+ *   closable
+ *   defaultVisible
+ *   position="bottom"
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Design light content only</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="light"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ *   showArrow
+ *   position="bottom"
+ *   defaultVisible
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Controlled open</caption>
+ * import { useState } from 'react';
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * const [open, setOpen] = useState(true);
+ *
+ * <Tooltip
+ *   title="Controlled"
+ *   content="This tooltip is controlled via the open prop."
+ *   position="right"
+ *   showArrow
+ *   open={open}
+ *   onOpenChange={setOpen}
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Closable dismisses until defaultVisible</caption>
+ * import { useState } from 'react';
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * const [defaultVisible, setDefaultVisible] = useState(true);
+ *
+ * <Tooltip
+ *   title="Closable + defaultVisible"
+ *   content="Close me, then toggle defaultVisible off/on to reset dismissal."
+ *   closable
+ *   defaultVisible={defaultVisible}
+ *   position="bottom"
+ *   showArrow
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ */
+export function Tooltip({ children, content, title, showInfoIcon, variant, showArrow, defaultVisible, closable, disabled, className, contentClassName, position, maxWidth, fullWidth, open: controlledOpen, onOpenChange, portalContainer, }: TooltipProps): import("react").ReactElement;
+export type TooltipOpenChangeHandler = (open: boolean) => void;
+export type TooltipProps = {
+    /**
+     *   Trigger element wrapped by the tooltip.
+     */
+    children: React.ReactNode;
+    /**
+     *   Tooltip body. When empty, children render without a tooltip.
+     */
+    content: React.ReactNode;
+    /**
+     * Optional heading above the body.
+     */
+    title?: string;
+    /**
+     * Show help icon beside title or content. Default `false`.
+     */
+    showInfoIcon?: boolean;
+    /**
+     * Visual style. Default `'dark'`.
+     */
+    variant?: "dark" | "light";
+    /**
+     * Directional arrow pointing at the trigger. Default `false`.
+     */
+    showArrow?: boolean;
+    /**
+     * Start open and stay open until dismissed. Default `false`.
+     */
+    defaultVisible?: boolean;
+    /**
+     * Show close button. Default `false`.
+     */
+    closable?: boolean;
+    /**
+     * Disable tooltip entirely. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Extra class on the wrapper `<div>`.
+     */
+    className?: string;
+    /**
+     * Extra class on the tooltip panel.
+     */
+    contentClassName?: string;
+    /**
+     * Preferred placement; flips when viewport is tight. Default `'top'`.
+     */
+    position?: "top" | "bottom" | "left" | "right";
+    /**
+     * Maximum tooltip width in pixels. Default `240`.
+     */
+    maxWidth?: number;
+    /**
+     * Wrapper stretches to 100% of parent. Default `false`.
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled open state. When set, internal hover state is bypassed.
+     */
+    open?: boolean;
+    /**
+     * Fired when open state changes (hover, close, or controlled updates).
+     */
+    onOpenChange?: TooltipOpenChangeHandler;
+    /**
+     * Portal target. Default `document.body`.
+     */
+    portalContainer?: Element;
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1,12 +1,12 @@
 import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { useState as M, useEffect as A } from "react";
-import h from "clsx";
-import { createPortal as F } from "react-dom";
+import { useState as L, useEffect as F } from "react";
+import M from "clsx";
+import { createPortal as G } from "react-dom";
 import { HelpIcon as k } from "../icons-v2/HelpIcon.js";
 import { XIcon as B } from "../icons-v2/XIcon.js";
 import o from "./Tooltip.module.scss.js";
-import { useTooltipPositioning as G } from "./useTooltipPositioning.js";
-const V = ({
+import { useTooltipPositioning as J } from "./useTooltipPositioning.js";
+function b({
   children: v,
   content: f,
   title: t,
@@ -20,23 +20,24 @@ const V = ({
   contentClassName: j,
   position: D = "top",
   maxWidth: w = 240,
+  fullWidth: W = !1,
   open: T,
   onOpenChange: r,
   portalContainer: $
-}) => {
-  const [H, d] = M(i), [u, P] = M(!1), l = T !== void 0, x = l ? T : H, y = (c) => {
+}) {
+  const [H, d] = L(i), [u, P] = L(!1), l = T !== void 0, x = l ? T : H, y = (c) => {
     m || u || (l || d(c), r == null || r(c));
   }, I = () => {
     i || y(!0);
   }, S = () => {
     i || y(!1);
-  }, L = (c) => {
+  }, h = (c) => {
     c.stopPropagation(), P(!0), l || d(!1), r == null || r(!1);
   };
-  A(() => {
+  F(() => {
     i && (P(!1), l || d(!0));
   }, [i, l]);
-  const { wrapperRef: W, tooltipRef: X, layout: e, isPositioned: q } = G({
+  const { wrapperRef: X, tooltipRef: q, layout: e, isPositioned: z } = J({
     open: x && !u && !m && !!f,
     desiredPosition: D,
     showArrow: N,
@@ -44,11 +45,11 @@ const V = ({
   });
   if (!f || m)
     return v;
-  const z = /* @__PURE__ */ a(
+  const A = /* @__PURE__ */ a(
     "div",
     {
-      ref: X,
-      className: h(
+      ref: q,
+      className: M(
         o.tooltip,
         o[e.resolvedPosition],
         o[E],
@@ -61,7 +62,7 @@ const V = ({
         maxWidth: w,
         top: e.top,
         left: e.left,
-        visibility: q ? "visible" : "hidden",
+        visibility: z ? "visible" : "hidden",
         ...!!e.arrowLeft && {
           "--arrow-left": `${e.arrowLeft}px`
         },
@@ -74,12 +75,12 @@ const V = ({
             n && /* @__PURE__ */ s(k, {}),
             t ? /* @__PURE__ */ s("div", { className: o.title, children: t }) : /* @__PURE__ */ s("span", {})
           ] }),
-          p && /* @__PURE__ */ s("span", { className: o.closeButton, onClick: L, children: /* @__PURE__ */ s(B, {}) })
+          p && /* @__PURE__ */ s("span", { className: o.closeButton, onClick: h, children: /* @__PURE__ */ s(B, {}) })
         ] }),
         /* @__PURE__ */ a("div", { className: o.content, children: [
           n && !t && /* @__PURE__ */ s(k, {}),
           /* @__PURE__ */ s("span", { className: o.contentText, children: f }),
-          p && !t && /* @__PURE__ */ s("span", { className: o.closeButton, onClick: L, children: /* @__PURE__ */ s(B, {}) })
+          p && !t && /* @__PURE__ */ s("span", { className: o.closeButton, onClick: h, children: /* @__PURE__ */ s(B, {}) })
         ] })
       ]
     }
@@ -87,17 +88,17 @@ const V = ({
   return /* @__PURE__ */ a(
     "div",
     {
-      ref: W,
-      className: h(o.wrapper, R),
+      ref: X,
+      className: M(o.wrapper, W && o.fullWidth, R),
       onMouseEnter: I,
       onMouseLeave: S,
       children: [
         v,
-        x && !u && F(z, $ ?? document.body)
+        x && !u && G(A, $ ?? document.body)
       ]
     }
   );
-};
+}
 export {
-  V as Tooltip
+  b as Tooltip
 };

package/dist/components/Tooltip/Tooltip.module.scss.js

@@ -1,39 +1,41 @@
-const t = "_wrapper_rlyb1_3", o = "_tooltip_rlyb1_11", _ = "_dark_rlyb1_29", l = "_light_rlyb1_38", e = "_withArrow_rlyb1_49", n = "_top_rlyb1_57", r = "_bottom_rlyb1_65", c = "_left_rlyb1_73", i = "_right_rlyb1_81", s = "_header_rlyb1_105", b = "_titleRow_rlyb1_113", h = "_title_rlyb1_113", y = "_content_rlyb1_128", p = "_contentText_rlyb1_138", w = "_noTitleWithIcon_rlyb1_144", a = "_noTitleWithClose_rlyb1_148", T = "_closeButton_rlyb1_154", d = {
+const t = "_wrapper_1fyp1_3", o = "_fullWidth_1fyp1_11", _ = "_tooltip_1fyp1_18", n = "_dark_1fyp1_36", e = "_light_1fyp1_45", l = "_withArrow_1fyp1_56", i = "_top_1fyp1_64", c = "_bottom_1fyp1_72", p = "_left_1fyp1_80", s = "_right_1fyp1_88", f = "_header_1fyp1_112", r = "_titleRow_1fyp1_120", h = "_title_1fyp1_120", y = "_content_1fyp1_135", w = "_contentText_1fyp1_145", a = "_noTitleWithIcon_1fyp1_151", d = "_noTitleWithClose_1fyp1_155", T = "_closeButton_1fyp1_161", W = {
   wrapper: t,
-  tooltip: o,
-  dark: _,
-  light: l,
-  withArrow: e,
-  top: n,
-  bottom: r,
-  left: c,
-  right: i,
-  header: s,
-  titleRow: b,
+  fullWidth: o,
+  tooltip: _,
+  dark: n,
+  light: e,
+  withArrow: l,
+  top: i,
+  bottom: c,
+  left: p,
+  right: s,
+  header: f,
+  titleRow: r,
   title: h,
   content: y,
-  contentText: p,
-  noTitleWithIcon: w,
-  noTitleWithClose: a,
+  contentText: w,
+  noTitleWithIcon: a,
+  noTitleWithClose: d,
   closeButton: T
 };
 export {
-  r as bottom,
+  c as bottom,
   T as closeButton,
   y as content,
-  p as contentText,
-  _ as dark,
-  d as default,
-  s as header,
-  c as left,
-  l as light,
-  a as noTitleWithClose,
-  w as noTitleWithIcon,
-  i as right,
+  w as contentText,
+  n as dark,
+  W as default,
+  o as fullWidth,
+  f as header,
+  p as left,
+  e as light,
+  d as noTitleWithClose,
+  a as noTitleWithIcon,
+  s as right,
   h as title,
-  b as titleRow,
-  o as tooltip,
-  n as top,
-  e as withArrow,
+  r as titleRow,
+  _ as tooltip,
+  i as top,
+  l as withArrow,
   t as wrapper
 };

package/dist/components/Tooltip/useTooltipPositioning.d.ts

@@ -0,0 +1,21 @@
+export function useTooltipPositioning({ open, desiredPosition, showArrow, maxWidth, viewportPadding, gap, arrowSafePadding, }: {
+    open: any;
+    desiredPosition: any;
+    showArrow: any;
+    maxWidth: any;
+    viewportPadding?: number;
+    gap?: any;
+    arrowSafePadding?: number;
+}): {
+    wrapperRef: import("react").MutableRefObject<any>;
+    tooltipRef: import("react").MutableRefObject<any>;
+    layout: {
+        resolvedPosition: any;
+        top: number;
+        left: number;
+        arrowLeft: any;
+        arrowTop: any;
+    };
+    isPositioned: boolean;
+    recompute: () => void;
+};

package/dist/components/icons-v2/AdIcon.d.ts

@@ -0,0 +1,2 @@
+export const AdIcon: (props: IconProps) => import("react").JSX.Element;
+import React from 'react';

package/dist/components/icons-v2/AddMessageIcon.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SVG message bubble with a plus sign, used for "add message" actions.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AddMessageIcon: (props: IconProps) => import("react").JSX.Element;

package/dist/components/icons-v2/AddUserIcon.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SVG user avatar with a plus sign, used for "add user" actions.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AddUserIcon: (props: IconProps) => import("react").JSX.Element;