@luscii-healthtech/web-ui 55.0.1 → 55.2.0

package/dist/src/components/Icons/DashboardIcon.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import { IconProps } from "./types/IconProps.type";
+declare const _default: FC<IconProps>;
+export default _default;

package/dist/src/components/Icons/SwapIcon.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import { IconProps } from "./types/IconProps.type";
+declare const _default: FC<IconProps>;
+export default _default;

package/dist/src/components/Icons/index.d.ts

@@ -35,6 +35,7 @@ export { default as CopyToClipboardIcon } from "./CopyToClipboardIcon";
 export { default as CrossIcon } from "./CrossIcon";
 export { default as CrossInCircleIcon } from "./CrossInCircleIcon";
 export { default as CrossInFilledCircleIcon } from "./CrossInFilledCircleIcon";
+export { default as DashboardIcon } from "./DashboardIcon";
 export { default as DatabaseIcon } from "./DatabaseIcon";
 export { default as DownloadIcon } from "./DownloadIcon";
 export { default as DragIndicatorIcon } from "./DragIndicatorIcon";
@@ -111,6 +112,7 @@ export { default as StarFilledIcon } from "./StarFilledIcon";
 export { default as StarIcon } from "./StarIcon";
 export { default as StopwatchIcon } from "./StopwatchIcon";
 export { default as SummaryIcon } from "./SummaryIcon";
+export { default as SwapIcon } from "./SwapIcon";
 export { default as TadaIcon } from "./TadaIcon";
 export { default as TaskIcon } from "./TaskIcon";
 export { default as ThresholdIcon } from "./ThresholdIcon";

package/dist/src/components/Select/Select.types.d.ts

@@ -1,4 +1,43 @@
+/**
+ * Avatar shown alongside an option's label.
+ *
+ * Rendered in the multi-select tag and in the menu row. Ignored by the
+ * single-select, which has no avatar in its design.
+ */
+export interface OptionAvatar {
+    /**
+     * Initials to show when there is no image, e.g. `"JD"`.
+     *
+     * Only the first character is rendered — the avatar is 24px, and the design
+     * shows a single initial at that size. Passing the full initials is still
+     * fine; they are truncated for display, not rejected.
+     */
+    initials: string;
+    /**
+     * Marks this option as the current user, which gets a highlighted
+     * treatment to distinguish it from everyone else.
+     */
+    isSelf?: boolean;
+    /**
+     * Optional avatar image. Falls back to the initials if it fails to load.
+     */
+    src?: string;
+    /**
+     * The person's full name. Announced to screen readers in place of the
+     * initials, which are meaningless read aloud.
+     */
+    alt?: string;
+}
 export interface OptionMinimal {
     value: any;
     label?: string;
+    /**
+     * Optional avatar rendered before the label.
+     *
+     * Opt-in, and it also selects the tag style: options carrying an avatar get
+     * the white tag with a border, options without stay on the blue fill.
+     * Adding this field to some options and not others is supported — the two
+     * styles can appear side by side in one field.
+     */
+    avatar?: OptionAvatar;
 }

package/dist/src/components/Select/SelectDropdownIndicator.d.ts

@@ -1,3 +1,8 @@
 import { type DropdownIndicatorProps, type GroupBase } from "react-select";
 import type { OptionMinimal } from "./Select.types";
+/**
+ * DES-171: the multi-select design uses a stacked up/down chevron, while the
+ * single-select keeps the single downward chevron. `isMulti` reaches us here
+ * because `DropdownIndicatorProps` extends react-select's `CommonProps`.
+ */
 export declare const SelectDropdownIndicator: <Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Select/SelectMultiValueLabel.d.ts

@@ -0,0 +1,10 @@
+import { type GroupBase, type MultiValueGenericProps } from "react-select";
+import type { OptionMinimal } from "./Select.types";
+/**
+ * Tag label for the multi-select, rendering the option's avatar before its
+ * text when one is supplied.
+ *
+ * Only ever mounted for multi-selects — react-select does not render
+ * `MultiValueLabel` in single-select mode — so this needs no `isMulti` guard.
+ */
+export declare const SelectMultiValueLabel: <Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueGenericProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Select/SelectOption.d.ts

@@ -0,0 +1,12 @@
+import { type GroupBase, type OptionProps } from "react-select";
+import type { OptionMinimal } from "./Select.types";
+/**
+ * Menu row for the multi-select, rendering the option's avatar before its text.
+ *
+ * Unlike `MultiValueLabel`, `Option` is shared with the single-select, so the
+ * avatar is gated on `isMulti`. Avatars are a multi-select affordance in the
+ * design (DES-171), and gating keeps the single-select provably untouched.
+ * `isMulti` reaches us because `OptionProps` extends react-select's
+ * `CommonProps`.
+ */
+export declare const SelectOption: <Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Select/SelectOptionAvatar.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import type { OptionAvatar } from "./Select.types";
+/**
+ * The avatar rendered inside multi-select tags and menu rows.
+ *
+ * Two known compromises:
+ *
+ * 1. The 1px ring comes from `className` — `Avatar` has no border support.
+ * 2. `Avatar`'s colours resolve to Tailwind's built-in palette, not our
+ *    semantic tokens, so they sit slightly off the design. Tracked in DES-173;
+ *    not fixable from outside the component.
+ *
+ * Initials are truncated to one character here because this wrapper is what
+ * pins the avatar to 24px, which is why the design shows a single letter. The
+ * full name still reaches screen readers via `alt`.
+ */
+export declare const SelectOptionAvatar: FC<{
+    avatar: OptionAvatar;
+}>;

package/dist/src/generated/components/Icons/DashboardIcon.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import { IconProps } from "./types/IconProps.type";
+declare const _default: FC<IconProps>;
+export default _default;

package/dist/src/generated/components/Icons/SwapIcon.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import { IconProps } from "./types/IconProps.type";
+declare const _default: FC<IconProps>;
+export default _default;

package/dist/src/generated/components/Icons/index.d.ts

@@ -35,6 +35,7 @@ export { default as CopyToClipboardIcon } from "./CopyToClipboardIcon";
 export { default as CrossIcon } from "./CrossIcon";
 export { default as CrossInCircleIcon } from "./CrossInCircleIcon";
 export { default as CrossInFilledCircleIcon } from "./CrossInFilledCircleIcon";
+export { default as DashboardIcon } from "./DashboardIcon";
 export { default as DatabaseIcon } from "./DatabaseIcon";
 export { default as DownloadIcon } from "./DownloadIcon";
 export { default as DragIndicatorIcon } from "./DragIndicatorIcon";
@@ -111,6 +112,7 @@ export { default as StarFilledIcon } from "./StarFilledIcon";
 export { default as StarIcon } from "./StarIcon";
 export { default as StopwatchIcon } from "./StopwatchIcon";
 export { default as SummaryIcon } from "./SummaryIcon";
+export { default as SwapIcon } from "./SwapIcon";
 export { default as TadaIcon } from "./TadaIcon";
 export { default as TaskIcon } from "./TaskIcon";
 export { default as ThresholdIcon } from "./ThresholdIcon";

package/dist/src/generated/components/Select/Select.types.d.ts

@@ -1,4 +1,43 @@
+/**
+ * Avatar shown alongside an option's label.
+ *
+ * Rendered in the multi-select tag and in the menu row. Ignored by the
+ * single-select, which has no avatar in its design.
+ */
+export interface OptionAvatar {
+    /**
+     * Initials to show when there is no image, e.g. `"JD"`.
+     *
+     * Only the first character is rendered — the avatar is 24px, and the design
+     * shows a single initial at that size. Passing the full initials is still
+     * fine; they are truncated for display, not rejected.
+     */
+    initials: string;
+    /**
+     * Marks this option as the current user, which gets a highlighted
+     * treatment to distinguish it from everyone else.
+     */
+    isSelf?: boolean;
+    /**
+     * Optional avatar image. Falls back to the initials if it fails to load.
+     */
+    src?: string;
+    /**
+     * The person's full name. Announced to screen readers in place of the
+     * initials, which are meaningless read aloud.
+     */
+    alt?: string;
+}
 export interface OptionMinimal {
     value: any;
     label?: string;
+    /**
+     * Optional avatar rendered before the label.
+     *
+     * Opt-in, and it also selects the tag style: options carrying an avatar get
+     * the white tag with a border, options without stay on the blue fill.
+     * Adding this field to some options and not others is supported — the two
+     * styles can appear side by side in one field.
+     */
+    avatar?: OptionAvatar;
 }

package/dist/src/generated/components/Select/SelectDropdownIndicator.d.ts

@@ -1,3 +1,8 @@
 import { type DropdownIndicatorProps, type GroupBase } from "react-select";
 import type { OptionMinimal } from "./Select.types";
+/**
+ * DES-171: the multi-select design uses a stacked up/down chevron, while the
+ * single-select keeps the single downward chevron. `isMulti` reaches us here
+ * because `DropdownIndicatorProps` extends react-select's `CommonProps`.
+ */
 export declare const SelectDropdownIndicator: <Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/generated/components/Select/SelectMultiValueLabel.d.ts

@@ -0,0 +1,10 @@
+import { type GroupBase, type MultiValueGenericProps } from "react-select";
+import type { OptionMinimal } from "./Select.types";
+/**
+ * Tag label for the multi-select, rendering the option's avatar before its
+ * text when one is supplied.
+ *
+ * Only ever mounted for multi-selects — react-select does not render
+ * `MultiValueLabel` in single-select mode — so this needs no `isMulti` guard.
+ */
+export declare const SelectMultiValueLabel: <Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueGenericProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/generated/components/Select/SelectOption.d.ts

@@ -0,0 +1,12 @@
+import { type GroupBase, type OptionProps } from "react-select";
+import type { OptionMinimal } from "./Select.types";
+/**
+ * Menu row for the multi-select, rendering the option's avatar before its text.
+ *
+ * Unlike `MultiValueLabel`, `Option` is shared with the single-select, so the
+ * avatar is gated on `isMulti`. Avatars are a multi-select affordance in the
+ * design (DES-171), and gating keeps the single-select provably untouched.
+ * `isMulti` reaches us because `OptionProps` extends react-select's
+ * `CommonProps`.
+ */
+export declare const SelectOption: <Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/generated/components/Select/SelectOptionAvatar.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import type { OptionAvatar } from "./Select.types";
+/**
+ * The avatar rendered inside multi-select tags and menu rows.
+ *
+ * Two known compromises:
+ *
+ * 1. The 1px ring comes from `className` — `Avatar` has no border support.
+ * 2. `Avatar`'s colours resolve to Tailwind's built-in palette, not our
+ *    semantic tokens, so they sit slightly off the design. Tracked in DES-173;
+ *    not fixable from outside the component.
+ *
+ * Initials are truncated to one character here because this wrapper is what
+ * pins the avatar to 24px, which is why the design shows a single letter. The
+ * full name still reaches screen readers via `alt`.
+ */
+export declare const SelectOptionAvatar: FC<{
+    avatar: OptionAvatar;
+}>;

package/dist/src/generated/generated/iconNames.d.ts

@@ -2,5 +2,5 @@
  * List of all available icon names in the web-ui package.
  * These correspond to the icon components in src/components/Icons/
  */
-export declare const iconNames: readonly ["AbsentIcon", "AddNoteIcon", "AlarmClockIcon", "AmberAlertIcon", "ArrowsUpDownIcon", "AssignIcon", "AssignedIcon", "BellIcon", "BluetoothIcon", "BrushIcon", "CakeIcon", "CalendarDayIcon", "CalendarMonthIcon", "CalendarRepeatIcon", "ChartBarsIcon", "ChartLineAndBarsIcon", "ChartLineIcon", "ChatBubbleIcon", "ChatBubbleWithTextIcon", "CheckCircleFilledIcon", "CheckIcon", "ChevronDoubleIcon", "ChevronDownIcon", "ChevronLeftIcon", "ChevronRightIcon", "CircleFilledIcon", "ClockIcon", "CogwheelIcon", "CompareIcon", "CopyToClipboardIcon", "CrossIcon", "CrossInCircleIcon", "CrossInFilledCircleIcon", "DatabaseIcon", "DownloadIcon", "DragIndicatorIcon", "EarthIcon", "EmailIcon", "EmojiIcon", "EmptyIcon", "ExclamationMarkIcon", "ExportIcon", "ExternalLinkIcon", "EyeClosedIcon", "EyeOpenIcon", "FilterIcon", "FireIcon", "FirstAidKitIcon", "FlagIcon", "FolderIcon", "ForwardIcon", "GifIcon", "GrayAlertIcon", "GroupIcon", "GroupOfThreeIcon", "HamburgerIcon", "HandshakeIcon", "HeartIcon", "HeartMinusIcon", "HomeIcon", "IdBadgeIcon", "ImageIcon", "ImageLibraryIcon", "InfoIcon", "LifebuoyIcon", "LightBulbIcon", "LinkIcon", "ListDescIcon", "ListIcon", "LockIcon", "LogInIcon", "LogOutIcon", "MessageWithArrowIcon", "MoreIcon", "MouseIcon", "NoteIcon", "OpenAlertIcon", "OpenFolderIcon", "PageIcon", "PageViewIcon", "PaperclipIcon", "PatientIcon", "PencilIcon", "PersonIcon", "PhoneIcon", "PieChartIcon", "PinIcon", "PlusIcon", "PrinterIcon", "QuestionFilledIcon", "RedAlertIcon", "RobotIcon", "RocketIcon", "SearchIcon", "SendIcon", "ShareIcon", "SidebarIcon", "SmallArrowDownIcon", "SmallArrowUpIcon", "SmallCircleIcon", "SmallDiamondIcon", "SmallSquareIcon", "SmallUpsideDownTriangleIcon", "SquareFilledIcon", "StarFilledIcon", "StarIcon", "StopwatchIcon", "SummaryIcon", "TadaIcon", "TaskIcon", "ThresholdIcon", "TrashBinIcon", "TreeIcon", "UnassignedIcon", "UnlinkIcon", "UnpinIcon", "UploadIcon", "VideoIcon", "WorkflowIcon"];
+export declare const iconNames: readonly ["AbsentIcon", "AddNoteIcon", "AlarmClockIcon", "AmberAlertIcon", "ArrowsUpDownIcon", "AssignIcon", "AssignedIcon", "BellIcon", "BluetoothIcon", "BrushIcon", "CakeIcon", "CalendarDayIcon", "CalendarMonthIcon", "CalendarRepeatIcon", "ChartBarsIcon", "ChartLineAndBarsIcon", "ChartLineIcon", "ChatBubbleIcon", "ChatBubbleWithTextIcon", "CheckCircleFilledIcon", "CheckIcon", "ChevronDoubleIcon", "ChevronDownIcon", "ChevronLeftIcon", "ChevronRightIcon", "CircleFilledIcon", "ClockIcon", "CogwheelIcon", "CompareIcon", "CopyToClipboardIcon", "CrossIcon", "CrossInCircleIcon", "CrossInFilledCircleIcon", "DashboardIcon", "DatabaseIcon", "DownloadIcon", "DragIndicatorIcon", "EarthIcon", "EmailIcon", "EmojiIcon", "EmptyIcon", "ExclamationMarkIcon", "ExportIcon", "ExternalLinkIcon", "EyeClosedIcon", "EyeOpenIcon", "FilterIcon", "FireIcon", "FirstAidKitIcon", "FlagIcon", "FolderIcon", "ForwardIcon", "GifIcon", "GrayAlertIcon", "GroupIcon", "GroupOfThreeIcon", "HamburgerIcon", "HandshakeIcon", "HeartIcon", "HeartMinusIcon", "HomeIcon", "IdBadgeIcon", "ImageIcon", "ImageLibraryIcon", "InfoIcon", "LifebuoyIcon", "LightBulbIcon", "LinkIcon", "ListDescIcon", "ListIcon", "LockIcon", "LogInIcon", "LogOutIcon", "MessageWithArrowIcon", "MoreIcon", "MouseIcon", "NoteIcon", "OpenAlertIcon", "OpenFolderIcon", "PageIcon", "PageViewIcon", "PaperclipIcon", "PatientIcon", "PencilIcon", "PersonIcon", "PhoneIcon", "PieChartIcon", "PinIcon", "PlusIcon", "PrinterIcon", "QuestionFilledIcon", "RedAlertIcon", "RobotIcon", "RocketIcon", "SearchIcon", "SendIcon", "ShareIcon", "SidebarIcon", "SmallArrowDownIcon", "SmallArrowUpIcon", "SmallCircleIcon", "SmallDiamondIcon", "SmallSquareIcon", "SmallUpsideDownTriangleIcon", "SquareFilledIcon", "StarFilledIcon", "StarIcon", "StopwatchIcon", "SummaryIcon", "SwapIcon", "TadaIcon", "TaskIcon", "ThresholdIcon", "TrashBinIcon", "TreeIcon", "UnassignedIcon", "UnlinkIcon", "UnpinIcon", "UploadIcon", "VideoIcon", "WorkflowIcon"];
 export type IconName = (typeof iconNames)[number];

package/dist/src/generated/iconNames.d.ts

@@ -2,5 +2,5 @@
  * List of all available icon names in the web-ui package.
  * These correspond to the icon components in src/components/Icons/
  */
-export declare const iconNames: readonly ["AbsentIcon", "AddNoteIcon", "AlarmClockIcon", "AmberAlertIcon", "ArrowsUpDownIcon", "AssignIcon", "AssignedIcon", "BellIcon", "BluetoothIcon", "BrushIcon", "CakeIcon", "CalendarDayIcon", "CalendarMonthIcon", "CalendarRepeatIcon", "ChartBarsIcon", "ChartLineAndBarsIcon", "ChartLineIcon", "ChatBubbleIcon", "ChatBubbleWithTextIcon", "CheckCircleFilledIcon", "CheckIcon", "ChevronDoubleIcon", "ChevronDownIcon", "ChevronLeftIcon", "ChevronRightIcon", "CircleFilledIcon", "ClockIcon", "CogwheelIcon", "CompareIcon", "CopyToClipboardIcon", "CrossIcon", "CrossInCircleIcon", "CrossInFilledCircleIcon", "DatabaseIcon", "DownloadIcon", "DragIndicatorIcon", "EarthIcon", "EmailIcon", "EmojiIcon", "EmptyIcon", "ExclamationMarkIcon", "ExportIcon", "ExternalLinkIcon", "EyeClosedIcon", "EyeOpenIcon", "FilterIcon", "FireIcon", "FirstAidKitIcon", "FlagIcon", "FolderIcon", "ForwardIcon", "GifIcon", "GrayAlertIcon", "GroupIcon", "GroupOfThreeIcon", "HamburgerIcon", "HandshakeIcon", "HeartIcon", "HeartMinusIcon", "HomeIcon", "IdBadgeIcon", "ImageIcon", "ImageLibraryIcon", "InfoIcon", "LifebuoyIcon", "LightBulbIcon", "LinkIcon", "ListDescIcon", "ListIcon", "LockIcon", "LogInIcon", "LogOutIcon", "MessageWithArrowIcon", "MoreIcon", "MouseIcon", "NoteIcon", "OpenAlertIcon", "OpenFolderIcon", "PageIcon", "PageViewIcon", "PaperclipIcon", "PatientIcon", "PencilIcon", "PersonIcon", "PhoneIcon", "PieChartIcon", "PinIcon", "PlusIcon", "PrinterIcon", "QuestionFilledIcon", "RedAlertIcon", "RobotIcon", "RocketIcon", "SearchIcon", "SendIcon", "ShareIcon", "SidebarIcon", "SmallArrowDownIcon", "SmallArrowUpIcon", "SmallCircleIcon", "SmallDiamondIcon", "SmallSquareIcon", "SmallUpsideDownTriangleIcon", "SquareFilledIcon", "StarFilledIcon", "StarIcon", "StopwatchIcon", "SummaryIcon", "TadaIcon", "TaskIcon", "ThresholdIcon", "TrashBinIcon", "TreeIcon", "UnassignedIcon", "UnlinkIcon", "UnpinIcon", "UploadIcon", "VideoIcon", "WorkflowIcon"];
+export declare const iconNames: readonly ["AbsentIcon", "AddNoteIcon", "AlarmClockIcon", "AmberAlertIcon", "ArrowsUpDownIcon", "AssignIcon", "AssignedIcon", "BellIcon", "BluetoothIcon", "BrushIcon", "CakeIcon", "CalendarDayIcon", "CalendarMonthIcon", "CalendarRepeatIcon", "ChartBarsIcon", "ChartLineAndBarsIcon", "ChartLineIcon", "ChatBubbleIcon", "ChatBubbleWithTextIcon", "CheckCircleFilledIcon", "CheckIcon", "ChevronDoubleIcon", "ChevronDownIcon", "ChevronLeftIcon", "ChevronRightIcon", "CircleFilledIcon", "ClockIcon", "CogwheelIcon", "CompareIcon", "CopyToClipboardIcon", "CrossIcon", "CrossInCircleIcon", "CrossInFilledCircleIcon", "DashboardIcon", "DatabaseIcon", "DownloadIcon", "DragIndicatorIcon", "EarthIcon", "EmailIcon", "EmojiIcon", "EmptyIcon", "ExclamationMarkIcon", "ExportIcon", "ExternalLinkIcon", "EyeClosedIcon", "EyeOpenIcon", "FilterIcon", "FireIcon", "FirstAidKitIcon", "FlagIcon", "FolderIcon", "ForwardIcon", "GifIcon", "GrayAlertIcon", "GroupIcon", "GroupOfThreeIcon", "HamburgerIcon", "HandshakeIcon", "HeartIcon", "HeartMinusIcon", "HomeIcon", "IdBadgeIcon", "ImageIcon", "ImageLibraryIcon", "InfoIcon", "LifebuoyIcon", "LightBulbIcon", "LinkIcon", "ListDescIcon", "ListIcon", "LockIcon", "LogInIcon", "LogOutIcon", "MessageWithArrowIcon", "MoreIcon", "MouseIcon", "NoteIcon", "OpenAlertIcon", "OpenFolderIcon", "PageIcon", "PageViewIcon", "PaperclipIcon", "PatientIcon", "PencilIcon", "PersonIcon", "PhoneIcon", "PieChartIcon", "PinIcon", "PlusIcon", "PrinterIcon", "QuestionFilledIcon", "RedAlertIcon", "RobotIcon", "RocketIcon", "SearchIcon", "SendIcon", "ShareIcon", "SidebarIcon", "SmallArrowDownIcon", "SmallArrowUpIcon", "SmallCircleIcon", "SmallDiamondIcon", "SmallSquareIcon", "SmallUpsideDownTriangleIcon", "SquareFilledIcon", "StarFilledIcon", "StarIcon", "StopwatchIcon", "SummaryIcon", "SwapIcon", "TadaIcon", "TaskIcon", "ThresholdIcon", "TrashBinIcon", "TreeIcon", "UnassignedIcon", "UnlinkIcon", "UnpinIcon", "UploadIcon", "VideoIcon", "WorkflowIcon"];
 export type IconName = (typeof iconNames)[number];

package/dist/src/generated/iconNames.js

@@ -32,6 +32,7 @@ const iconNames = [
   "CrossIcon",
   "CrossInCircleIcon",
   "CrossInFilledCircleIcon",
+  "DashboardIcon",
   "DatabaseIcon",
   "DownloadIcon",
   "DragIndicatorIcon",
@@ -107,6 +108,7 @@ const iconNames = [
   "StarIcon",
   "StopwatchIcon",
   "SummaryIcon",
+  "SwapIcon",
   "TadaIcon",
   "TaskIcon",
   "ThresholdIcon",

package/dist/src/generated/iconNames.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconNames.js","sources":["../../../src/generated/iconNames.ts"],"sourcesContent":[null],"names":[],"mappings":"AAQO,MAAM,SAAA,GAAY;AAAA,EACvB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,wBAAA;AAAA,EACA,uBAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,qBAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,yBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,sBAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,6BAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;;;;;"}
+{"version":3,"file":"iconNames.js","sources":["../../../src/generated/iconNames.ts"],"sourcesContent":[null],"names":[],"mappings":"AAQO,MAAM,SAAA,GAAY;AAAA,EACvB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,wBAAA;AAAA,EACA,uBAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,qBAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,yBAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,sBAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,6BAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;;;;;"}

package/dist/src/generated/index.d.ts

@@ -78,6 +78,7 @@ export { default as Section, type SectionProps, } from "./components/Section/Sec
 export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { default as SectionItem, type SectionItemProps, } from "./components/Section/SectionItem";
 export { type SelectProps, Select } from "./components/Select/Select";
+export type { OptionAvatar, OptionMinimal, } from "./components/Select/Select.types";
 export { StyledSelect } from "./components/Select/StyledSelect";
 export { LabeledSelect } from "./components/Select/LabeledSelect";
 export { LabeledSelectSearchable } from "./components/Select/LabeledSelectSearchable";

package/dist/src/index.d.ts

@@ -78,6 +78,7 @@ export { default as Section, type SectionProps, } from "./components/Section/Sec
 export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { default as SectionItem, type SectionItemProps, } from "./components/Section/SectionItem";
 export { type SelectProps, Select } from "./components/Select/Select";
+export type { OptionAvatar, OptionMinimal, } from "./components/Select/Select.types";
 export { StyledSelect } from "./components/Select/StyledSelect";
 export { LabeledSelect } from "./components/Select/LabeledSelect";
 export { LabeledSelectSearchable } from "./components/Select/LabeledSelectSearchable";

package/dist/stories/LabeledSelectSearchable.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("../src").SelectProps<import("../src/components/Select/Select.types").OptionMinimal, any, import("react-select").GroupBase<import("../src/components/Select/Select.types").OptionMinimal>>, "isError"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("../src").SelectProps<import("../src").OptionMinimal, any, import("react-select").GroupBase<import("../src").OptionMinimal>>, "isError"> & {
         label?: string;
         helperText?: React.ReactNode;
         errorText?: React.ReactNode;

package/dist/stories/Select.stories.d.ts

@@ -1,11 +1,20 @@
 import { type StoryObj } from "@storybook/react-vite";
+/**
+ * Stories are grouped into sections (Basics, States, Value, Options,
+ * Multi-select, Multi-select with avatars, Composition, Docs-only) by order
+ * plus an explicit `name` on each.
+ *
+ * They are not collapsible folders: Storybook builds hierarchy from `title`
+ * only, never from a story's `name`. See the note at the bottom of this file.
+ */
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("../src").SelectProps<import("../src/components/Select/Select.types").OptionMinimal, boolean, import("react-select").GroupBase<import("../src/components/Select/Select.types").OptionMinimal>> & import("react").RefAttributes<unknown>>;
+    component: import("react").ForwardRefExoticComponent<import("../src").SelectProps<import("../src").OptionMinimal, boolean, import("react-select").GroupBase<import("../src").OptionMinimal>> & import("react").RefAttributes<unknown>>;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: {
+    name: string;
     args: {
         options: ({
             value: number;
@@ -20,10 +29,12 @@ export declare const Base: {
     };
 };
 export declare const Width: {
+    name: string;
     args: {};
     render: () => import("react/jsx-runtime").JSX.Element;
 };
 export declare const IsError: {
+    name: string;
     args: {
         isError: boolean;
         options: ({
@@ -39,6 +50,7 @@ export declare const IsError: {
     };
 };
 export declare const LoadingOptions: {
+    name: string;
     args: {
         isLoading: boolean;
         options: ({
@@ -53,7 +65,24 @@ export declare const LoadingOptions: {
         onChange: import("storybook/actions").HandlerFunction;
     };
 };
+export declare const IsClearable: {
+    name: string;
+    args: {
+        isClearable: boolean;
+        options: ({
+            value: number;
+            label: string;
+            isDisabled?: undefined;
+        } | {
+            value: number;
+            label: string;
+            isDisabled: boolean;
+        })[];
+        onChange: import("storybook/actions").HandlerFunction;
+    };
+};
 export declare const WithValue: {
+    name: string;
     args: {
         value: number;
         width: string;
@@ -70,6 +99,7 @@ export declare const WithValue: {
     };
 };
 export declare const WithDefaultValue: {
+    name: string;
     args: {
         defaultValue: {
             value: number;
@@ -92,22 +122,39 @@ export declare const WithDefaultValue: {
         onChange: import("storybook/actions").HandlerFunction;
     };
 };
-export declare const IsClearable: {
+export declare const GroupedOptions: {
+    name: string;
     args: {
-        isClearable: boolean;
         options: ({
-            value: number;
             label: string;
-            isDisabled?: undefined;
+            options: ({
+                value: number;
+                label: string;
+                isDisabled?: undefined;
+            } | {
+                value: number;
+                label: string;
+                isDisabled: boolean;
+            })[];
         } | {
-            value: number;
             label: string;
-            isDisabled: boolean;
+            options: {
+                value: string;
+                label: string;
+            }[];
         })[];
         onChange: import("storybook/actions").HandlerFunction;
     };
 };
+/**
+ * Redesigned in DES-171: white avatar tags, stacked chevron, no focus ring.
+ *
+ * **Font size 14px and height 44px, not the design's 16px / 48px** — both to
+ * match the single-select and the rest of the form controls, which are still
+ * on the legacy type scale. Reasoning in `Select.tsx`.
+ */
 export declare const MultiSelect: {
+    name: string;
     args: {
         isMulti: boolean;
         options: ({
@@ -122,7 +169,12 @@ export declare const MultiSelect: {
         onChange: import("storybook/actions").HandlerFunction;
     };
 };
+/**
+ * The avatarless tag — blue fill, unchanged in colour. This is what the five
+ * existing multi-selects render.
+ */
 export declare const MultiSelectWithDefault: {
+    name: string;
     args: {
         defaultValue: ({
             value: number;
@@ -147,31 +199,26 @@ export declare const MultiSelectWithDefault: {
     };
 };
 export declare const CreatableSelect: Story;
-export declare const GroupedOptions: {
-    args: {
-        options: ({
-            label: string;
-            options: ({
-                value: number;
-                label: string;
-                isDisabled?: undefined;
-            } | {
-                value: number;
-                label: string;
-                isDisabled: boolean;
-            })[];
-        } | {
-            label: string;
-            options: {
-                value: string;
-                label: string;
-            }[];
-        })[];
-        onChange: import("storybook/actions").HandlerFunction;
-    };
-};
+/**
+ * The `default` state from the design: nothing selected yet.
+ */
+export declare const MultiSelectWithAvatarsEmpty: Story;
+/**
+ * The `filled` state. Tags wrap onto a second row, showing the 8px gap and the
+ * growing control height.
+ */
+export declare const MultiSelectWithAvatarsFilled: Story;
+/**
+ * The `selected` state: menu open, avatars in the option rows and the tags.
+ */
+export declare const MultiSelectWithAvatarsMenuOpen: Story;
+/**
+ * Avatars are a multi-select affordance — a single-select ignores them.
+ */
+export declare const SingleSelectIgnoresAvatars: Story;
 export declare const MatchingInputHeight: Story;
 export declare const LabeledSelect: {
+    name: string;
     render: (args: any) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const HIDE_Docs_ListGoodLength: Story;
@@ -180,3 +227,12 @@ export declare const HIDE_Docs_Sorted: Story;
 export declare const HIDE_Docs_RandomSorting: Story;
 export declare const HIDE_Docs_Grouped: Story;
 export declare const HIDE_Docs_Ungrouped: Story;
+/**
+ * Sections, not folders — why.
+ *
+ * Real folders need one `title` each (`Forms/Select/Multi-select`, …), so this
+ * file would have to split. Story ids are `toId(title, exportName)`, so that
+ * renames every id and resets all `Select` Chromatic baselines; `name` does
+ * not. `Select.docs.mdx` also references six exports here and would need
+ * repointing. Worth doing on its own, not as a rider on a feature branch.
+ */