@jirawatpyk/aura-react 5.7.3 → 5.9.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

@@ -1,28 +1,16 @@
 'use client';
 import * as React from "react";
-import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cx } from "./internal.js";
+import { alertElement } from "./display.js";
 import { useStrings } from "./locale.js";
-const ALERT_ICON = {
-  info: "info",
-  success: "circle-check",
-  warning: "triangle-alert",
-  danger: "circle-alert"
-};
+import { IconX } from "./icons.js";
+import { ALERT_ICON } from "./display.js";
 const Alert = React.forwardRef(function Alert2(props, ref) {
   const t = useStrings();
-  const tone = props.tone || "info";
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref,
-      className: cx("aura-alert", "aura-alert--" + tone, props.className),
-      role: tone === "danger" || tone === "warning" ? "alert" : "status"
-    },
-    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[tone], className: "aura-alert__icon" }),
-    /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
-    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+  return alertElement(
+    props,
+    ref,
+    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/Badge.js

@@ -1,25 +1,8 @@
 'use client';
 import * as React from "react";
-import { Icon } from "./Icon.js";
-import { cx, omit, tone } from "./internal.js";
+import { badgeElement } from "./display.js";
 const Badge = React.forwardRef(function Badge2(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
-  return /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      ...rest,
-      ref,
-      className: cx(
-        "aura-badge",
-        "aura-badge--" + tone(props.tone),
-        props.variant === "solid" && "is-solid",
-        props.variant === "outline" && "is-outline",
-        props.className
-      )
-    },
-    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
-    props.children
-  );
+  return badgeElement(props, ref);
 });
 export {
   Badge

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

@@ -1,8 +1,10 @@
 'use client';
 import * as React from "react";
-import { cx, omit } from "./internal.js";
+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;
@@ -28,13 +30,12 @@ function ButtonLink(props, ref, Link) {
       role: disabled ? "link" : void 0,
       "aria-disabled": disabled || void 0,
       tabIndex: disabled ? -1 : props.tabIndex,
-      className: cx(
-        "aura-btn",
-        "aura-btn--" + variant,
-        props.size === "sm" && "aura-btn--sm",
-        props.fullWidth && "aura-btn--full",
-        props.className
-      ),
+      className: buttonClass({
+        variant,
+        size: props.size,
+        fullWidth: props.fullWidth,
+        className: props.className
+      }),
       onClick: disabled ? void 0 : props.onClick
     },
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
@@ -69,21 +70,20 @@ const Button = React.forwardRef(
         ...rest,
         ref,
         type: props.type || "button",
-        className: cx(
-          "aura-btn",
-          "aura-btn--" + variant,
-          props.size === "sm" && "aura-btn--sm",
-          props.fullWidth && "aura-btn--full",
-          loading && "is-loading",
-          props.className
-        ),
+        className: buttonClass({
+          variant,
+          size: props.size,
+          fullWidth: props.fullWidth,
+          loading,
+          className: props.className
+        }),
         "aria-busy": loading || void 0,
         "aria-disabled": loading || void 0,
         onClick: loading ? function(e) {
           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/Card.js

@@ -1,25 +1,8 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
-const h = React.createElement;
+import { cardElement } from "./display.js";
 const Card = React.forwardRef(function Card2(props, ref) {
-  const creative = props.variant === "creative";
-  return h(
-    props.as || "section",
-    {
-      ref,
-      className: cx(
-        "aura-card",
-        creative && "aura-card--creative",
-        props.interactive && "is-interactive",
-        props.className
-      ),
-      "aria-labelledby": props.title && props.titleId ? props.titleId : void 0
-    },
-    props.title || props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
-    props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__body" }, props.children) : null,
-    props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__foot" }, props.footer) : null
-  );
+  return cardElement(props, ref);
 });
 export {
   Card

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/EmptyState.js

@@ -1,21 +1,8 @@
 'use client';
 import * as React from "react";
-import { Icon } from "./Icon.js";
-import { cx } from "./internal.js";
-const h = React.createElement;
+import { emptyStateElement } from "./display.js";
 const EmptyState = React.forwardRef(function EmptyState2(props, ref) {
-  const HT = "h" + (props.headingLevel || 3);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
-    /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),
-    props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-empty__text" }, props.description) : null,
-    props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-empty__action" }, props.action) : null
-  );
+  return emptyStateElement(props, ref);
 });
 export {
   EmptyState