panelui-native 0.81.0 → 0.83.0

package/lib/module/icons/index.js

@@ -3,30 +3,131 @@
 /**
  * Icon set.
  *
- * Two families live here:
- * - Stroked 24×24 icons on Lucide geometry, for chrome such as chevrons and
- *   the close button.
- * - Filled 16×16 status icons for Alert and Toast indicators, which read
- *   better small than a stroked equivalent would.
+ * Every glyph is a 24×24 stroked drawing, sized and coloured by the caller.
+ * They exist so the library can draw its own chrome — chevrons, a close
+ * button, a check inside a checkbox — without every consumer having to choose
+ * an icon package before a Select will render.
  *
- * Every icon resolves its colour in the same order: an explicit `color` prop,
- * then the colour inherited from an enclosing `IconColorProvider`, then its
- * own fallback. Coloured surfaces such as Button provide the foreground that
- * reads against them, so icons follow the theme without callers hardcoding a
- * hex — which breaks the moment the theme inverts.
+ * ## How a colour is resolved
  *
- * Brand marks (Google, Facebook, Apple) are the exception: they carry their
- * own colours and ignore the context.
+ * In one order, always: an explicit `color` prop, then the colour inherited
+ * from an enclosing `IconColorProvider`, then the icon's own fallback.
+ * Coloured surfaces such as Button provide the foreground that reads against
+ * them, so an icon dropped into one follows the theme without the caller
+ * hardcoding a hex — which is what breaks the moment the theme inverts.
+ *
+ * ## Weight
+ *
+ * `strokeWidth` defaults to 2 rather than to the drawing's own 1.5. The set is
+ * drawn at 24 and used at 14–20, and a hairline that reads correctly at full
+ * size thins to nothing at two thirds of it. A few glyphs carry their own
+ * weight because they sit beside something they have to match: the check and
+ * the bar inside a checkbox, the grip on a drag handle.
+ *
+ * ## Mirroring
  *
  * A glyph whose *meaning* is a horizontal direction mirrors in a right-to-left
- * subtree — the chevrons, the outward arrow, the send plane. Everything else
- * is drawn once and left alone, including the vertical arrows, since the
- * vertical axis does not mirror, and including asymmetric glyphs that are not
- * directions (a magnifier, a pencil, a play triangle).
+ * subtree — the two side chevrons, the outward arrow, the send plane. Yoga
+ * moves a chevron to the other end of its row but cannot turn the glyph
+ * around, so without this an RTL list row ends up with a right-pointing
+ * chevron on its left edge, pointing back at the text.
+ *
+ * Everything else is drawn once and left alone. The vertical axis does not
+ * mirror, and an icon that is merely asymmetric — a magnifier, a pencil, a
+ * play triangle — means the same thing either way round; flipping it would
+ * only be a wrong drawing.
+ *
+ * A mirroring icon always carries a transform, identity included. Dropping the
+ * prop leaves the last matrix the view was given in place, so a glyph mirrored
+ * once stays mirrored when the direction flips back — the arrows in an app
+ * that can switch direction at runtime end up pointing at the text one toggle
+ * in, and never recover.
+ *
+ * ## The four drawn by hand
+ *
+ * Google, Facebook and Apple carry their own palettes, and a brand mark
+ * repainted to match a surface is no longer the mark. `BadgeCheckIcon` is
+ * two-tone by design — a solid badge with a check punched through it in a
+ * second colour — and `checkColor` is a public prop that a single-colour
+ * outline could only ignore. All four are drawn here rather than mapped.
  */
 import { createContext, useContext } from 'react';
-import Svg, { Circle, G, Path } from 'react-native-svg';
+import { HugeiconsIcon } from '@hugeicons/react-native';
+import Svg, { G, Path } from 'react-native-svg';
 import { useDirection } from "../hooks/use-direction.js";
+import HgAlert02Icon from '@hugeicons/core-free-icons/Alert02Icon';
+import HgArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
+import HgArrowDown02Icon from '@hugeicons/core-free-icons/ArrowDown02Icon';
+import HgArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
+import HgArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
+import HgArrowUp01Icon from '@hugeicons/core-free-icons/ArrowUp01Icon';
+import HgArrowUp02Icon from '@hugeicons/core-free-icons/ArrowUp02Icon';
+import HgArrowUpRight01Icon from '@hugeicons/core-free-icons/ArrowUpRight01Icon';
+import HgAttachment01Icon from '@hugeicons/core-free-icons/Attachment01Icon';
+import HgAudioWave01Icon from '@hugeicons/core-free-icons/AudioWave01Icon';
+import HgBookmark01Icon from '@hugeicons/core-free-icons/Bookmark01Icon';
+import HgBubbleChatIcon from '@hugeicons/core-free-icons/BubbleChatIcon';
+import HgCalendar03Icon from '@hugeicons/core-free-icons/Calendar03Icon';
+import HgCamera01Icon from '@hugeicons/core-free-icons/Camera01Icon';
+import HgCancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import HgCheckListIcon from '@hugeicons/core-free-icons/CheckListIcon';
+import HgCheckmarkCircle01Icon from '@hugeicons/core-free-icons/CheckmarkCircle01Icon';
+import HgCircleIcon from '@hugeicons/core-free-icons/CircleIcon';
+import HgClock01Icon from '@hugeicons/core-free-icons/Clock01Icon';
+import HgCodeIcon from '@hugeicons/core-free-icons/CodeIcon';
+import HgCompassIcon from '@hugeicons/core-free-icons/CompassIcon';
+import HgCopy01Icon from '@hugeicons/core-free-icons/Copy01Icon';
+import HgCreditCardIcon from '@hugeicons/core-free-icons/CreditCardIcon';
+import HgCrosshairIcon from '@hugeicons/core-free-icons/CrosshairIcon';
+import HgDelete02Icon from '@hugeicons/core-free-icons/Delete02Icon';
+import HgDownload01Icon from '@hugeicons/core-free-icons/Download01Icon';
+import HgDragDropVerticalIcon from '@hugeicons/core-free-icons/DragDropVerticalIcon';
+import HgEyeIcon from '@hugeicons/core-free-icons/EyeIcon';
+import HgFavouriteIcon from '@hugeicons/core-free-icons/FavouriteIcon';
+import HgFile01Icon from '@hugeicons/core-free-icons/File01Icon';
+import HgFolder01Icon from '@hugeicons/core-free-icons/Folder01Icon';
+import HgFolderOpenIcon from '@hugeicons/core-free-icons/FolderOpenIcon';
+import HgFullScreenIcon from '@hugeicons/core-free-icons/FullScreenIcon';
+import HgGlobeIcon from '@hugeicons/core-free-icons/GlobeIcon';
+import HgHeading01Icon from '@hugeicons/core-free-icons/Heading01Icon';
+import HgImage01Icon from '@hugeicons/core-free-icons/Image01Icon';
+import HgInformationCircleIcon from '@hugeicons/core-free-icons/InformationCircleIcon';
+import HgKeyboardIcon from '@hugeicons/core-free-icons/KeyboardIcon';
+import HgLeftToRightListBulletIcon from '@hugeicons/core-free-icons/LeftToRightListBulletIcon';
+import HgLeftToRightListNumberIcon from '@hugeicons/core-free-icons/LeftToRightListNumberIcon';
+import HgLink01Icon from '@hugeicons/core-free-icons/Link01Icon';
+import HgLockIcon from '@hugeicons/core-free-icons/LockIcon';
+import HgLockOpenIcon from '@hugeicons/core-free-icons/LockOpenIcon';
+import HgMenu01Icon from '@hugeicons/core-free-icons/Menu01Icon';
+import HgMic01Icon from '@hugeicons/core-free-icons/Mic01Icon';
+import HgMinusSignIcon from '@hugeicons/core-free-icons/MinusSignIcon';
+import HgMoonIcon from '@hugeicons/core-free-icons/MoonIcon';
+import HgMoreHorizontalIcon from '@hugeicons/core-free-icons/MoreHorizontalIcon';
+import HgNotification03Icon from '@hugeicons/core-free-icons/Notification03Icon';
+import HgPackageIcon from '@hugeicons/core-free-icons/PackageIcon';
+import HgPauseIcon from '@hugeicons/core-free-icons/PauseIcon';
+import HgPencilEdit01Icon from '@hugeicons/core-free-icons/PencilEdit01Icon';
+import HgPlayIcon from '@hugeicons/core-free-icons/PlayIcon';
+import HgPlusSignIcon from '@hugeicons/core-free-icons/PlusSignIcon';
+import HgPlusSignSquareIcon from '@hugeicons/core-free-icons/PlusSignSquareIcon';
+import HgQuoteDownIcon from '@hugeicons/core-free-icons/QuoteDownIcon';
+import HgReceiptIcon from '@hugeicons/core-free-icons/ReceiptIcon';
+import HgRefreshCcwIcon from '@hugeicons/core-free-icons/RefreshCcwIcon';
+import HgRefreshCwIcon from '@hugeicons/core-free-icons/RefreshCwIcon';
+import HgRepeatIcon from '@hugeicons/core-free-icons/RepeatIcon';
+import HgSearch01Icon from '@hugeicons/core-free-icons/Search01Icon';
+import HgSent02Icon from '@hugeicons/core-free-icons/Sent02Icon';
+import HgSentIcon from '@hugeicons/core-free-icons/SentIcon';
+import HgShare08Icon from '@hugeicons/core-free-icons/Share08Icon';
+import HgShieldAlertIcon from '@hugeicons/core-free-icons/ShieldAlertIcon';
+import HgShieldCheckIcon from '@hugeicons/core-free-icons/ShieldCheckIcon';
+import HgSparklesIcon from '@hugeicons/core-free-icons/SparklesIcon';
+import HgStarIcon from '@hugeicons/core-free-icons/StarIcon';
+import HgSun03Icon from '@hugeicons/core-free-icons/Sun03Icon';
+import HgTextBoldIcon from '@hugeicons/core-free-icons/TextBoldIcon';
+import HgTextItalicIcon from '@hugeicons/core-free-icons/TextItalicIcon';
+import HgTick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
+import HgUnfoldMoreIcon from '@hugeicons/core-free-icons/UnfoldMoreIcon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The colour icons inherit when they are not given one explicitly.
@@ -64,595 +165,482 @@ const decorative = {
   importantForAccessibility: 'no-hide-descendants'
 };
 
+/** The default line weight. See the note on weight above. */
+const STROKE = 2;
+/**
+ * Builds one icon from a glyph and the defaults it is normally drawn with.
+ *
+ * A factory rather than seventy near-identical components: what varies between
+ * them is data, and what does not — the colour order, the weight default, the
+ * mirror, the fill toggle, the prop passthrough — is worth having in exactly
+ * one place, where a fix reaches the whole set at once.
+ */
+function icon(glyph, defaults) {
+  function Icon({
+    size = defaults.size,
+    color,
+    strokeWidth,
+    filled,
+    style,
+    ...props
+  }) {
+    const resolved = useResolvedColor(color, defaults.color);
+    const rtl = useDirection() === 'rtl';
+    return /*#__PURE__*/_jsx(HugeiconsIcon, {
+      icon: glyph,
+      size: size,
+      color: resolved,
+      strokeWidth: strokeWidth ?? defaults.strokeWidth ?? STROKE,
+      fill: defaults.fillable && filled ? resolved : 'none',
+      style: defaults.flip ? [{
+        transform: [{
+          scaleX: rtl ? -1 : 1
+        }]
+      }, style] : style,
+      ...props
+    });
+  }
+  return Icon;
+}
+
 /* -------------------------------------------------------------------------- */
-/* Stroked chrome icons                                                       */
+/* Chrome                                                                   */
 /* -------------------------------------------------------------------------- */
 
-export function CheckIcon({
-  size = 14,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#fff');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M20 6 9 17l-5-5",
-      stroke: resolved,
-      strokeWidth: 3,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
+export const ChevronUpIcon = icon(HgArrowUp01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const ChevronDownIcon = icon(HgArrowDown01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const ChevronLeftIcon = icon(HgArrowLeft01Icon, {
+  size: 16,
+  color: '#737373',
+  flip: true
+});
+export const ChevronRightIcon = icon(HgArrowRight01Icon, {
+  size: 16,
+  color: '#737373',
+  flip: true
+});
+export const ChevronsUpDownIcon = icon(HgUnfoldMoreIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const EllipsisIcon = icon(HgMoreHorizontalIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const MenuIcon = icon(HgMenu01Icon, {
+  size: 20,
+  color: '#737373'
+});
+export const XIcon = icon(HgCancel01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const SearchIcon = icon(HgSearch01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const ArrowUpRightIcon = icon(HgArrowUpRight01Icon, {
+  size: 20,
+  color: '#fff',
+  flip: true
+});
+export const PlusIcon = icon(HgPlusSignIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const MinusIcon = icon(HgMinusSignIcon, {
+  size: 14,
+  color: '#fff',
+  strokeWidth: 3
+});
+export const CheckIcon = icon(HgTick02Icon, {
+  size: 14,
+  color: '#fff',
+  strokeWidth: 3
+});
+export const CircleIcon = icon(HgCircleIcon, {
+  size: 16,
+  color: '#737373',
+  fillable: true
+});
+export const GripVerticalIcon = icon(HgDragDropVerticalIcon, {
+  size: 16,
+  color: '#737373',
+  strokeWidth: 2.5
+});
+export const MaximizeIcon = icon(HgFullScreenIcon, {
+  size: 16,
+  color: '#737373'
+});
+
+/* -------------------------------------------------------------------------- */
+/* Status                                                                   */
+/* -------------------------------------------------------------------------- */
+
+export const InfoIcon = icon(HgInformationCircleIcon, {
+  size: 20,
+  color: 'currentColor'
+});
+export const CheckCircleIcon = icon(HgCheckmarkCircle01Icon, {
+  size: 20,
+  color: 'currentColor'
+});
+export const AlertTriangleIcon = icon(HgAlert02Icon, {
+  size: 20,
+  color: 'currentColor'
+});
+export const ShieldAlertIcon = icon(HgShieldAlertIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const ShieldCheckIcon = icon(HgShieldCheckIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const BellIcon = icon(HgNotification03Icon, {
+  size: 16,
+  color: '#737373'
+});
+
+/* -------------------------------------------------------------------------- */
+/* Time and place                                                           */
+/* -------------------------------------------------------------------------- */
+
+export const CalendarIcon = icon(HgCalendar03Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const ClockIcon = icon(HgClock01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const GlobeIcon = icon(HgGlobeIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const CompassIcon = icon(HgCompassIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const CrosshairIcon = icon(HgCrosshairIcon, {
+  size: 16,
+  color: '#737373'
+});
+
+/* -------------------------------------------------------------------------- */
+/* Text and editing                                                         */
+/* -------------------------------------------------------------------------- */
+
+export const BoldIcon = icon(HgTextBoldIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const ItalicIcon = icon(HgTextItalicIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const HeadingIcon = icon(HgHeading01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const ListIcon = icon(HgLeftToRightListBulletIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const ListOrderedIcon = icon(HgLeftToRightListNumberIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const ListChecksIcon = icon(HgCheckListIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const QuoteIcon = icon(HgQuoteDownIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const CodeIcon = icon(HgCodeIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const PencilIcon = icon(HgPencilEdit01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const KeyboardIcon = icon(HgKeyboardIcon, {
+  size: 16,
+  color: '#737373'
+});
+
+/* -------------------------------------------------------------------------- */
+/* Files and media                                                          */
+/* -------------------------------------------------------------------------- */
+
+export const FileIcon = icon(HgFile01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const FolderIcon = icon(HgFolder01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const FolderOpenIcon = icon(HgFolderOpenIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const ImageIcon = icon(HgImage01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const PaperclipIcon = icon(HgAttachment01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const CameraIcon = icon(HgCamera01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const MicIcon = icon(HgMic01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const AudioLinesIcon = icon(HgAudioWave01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const PlayIcon = icon(HgPlayIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const PauseIcon = icon(HgPauseIcon, {
+  size: 16,
+  color: '#737373',
+  strokeWidth: 1.5
+});
+export const DownloadIcon = icon(HgDownload01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const PackageIcon = icon(HgPackageIcon, {
+  size: 16,
+  color: '#737373'
+});
+
+/* -------------------------------------------------------------------------- */
+/* Actions                                                                  */
+/* -------------------------------------------------------------------------- */
+
+export const CopyIcon = icon(HgCopy01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const LinkIcon = icon(HgLink01Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const ShareNodesIcon = icon(HgShare08Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const SendIcon = icon(HgSentIcon, {
+  size: 16,
+  color: '#737373',
+  flip: true
+});
+export const SendArrowIcon = icon(HgSent02Icon, {
+  size: 16,
+  color: '#737373',
+  strokeWidth: 2.5
+});
+export const TrashIcon = icon(HgDelete02Icon, {
+  size: 16,
+  color: '#737373'
+});
+export const RotateCcwIcon = icon(HgRefreshCcwIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const RotateCwIcon = icon(HgRefreshCwIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const RepeatIcon = icon(HgRepeatIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const PlusSquareIcon = icon(HgPlusSignSquareIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const EyeIcon = icon(HgEyeIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const LockIcon = icon(HgLockIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const UnlockIcon = icon(HgLockOpenIcon, {
+  size: 16,
+  color: '#737373'
+});
+
+/* -------------------------------------------------------------------------- */
+/* Marks and moods                                                          */
+/* -------------------------------------------------------------------------- */
+
+export const StarIcon = icon(HgStarIcon, {
+  size: 20,
+  color: '#737373',
+  strokeWidth: 1.6,
+  fillable: true
+});
+export const HeartIcon = icon(HgFavouriteIcon, {
+  size: 16,
+  color: '#737373',
+  fillable: true
+});
+export const BookmarkIcon = icon(HgBookmark01Icon, {
+  size: 16,
+  color: '#737373',
+  fillable: true
+});
+export const SparklesIcon = icon(HgSparklesIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const MessageCircleIcon = icon(HgBubbleChatIcon, {
+  size: 16,
+  color: '#737373',
+  fillable: true
+});
+export const CardIcon = icon(HgCreditCardIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const ReceiptIcon = icon(HgReceiptIcon, {
+  size: 16,
+  color: '#737373'
+});
+export const SunIcon = icon(HgSun03Icon, {
+  size: 18,
+  color: '#f5f5f5'
+});
+export const MoonIcon = icon(HgMoonIcon, {
+  size: 18,
+  color: '#262626'
+});
+
+/* -------------------------------------------------------------------------- */
+/* A post's toggles                                                         */
+/* -------------------------------------------------------------------------- */
+
+export const ArrowUpIcon = icon(HgArrowUp02Icon, {
+  size: 16,
+  color: '#737373',
+  fillable: true
+});
+export const ArrowDownIcon = icon(HgArrowDown02Icon, {
+  size: 16,
+  color: '#737373',
+  fillable: true
+});
+
+/* -------------------------------------------------------------------------- */
+/* Drawn by hand                                                            */
+/* -------------------------------------------------------------------------- */
 
 /**
- * A single bar. Its weight is a prop because it has two jobs: it is the
- * indeterminate mark inside a checkbox, where it has to carry the same weight
- * as the check it stands in for, and it is the decrement half of a stepper,
- * where it has to match the plus beside it. Those are different weights, and a
- * bar that is heavier than the + it pairs with reads as a different glyph.
+ * The icons a post's action row is made of.
+ *
+ * These are the only ones in the set that take `filled`, and it is not a
+ * stylistic choice: a like, a save and a vote are toggles, and the outline and
+ * the solid are the two states of one control. Drawn as two different icons
+ * they would swap shape under the finger; drawn as one that fills, the shape
+ * stays put and only the inside changes.
  */
-export function MinusIcon({
-  size = 14,
-  color,
-  strokeWidth = 3,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#fff');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M5 12h14",
-      stroke: resolved,
-      strokeWidth: strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function ChevronUpIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m18 15-6-6-6 6",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function CalendarIcon({
-  size = 16,
-  color,
+
+/** Google "G", in the four official brand colours. */
+export function GoogleIcon({
+  size = 18,
   ...props
 }) {
-  const resolved = useResolvedColor(color, '#737373');
   return /*#__PURE__*/_jsx(Svg, {
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "none",
+    ...decorative,
     ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    children: /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        fill: "#4285F4",
+        d: "M23.52 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.88c2.27-2.09 3.57-5.17 3.57-8.87"
+      }), /*#__PURE__*/_jsx(Path, {
+        fill: "#34A853",
+        d: "M12 24c3.24 0 5.96-1.08 7.95-2.91l-3.88-3.01c-1.08.72-2.45 1.15-4.07 1.15-3.13 0-5.78-2.11-6.73-4.96H1.29v3.11A12 12 0 0 0 12 24"
+      }), /*#__PURE__*/_jsx(Path, {
+        fill: "#FBBC05",
+        d: "M5.27 14.27a7.2 7.2 0 0 1 0-4.54V6.62H1.29a12 12 0 0 0 0 10.76z"
+      }), /*#__PURE__*/_jsx(Path, {
+        fill: "#EA4335",
+        d: "M12 4.75c1.77 0 3.35.61 4.6 1.8l3.44-3.44C17.95 1.18 15.24 0 12 0A12 12 0 0 0 1.29 6.62l3.98 3.11C6.22 6.86 8.87 4.75 12 4.75"
+      })]
     })
   });
 }
 
-/** A clock face reading ten past ten — the hour, a time field, a schedule. */
-export function ClockIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 9,
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M12 7v5l3.5 2",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
+/** Facebook "f" mark. */
 
-/** A keyboard — swapping a gesture-driven control for typed entry. */
-export function KeyboardIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M7 9h.01M11 9h.01M15 9h.01M7 12h.01M11 12h.01M15 12h.01M8 15h8",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-export function BookmarkIcon({
-  size = 16,
-  color,
-  filled,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z",
-      fill: filled ? resolved : 'none',
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function ChevronDownIcon({
-  size = 16,
-  color,
+/** Facebook "f" mark. */
+export function FacebookIcon({
+  size = 18,
   ...props
 }) {
-  const resolved = useResolvedColor(color, '#737373');
   return /*#__PURE__*/_jsx(Svg, {
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "none",
+    ...decorative,
     ...props,
     children: /*#__PURE__*/_jsx(Path, {
-      d: "m6 9 6 6 6-6",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      fill: "#1877F2",
+      d: "M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07"
     })
   });
 }
 
 /**
- * Mirrors a directional glyph in a right-to-left subtree.
- *
- * Yoga moves a chevron to the other end of its row, but it cannot turn the
- * glyph around — so an RTL list row ends up with a right-pointing chevron on
- * its left edge, pointing back at the text. These arrows mean "onward" and
- * "back", and which way that is depends on which way you read.
- *
- * Only for glyphs whose meaning *is* a direction. An icon that happens to be
- * asymmetric — a pencil, a magnifier — means the same thing either way round,
- * and flipping it is just a wrong drawing. The vertical axis never mirrors, so
- * the up and down glyphs stay as they are drawn.
- *
- * Left-to-right gets an identity transform rather than no transform at all.
- * Dropping the prop leaves the last matrix the view was given in place, so a
- * glyph mirrored once stays mirrored when the direction flips back — the
- * arrows in an app that can switch direction at runtime end up pointing at the
- * text one toggle in, and never recover.
+ * Apple mark. Monochrome by design, so unlike the other brand marks it does
+ * follow the icon colour context — Apple's guidelines require it to match the
+ * button's text colour.
  */
-const IDENTITY = 'translate(0 0)';
-const MIRROR = 'scale(-1 1) translate(-24 0)';
-function useFlip() {
-  return {
-    transform: useDirection() === 'rtl' ? MIRROR : IDENTITY
-  };
-}
-export function ChevronLeftIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  const flip = useFlip();
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m15 18-6-6 6-6",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...flip
-    })
-  });
-}
-export function ChevronRightIcon({
-  size = 16,
+
+/**
+ * Apple mark. Monochrome by design, so unlike the other brand marks it does
+ * follow the icon colour context — Apple's guidelines require it to match the
+ * button's text colour.
+ */
+export function AppleIcon({
+  size = 18,
   color,
   ...props
 }) {
-  const resolved = useResolvedColor(color, '#737373');
-  const flip = useFlip();
+  const resolved = useResolvedColor(color, '#000000');
   return /*#__PURE__*/_jsx(Svg, {
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "none",
+    ...decorative,
     ...props,
     children: /*#__PURE__*/_jsx(Path, {
-      d: "m9 18 6-6-6-6",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...flip
-    })
-  });
-}
-export function EllipsisIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 5,
-      cy: 12,
-      r: 1.6,
-      fill: resolved
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 1.6,
-      fill: resolved
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 19,
-      cy: 12,
-      r: 1.6,
-      fill: resolved
-    })]
-  });
-}
-export function MenuIcon({
-  size = 20,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M4 6h16M4 12h16M4 18h16",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    })
-  });
-}
-export function XIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M18 6 6 18M6 6l12 12",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function SearchIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 11,
-      cy: 11,
-      r: 8,
-      stroke: resolved,
-      strokeWidth: 2
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "m21 21-4.3-4.3",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-export function ArrowUpRightIcon({
-  size = 20,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#fff');
-  const flip = useFlip();
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M7 17 17 7M8 7h9v9",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...flip
-    })
-  });
-}
-export function SunIcon({
-  size = 18,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#f5f5f5');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 4,
-      stroke: resolved,
-      strokeWidth: 2
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    })]
-  });
-}
-export function MoonIcon({
-  size = 18,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#262626');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/* -------------------------------------------------------------------------- */
-/* Filled status icons (Alert / Toast indicators)                             */
-/* -------------------------------------------------------------------------- */
-
-/** Info circle. Used for `default`, `info` and `destructive` status. */
-export function InfoIcon({
-  size = 20,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, 'currentColor');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 16 16",
-    fill: resolved,
-    ...decorative,
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M8 13.5a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m1-9.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0z",
-      fillRule: "evenodd",
-      clipRule: "evenodd"
-    })
-  });
-}
-
-/** Check circle. Used for `success` status. */
-export function CheckCircleIcon({
-  size = 20,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, 'currentColor');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 16 16",
-    fill: resolved,
-    ...decorative,
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M13.5 8a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.9-1.55a.75.75 0 1 0-1.2-.9L7.419 8.858L6.03 7.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.13-.08z",
-      fillRule: "evenodd",
-      clipRule: "evenodd"
-    })
-  });
-}
-
-/** Warning triangle. Used for `warning` status. */
-export function AlertTriangleIcon({
-  size = 20,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, 'currentColor');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 16 16",
-    fill: resolved,
-    ...decorative,
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M7.134 2.994L2.217 11.5a1 1 0 0 0 .866 1.5h9.834a1 1 0 0 0 .866-1.5L8.866 2.993a1 1 0 0 0-1.732 0m3.03-.75c-.962-1.665-3.366-1.665-4.329 0L.918 10.749c-.963 1.666.24 3.751 2.165 3.751h9.834c1.925 0 3.128-2.085 2.164-3.751zM8 5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2A.75.75 0 0 1 8 5m1 5.75a1 1 0 1 1-2 0a1 1 0 0 1 2 0",
-      fillRule: "evenodd",
-      clipRule: "evenodd"
-    })
-  });
-}
-
-/* -------------------------------------------------------------------------- */
-/* Brand marks                                                                */
-/* -------------------------------------------------------------------------- */
-
-/*
- * These keep their official colours and so opt out of the icon colour
- * context — recolouring a brand mark to match a button is a trademark
- * problem, not a theming one.
- */
-
-/** Google "G", in the four official brand colours. */
-export function GoogleIcon({
-  size = 18,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    ...decorative,
-    ...props,
-    children: /*#__PURE__*/_jsxs(G, {
-      children: [/*#__PURE__*/_jsx(Path, {
-        fill: "#4285F4",
-        d: "M23.52 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.88c2.27-2.09 3.57-5.17 3.57-8.87"
-      }), /*#__PURE__*/_jsx(Path, {
-        fill: "#34A853",
-        d: "M12 24c3.24 0 5.96-1.08 7.95-2.91l-3.88-3.01c-1.08.72-2.45 1.15-4.07 1.15-3.13 0-5.78-2.11-6.73-4.96H1.29v3.11A12 12 0 0 0 12 24"
-      }), /*#__PURE__*/_jsx(Path, {
-        fill: "#FBBC05",
-        d: "M5.27 14.27a7.2 7.2 0 0 1 0-4.54V6.62H1.29a12 12 0 0 0 0 10.76z"
-      }), /*#__PURE__*/_jsx(Path, {
-        fill: "#EA4335",
-        d: "M12 4.75c1.77 0 3.35.61 4.6 1.8l3.44-3.44C17.95 1.18 15.24 0 12 0A12 12 0 0 0 1.29 6.62l3.98 3.11C6.22 6.86 8.87 4.75 12 4.75"
-      })]
-    })
-  });
-}
-
-/** Facebook "f" mark. */
-export function FacebookIcon({
-  size = 18,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    ...decorative,
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      fill: "#1877F2",
-      d: "M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07"
-    })
-  });
-}
-
-/**
- * Apple mark. Monochrome by design, so unlike the other brand marks it does
- * follow the icon colour context — Apple's guidelines require it to match the
- * button's text colour.
- */
-export function AppleIcon({
-  size = 18,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#000000');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    ...decorative,
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      fill: resolved,
-      d: "M17.05 12.54c-.03-2.85 2.33-4.22 2.43-4.29-1.32-1.94-3.38-2.2-4.11-2.23-1.75-.18-3.42 1.03-4.31 1.03-.89 0-2.26-1.01-3.72-.98-1.91.03-3.68 1.11-4.66 2.82-1.99 3.45-.51 8.55 1.42 11.35.95 1.37 2.07 2.91 3.55 2.85 1.43-.06 1.97-.92 3.69-.92 1.72 0 2.21.92 3.72.89 1.54-.03 2.51-1.39 3.44-2.77 1.09-1.59 1.53-3.13 1.56-3.21-.03-.01-2.99-1.15-3.01-4.54M14.27 4.2c.79-.96 1.32-2.28 1.17-3.6-1.14.05-2.51.76-3.32 1.71-.73.85-1.37 2.2-1.2 3.5 1.27.1 2.57-.65 3.35-1.61"
+      fill: resolved,
+      d: "M17.05 12.54c-.03-2.85 2.33-4.22 2.43-4.29-1.32-1.94-3.38-2.2-4.11-2.23-1.75-.18-3.42 1.03-4.31 1.03-.89 0-2.26-1.01-3.72-.98-1.91.03-3.68 1.11-4.66 2.82-1.99 3.45-.51 8.55 1.42 11.35.95 1.37 2.07 2.91 3.55 2.85 1.43-.06 1.97-.92 3.69-.92 1.72 0 2.21.92 3.72.89 1.54-.03 2.51-1.39 3.44-2.77 1.09-1.59 1.53-3.13 1.56-3.21-.03-.01-2.99-1.15-3.01-4.54M14.27 4.2c.79-.96 1.32-2.28 1.17-3.6-1.14.05-2.51.76-3.32 1.71-.73.85-1.37 2.2-1.2 3.5 1.27.1 2.57-.65 3.35-1.61"
     })
   });
 }
@@ -661,1375 +649,6 @@ export function AppleIcon({
 /* Event icons (Timeline and other status surfaces)                           */
 /* -------------------------------------------------------------------------- */
 
-export function PlusSquareIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zM12 8v8M8 12h8",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Three connected nodes — a branch, a share, a fan-out. */
-export function ShareNodesIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 18,
-      cy: 5,
-      r: 2.5,
-      stroke: resolved,
-      strokeWidth: 2
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 6,
-      cy: 12,
-      r: 2.5,
-      stroke: resolved,
-      strokeWidth: 2
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 18,
-      cy: 19,
-      r: 2.5,
-      stroke: resolved,
-      strokeWidth: 2
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "m8.6 10.7 6.8-4M8.6 13.3l6.8 4",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    })]
-  });
-}
-
-/** Shield with an exclamation — a tripped guardrail. */
-export function ShieldAlertIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M12 2.5 4.5 5.5v6c0 4.6 3.2 8.6 7.5 10 4.3-1.4 7.5-5.4 7.5-10v-6z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M12 8v4",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 15.5,
-      r: 1,
-      fill: resolved
-    })]
-  });
-}
-
-/** Shield with a check — a passed verification. */
-export function ShieldCheckIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M12 2.5 4.5 5.5v6c0 4.6 3.2 8.6 7.5 10 4.3-1.4 7.5-5.4 7.5-10v-6z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "m9 12 2 2 4-4",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-export function BellIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function PackageIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m12 2.5 8 4.5v10l-8 4.5-8-4.5V7zM4 7l8 4.5L20 7M12 11.5V21",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function CardIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 10h18",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function ReceiptIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M5 3h14v18l-2.3-1.6L14.4 21l-2.4-1.6L9.6 21l-2.3-1.6L5 21zM9 8h6M9 12h6",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Paper plane — sent, submitted, approved-and-forwarded. */
-export function SendIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  const flip = useFlip();
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M21.5 2.5 2.5 10l7.5 3 3 7.5z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round",
-      ...flip
-    })
-  });
-}
-
-/** Document with a folded corner — a file attachment. */
-export function FileIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/* ------------------------------------------------------------------ *
- * Text formatting. Drawn as the letterforms and marks an editor's
- * toolbar uses, rather than as pictures of them — a B that is a bold B
- * is read before it is recognised.
- * ------------------------------------------------------------------ */
-
-/** Bold — the two-bowled B. */
-export function BoldIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Italic — a slanted stroke between its serifs. */
-export function ItalicIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M19 4h-9M14 20H5M15 4 9 20",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Heading — the crossbar H. */
-export function HeadingIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M6 12h12M6 20V4M18 20V4",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Bulleted list — three rules, each behind a dot. */
-export function ListIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Numbered list — the same rules, counted. */
-export function ListOrderedIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M10 6h11M10 12h11M10 18h11M4 4h1v4M4 8h2M6 15a1.5 1.5 0 1 0-2-1.4M4 17l2-2M4 17h2",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Block quote — the rule a quoted passage is set behind. */
-export function QuoteIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M4 5v14M9 7h11M9 12h11M9 17h7",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Code — the pair of angle brackets. */
-export function CodeIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m8 18-6-6 6-6M16 6l6 6-6 6",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Closed folder with a tab — a branch nobody has opened yet. */
-export function FolderIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/**
- * Folder tipped open, its front face sheared to the side — the same branch
- * once it is expanded. Drawn as a separate glyph rather than a rotation of
- * `FolderIcon`, because a folder that opens by spinning reads as a mistake.
- */
-export function FolderOpenIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M6 14l1.45-2.9A2 2 0 0 1 9.24 10H22a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Framed picture with a sun and a corner peak — an image attachment. */
-export function ImageIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M4 4h16v16H4z M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM20 15l-4.5-4.5L6 20",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** A paperclip — attaching a file to a composer. */
-export function PaperclipIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M21 8.5 11.3 18.2a4 4 0 0 1-5.6-5.6l9-9a2.5 2.5 0 0 1 3.6 3.6l-9 9a1 1 0 0 1-1.5-1.5l8.3-8.3",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** A capsule on a stand — a microphone, for anything voice. */
-/** A voice waveform — dictation, voice mode, a recording that has a shape. */
-export function AudioLinesIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function MicIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM5 11v1a7 7 0 0 0 14 0v-1M12 19v3",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** A filled triangle — start playback. */
-export function PlayIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M7 4.5v15l13-7.5z",
-      fill: resolved,
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Two filled bars — hold playback where it is. */
-export function PauseIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M8 5h2v14H8zM14 5h2v14h-2z",
-      fill: resolved,
-      stroke: resolved,
-      strokeWidth: 1.5,
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/**
- * A five-pointed star — the mark of a Rating. `filled` paints the interior;
- * left hollow it is the outline of an unearned star. Both share the same
- * geometry, so a filled star clipped over an empty one lines up to the pixel.
- */
-export function StarIcon({
-  size = 20,
-  color,
-  filled = false,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M12 2.5l2.9 5.88 6.49.94-4.7 4.58 1.11 6.46L12 17.82 6.2 20.86l1.11-6.46-4.7-4.58 6.49-.94z",
-      fill: filled ? resolved : 'none',
-      stroke: resolved,
-      strokeWidth: 1.6,
-      strokeLinejoin: "round",
-      strokeLinecap: "round"
-    })
-  });
-}
-
-/** A pencil at an angle — draw, sign, edit by hand. */
-export function PencilIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** An arrow curling anticlockwise — undo, reset, start over. */
-export function RotateCcwIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M3 12a9 9 0 1 0 2.64-6.36L3 8",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M3 3v5h5",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-/** An arrow curling clockwise — redo, put back what was undone. */
-export function RotateCwIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M21 12a9 9 0 1 1-2.64-6.36L21 8",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M21 3v5h-5",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-/** A bin — discard what is there. */
-export function TrashIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M4 7h16M10 4h4M6 7l1 13h10l1-13",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/**
- * Two columns of dots — the grip on a row that can be dragged somewhere else.
- *
- * Dots rather than the stacked rules of a menu glyph, and two columns rather
- * than one: the pattern has to read as a surface to take hold of from either
- * side, and a single column reads as a divider instead.
- */
-export function GripVerticalIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01",
-      stroke: resolved,
-      strokeWidth: 2.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** An arrow into a tray — save the thing to a file. */
-export function DownloadIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M12 3v12m0 0 4-4m-4 4-4-4M4 19h16",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** A cross of two strokes — zoom in, add. Pairs with MinusIcon. */
-export function PlusIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M12 5v14M5 12h14",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    })
-  });
-}
-
-/** Four corners pushing outward — fit everything into view. */
-export function MaximizeIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Crosshairs on a centre dot — put me where I actually am. */
-export function CrosshairIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 7,
-      stroke: resolved,
-      strokeWidth: 2
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M12 2v3M12 19v3M2 12h3M19 12h3",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 1.5,
-      fill: resolved
-    })]
-  });
-}
-
-/** A compass needle — which way is north. */
-export function GlobeIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 10,
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-export function CameraIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 13,
-      r: 3,
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-/**
- * The glyph on a control that opens a list of values — a stacked pair, because
- * one chevron promises a direction the control does not travel in.
- */
-export function ChevronsUpDownIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m7 15 5 5 5-5M7 9l5-5 5 5",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function CompassIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 9,
-      stroke: resolved,
-      strokeWidth: 2
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M15.5 8.5l-2 5-5 2 2-5 5-2z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-/** A closed padlock — the thing behind it cannot be moved. */
-export function LockIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M5 11h14v10H5z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M8 11V7a4 4 0 0 1 8 0v4",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    })]
-  });
-}
-
-/** The same padlock with its shackle swung open — freely movable. */
-export function UnlockIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M5 11h14v10H5z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M8 11V7a4 4 0 0 1 7.5-2",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    })]
-  });
-}
-
-/**
- * Four-pointed sparkles. The mark for a model doing something on your behalf —
- * a reasoning step, a generated plan — where a gear or a brain reads as
- * machinery rather than as assistance.
- */
-export function SparklesIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M11 3 12.6 8.4 18 10l-5.4 1.6L11 17l-1.6-5.4L4 10l5.4-1.6z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M18 15.5 18.7 18l2.3.7-2.3.7-.7 2.3-.7-2.3-2.3-.7 2.3-.7z",
-      stroke: resolved,
-      strokeWidth: 1.6,
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-/** Two stacked sheets — the copy action, paired with CheckIcon once it has run. */
-export function CopyIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M9 9h10v12H9z",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M15 5H5v12h2",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-/** Two links of a chain, for a row that opens somewhere outside the app. */
-export function LinkIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-/** A list with its items ticked off — a plan, or a run of steps. */
-export function ListChecksIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "m3 6 1.8 1.8L8 4.5M3 16l1.8 1.8L8 14.5",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Path, {
-      d: "M12 6.5h9M12 17.5h9",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    })]
-  });
-}
-
-/** A hollow ring, for a step that has not started. */
-export function CircleIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 8,
-      stroke: resolved,
-      strokeWidth: 2
-    })
-  });
-}
-
-/* -------------------------------------------------------------------------- */
-/* Social                                                                     */
-/* -------------------------------------------------------------------------- */
-
-/**
- * The icons a post's action row is made of.
- *
- * These are the only ones in the set that take `filled`, and it is not a
- * stylistic choice: a like, a save and a vote are toggles, and the outline and
- * the solid are the two states of one control. Drawn as two different icons
- * they would swap shape under the finger; drawn as one that fills, the shape
- * stays put and only the inside changes.
- */
-
-/** Upvote. Filled once the vote is cast. */
-/**
- * A plain up arrow, drawn symmetrically about the centre of its box so it sits
- * dead centre in a circular button.
- *
- * Distinct from `ArrowUpIcon`, which is the heavy solid arrow a vote control
- * wants, and from `SendIcon`, which is a paper plane. This is the one a
- * composer's send button uses.
- */
-export function SendArrowIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m5 12 7-7 7 7M12 19V5",
-      stroke: resolved,
-      strokeWidth: 2.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function ArrowUpIcon({
-  size = 16,
-  color,
-  filled,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M9 18v-6H5l7-7 7 7h-4v6z",
-      fill: filled ? resolved : 'none',
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Downvote. The same arrow, turned over. */
-export function ArrowDownIcon({
-  size = 16,
-  color,
-  filled,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M9 6v6H5l7 7 7-7h-4V6z",
-      fill: filled ? resolved : 'none',
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** A like. */
-export function HeartIcon({
-  size = 16,
-  color,
-  filled,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",
-      fill: filled ? resolved : 'none',
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** A reply, or the count of them. */
-export function MessageCircleIcon({
-  size = 16,
-  color,
-  filled,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z",
-      fill: filled ? resolved : 'none',
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-
-/** Views — how many times a thing has been seen rather than acted on. */
-export function EyeIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsxs(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: [/*#__PURE__*/_jsx(Path, {
-      d: "M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx(Circle, {
-      cx: 12,
-      cy: 12,
-      r: 3,
-      stroke: resolved,
-      strokeWidth: 2
-    })]
-  });
-}
-
-/** A repost — the same thing sent round again. */
-export function RepeatIcon({
-  size = 16,
-  color,
-  ...props
-}) {
-  const resolved = useResolvedColor(color, '#737373');
-  return /*#__PURE__*/_jsx(Svg, {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    ...props,
-    children: /*#__PURE__*/_jsx(Path, {
-      d: "m2 9 3-3 3 3M5 6v10a2 2 0 0 0 2 2h6M22 15l-3 3-3-3M19 18V8a2 2 0 0 0-2-2h-6",
-      stroke: resolved,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
 /**
  * The verified rosette.
  *