@j2-health/design-system 0.6.6 → 0.6.9

package/dist/src/components/tag/Tag.cjs

@@ -17,6 +17,16 @@ var colorToIcon = {
 	processing: _phosphor_icons_react.ArrowsClockwiseIcon,
 	default: _phosphor_icons_react.GearIcon
 };
+/**
+* The tinted variant from one color: the fill at 14% over white, the border
+* at 45% over white, the text at 65% over black. On the categorical palette
+* the text clears 5.4:1 on its fill.
+*/
+var tintedStyle = (hue) => ({
+	background: `color-mix(in srgb, ${hue} 14%, white)`,
+	borderColor: `color-mix(in srgb, ${hue} 45%, white)`,
+	color: `color-mix(in srgb, ${hue} 65%, black)`
+});
 var statusToColor = {
 	error: "var(--j2-color-error-text)",
 	success: "var(--j2-color-success)",
@@ -26,12 +36,14 @@ var statusToColor = {
 };
 var Tag = ({ status, showIcon = false, icon, size = "default", bordered, variant, color, borderColor, ...props }) => {
 	const isSolid = variant === "solid";
+	const isTinted = variant === "tinted";
+	const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null;
 	const solidDefault = isSolid && !color && status === "default" ? "var(--j2-gray-11)" : void 0;
 	const iconComponent = react$1.useMemo(() => {
 		if (!showIcon || size === "small") return null;
 		const baseProps = { size: 12 };
 		const iconName = icon ?? colorToIcon[status];
-		const iconColor = isSolid ? "white" : statusToColor[status];
+		const iconColor = isSolid ? "white" : tint?.color ?? statusToColor[status];
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			role: "img",
 			className: "anticon",
@@ -45,21 +57,24 @@ var Tag = ({ status, showIcon = false, icon, size = "default", bordered, variant
 		status,
 		showIcon,
 		icon,
-		isSolid
+		isSolid,
+		tint?.color
 	]);
 	const statusToClassName = { default: "bg-[var(--j2-color-fill-quaternary)]" };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Tag, {
 		...props,
-		variant: variant ?? (bordered === false ? "filled" : "outlined"),
-		color: color ?? solidDefault ?? status,
+		variant: isTinted ? "outlined" : variant ?? (bordered === false ? "filled" : "outlined"),
+		color: isTinted ? void 0 : color ?? solidDefault ?? status,
 		icon: iconComponent,
-		style: borderColor ? {
-			borderColor,
+		style: tint || borderColor ? {
+			...tint,
+			...borderColor ? { borderColor } : null,
 			...props.style
 		} : props.style,
-		className: (0, classnames.default)("j2-tag", props.className, !isSolid && statusToClassName[status], isSolid && "j2-tag-solid", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
+		className: (0, classnames.default)("j2-tag", props.className, !isSolid && !isTinted && statusToClassName[status], isSolid && "j2-tag-solid", isTinted && "j2-tag-tinted", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
 	});
 };
 exports.Tag = Tag;
+exports.tintedStyle = tintedStyle;
 
 //# sourceMappingURL=Tag.cjs.map

package/dist/src/components/tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["XCircleIcon","CheckCircleIcon","WarningCircleIcon","ArrowsClockwiseIcon","GearIcon","React","AntdTag","cx"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n  /**\n   * A color outside the status set, e.g. a data-visualization token\n   * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n   * with `variant=\"solid\"` for a filled badge.\n   */\n  color?: string\n  /**\n   * The border's color, when it should differ from the fill: e.g. a solid\n   * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n   */\n  borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  bordered,\n  variant,\n  color,\n  borderColor,\n  ...props\n}: Props) => {\n  const isSolid = variant === 'solid'\n  // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n  const solidDefault =\n    isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    // White on a solid fill, where the status color would vanish.\n    const iconColor: string = isSolid ? 'white' : statusToColor[status]\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color: iconColor, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon, isSolid])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      variant={variant ?? (bordered === false ? 'filled' : 'outlined')}\n      color={color ?? solidDefault ?? status}\n      icon={iconComponent}\n      style={borderColor ? { borderColor, ...props.style } : props.style}\n      className={cx(\n        'j2-tag',\n        props.className,\n        !isSolid && statusToClassName[status],\n        isSolid && 'j2-tag-solid',\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA2CA,IAAM,cAAc;CAClB,OAAOA,sBAAAA;CACP,SAASC,sBAAAA;CACT,SAASC,sBAAAA;CACT,YAAYC,sBAAAA;CACZ,SAASC,sBAAAA;AACX;AAEA,IAAM,gBAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,IAAa,OAAO,EAClB,QACA,WAAW,OACX,MACA,OAAO,WACP,UACA,SACA,OACA,aACA,GAAG,YACQ;CACX,MAAM,UAAU,YAAY;CAE5B,MAAM,eACJ,WAAW,CAAC,SAAS,WAAW,YAAY,sBAAsB,KAAA;CAEpE,MAAM,gBAAgBC,QAAM,cAAc;EACxC,IAAI,CAAC,YAAY,SAAS,SAAS,OAAO;EAE1C,MAAM,YAAY,EAChB,MAAM,GACR;EAEA,MAAM,WAAiB,QAAQ,YAAY;EAE3C,MAAM,YAAoB,UAAU,UAAU,cAAc;EAE5D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,MAAK;GAAM,WAAU;GAAU,cAAY,GAAG,OAAO;GACxD,UAAAA,QAAM,cAAc,UAAU;IAAE,OAAO;IAAW,GAAG;GAAU,CAAC;EAC7D,CAAA;CAEV,GAAG;EAAC;EAAQ;EAAU;EAAM;CAAO,CAAC;CAEpC,MAAM,oBACJ,EACE,SAAS,uCACX;CAEF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,KAAD;EACE,GAAI;EACJ,SAAS,YAAY,aAAa,QAAQ,WAAW;EACrD,OAAO,SAAS,gBAAgB;EAChC,MAAM;EACN,OAAO,cAAc;GAAE;GAAa,GAAG,MAAM;EAAM,IAAI,MAAM;EAC7D,YAAA,GAAWC,WAAAA,QAAAA,CACT,UACA,MAAM,WACN,CAAC,WAAW,kBAAkB,SAC9B,WAAW,gBACX,SAAS,WAAW,gDACtB;CACD,CAAA;AAEL"}
+{"version":3,"file":"Tag.cjs","names":["XCircleIcon","CheckCircleIcon","WarningCircleIcon","ArrowsClockwiseIcon","GearIcon","React","AntdTag","cx"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color' | 'variant'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n  /**\n   * antd's `'outlined'`, `'filled'` and `'solid'`, plus `'tinted'`: a pale\n   * fill, a mid border and dark text, all from `color` (or the status color).\n   * For a set of tags told apart by color, such as user-defined labels on the\n   * categorical palette.\n   */\n  variant?: TagProps['variant'] | 'tinted'\n  /**\n   * A color outside the status set, e.g. a data-visualization token\n   * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n   * with `variant=\"solid\"` for a filled badge, or `variant=\"tinted\"` for a\n   * pale one (`'var(--j2-color-categorical-3)'`).\n   */\n  color?: string\n  /**\n   * The border's color, when it should differ from the fill: e.g. a solid\n   * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n   */\n  borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\n/**\n * The tinted variant from one color: the fill at 14% over white, the border\n * at 45% over white, the text at 65% over black. On the categorical palette\n * the text clears 5.4:1 on its fill.\n */\nexport const tintedStyle = (hue: string): React.CSSProperties => ({\n  background: `color-mix(in srgb, ${hue} 14%, white)`,\n  borderColor: `color-mix(in srgb, ${hue} 45%, white)`,\n  color: `color-mix(in srgb, ${hue} 65%, black)`,\n})\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  bordered,\n  variant,\n  color,\n  borderColor,\n  ...props\n}: Props) => {\n  const isSolid = variant === 'solid'\n  const isTinted = variant === 'tinted'\n  // antd derives a fill by parsing `color`, which a CSS variable or color-mix\n  // doesn't survive, so the tinted colors are set as styles instead.\n  const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null\n  // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n  const solidDefault =\n    isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    // White on a solid fill, where the status color would vanish; the text\n    // color on a tinted one.\n    const iconColor: string = isSolid\n      ? 'white'\n      : (tint?.color ?? statusToColor[status])\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color: iconColor, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon, isSolid, tint?.color])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      variant={\n        isTinted\n          ? 'outlined'\n          : (variant ?? (bordered === false ? 'filled' : 'outlined'))\n      }\n      color={isTinted ? undefined : (color ?? solidDefault ?? status)}\n      icon={iconComponent}\n      style={\n        tint || borderColor\n          ? {\n              ...tint,\n              ...(borderColor ? { borderColor } : null),\n              ...props.style,\n            }\n          : props.style\n      }\n      className={cx(\n        'j2-tag',\n        props.className,\n        !isSolid && !isTinted && statusToClassName[status],\n        isSolid && 'j2-tag-solid',\n        isTinted && 'j2-tag-tinted',\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAmDA,IAAM,cAAc;CAClB,OAAOA,sBAAAA;CACP,SAASC,sBAAAA;CACT,SAASC,sBAAAA;CACT,YAAYC,sBAAAA;CACZ,SAASC,sBAAAA;AACX;;;;;;AAOA,IAAa,eAAe,SAAsC;CAChE,YAAY,sBAAsB,IAAI;CACtC,aAAa,sBAAsB,IAAI;CACvC,OAAO,sBAAsB,IAAI;AACnC;AAEA,IAAM,gBAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,IAAa,OAAO,EAClB,QACA,WAAW,OACX,MACA,OAAO,WACP,UACA,SACA,OACA,aACA,GAAG,YACQ;CACX,MAAM,UAAU,YAAY;CAC5B,MAAM,WAAW,YAAY;CAG7B,MAAM,OAAO,WAAW,YAAY,SAAS,cAAc,OAAO,IAAI;CAEtE,MAAM,eACJ,WAAW,CAAC,SAAS,WAAW,YAAY,sBAAsB,KAAA;CAEpE,MAAM,gBAAgBC,QAAM,cAAc;EACxC,IAAI,CAAC,YAAY,SAAS,SAAS,OAAO;EAE1C,MAAM,YAAY,EAChB,MAAM,GACR;EAEA,MAAM,WAAiB,QAAQ,YAAY;EAG3C,MAAM,YAAoB,UACtB,UACC,MAAM,SAAS,cAAc;EAElC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,MAAK;GAAM,WAAU;GAAU,cAAY,GAAG,OAAO;GACxD,UAAAA,QAAM,cAAc,UAAU;IAAE,OAAO;IAAW,GAAG;GAAU,CAAC;EAC7D,CAAA;CAEV,GAAG;EAAC;EAAQ;EAAU;EAAM;EAAS,MAAM;CAAK,CAAC;CAEjD,MAAM,oBACJ,EACE,SAAS,uCACX;CAEF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,KAAAA,KAAD;EACE,GAAI;EACJ,SACE,WACI,aACC,YAAY,aAAa,QAAQ,WAAW;EAEnD,OAAO,WAAW,KAAA,IAAa,SAAS,gBAAgB;EACxD,MAAM;EACN,OACE,QAAQ,cACJ;GACE,GAAG;GACH,GAAI,cAAc,EAAE,YAAY,IAAI;GACpC,GAAG,MAAM;EACX,IACA,MAAM;EAEZ,YAAA,GAAWC,WAAAA,QAAAA,CACT,UACA,MAAM,WACN,CAAC,WAAW,CAAC,YAAY,kBAAkB,SAC3C,WAAW,gBACX,YAAY,iBACZ,SAAS,WAAW,gDACtB;CACD,CAAA;AAEL"}

package/dist/src/components/tag/Tag.d.ts

@@ -1,12 +1,20 @@
 import { TagProps } from 'antd';
 import { Icon } from '@phosphor-icons/react';
 import * as React from 'react';
-type BaseProps = Expand<Omit<TagProps, 'icon' | 'color'>> & {
+type BaseProps = Expand<Omit<TagProps, 'icon' | 'color' | 'variant'>> & {
     status: 'default' | 'error' | 'success' | 'warning' | 'processing';
+    /**
+     * antd's `'outlined'`, `'filled'` and `'solid'`, plus `'tinted'`: a pale
+     * fill, a mid border and dark text, all from `color` (or the status color).
+     * For a set of tags told apart by color, such as user-defined labels on the
+     * categorical palette.
+     */
+    variant?: TagProps['variant'] | 'tinted';
     /**
      * A color outside the status set, e.g. a data-visualization token
      * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it
-     * with `variant="solid"` for a filled badge.
+     * with `variant="solid"` for a filled badge, or `variant="tinted"` for a
+     * pale one (`'var(--j2-color-categorical-3)'`).
      */
     color?: string;
     /**
@@ -27,5 +35,11 @@ type SmallSizeProps = BaseProps & {
     showIcon?: never;
 };
 type Props = DefaultSizeProps | SmallSizeProps;
+/**
+ * The tinted variant from one color: the fill at 14% over white, the border
+ * at 45% over white, the text at 65% over black. On the categorical palette
+ * the text clears 5.4:1 on its fill.
+ */
+export declare const tintedStyle: (hue: string) => React.CSSProperties;
 export declare const Tag: ({ status, showIcon, icon, size, bordered, variant, color, borderColor, ...props }: Props) => React.JSX.Element;
 export {};

package/dist/src/components/tag/Tag.js

@@ -12,6 +12,16 @@ var colorToIcon = {
 	processing: ArrowsClockwiseIcon,
 	default: GearIcon
 };
+/**
+* The tinted variant from one color: the fill at 14% over white, the border
+* at 45% over white, the text at 65% over black. On the categorical palette
+* the text clears 5.4:1 on its fill.
+*/
+var tintedStyle = (hue) => ({
+	background: `color-mix(in srgb, ${hue} 14%, white)`,
+	borderColor: `color-mix(in srgb, ${hue} 45%, white)`,
+	color: `color-mix(in srgb, ${hue} 65%, black)`
+});
 var statusToColor = {
 	error: "var(--j2-color-error-text)",
 	success: "var(--j2-color-success)",
@@ -21,12 +31,14 @@ var statusToColor = {
 };
 var Tag$1 = ({ status, showIcon = false, icon, size = "default", bordered, variant, color, borderColor, ...props }) => {
 	const isSolid = variant === "solid";
+	const isTinted = variant === "tinted";
+	const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null;
 	const solidDefault = isSolid && !color && status === "default" ? "var(--j2-gray-11)" : void 0;
 	const iconComponent = React.useMemo(() => {
 		if (!showIcon || size === "small") return null;
 		const baseProps = { size: 12 };
 		const iconName = icon ?? colorToIcon[status];
-		const iconColor = isSolid ? "white" : statusToColor[status];
+		const iconColor = isSolid ? "white" : tint?.color ?? statusToColor[status];
 		return /* @__PURE__ */ jsx("span", {
 			role: "img",
 			className: "anticon",
@@ -40,21 +52,23 @@ var Tag$1 = ({ status, showIcon = false, icon, size = "default", bordered, varia
 		status,
 		showIcon,
 		icon,
-		isSolid
+		isSolid,
+		tint?.color
 	]);
 	const statusToClassName = { default: "bg-[var(--j2-color-fill-quaternary)]" };
 	return /* @__PURE__ */ jsx(Tag, {
 		...props,
-		variant: variant ?? (bordered === false ? "filled" : "outlined"),
-		color: color ?? solidDefault ?? status,
+		variant: isTinted ? "outlined" : variant ?? (bordered === false ? "filled" : "outlined"),
+		color: isTinted ? void 0 : color ?? solidDefault ?? status,
 		icon: iconComponent,
-		style: borderColor ? {
-			borderColor,
+		style: tint || borderColor ? {
+			...tint,
+			...borderColor ? { borderColor } : null,
 			...props.style
 		} : props.style,
-		className: cx("j2-tag", props.className, !isSolid && statusToClassName[status], isSolid && "j2-tag-solid", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
+		className: cx("j2-tag", props.className, !isSolid && !isTinted && statusToClassName[status], isSolid && "j2-tag-solid", isTinted && "j2-tag-tinted", size === "small" && "!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm")
 	});
 };
-export { Tag$1 as Tag };
+export { Tag$1 as Tag, tintedStyle };
 
 //# sourceMappingURL=Tag.js.map

package/dist/src/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["Tag","AntdTag"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n  /**\n   * A color outside the status set, e.g. a data-visualization token\n   * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n   * with `variant=\"solid\"` for a filled badge.\n   */\n  color?: string\n  /**\n   * The border's color, when it should differ from the fill: e.g. a solid\n   * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n   */\n  borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  bordered,\n  variant,\n  color,\n  borderColor,\n  ...props\n}: Props) => {\n  const isSolid = variant === 'solid'\n  // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n  const solidDefault =\n    isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    // White on a solid fill, where the status color would vanish.\n    const iconColor: string = isSolid ? 'white' : statusToColor[status]\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color: iconColor, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon, isSolid])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      variant={variant ?? (bordered === false ? 'filled' : 'outlined')}\n      color={color ?? solidDefault ?? status}\n      icon={iconComponent}\n      style={borderColor ? { borderColor, ...props.style } : props.style}\n      className={cx(\n        'j2-tag',\n        props.className,\n        !isSolid && statusToClassName[status],\n        isSolid && 'j2-tag-solid',\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AA2CA,IAAM,cAAc;CAClB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,IAAM,gBAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,IAAaA,SAAO,EAClB,QACA,WAAW,OACX,MACA,OAAO,WACP,UACA,SACA,OACA,aACA,GAAG,YACQ;CACX,MAAM,UAAU,YAAY;CAE5B,MAAM,eACJ,WAAW,CAAC,SAAS,WAAW,YAAY,sBAAsB,KAAA;CAEpE,MAAM,gBAAgB,MAAM,cAAc;EACxC,IAAI,CAAC,YAAY,SAAS,SAAS,OAAO;EAE1C,MAAM,YAAY,EAChB,MAAM,GACR;EAEA,MAAM,WAAiB,QAAQ,YAAY;EAE3C,MAAM,YAAoB,UAAU,UAAU,cAAc;EAE5D,OACE,oBAAC,QAAD;GAAM,MAAK;GAAM,WAAU;GAAU,cAAY,GAAG,OAAO;GACxD,UAAA,MAAM,cAAc,UAAU;IAAE,OAAO;IAAW,GAAG;GAAU,CAAC;EAC7D,CAAA;CAEV,GAAG;EAAC;EAAQ;EAAU;EAAM;CAAO,CAAC;CAEpC,MAAM,oBACJ,EACE,SAAS,uCACX;CAEF,OACE,oBAACC,KAAD;EACE,GAAI;EACJ,SAAS,YAAY,aAAa,QAAQ,WAAW;EACrD,OAAO,SAAS,gBAAgB;EAChC,MAAM;EACN,OAAO,cAAc;GAAE;GAAa,GAAG,MAAM;EAAM,IAAI,MAAM;EAC7D,WAAW,GACT,UACA,MAAM,WACN,CAAC,WAAW,kBAAkB,SAC9B,WAAW,gBACX,SAAS,WAAW,gDACtB;CACD,CAAA;AAEL"}
+{"version":3,"file":"Tag.js","names":["Tag","AntdTag"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tag as AntdTag, TagProps } from 'antd'\nimport {\n  ArrowsClockwiseIcon,\n  CheckCircleIcon,\n  GearIcon,\n  Icon,\n  WarningCircleIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport './Tag.css'\n\ntype BaseProps = Expand<Omit<TagProps, 'icon' | 'color' | 'variant'>> & {\n  status: 'default' | 'error' | 'success' | 'warning' | 'processing'\n  /**\n   * antd's `'outlined'`, `'filled'` and `'solid'`, plus `'tinted'`: a pale\n   * fill, a mid border and dark text, all from `color` (or the status color).\n   * For a set of tags told apart by color, such as user-defined labels on the\n   * categorical palette.\n   */\n  variant?: TagProps['variant'] | 'tinted'\n  /**\n   * A color outside the status set, e.g. a data-visualization token\n   * (`'var(--j2-color-interval-7-5)'`). Overrides the status color; use it\n   * with `variant=\"solid\"` for a filled badge, or `variant=\"tinted\"` for a\n   * pale one (`'var(--j2-color-categorical-3)'`).\n   */\n  color?: string\n  /**\n   * The border's color, when it should differ from the fill: e.g. a solid\n   * badge with a darker edge (`'var(--j2-color-interval-7-7)'`).\n   */\n  borderColor?: string\n}\n\ntype DefaultSizeProps = BaseProps & {\n  size?: 'default'\n  icon?: Icon\n  showIcon?: boolean\n}\n\ntype SmallSizeProps = BaseProps & {\n  size: 'small'\n  /** Icons are not supported on the small variant — omit this prop. */\n  icon?: never\n  showIcon?: never\n}\n\ntype Props = DefaultSizeProps | SmallSizeProps\n\nconst colorToIcon = {\n  error: XCircleIcon,\n  success: CheckCircleIcon,\n  warning: WarningCircleIcon,\n  processing: ArrowsClockwiseIcon,\n  default: GearIcon,\n}\n\n/**\n * The tinted variant from one color: the fill at 14% over white, the border\n * at 45% over white, the text at 65% over black. On the categorical palette\n * the text clears 5.4:1 on its fill.\n */\nexport const tintedStyle = (hue: string): React.CSSProperties => ({\n  background: `color-mix(in srgb, ${hue} 14%, white)`,\n  borderColor: `color-mix(in srgb, ${hue} 45%, white)`,\n  color: `color-mix(in srgb, ${hue} 65%, black)`,\n})\n\nconst statusToColor = {\n  error: 'var(--j2-color-error-text)',\n  success: 'var(--j2-color-success)',\n  warning: 'var(--j2-color-warning-text)',\n  processing: 'var(--j2-color-primary)',\n  default: 'var(--j2-color-text)',\n}\n\nexport const Tag = ({\n  status,\n  showIcon = false,\n  icon,\n  size = 'default',\n  bordered,\n  variant,\n  color,\n  borderColor,\n  ...props\n}: Props) => {\n  const isSolid = variant === 'solid'\n  const isTinted = variant === 'tinted'\n  // antd derives a fill by parsing `color`, which a CSS variable or color-mix\n  // doesn't survive, so the tinted colors are set as styles instead.\n  const tint = isTinted ? tintedStyle(color ?? statusToColor[status]) : null\n  // antd's solid \"default\" is near-black; the DS neutral is gray-11.\n  const solidDefault =\n    isSolid && !color && status === 'default' ? 'var(--j2-gray-11)' : undefined\n\n  const iconComponent = React.useMemo(() => {\n    if (!showIcon || size === 'small') return null\n\n    const baseProps = {\n      size: 12,\n    }\n\n    const iconName: Icon = icon ?? colorToIcon[status]\n    // White on a solid fill, where the status color would vanish; the text\n    // color on a tinted one.\n    const iconColor: string = isSolid\n      ? 'white'\n      : (tint?.color ?? statusToColor[status])\n\n    return (\n      <span role=\"img\" className=\"anticon\" aria-label={`${status} icon`}>\n        {React.createElement(iconName, { color: iconColor, ...baseProps })}\n      </span>\n    )\n  }, [status, showIcon, icon, isSolid, tint?.color])\n\n  const statusToClassName: Partial<Record<keyof typeof statusToColor, string>> =\n    {\n      default: 'bg-[var(--j2-color-fill-quaternary)]',\n    }\n\n  return (\n    <AntdTag\n      {...props}\n      variant={\n        isTinted\n          ? 'outlined'\n          : (variant ?? (bordered === false ? 'filled' : 'outlined'))\n      }\n      color={isTinted ? undefined : (color ?? solidDefault ?? status)}\n      icon={iconComponent}\n      style={\n        tint || borderColor\n          ? {\n              ...tint,\n              ...(borderColor ? { borderColor } : null),\n              ...props.style,\n            }\n          : props.style\n      }\n      className={cx(\n        'j2-tag',\n        props.className,\n        !isSolid && !isTinted && statusToClassName[status],\n        isSolid && 'j2-tag-solid',\n        isTinted && 'j2-tag-tinted',\n        size === 'small' && '!px-1 !py-0 !h-auto !text-j2-xs !rounded-j2-sm'\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAmDA,IAAM,cAAc;CAClB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;;;;;;AAOA,IAAa,eAAe,SAAsC;CAChE,YAAY,sBAAsB,IAAI;CACtC,aAAa,sBAAsB,IAAI;CACvC,OAAO,sBAAsB,IAAI;AACnC;AAEA,IAAM,gBAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,IAAaA,SAAO,EAClB,QACA,WAAW,OACX,MACA,OAAO,WACP,UACA,SACA,OACA,aACA,GAAG,YACQ;CACX,MAAM,UAAU,YAAY;CAC5B,MAAM,WAAW,YAAY;CAG7B,MAAM,OAAO,WAAW,YAAY,SAAS,cAAc,OAAO,IAAI;CAEtE,MAAM,eACJ,WAAW,CAAC,SAAS,WAAW,YAAY,sBAAsB,KAAA;CAEpE,MAAM,gBAAgB,MAAM,cAAc;EACxC,IAAI,CAAC,YAAY,SAAS,SAAS,OAAO;EAE1C,MAAM,YAAY,EAChB,MAAM,GACR;EAEA,MAAM,WAAiB,QAAQ,YAAY;EAG3C,MAAM,YAAoB,UACtB,UACC,MAAM,SAAS,cAAc;EAElC,OACE,oBAAC,QAAD;GAAM,MAAK;GAAM,WAAU;GAAU,cAAY,GAAG,OAAO;GACxD,UAAA,MAAM,cAAc,UAAU;IAAE,OAAO;IAAW,GAAG;GAAU,CAAC;EAC7D,CAAA;CAEV,GAAG;EAAC;EAAQ;EAAU;EAAM;EAAS,MAAM;CAAK,CAAC;CAEjD,MAAM,oBACJ,EACE,SAAS,uCACX;CAEF,OACE,oBAACC,KAAD;EACE,GAAI;EACJ,SACE,WACI,aACC,YAAY,aAAa,QAAQ,WAAW;EAEnD,OAAO,WAAW,KAAA,IAAa,SAAS,gBAAgB;EACxD,MAAM;EACN,OACE,QAAQ,cACJ;GACE,GAAG;GACH,GAAI,cAAc,EAAE,YAAY,IAAI;GACpC,GAAG,MAAM;EACX,IACA,MAAM;EAEZ,WAAW,GACT,UACA,MAAM,WACN,CAAC,WAAW,CAAC,YAAY,kBAAkB,SAC3C,WAAW,gBACX,YAAY,iBACZ,SAAS,WAAW,gDACtB;CACD,CAAA;AAEL"}

package/dist/style.css

@@ -792,7 +792,7 @@
   color: white;
   font-weight: 700;
 }
-._hemisphericSelect_1pxzv_1 {
+._hemisphericSelect_1pri4_1 {
   border-radius: 9999px !important;
 
   .ant-select-placeholder {
@@ -800,7 +800,7 @@
   }
 }
 
-._summarizedSelect_1pxzv_9 {
+._summarizedSelect_1pri4_9 {
   .ant-select-suffix {
     color: var(--j2-color-primary);
   }
@@ -837,7 +837,7 @@
   }
 }
 
-._isActive_1pxzv_46 {
+._isActive_1pri4_46 {
   background: var(--j2-color-primary) !important;
 
   .ant-select-selection-item-content {
@@ -849,21 +849,21 @@
   }
 }
 
-._menuContainer_1pxzv_58 .ant-select-item-option-selected {
+._menuContainer_1pri4_58 .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_1pxzv_58
+._menuContainer_1pri4_58
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._menuContainerMultiple_1pxzv_68 .ant-select-item-option-selected {
+._menuContainerMultiple_1pri4_68 .ant-select-item-option-selected {
   background: var(--j2-color-primary-bg-hover) !important;
 }
 
-._menuContainerMultiple_1pxzv_68
+._menuContainerMultiple_1pri4_68
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: inherit;
@@ -874,14 +874,14 @@
  * The select root owns its border and background in Ant Design 6.
  */
 
-._headlinedSelect_1pxzv_83.ant-select.ant-select-single {
+._headlinedSelect_1pri4_83.ant-select.ant-select-single {
   font-size: var(--j2-font-size-heading-2);
   height: 40px;
   width: -moz-fit-content !important;
   width: fit-content !important;
 }
 
-._headlinedSelect_1pxzv_83.ant-select {
+._headlinedSelect_1pri4_83.ant-select {
   background: transparent;
   padding-left: 0;
   padding-right: 4px;
@@ -890,13 +890,13 @@
   border-radius: 0;
 }
 
-._headlinedSelect_1pxzv_83.ant-select .ant-select-suffix {
+._headlinedSelect_1pri4_83.ant-select .ant-select-suffix {
   height: 16px;
   width: 16px;
   right: 0;
 }
 
-._headlinedSelect_1pxzv_83.ant-select .ant-select-content {
+._headlinedSelect_1pri4_83.ant-select .ant-select-content {
   font-weight: 600;
   line-height: 1.3;
 }
@@ -906,43 +906,43 @@
    too, so every click boxed the headline. The underline below already marks
    focus. `!important` because antd's status variants of that rule reach
    (0,5,1) specificity. */
-._headlinedSelect_1pxzv_83.ant-select {
+._headlinedSelect_1pri4_83.ant-select {
   outline: none !important;
 }
 
 /* Hover state - show underline */
-._headlinedSelect_1pxzv_83.ant-select:hover {
+._headlinedSelect_1pri4_83.ant-select:hover {
   border-bottom-color: var(--j2-color-primary);
 }
 
 /* Open/focused state - keep underline and text color */
-._headlinedSelect_1pxzv_83.ant-select-open,
-._headlinedSelect_1pxzv_83.ant-select-focused {
+._headlinedSelect_1pri4_83.ant-select-open,
+._headlinedSelect_1pri4_83.ant-select-focused {
   border-bottom-color: var(--j2-color-primary);
 }
 
-._headlinedSelect_1pxzv_83.ant-select-open .ant-select-content,
-._headlinedSelect_1pxzv_83.ant-select-focused .ant-select-content {
+._headlinedSelect_1pri4_83.ant-select-open .ant-select-content,
+._headlinedSelect_1pri4_83.ant-select-focused .ant-select-content {
   color: inherit;
 }
 
 /* Headline dropdown styles - needs !important to override .menuContainer */
-._menuContainer_1pxzv_58._headlinedMenuContainer_1pxzv_135
+._menuContainer_1pri4_58._headlinedMenuContainer_1pri4_135
   .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_1pxzv_58._headlinedMenuContainer_1pxzv_135
+._menuContainer_1pri4_58._headlinedMenuContainer_1pri4_135
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._clearAllButton_1pxzv_146 {
+._clearAllButton_1pri4_146 {
   color: var(--j2-color-primary);
 }
 
-._clearAllButton_1pxzv_146:hover {
+._clearAllButton_1pri4_146:hover {
   background-color: var(--j2-color-primary-bg-hover);
 }
 
@@ -957,19 +957,19 @@
  * Color needs `.ant-typography` to beat antd's link color.
  */
 
-._dropdownTrigger_1pxzv_165.ant-typography,
-._dropdownTrigger_1pxzv_165.ant-typography:hover,
-._dropdownTrigger_1pxzv_165.ant-typography:focus {
+._dropdownTrigger_1pri4_165.ant-typography,
+._dropdownTrigger_1pri4_165.ant-typography:hover,
+._dropdownTrigger_1pri4_165.ant-typography:focus {
   color: var(--j2-color-primary);
   text-decoration: none;
 }
 
-._dropdownTrigger_1pxzv_165.ant-typography:hover {
+._dropdownTrigger_1pri4_165.ant-typography:hover {
   opacity: 0.7;
 }
 
-._dropdownTrigger_1pxzv_165.ant-typography-disabled,
-._dropdownTrigger_1pxzv_165.ant-typography-disabled:hover {
+._dropdownTrigger_1pri4_165.ant-typography-disabled,
+._dropdownTrigger_1pri4_165.ant-typography-disabled:hover {
   color: var(--j2-color-text-disabled);
   opacity: 1;
 }
@@ -978,15 +978,21 @@
  * Field variant (`variant="field"`)
  * A form field: full width, the field's own text color, a muted caret.
  */
-._fieldSelect_1pxzv_186 .ant-select-suffix {
+._fieldSelect_1pri4_186 .ant-select-suffix {
   color: var(--j2-color-text-secondary);
 }
 
 /* A line between option groups, drawn on every group after the first. */
-._groupDivider_1pxzv_191 {
+._groupDivider_1pri4_191 {
   border-top: 1px solid var(--j2-color-border-secondary);
   border-radius: 0 !important;
 }
+
+/* A search-box suffix opens its own list inside this popup, and that list can
+   hang past the bottom of a short one. */
+._hasSearchSuffix_1pri4_198 {
+  overflow: visible !important;
+}
 ._pill_16f8w_1 {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j2-health/design-system",
-  "version": "0.6.6",
+  "version": "0.6.9",
   "type": "module",
   "description": "J2 Health shared React component library",
   "repository": {
@@ -60,7 +60,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@highcharts/react": "^5.0.0",
     "@phosphor-icons/react": "^2.1.7",
-    "antd": "^6.6.7",
+    "antd": "^6.6.8",
     "classnames": "^2.5.1",
     "formik": "^2.4.6",
     "highcharts": "^13.1.1",
@@ -78,9 +78,9 @@
     "@eslint/js": "^10.0.1",
     "@highcharts/react": "^5.4.0",
     "@phosphor-icons/react": "^2.1.7",
-    "@storybook/addon-docs": "^10.6.3",
-    "@storybook/addon-links": "^10.6.3",
-    "@storybook/react-vite": "^10.6.3",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/addon-links": "^10.6.5",
+    "@storybook/react-vite": "^10.6.5",
     "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -89,30 +89,30 @@
     "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "^5.0.5",
-    "antd": "^6.6.7",
-    "autoprefixer": "^10.6.1",
+    "antd": "^6.6.8",
+    "autoprefixer": "^10.6.2",
     "classnames": "^2.5.1",
-    "eslint": "^10.13.0",
+    "eslint": "^10.14.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.7",
-    "eslint-plugin-storybook": "^10.6.3",
+    "eslint-plugin-storybook": "^10.6.5",
     "formik": "^2.4.6",
     "globals": "^17.13.0",
     "happy-dom": "^21.0.4",
     "highcharts": "^13.1.1",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.31",
+    "postcss": "^8.5.32",
     "prettier": "^3.9.10",
     "react": "^19.2.8",
     "react-dom": "^19.3.1",
     "semver": "^7.8.5",
-    "storybook": "^10.6.3",
+    "storybook": "^10.6.5",
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.72.0",
+    "typescript-eslint": "^8.72.1",
     "vite": "^8.3.5",
     "vite-plugin-dts": "^5.1.2",
     "vite-plugin-svgr": "^5.2.0",
@@ -120,7 +120,7 @@
     "yup": "^1.4.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.65.0"
+    "@rollup/rollup-linux-x64-gnu": "^4.67.2"
   },
   "eslintConfig": {
     "extends": [