barua-ui 0.5.0 → 0.6.0

package/css/base.css

@@ -29,7 +29,10 @@
     min-height: 100dvh;
   }
 
-  img, picture, video, canvas, svg { display: block; max-width: 100%; }
+  img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
+  /* An iframe's inset border is legacy chrome, like a button's face. A mail
+     body or an embedded document should sit on the page, not in a box. */
+  iframe { border: 0; }
   input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
   p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
 

package/css/components/content.css

@@ -225,7 +225,21 @@
     gap: var(--b-space-3);
     padding: var(--b-space-3) var(--b-space-4);
     font-size: var(--b-text-subheadline);
+    /* A row that does something is a <button>, and a <button> arrives wearing
+       the browser's own face: a grey plate, a border and centred text. Left
+       unstated, a whole list of actions renders as a column of grey slabs —
+       which is exactly what a mailbox did. Said once here, because every list
+       of actions would otherwise have to say it again. */
+    width: 100%;
+    text-align: start;
+    color: inherit;
+    background: none;
+    border: none;
   }
+  /* Three lines and a timestamp: the mark and the time belong beside the first
+     line, not floating in the middle of a tall row. */
+  .b-list-item--top { align-items: flex-start; }
+  .b-list-item--top .b-list-item__trailing { align-items: flex-end; flex-direction: column; gap: var(--b-space-1); }
   .b-list > .b-list-item + .b-list-item { border-top: 1px solid var(--b-separator); }
   .b-list--inset-divider > .b-list-item + .b-list-item {
     border-top: none;
@@ -678,6 +692,7 @@
     color: currentColor;
   }
   .b-icon svg { width: 100%; height: 100%; }
+  .b-icon--xs { width: 0.75rem; height: 0.75rem; }
   .b-icon--sm { width: 1rem; height: 1rem; }
   .b-icon--lg { width: 1.5rem; height: 1.5rem; }
   .b-icon--xl { width: 2rem; height: 2rem; }
@@ -692,6 +707,7 @@
   }
   /* iOS Settings-row size: small solid square, white glyph */
   .b-icon-tile--sm { width: 1.85rem; height: 1.85rem; border-radius: var(--b-radius-sm); }
+  .b-icon-tile svg { width: 1.25rem; height: 1.25rem; }
   .b-icon-tile--sm svg { width: 1.05rem; height: 1.05rem; }
   .b-icon-tile--solid  { color: #fff; background: var(--b-color-accent); }
   .b-icon-tile--green  { color: #fff; background: var(--b-color-green); }
@@ -701,7 +717,6 @@
   .b-icon-tile--teal   { color: #fff; background: var(--b-color-teal); }
   .b-icon-tile--indigo { color: #fff; background: var(--b-color-indigo); }
   .b-icon-tile--gray   { color: #fff; background: var(--b-gray-1); }
-  .b-icon-tile svg { width: 1.25rem; height: 1.25rem; }
 
   /* ---- Image ------------------------------------------------------------------------------------ */
   .b-img { border-radius: var(--b-radius-lg); object-fit: cover; }

package/css/components/feedback.css

@@ -35,6 +35,15 @@
   }
   .b-alert__close:hover { color: var(--b-text); }
 
+  /* No opinion. The default alert is info-tinted, which turns a plain
+     "still working on it" strip blue and gives it a meaning it does not
+     have. This is the same anatomy on the neutral surface. */
+  .b-alert--neutral {
+    background: var(--b-fill-quaternary);
+    border-color: var(--b-border);
+  }
+  .b-alert--neutral .b-alert__icon { color: var(--b-text-secondary); }
+
   .b-alert--success {
     background: var(--b-color-success-soft);
     border-color: color-mix(in srgb, var(--b-color-success) 30%, transparent);

package/css/components/overlays.css

@@ -158,6 +158,23 @@
     .b-sheet[open] { translate: 100% 0; }
   }
   .b-sheet::backdrop { background: var(--b-scrim); }
+
+  /* The scrim, as a class rather than a pseudo-element.
+     `::backdrop` is drawn by the browser for a top-layer element — a native
+     <dialog> or a [popover] — and nothing else. An overlay that portals a
+     plain <div> instead, to keep a focus trap the top layer cannot give it,
+     has no backdrop to style, and every such component was repeating these
+     six declarations inline. Opacity is left to the caller, because only it
+     knows whether the overlay is arriving or leaving. */
+  .b-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: var(--b-z-modal);
+    background: var(--b-scrim);
+    -webkit-backdrop-filter: blur(var(--b-blur-xs));
+    backdrop-filter: blur(var(--b-blur-xs));
+    transition: opacity var(--b-duration-normal) var(--b-ease-out);
+  }
   .b-sheet__header {
     display: flex;
     align-items: center;

package/css/utilities.css

@@ -82,6 +82,15 @@
   .b-stack--stretch { align-items: stretch; }
   .b-stack--between { justify-content: space-between; }
   .b-stack--wrap    { flex-wrap: wrap; }
+
+  /* Main-axis placement, which the modifiers above do not cover: they set
+     align-items, so on a row they decide the cross axis. Centring a row
+     horizontally is a different instruction and needs its own word. */
+  .b-justify-start   { justify-content: flex-start; }
+  .b-justify-center  { justify-content: center; }
+  .b-justify-end     { justify-content: flex-end; }
+  .b-justify-between { justify-content: space-between; }
+  .b-justify-around  { justify-content: space-around; }
   .b-gap-0 { --b-gap: 0; }
   .b-gap-1 { --b-gap: var(--b-space-1); }
   .b-gap-2 { --b-gap: var(--b-space-2); }
@@ -196,6 +205,17 @@
     border-radius: var(--b-radius-lg);
   }
   .b-panel--plain { background: none; border: none; border-radius: 0; }
+
+  /* The list side of a list-and-detail split.
+     Full width on a phone, where it is the whole screen and a fixed column
+     would leave a band of empty glass beside it; a measured column once
+     there is room to show two things at once. This has to be a media query:
+     clamp() cannot say "fill, then stop filling", because it cannot see
+     whether anything is sitting next to it. */
+  .b-list-pane { inline-size: 100%; flex: none; }
+  @media (min-width: 768px) {
+    .b-list-pane { inline-size: clamp(20rem, 4rem + 25vw, 28rem); }
+  }
   .b-resizable { resize: horizontal; overflow: auto; min-width: 12rem; max-width: 70%; }
   .b-resizable--vertical { resize: vertical; min-height: 6rem; max-height: 80vh; }
   .b-resize-handle {
@@ -656,4 +676,58 @@
     border-radius: var(--b-radius-xl);
     box-shadow: var(--b-glass-edge), var(--b-shadow-md);
   }
+
+  /* ---- Box behaviours ------------------------------------------------------
+     The handful of layout facts that Stack and Grid do not express, and that
+     every application reaches for eventually: a child that takes the room
+     left over, a child that refuses to shrink, a box allowed to be narrower
+     than its content, and the positioning contexts. Named plainly, because
+     each one says exactly what it does and nothing more. */
+  .b-flex-1 { flex: 1 1 0%; }
+  .b-shrink-0 { flex-shrink: 0; }
+  .b-grow-0 { flex-grow: 0; }
+
+  /* A flex or grid child will not go narrower than its content unless it is
+     told it may — which is why a long subject line pushes a mail row wider
+     instead of ellipsing. This is the permission. */
+  .b-min-w-0 { min-width: 0; }
+  .b-min-h-0 { min-height: 0; }
+
+  .b-w-full { inline-size: 100%; }
+  .b-h-full { block-size: 100%; }
+  .b-block { display: block; }
+  .b-inline-block { display: inline-block; }
+  .b-inline-flex { display: inline-flex; align-items: center; gap: var(--b-space-2); }
+
+  .b-relative { position: relative; }
+  .b-absolute { position: absolute; }
+  .b-sticky { position: sticky; }
+
+  .b-overflow-hidden { overflow: hidden; }
+  .b-overflow-auto { overflow: auto; }
+  .b-overflow-x-auto { overflow-x: auto; overflow-y: hidden; }
+
+  /* Figures, keys, record values: anything read character by character. */
+  .b-mono { font-family: var(--b-font-mono); font-size: 0.875em; }
+
+  /* Present to a screen reader, absent to the eye. */
+  .b-sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* For a glyph standing in as a busy indicator. The spinner component is the
+     better answer; this is for the cases that already have an icon. */
+  .b-spin { animation: b-spin 0.8s linear infinite; }
+  @keyframes b-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .b-spin { animation-duration: 2.4s; }
+  }
 }

package/dist/index.cjs

@@ -1269,8 +1269,10 @@ function Breadcrumbs({
 var import_react8 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var iconNames = [
+  "archive",
+  "arrow-left",
   "arrow-up-right",
-  "backward",
+  "badge-check",
   "bell",
   "bolt",
   "bookmark",
@@ -1283,9 +1285,17 @@ var iconNames = [
   "chevron-up",
   "clock",
   "close",
+  "code",
+  "copy",
+  "display",
   "doc",
   "download",
   "drop",
+  "ellipsis",
+  "ellipsis-vertical",
+  "envelope-open",
+  "eye",
+  "eye-off",
   "film",
   "filter",
   "flame",
@@ -1293,33 +1303,45 @@ var iconNames = [
   "forward",
   "garage",
   "gear",
+  "gift",
+  "globe",
   "grid",
   "heart",
   "house",
+  "image-off",
   "info",
+  "key",
   "lightbulb",
   "link",
   "lock",
   "mail",
+  "menu",
   "message",
   "mic",
   "moon-stars",
   "music-note",
   "newspaper",
+  "paperclip",
   "pause",
   "pencil",
   "people",
   "person",
+  "person-plus",
   "photo",
   "pin",
   "play",
   "plus",
+  "power",
   "refresh",
   "repeat",
+  "reply",
+  "reply-all",
   "search",
   "send",
   "share",
   "shield",
+  "skip-back",
+  "skip-forward",
   "sliders",
   "sparkles",
   "speaker",
@@ -1327,15 +1349,22 @@ var iconNames = [
   "sun",
   "trash",
   "tv",
+  "upload",
   "warning",
   "waveform",
   "wifi"
 ];
 var GLYPHS = {
+  "archive": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 4.5h14V7H3V4.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4.2 7v7.5a1 1 0 0 0 1 1h9.6a1 1 0 0 0 1-1V7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 10h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "arrow-left": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M16.5 10h-13M8 4.5 3 10l5 5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "arrow-up-right": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M6 14 14 6M7.5 6H14v6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-  "backward": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5.5 4.5v11", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M15 5.6v8.8a.6.6 0 0 1-.93.5L7.6 10.5a.6.6 0 0 1 0-1l6.47-4.4a.6.6 0 0 1 .93.5Z", fill: "currentColor" })
+  "badge-check": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m10 2.6 2 1.5 2.5-.2.6 2.4 2 1.5-1 2.3 1 2.3-2 1.5-.6 2.4-2.5-.2-2 1.5-2-1.5-2.5.2-.6-2.4-2-1.5 1-2.3-1-2.3 2-1.5.6-2.4 2.5.2 2-1.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m7.6 10.1 1.7 1.7 3.1-3.4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
   "bell": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3.5A4.5 4.5 0 0 1 14.5 8c0 3 1 4 1.5 4.5H4c.5-.5 1.5-1.5 1.5-4.5A4.5 4.5 0 0 1 10 3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
@@ -1361,12 +1390,40 @@ var GLYPHS = {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 6.5V10l2.5 2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
   "close": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m5 5 10 10M15 5 5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  "code": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m7 7-3.5 3L7 13M13 7l3.5 3L13 13M11.4 5.2 8.6 14.8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "copy": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "7", y: "7", width: "9", height: "9", rx: "1.8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4.5 12.5h-.5A1.5 1.5 0 0 1 2.5 11V4A1.5 1.5 0 0 1 4 2.5h7A1.5 1.5 0 0 1 12.5 4v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "display": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2.5", y: "4", width: "15", height: "9.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 16.5h6M10 13.5v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "doc": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5.5 3.5h6L15 7v9.5H5.5V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M11.5 3.5V7H15M8 10.5h4M8 13h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
   "download": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3.5v9M6.5 9.5l3.5 3 3.5-3M4 16.5h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "drop": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 2.8C7.7 6 5.5 8.6 5.5 11.4a4.5 4.5 0 0 0 9 0c0-2.8-2.2-5.4-4.5-8.6Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "ellipsis": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "4.6", cy: "10", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "10", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "15.4", cy: "10", r: "1.3", fill: "currentColor" })
+  ] }),
+  "ellipsis-vertical": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "4.6", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "10", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "15.4", r: "1.3", fill: "currentColor" })
+  ] }),
+  "envelope-open": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 8.4 10 3.5l6.5 4.9V15a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 15V8.4Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m3.5 8.4 6.5 4.7 6.5-4.7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "eye": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2.5 10s2.8-5 7.5-5 7.5 5 7.5 5-2.8 5-7.5 5-7.5-5-7.5-5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "10", r: "2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "eye-off": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 3l14 14M8.4 8.5A2.5 2.5 0 0 0 11.5 11.6M6.3 6.4C4 7.8 2.5 10 2.5 10s2.8 5 7.5 5c1.3 0 2.5-.4 3.5-.9M9 5.1c.3 0 .7-.1 1-.1 4.7 0 7.5 5 7.5 5s-.6 1.1-1.8 2.3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "film": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 8.5h13V15a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 15V8.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m3.5 8.5 1-3.4 11.6 1.7-.6 1.7M7.6 5.6 6.6 8.2M11.2 6.1l-1 2.4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -1375,14 +1432,23 @@ var GLYPHS = {
   "flame": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3c-2.5 3-4.5 5.2-4.5 7.4a4.5 4.5 0 0 0 9 0C14.5 8.2 12.5 6 10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
   "folder": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 5.5A1.5 1.5 0 0 1 5 4h3l1.5 2H15a1.5 1.5 0 0 1 1.5 1.5V14a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V5.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
   "forward": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M14.5 4.5v11", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5 5.6v8.8a.6.6 0 0 0 .93.5l6.47-4.4a.6.6 0 0 0 0-1L5.93 5.1a.6.6 0 0 0-.93.5Z", fill: "currentColor" })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 5.5 16.5 10 12 14.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M16.5 10h-6a6 6 0 0 0-6 6v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
   "garage": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 9.5 10 4l7 5.5M5 8.5V16h10V8.5M7 11h6M7 13.5h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "gear": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "10", r: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 2.5v3M10 14.5v3M2.5 10h3M14.5 10h3M4.7 4.7l2.1 2.1M13.2 13.2l2.1 2.1M15.3 4.7l-2.1 2.1M6.8 13.2l-2.1 2.1", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
   ] }),
+  "gift": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 8.5h13V16a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V8.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2.5 6h15v2.5h-15V6ZM10 6v11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 6S8.8 3 7 3a1.8 1.8 0 0 0 0 3h3Zm0 0s1.2-3 3-3a1.8 1.8 0 0 1 0 3h-3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "globe": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "10", r: "7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2.5 10h15M10 2.5c2.2 2.3 3.3 4.8 3.3 7.5S12.2 15.2 10 17.5c-2.2-2.3-3.3-4.8-3.3-7.5S7.8 4.8 10 2.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "grid": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3.5", y: "3.5", width: "5.5", height: "5.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "11", y: "3.5", width: "5.5", height: "5.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -1391,10 +1457,19 @@ var GLYPHS = {
   ] }),
   "heart": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 16.5S3.5 12.5 3.5 8.2A3.6 3.6 0 0 1 10 6a3.6 3.6 0 0 1 6.5 2.2c0 4.3-6.5 8.3-6.5 8.3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
   "house": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 9.5 10 4l7 5.5M5 8.5V16h10V8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "image-off": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 3l14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M16.5 12.8V5.5a1 1 0 0 0-1-1H8.2m-3.7 0a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9.3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m4 13.5 3.2-3a1.4 1.4 0 0 1 1.9 0l1.4 1.3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "info": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "10", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 9v4M10 6.4h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] }),
+  "key": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "7", cy: "7.2", r: "3.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m9.4 9.6 6.1 6.1M13.4 13.6l1.6-1.6M15.5 15.7l1.4-1.4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3a5 5 0 0 0-2.5 9.3V14a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1.7A5 5 0 0 0 10 3ZM8.5 17h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "link": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8.5 11.5a3 3 0 0 0 4.2 0l2.5-2.5a3 3 0 1 0-4.2-4.2l-1 1M11.5 8.5a3 3 0 0 0-4.2 0L4.8 11a3 3 0 1 0 4.2 4.2l1-1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
   "lock": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
@@ -1405,6 +1480,7 @@ var GLYPHS = {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m4.5 7 5.5 4 5.5-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
+  "menu": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 6h13M3.5 10h13M3.5 14h13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "message": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5.5 4h9a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H8.5l-3 3v-3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
   "mic": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "7.5", y: "3.5", width: "5", height: "9", rx: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -1423,6 +1499,7 @@ var GLYPHS = {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "4", width: "14", height: "12", rx: "1.8", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M6 7.5h4.5v3.5H6zM13 7.5h1M13 11h1M6 13.5h8", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
+  "paperclip": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m13.5 7.5-5.3 5.3a1.8 1.8 0 0 1-2.5-2.5l6-6a3 3 0 0 1 4.2 4.2l-6.3 6.3a4.2 4.2 0 0 1-6-6L9 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "pause": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M6 4.5h2.5v11H6zM11.5 4.5H14v11h-2.5z" }) }),
   "pencil": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m4 16 .8-3.2 8.8-8.8a1.4 1.4 0 0 1 2 0l.4.4a1.4 1.4 0 0 1 0 2l-8.8 8.8L4 16Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
@@ -1437,6 +1514,10 @@ var GLYPHS = {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10", cy: "6.5", r: "3", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 16.5a6 6 0 0 1 12 0", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] }),
+  "person-plus": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "8", cy: "7", r: "3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2.5 16.5c.6-3 3-4.5 5.5-4.5s4.9 1.5 5.5 4.5M15 7.5v5M12.5 10h5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "photo": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3.5", y: "4.5", width: "13", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "7.5", cy: "8", r: "1.2", fill: "currentColor" }),
@@ -1448,8 +1529,18 @@ var GLYPHS = {
   ] }),
   "play": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 4.9v10.2a.6.6 0 0 0 .92.5l8-5.1a.6.6 0 0 0 0-1l-8-5.1a.6.6 0 0 0-.92.5Z" }) }),
   "plus": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 4v12M4 10h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  "power": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3v6.5M6 6.2a5.5 5.5 0 1 0 8 0", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "refresh": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M15.8 10A5.8 5.8 0 1 1 13 5.1M15.8 3.5v3.2h-3.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "repeat": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5.5 8V7A2.5 2.5 0 0 1 8 4.5h6.5M12.5 2.5l2 2-2 2M14.5 12v1a2.5 2.5 0 0 1-2.5 2.5H5.5M7.5 17.5l-2-2 2-2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "reply": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 5.5 3.5 10 8 14.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 10h6a6 6 0 0 1 6 6v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  "reply-all": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 5.5 2.5 10 7 14.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M11.5 5.5 7 10l4.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 10h5.5a5 5 0 0 1 5 5v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "search": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "9", cy: "9", r: "5.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m13.5 13.5 3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
@@ -1463,6 +1554,14 @@ var GLYPHS = {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3l6 2v5c0 3.5-2.5 5.8-6 7-3.5-1.2-6-3.5-6-7V5l6-2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m7.5 10 1.8 1.8L13 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
+  "skip-back": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5.5 4.5v11", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M15 5.6v8.8a.6.6 0 0 1-.93.5L7.6 10.5a.6.6 0 0 1 0-1l6.47-4.4a.6.6 0 0 1 .93.5Z", fill: "currentColor" })
+  ] }),
+  "skip-forward": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M14.5 4.5v11", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5 5.6v8.8a.6.6 0 0 0 .93.5l6.47-4.4a.6.6 0 0 0 0-1L5.93 5.1a.6.6 0 0 0-.93.5Z", fill: "currentColor" })
+  ] }),
   "sliders": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 6.5h5M12 6.5h4.5M3.5 13.5h3M10 13.5h6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "10.2", cy: "6.5", r: "1.8", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -1486,6 +1585,7 @@ var GLYPHS = {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "6", width: "14", height: "9.5", rx: "1.8", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 17.5h6M7.5 2.5 10 5l2.5-2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] }),
+  "upload": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 16.5v-9M6.5 10.5l3.5-3 3.5 3M4 3.5h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "warning": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3.5 18 17H2L10 3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 8.5V12M10 14.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })