@jirawatpyk/aura-react 5.8.0 → 5.10.0

package/dist/esm/Accordion.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
+import { IconChevronDown } from "./icons.js";
 const h = React.createElement;
 const Accordion = React.forwardRef(function Accordion2(props, ref) {
   const auto = uid(), base = props.id || auto;
@@ -57,7 +58,7 @@ const Accordion = React.forwardRef(function Accordion2(props, ref) {
       },
       it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
       /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
-      /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-accordion__chevron" })
     )), /* @__PURE__ */ React.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
   }));
 });

package/dist/esm/Alert.js

@@ -3,13 +3,14 @@ import * as React from "react";
 import { IconButton } from "./IconButton.js";
 import { alertElement } from "./display.js";
 import { useStrings } from "./locale.js";
+import { IconX } from "./icons.js";
 import { ALERT_ICON } from "./display.js";
 const Alert = React.forwardRef(function Alert2(props, ref) {
   const t = useStrings();
   return alertElement(
     props,
     ref,
-    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: /* @__PURE__ */ React.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
   );
 });
 export {

package/dist/esm/AppShell.js

@@ -5,6 +5,7 @@ import { IconButton } from "./IconButton.js";
 import { cx } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { useBreakpoint } from "./responsive.js";
+import { IconMenu } from "./icons.js";
 const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
   const bp = useBreakpoint();
@@ -51,7 +52,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
     IconButton,
     {
       className: "aura-shell__menu",
-      icon: "menu",
+      icon: /* @__PURE__ */ React.createElement(IconMenu, null),
       label: props.menuLabel || t.openNav,
       size: "md",
       onClick: function() {

package/dist/esm/Breadcrumb.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
+import { IconChevronRight } from "./icons.js";
 const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
   const t = useStrings();
   const Link = useLinkComponent(props.linkComponent);
@@ -12,7 +13,7 @@ const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
     return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: it.onClick }, it.label) : (
       /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
       /* @__PURE__ */ React.createElement("span", { className: "aura-crumbs__text" }, it.label)
-    ), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+    ), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronRight, null), size: 12, className: "aura-crumbs__sep" }));
   })));
 });
 export {

package/dist/esm/Button.js

@@ -4,6 +4,7 @@ import { omit } from "./internal.js";
 import { buttonClass } from "./display.js";
 import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
+import { IconLoaderCircle } from "./icons.js";
 function ButtonLink(props, ref, Link) {
   const variant = props.variant || "primary";
   const disabled = !!props.disabled;
@@ -82,7 +83,7 @@ const Button = React.forwardRef(
           e.preventDefault();
         } : props.onClick
       },
-      loading ? /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
+      loading ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconLoaderCircle, null), className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
       props.children,
       props.iconRight && !loading ? /* @__PURE__ */ React.createElement(Icon, { name: props.iconRight }) : null
     );

package/dist/esm/Checkbox.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { cx, devWarnOnce, omit, uid, useMergedRef, useMaybeControlled } from "./internal.js";
 import { Icon } from "./Icon.js";
+import { IconCheck, IconMinus } from "./icons.js";
 const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
   const own = React.useRef(null), merged = useMergedRef(ref, own);
   const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
@@ -56,7 +57,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
         }
       }
     ),
-    /* @__PURE__ */ React.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React.createElement(Icon, { name: "minus", size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null),
+    /* @__PURE__ */ React.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconMinus, null), size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null),
     !labelled && props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: descId }, props.description) : null,
     labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label" }, text), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
   );

package/dist/esm/Combobox.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { Field } from "./Field.js";
+import { IconCheck, IconChevronDown, IconLoaderCircle, IconSearch, IconX } from "./icons.js";
 function norm(s) {
   return String(s == null ? "" : s).normalize("NFC").toLocaleLowerCase("th");
 }
@@ -227,10 +228,10 @@ const Combobox = React.forwardRef(
             },
             o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
             /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
-            isSel ? /* @__PURE__ */ React.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+            isSel ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : null
           );
         })
-      ) : null, props.loading || !live.length || more ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, t.keepTyping((props.options || []).length))) : null),
+      ) : null, props.loading || !live.length || more ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, t.keepTyping((props.options || []).length))) : null),
       document.body
     ) : null;
     return /* @__PURE__ */ React.createElement(
@@ -245,7 +246,7 @@ const Combobox = React.forwardRef(
         disabled: props.disabled,
         className: props.className
       },
-      /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open", multi && "is-multi") }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || "search", className: "aura-input__icon" }), multi && picked.length ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__chips" }, picked.map(function(o) {
+      /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open", multi && "is-multi") }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-input__icon" }), multi && picked.length ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__chips" }, picked.map(function(o) {
         return /* @__PURE__ */ React.createElement("span", { key: o.value, className: "aura-combo__chip" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__chip-label" }, o.label), props.disabled || props.readOnly ? null : /* @__PURE__ */ React.createElement(
           "button",
           {
@@ -265,7 +266,7 @@ const Combobox = React.forwardRef(
               if (inputRef.current) inputRef.current.focus();
             }
           },
-          /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+          /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null) })
         ));
       })) : null, multi ? /* @__PURE__ */ React.createElement("span", { id: summaryId, className: "aura-sr-only" }, picked.length ? t.selectedCount(picked.length) + ": " + picked.map(function(o) {
         return o.label;
@@ -320,7 +321,7 @@ const Combobox = React.forwardRef(
             if (inputRef.current) inputRef.current.focus();
           }
         },
-        /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+        /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null) })
       ) : null, /* @__PURE__ */ React.createElement(
         "button",
         {
@@ -339,7 +340,7 @@ const Combobox = React.forwardRef(
             }
           }
         },
-        /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down" })
+        /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null) })
       )),
       list
     );

package/dist/esm/Command.js

@@ -6,6 +6,7 @@ import { defaultFilter } from "./Combobox.js";
 import { cx, uid } from "./internal.js";
 import { useDensity, useStrings } from "./locale.js";
 import { useModal } from "./useModal.js";
+import { IconLoaderCircle, IconSearch } from "./icons.js";
 function isMac() {
   return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 }
@@ -149,7 +150,7 @@ function Command(props) {
           tabIndex: -1,
           className: cx("aura-command", props.className)
         },
-        /* @__PURE__ */ React.createElement("div", { className: "aura-command__search" }, /* @__PURE__ */ React.createElement(Icon, { name: "search", className: "aura-command__search-icon" }), /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__search" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-command__search-icon" }), /* @__PURE__ */ React.createElement(
           "input",
           {
             ref: input,
@@ -173,7 +174,7 @@ function Command(props) {
             onKeyDown: onKey
           }
         ), /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
-        /* @__PURE__ */ React.createElement("div", { className: "aura-command__list", "aria-busy": props.loading || void 0 }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__loading" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null, !flat.length ? props.loading ? null : /* @__PURE__ */ React.createElement("div", { className: "aura-command__empty" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__list", "aria-busy": props.loading || void 0 }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__loading" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconLoaderCircle, null), className: "aura-spin" }), t.searching) : null, !flat.length ? props.loading ? null : /* @__PURE__ */ React.createElement("div", { className: "aura-command__empty" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement(
           "div",
           {
             id: listId,

package/dist/esm/DataTable.js

@@ -8,6 +8,22 @@ import { IconButton } from "./IconButton.js";
 import { Checkbox } from "./Checkbox.js";
 import { Menu } from "./Menu.js";
 import { StatusPill, toneFor, TONE_ORDER } from "./StatusPill.js";
+import {
+  IconArrowDown,
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowUp,
+  IconArrowUpDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconColumns3,
+  IconEllipsis,
+  IconEyeOff,
+  IconInbox,
+  IconPin,
+  IconPinOff,
+  IconRotateCcw
+} from "./icons.js";
 const BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
 const DEFAULT_COLUMNS = [
   { key: "id", label: "ID", width: 96, mono: true },
@@ -622,14 +638,14 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       items.push(
         {
           label: t.sortAsc,
-          icon: "arrow-up",
+          icon: /* @__PURE__ */ React.createElement(IconArrowUp, null),
           onSelect: function() {
             applySort({ key: c.key, dir: "asc" });
           }
         },
         {
           label: t.sortDesc,
-          icon: "arrow-down",
+          icon: /* @__PURE__ */ React.createElement(IconArrowDown, null),
           onSelect: function() {
             applySort({ key: c.key, dir: "desc" });
           }
@@ -639,7 +655,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     if (c.width != null)
       items.push({
         label: isPinned(c) ? t.unpin : t.pin,
-        icon: isPinned(c) ? "pin-off" : "pin",
+        icon: isPinned(c) ? /* @__PURE__ */ React.createElement(IconPinOff, null) : /* @__PURE__ */ React.createElement(IconPin, null),
         onSelect: function() {
           togglePin(c.key);
         }
@@ -648,7 +664,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       items.push(
         {
           label: t.moveLeft,
-          icon: "arrow-left",
+          icon: /* @__PURE__ */ React.createElement(IconArrowLeft, null),
           disabled: gi <= 0,
           onSelect: function() {
             moveCol(c.key, -1);
@@ -656,7 +672,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         },
         {
           label: t.moveRight,
-          icon: "arrow-right",
+          icon: /* @__PURE__ */ React.createElement(IconArrowRight, null),
           disabled: gi >= group.length - 1,
           onSelect: function() {
             moveCol(c.key, 1);
@@ -667,7 +683,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       { separator: true },
       {
         label: t.hideColumn,
-        icon: "eye-off",
+        icon: /* @__PURE__ */ React.createElement(IconEyeOff, null),
         disabled: shown.length <= 1,
         onSelect: function() {
           setHidden(c.key, true);
@@ -688,7 +704,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           setHidden(k, on);
         }
       };
-    }).concat([{ separator: true }, { label: t.resetColumns, icon: "rotate-ccw", onSelect: resetColumns }]);
+    }).concat([{ separator: true }, { label: t.resetColumns, icon: /* @__PURE__ */ React.createElement(IconRotateCcw, null), onSelect: resetColumns }]);
   }
   function openMenu(kind, key, anchor, rc) {
     setMenu({ kind, key, anchor, rc });
@@ -864,8 +880,14 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             }
           },
           c.label,
-          /* @__PURE__ */ React.createElement(Icon, { name: isSorted ? sort.dir === "desc" ? "arrow-down" : "arrow-up" : "arrow-up-down", size: 12 })
-        ) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React.createElement(Icon, { name: "pin", size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React.createElement(
+            Icon,
+            {
+              name: isSorted ? sort.dir === "desc" ? /* @__PURE__ */ React.createElement(IconArrowDown, null) : /* @__PURE__ */ React.createElement(IconArrowUp, null) : /* @__PURE__ */ React.createElement(IconArrowUpDown, null),
+              size: 12
+            }
+          )
+        ) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconPin, null), size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React.createElement(
           "button",
           {
             type: "button",
@@ -879,7 +901,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
               openMenu("col", c.key, e.currentTarget, { r: 0, c: ci });
             }
           },
-          /* @__PURE__ */ React.createElement(Icon, { name: "ellipsis" })
+          /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconEllipsis, null) })
         ) : null),
         canResize(c) ? /* @__PURE__ */ React.createElement(
           "span",
@@ -1032,7 +1054,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     }
   } else if (!rows.length) {
     const em = props.empty || {};
-    body = /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty", role: "row" }, /* @__PURE__ */ React.createElement("div", { role: "gridcell" }, /* @__PURE__ */ React.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: em.icon || "inbox", size: "lg" })), /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-title" }, em.title || t.empty), em.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-text" }, em.description) : null, em.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty-action" }, em.action) : null));
+    body = /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty", role: "row" }, /* @__PURE__ */ React.createElement("div", { role: "gridcell" }, /* @__PURE__ */ React.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: em.icon || /* @__PURE__ */ React.createElement(IconInbox, null), size: "lg" })), /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-title" }, em.title || t.empty), em.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-table__empty-text" }, em.description) : null, em.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__empty-action" }, em.action) : null));
   } else {
     const bodyRows = body = [];
     if (virtual && start > 0)
@@ -1083,7 +1105,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   }
   let foot = null;
   function pagerButton(dir) {
-    const p = page + dir, off = busy || (dir < 0 ? page <= 1 : page >= pageCount), label = dir < 0 ? t.prevPage : t.nextPage, icon = dir < 0 ? "chevron-left" : "chevron-right";
+    const p = page + dir, off = busy || (dir < 0 ? page <= 1 : page >= pageCount), label = dir < 0 ? t.prevPage : t.nextPage, icon = dir < 0 ? /* @__PURE__ */ React.createElement(IconChevronLeft, null) : /* @__PURE__ */ React.createElement(IconChevronRight, null);
     if (props.getPageHref && !off)
       return /* @__PURE__ */ React.createElement(
         Link,
@@ -1248,7 +1270,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     controls ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        icon: "columns-3",
+        icon: /* @__PURE__ */ React.createElement(IconColumns3, null),
         label: t.showHideColumns,
         "aria-haspopup": "menu",
         onClick: function(e) {

package/dist/esm/DatePicker.js

@@ -6,6 +6,7 @@ import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, trapTab, u
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Field } from "./Field.js";
+import { IconCalendar, IconChevronDown, IconChevronLeft, IconChevronRight, IconX } from "./icons.js";
 import {
   ERA,
   addDays,
@@ -142,7 +143,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
     return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged, key: gridKey }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        icon: "chevron-left",
+        icon: /* @__PURE__ */ React.createElement(IconChevronLeft, null),
         label: dt.prevYears,
         onClick: function() {
           setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
@@ -161,7 +162,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
     ), /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        icon: "chevron-right",
+        icon: /* @__PURE__ */ React.createElement(IconChevronRight, null),
         label: dt.nextYears,
         onClick: function() {
           setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
@@ -189,7 +190,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
   return /* @__PURE__ */ React.createElement("div", { className: "aura-cal", ref: gridMerged, key: gridKey }, /* @__PURE__ */ React.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React.createElement(
     IconButton,
     {
-      icon: "chevron-left",
+      icon: /* @__PURE__ */ React.createElement(IconChevronLeft, null),
       label: dt.prevMonth,
       onClick: function() {
         setFocus(addMonths(focusDate, -1));
@@ -206,11 +207,11 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
       }
     },
     monthTitle,
-    /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", size: 14 })
+    /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), size: 14 })
   ), /* @__PURE__ */ React.createElement(
     IconButton,
     {
-      icon: "chevron-right",
+      icon: /* @__PURE__ */ React.createElement(IconChevronRight, null),
       label: dt.nextMonth,
       onClick: function() {
         setFocus(addMonths(focusDate, 1));
@@ -388,7 +389,7 @@ function DateField(props) {
         "aria-label": props.clearLabel,
         onClick: props.onClear
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null) })
     ) : null, /* @__PURE__ */ React.createElement(
       "button",
       {
@@ -403,7 +404,7 @@ function DateField(props) {
           props.onToggle(!props.open);
         }
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "calendar" })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCalendar, null) })
     ))
   );
 }

package/dist/esm/Dialog.js

@@ -2,9 +2,10 @@
 import * as React from "react";
 import { useStrings, useDensity } from "./locale.js";
 import { createPortal } from "react-dom";
-import { cx, uid, useMergedRef } from "./internal.js";
+import { cx, omit, uid, useMergedRef } from "./internal.js";
 import { IconButton } from "./IconButton.js";
 import { useModal } from "./useModal.js";
+import { IconX } from "./icons.js";
 const Dialog = React.forwardRef(function Dialog2(props, ref) {
   const t = useStrings();
   const density = useDensity();
@@ -42,7 +43,7 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
         tabIndex: -1,
         className: cx("aura-dialog", "aura-dialog--" + (props.size || "md"), props.className)
       },
-      /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__head" }, /* @__PURE__ */ React.createElement("h2", { className: "aura-dialog__title", id: titleId }, props.title), props.dismissible !== false ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.close, className: "aura-dialog__close", onClick: close }) : null),
+      /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__head" }, /* @__PURE__ */ React.createElement("h2", { className: "aura-dialog__title", id: titleId }, props.title), props.dismissible !== false ? /* @__PURE__ */ React.createElement(IconButton, { icon: /* @__PURE__ */ React.createElement(IconX, null), label: t.close, className: "aura-dialog__close", onClick: close }) : null),
       props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-dialog__desc", id: descId }, props.description) : null,
       props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__body" }, props.children) : null,
       props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null
@@ -65,6 +66,25 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
   });
   if (!modal.ready) return null;
   const side = props.side === "left" ? "left" : "right";
+  const rest = omit(props, [
+    "open",
+    "onClose",
+    "side",
+    "size",
+    "title",
+    "description",
+    "children",
+    "footer",
+    "dismissible",
+    "dismissOnScrim",
+    "autoFocus",
+    "aria-label",
+    "aria-describedby",
+    "aria-labelledby",
+    "className",
+    "closeLabel",
+    "closeProps"
+  ]);
   const drawerScrimCloses = props.dismissible !== false && props.dismissOnScrim !== false;
   return createPortal(
     /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement(
@@ -80,16 +100,29 @@ const Drawer = React.forwardRef(function Drawer2(props, ref) {
     ), /* @__PURE__ */ React.createElement(
       "div",
       {
+        ...rest,
         ref: merged,
         role: "dialog",
         "aria-modal": true,
-        "aria-labelledby": props.title ? titleId : void 0,
+        "aria-labelledby": props.title ? titleId : props["aria-labelledby"],
         "aria-label": props.title ? void 0 : props["aria-label"],
-        "aria-describedby": props.description ? descId : void 0,
+        "aria-describedby": cx(props.description ? descId : "", props["aria-describedby"]) || void 0,
         tabIndex: -1,
         className: cx("aura-drawer", "aura-drawer--" + side, "aura-drawer--" + (props.size || "md"), props.className)
       },
-      props.title || props.dismissible !== false ? /* @__PURE__ */ React.createElement("div", { className: "aura-drawer__head" }, props.title ? /* @__PURE__ */ React.createElement("h2", { className: "aura-drawer__title", id: titleId }, props.title) : /* @__PURE__ */ React.createElement("span", { style: { flex: 1 } }), props.dismissible !== false ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.close, onClick: close }) : null) : null,
+      props.title || props.dismissible !== false ? /* @__PURE__ */ React.createElement("div", { className: "aura-drawer__head" }, props.title ? /* @__PURE__ */ React.createElement("h2", { className: "aura-drawer__title", id: titleId }, props.title) : /* @__PURE__ */ React.createElement("span", { style: { flex: 1 } }), props.dismissible !== false ? /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          ...props.closeProps,
+          icon: /* @__PURE__ */ React.createElement(IconX, null),
+          label: props.closeLabel || t.close,
+          onClick: function(e) {
+            const own2 = props.closeProps && props.closeProps.onClick;
+            if (own2) own2(e);
+            if (!e.defaultPrevented) close();
+          }
+        }
+      ) : null) : null,
       props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-drawer__desc", id: descId }, props.description) : null,
       /* @__PURE__ */ React.createElement("div", { className: "aura-drawer__body" }, props.children),
       props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-drawer__foot" }, props.footer) : null

package/dist/esm/DropdownMenu.js

@@ -11,7 +11,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
     function() {
       if (!anchor || !toLast.current || !menuRef.current) return;
       toLast.current = false;
-      const list = menuRef.current.querySelectorAll('[role^="menuitem"]:not([disabled])');
+      const list = menuRef.current.querySelectorAll('[role^="menuitem"]');
       if (list.length) list[list.length - 1].focus();
     },
     [anchor]

package/dist/esm/Field.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx } from "./internal.js";
 import { useStrings } from "./locale.js";
+import { IconCircleAlert } from "./icons.js";
 const h = React.createElement;
 const Field = React.forwardRef(function Field2(props, ref) {
   const t = useStrings();
@@ -20,7 +21,7 @@ const Field = React.forwardRef(function Field2(props, ref) {
       props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
     ) : null,
     props.children,
-    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
+    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
   );
 });
 function describedBy(id, p) {

package/dist/esm/FileUpload.js

@@ -6,6 +6,7 @@ import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Field } from "./Field.js";
 import { formatBytes } from "./text.js";
+import { IconCircleAlert, IconCircleCheck, IconCloudUpload, IconFile, IconImage, IconX } from "./icons.js";
 function matches(file, accept) {
   if (!accept) return true;
   const name = (file.name || "").toLowerCase(), type = (file.type || "").toLowerCase();
@@ -139,7 +140,7 @@ const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
           add(e.dataTransfer && e.dataTransfer.files);
         }
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "cloud-upload", size: "lg", className: "aura-upload__icon" }),
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCloudUpload, null), size: "lg", className: "aura-upload__icon" }),
       /* @__PURE__ */ React.createElement("span", { className: "aura-upload__text" }, t.dropFiles, " "),
       /* @__PURE__ */ React.createElement(
         "input",
@@ -168,7 +169,7 @@ const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
     ),
     items.length ? /* @__PURE__ */ React.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items.map(function(it) {
       const src = thumb(it);
-      return /* @__PURE__ */ React.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__meta" }, it.url && !it.error ? /* @__PURE__ */ React.createElement("a", { className: "aura-upload__name", href: it.url, target: "_blank", rel: "noreferrer" }, it.name) : /* @__PURE__ */ React.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: /^image\//.test(it.type || "") ? /* @__PURE__ */ React.createElement(IconImage, null) : /* @__PURE__ */ React.createElement(IconFile, null), size: "md" })), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__meta" }, it.url && !it.error ? /* @__PURE__ */ React.createElement("a", { className: "aura-upload__name", href: it.url, target: "_blank", rel: "noreferrer" }, it.name) : /* @__PURE__ */ React.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleCheck, null), size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React.createElement(
         "span",
         {
           className: "aura-upload__bar",
@@ -182,7 +183,7 @@ const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
       ) : null), /* @__PURE__ */ React.createElement(
         IconButton,
         {
-          icon: "x",
+          icon: /* @__PURE__ */ React.createElement(IconX, null),
           label: t.remove(it.name),
           onClick: function() {
             remove(it);

package/dist/esm/FilterBar.js

@@ -5,6 +5,7 @@ import { IconButton } from "./IconButton.js";
 import { Tag } from "./Tag.js";
 import { cx, uid } from "./internal.js";
 import { useStrings } from "./locale.js";
+import { IconSearch, IconX } from "./icons.js";
 const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
   const t = useStrings();
   const id = uid();
@@ -56,7 +57,7 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
       "aria-label": props.label || t.filters,
       className: cx("aura-filterbar", props.className)
     },
-    /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: "search", className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",
       {
         id,
@@ -80,7 +81,7 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
     ), draft[0] ? /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        icon: "x",
+        icon: /* @__PURE__ */ React.createElement(IconX, null),
         label: t.clear((props.searchLabel || t.search).toLowerCase()),
         className: "aura-filterbar__clear-search",
         onClick: function() {

package/dist/esm/FormErrorSummary.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, uid } from "./internal.js";
 import { useStrings } from "./locale.js";
+import { IconCircleAlert } from "./icons.js";
 function items(errors) {
   if (Array.isArray(errors)) return errors;
   const out = [];
@@ -97,7 +98,7 @@ const FormErrorSummary = React.forwardRef(
         "aria-labelledby": id + "-title",
         className: cx("aura-alert aura-alert--danger aura-error-summary", props.className)
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", className: "aura-alert__icon" }),
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), className: "aura-alert__icon" }),
       /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, /* @__PURE__ */ React.createElement("h2", { className: "aura-alert__title", id: id + "-title" }, props.title || t.errorSummary(list.length)), /* @__PURE__ */ React.createElement("ul", { className: "aura-error-summary__list" }, list.map(function(e) {
         return /* @__PURE__ */ React.createElement("li", { key: e.field }, /* @__PURE__ */ React.createElement(
           "a",