@jirawatpyk/aura-react 4.4.2 → 4.5.1

package/dist/esm/internal.js

@@ -1,23 +1,27 @@
 'use client';
 import * as React from "react";
-const h = React.createElement;
 function cx() {
   return Array.prototype.filter.call(arguments, Boolean).join(" ");
 }
 function omit(src, keys) {
-  var out = {};
-  for (var k in src) if (Object.prototype.hasOwnProperty.call(src, k) && keys.indexOf(k) < 0) out[k] = src[k];
+  const out = {};
+  for (const k in src)
+    if (Object.prototype.hasOwnProperty.call(src, k) && keys.indexOf(k) < 0)
+      out[k] = src[k];
   return out;
 }
 function useMaybeControlled(value, initial, onChange) {
-  var s = React.useState(initial);
-  var controlled = value !== void 0;
-  return [controlled ? value : s[0], function(next) {
-    if (!controlled) s[1](next);
-    if (onChange) onChange(next);
-  }];
+  const s = React.useState(initial);
+  const controlled = value !== void 0;
+  return [
+    controlled ? value : s[0],
+    function(next) {
+      if (!controlled) s[1](next);
+      if (onChange) onChange(next);
+    }
+  ];
 }
-var collator = typeof Intl !== "undefined" ? new Intl.Collator(["th", "en"], { numeric: true, sensitivity: "base" }) : null;
+const collator = typeof Intl !== "undefined" ? new Intl.Collator(["th", "en"], { numeric: true, sensitivity: "base" }) : null;
 function compare(a, b) {
   if (a == null && b == null) return 0;
   if (a == null) return 1;
@@ -30,7 +34,7 @@ const uid = React.useId || function() {
   if (!r.current) r.current = "aura-" + Math.random().toString(36).slice(2, 9);
   return r.current;
 };
-var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 function noopSubscribe() {
   return function() {
   };
@@ -44,14 +48,17 @@ function no() {
 function useMounted() {
   return React.useSyncExternalStore(noopSubscribe, yes, no);
 }
-var useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function trapTab(e, container) {
   if (e.key !== "Tab" || !container) return;
-  var list = Array.prototype.filter.call(container.querySelectorAll(FOCUSABLE), function(el) {
-    return el.tabIndex >= 0 && el.offsetParent !== null;
-  });
+  const list = Array.prototype.filter.call(
+    container.querySelectorAll(FOCUSABLE),
+    function(el) {
+      return el.tabIndex >= 0 && el.offsetParent !== null;
+    }
+  );
   if (!list.length) return;
-  var first = list[0], last = list[list.length - 1];
+  const first = list[0], last = list[list.length - 1];
   if (e.shiftKey && document.activeElement === first) {
     e.preventDefault();
     last.focus();
@@ -61,13 +68,16 @@ function trapTab(e, container) {
   }
 }
 function useMergedRef(a, b) {
-  return React.useCallback(function(node) {
-    [a, b].forEach(function(r) {
-      if (!r) return;
-      if (typeof r === "function") r(node);
-      else r.current = node;
-    });
-  }, [a, b]);
+  return React.useCallback(
+    function(node) {
+      [a, b].forEach(function(r) {
+        if (!r) return;
+        if (typeof r === "function") r(node);
+        else r.current = node;
+      });
+    },
+    [a, b]
+  );
 }
 export {
   FOCUSABLE,

package/dist/esm/layout.js

@@ -1,123 +1,125 @@
 'use client';
 import * as React from "react";
-import { useStrings, useAuraLocale } from "./locale.js";
+import { useStrings } from "./locale.js";
 import { cx, useMaybeControlled, uid } from "./internal.js";
 import { Icon } from "./Icon.js";
 const h = React.createElement;
 const Card = React.forwardRef(function Card2(props, ref) {
-  var creative = props.variant === "creative";
+  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),
+      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 ? h(
-      "div",
-      { className: "aura-card__head" },
-      h(
-        "div",
-        { className: "aura-card__heading" },
-        props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null,
-        props.description ? h("p", { className: "aura-card__desc" }, props.description) : null
-      ),
-      props.actions ? h("div", { className: "aura-card__actions" }, props.actions) : null
-    ) : null,
-    props.children ? h("div", { className: "aura-card__body" }, props.children) : null,
-    props.footer ? h("div", { className: "aura-card__foot" }, props.footer) : null
+    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
   );
 });
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
-  var items = props.tabs || [], base = uid();
-  var st = useMaybeControlled(props.value, props.defaultValue || items[0] && items[0].id, props.onChange);
-  var refs = React.useRef({});
-  var current = items.filter(function(t) {
+  const items = props.tabs || [], base = uid();
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue || items[0] && items[0].id,
+    props.onChange
+  );
+  const refs = React.useRef({});
+  const current = items.filter(function(t) {
     return t.id === st[0];
   })[0] || items[0];
   function go(i) {
-    var enabled = items.filter(function(t2) {
+    const enabled = items.filter(function(t2) {
       return !t2.disabled;
     });
-    var t = enabled[(i + enabled.length) % enabled.length];
+    const t = enabled[(i + enabled.length) % enabled.length];
     st[1](t.id);
     if (refs.current[t.id]) refs.current[t.id].focus();
   }
-  return h(
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React.createElement(
     "div",
-    { ref, className: cx("aura-tabs", props.className) },
-    h(
-      "div",
-      {
-        role: "tablist",
-        "aria-label": props.label,
-        className: "aura-tabs__list",
-        onKeyDown: function(e) {
-          var enabled = items.filter(function(t) {
-            return !t.disabled;
-          }), i = enabled.indexOf(current);
-          if (e.key === "ArrowRight") {
-            e.preventDefault();
-            go(i + 1);
-          } else if (e.key === "ArrowLeft") {
-            e.preventDefault();
-            go(i - 1);
-          } else if (e.key === "Home") {
-            e.preventDefault();
-            go(0);
-          } else if (e.key === "End") {
-            e.preventDefault();
-            go(enabled.length - 1);
-          }
+    {
+      role: "tablist",
+      "aria-label": props.label,
+      className: "aura-tabs__list",
+      onKeyDown: function(e) {
+        const enabled = items.filter(function(t) {
+          return !t.disabled;
+        }), i = enabled.indexOf(current);
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          go(i + 1);
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          go(i - 1);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          go(0);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          go(enabled.length - 1);
         }
-      },
-      items.map(function(t) {
-        var on = current && t.id === current.id;
-        return h(
-          "button",
-          {
-            key: t.id,
-            type: "button",
-            role: "tab",
-            id: base + "-tab-" + t.id,
-            "aria-selected": on,
-            "aria-controls": base + "-panel-" + t.id,
-            tabIndex: on ? 0 : -1,
-            disabled: t.disabled,
-            ref: function(el) {
-              refs.current[t.id] = el;
-            },
-            className: cx("aura-tab", on && "is-active"),
-            onClick: function() {
-              st[1](t.id);
-            }
+      }
+    },
+    items.map(function(t) {
+      const on = current && t.id === current.id;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: t.id,
+          type: "button",
+          role: "tab",
+          id: base + "-tab-" + t.id,
+          "aria-selected": on,
+          "aria-controls": base + "-panel-" + t.id,
+          tabIndex: on ? 0 : -1,
+          disabled: t.disabled,
+          ref: function(el) {
+            refs.current[t.id] = el;
           },
-          t.icon ? h(Icon, { name: t.icon }) : null,
-          t.label,
-          t.count != null ? h("span", { className: "aura-tab__count" }, t.count) : null
-        );
-      })
-    ),
-    current && current.content !== void 0 ? h("div", {
+          className: cx("aura-tab", on && "is-active"),
+          onClick: function() {
+            st[1](t.id);
+          }
+        },
+        t.icon ? /* @__PURE__ */ React.createElement(Icon, { name: t.icon }) : null,
+        t.label,
+        t.count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-tab__count" }, t.count) : null
+      );
+    })
+  ), current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
       role: "tabpanel",
       id: base + "-panel-" + current.id,
       "aria-labelledby": base + "-tab-" + current.id,
       tabIndex: 0,
       className: "aura-tabs__panel"
-    }, current.content) : null
-  );
+    },
+    current.content
+  ) : null);
 });
 const SideNav = React.forwardRef(function SideNav2(props, ref) {
-  var t = useStrings();
-  var st = useMaybeControlled(props.value, props.defaultValue, props.onChange);
+  const t = useStrings();
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
   function item(it) {
-    var on = st[0] === it.id;
-    var inner = [
-      it.icon ? h(Icon, { key: "i", name: it.icon }) : null,
-      h("span", { key: "l", className: "aura-nav__label" }, it.label),
-      it.count != null ? h("span", { key: "c", className: "aura-nav__count" }, it.count) : null
+    const on = st[0] === it.id;
+    const inner = [
+      it.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: it.icon }) : null,
+      /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
+      it.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null
     ];
-    var common = {
+    const common = {
       className: cx("aura-nav__item", on && "is-active"),
       "aria-current": on ? "page" : void 0,
       onClick: function(e) {
@@ -125,57 +127,33 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
         st[1](it.id);
       }
     };
-    return h("li", { key: it.id }, it.href ? h("a", Object.assign({ href: it.href }, common), inner) : h("button", Object.assign({ type: "button" }, common), inner));
+    return /* @__PURE__ */ React.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));
   }
-  return h(
-    "nav",
-    { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav },
-    props.header ? h("div", { className: "aura-nav__header" }, props.header) : null,
-    h(
-      "div",
-      { className: "aura-nav__scroll" },
-      (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
-        return h(
-          "div",
-          { key: i, className: "aura-nav__section" },
-          s.title ? h("p", { className: "aura-nav__title" }, s.title) : null,
-          h("ul", { className: "aura-nav__list" }, s.items.map(item))
-        );
-      })
-    ),
-    props.footer ? h("div", { className: "aura-nav__footer" }, props.footer) : null
-  );
+  return /* @__PURE__ */ React.createElement("nav", { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav }, props.header ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__header" }, props.header) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-nav__scroll" }, (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
+    return /* @__PURE__ */ React.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React.createElement("ul", { className: "aura-nav__list" }, s.items.map(item)));
+  })), props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null);
 });
 const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
-  var t = useStrings();
-  var items = props.items || [];
-  return h(
-    "nav",
-    { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) },
-    h("ol", null, items.map(function(it, i) {
-      var last = i === items.length - 1;
-      return h(
-        "li",
-        { key: i },
-        last ? h("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? h("a", { href: it.href, onClick: it.onClick }, it.label) : h("button", { type: "button", onClick: it.onClick }, it.label),
-        last ? null : h(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" })
-      );
-    }))
-  );
+  const t = useStrings();
+  const items = props.items || [];
+  return /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React.createElement("ol", null, items.map(function(it, i) {
+    const last = i === items.length - 1;
+    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("a", { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+  })));
 });
-var AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
+const AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
 function initials(name) {
-  var parts = String(name || "?").trim().split(/\s+/);
+  const parts = String(name || "?").trim().split(/\s+/);
   return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
 }
 const Avatar = React.forwardRef(function Avatar2(props, ref) {
-  var size = props.size || "md", errState = React.useState(false);
-  var hash = 0;
+  const size = props.size || "md", errState = React.useState(false);
+  let hash = 0;
   String(props.name || "").split("").forEach(function(ch) {
     hash = hash * 31 + ch.charCodeAt(0) >>> 0;
   });
-  var tone = AVATAR_TONES[hash % AVATAR_TONES.length];
-  return h(
+  const tone = AVATAR_TONES[hash % AVATAR_TONES.length];
+  return /* @__PURE__ */ React.createElement(
     "span",
     {
       ref,
@@ -183,10 +161,17 @@ const Avatar = React.forwardRef(function Avatar2(props, ref) {
       role: "img",
       "aria-label": props.name + (props.status ? ", " + props.status : "")
     },
-    props.src && !errState[0] ? h("img", { src: props.src, alt: "", onError: function() {
-      errState[1](true);
-    } }) : h("span", { "aria-hidden": true }, initials(props.name)),
-    props.status === "online" ? h("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+    props.src && !errState[0] ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: props.src,
+        alt: "",
+        onError: function() {
+          errState[1](true);
+        }
+      }
+    ) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
   );
 });
 export {

package/dist/esm/layout2.js

@@ -1,19 +1,19 @@
 'use client';
 import * as React from "react";
-import { useStrings, useAuraLocale } from "./locale.js";
+import { useStrings } from "./locale.js";
 import { cx } from "./internal.js";
 import { IconButton } from "./IconButton.js";
 import { Drawer } from "./Dialog.js";
 const h = React.createElement;
-var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-var ORDER = ["base", "sm", "md", "lg", "xl"];
+const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+const ORDER = ["base", "sm", "md", "lg", "xl"];
 function useBreakpoint() {
   return React.useSyncExternalStore(subscribe, current, function() {
     return "lg";
   });
 }
 function current() {
-  var w = window.innerWidth, bp = "base";
+  let w = window.innerWidth, bp = "base";
   ORDER.slice(1).forEach(function(k) {
     if (w >= breakpoints[k]) bp = k;
   });
@@ -26,27 +26,28 @@ function subscribe(cb) {
   };
 }
 function useResponsive(value) {
-  var bp = useBreakpoint();
+  const bp = useBreakpoint();
   if (value == null || typeof value !== "object") return value;
-  for (var i = ORDER.indexOf(bp); i >= 0; i--) if (value[ORDER[i]] !== void 0) return value[ORDER[i]];
+  const map = value;
+  for (let i = ORDER.indexOf(bp); i >= 0; i--) if (map[ORDER[i]] !== void 0) return map[ORDER[i]];
   return void 0;
 }
 function respVars(prefix, value, map) {
-  var style = {};
+  const style = {};
   if (value == null) return style;
   if (typeof value !== "object") value = { base: value };
-  var cur;
+  let byBp = value, cur;
   ORDER.forEach(function(k) {
-    if (value[k] !== void 0) cur = map ? map(value[k]) : value[k];
+    if (byBp[k] !== void 0) cur = map ? map(byBp[k]) : byBp[k];
     if (cur !== void 0) style["--" + prefix + "-" + k] = cur;
   });
   return style;
 }
-var space = function(v) {
+const space = function(v) {
   return typeof v === "number" ? "var(--aura-space-" + v + ")" : v;
 };
 const Stack = React.forwardRef(function Stack2(props, ref) {
-  var style = Object.assign(
+  const style = Object.assign(
     {},
     respVars("aura-stack-dir", props.direction || "column"),
     respVars("aura-stack-gap", props.gap == null ? 4 : props.gap, space),
@@ -58,50 +59,73 @@ const Stack = React.forwardRef(function Stack2(props, ref) {
   return h(props.as || "div", { ref, className: cx("aura-stack", props.className), style }, props.children);
 });
 const Grid = React.forwardRef(function Grid2(props, ref) {
-  var style = Object.assign(
+  const style = Object.assign(
     {},
     respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
     props.minItemWidth ? { gridTemplateColumns: "repeat(auto-fill, minmax(min(" + props.minItemWidth + "px, 100%), 1fr))" } : respVars("aura-grid-cols", props.columns || 1),
     props.style
   );
-  return h(props.as || "div", { ref, className: cx("aura-grid-layout", props.minItemWidth && "is-auto", props.className), style }, props.children);
+  return h(
+    props.as || "div",
+    { ref, className: cx("aura-grid-layout", props.minItemWidth && "is-auto", props.className), style },
+    props.children
+  );
 });
 const Container = React.forwardRef(function Container2(props, ref) {
-  return h(props.as || "div", { ref, className: cx("aura-container", props.size === "narrow" && "is-narrow", props.className), style: props.style }, props.children);
+  return h(
+    props.as || "div",
+    {
+      ref,
+      className: cx("aura-container", props.size === "narrow" && "is-narrow", props.className),
+      style: props.style
+    },
+    props.children
+  );
 });
 const AppShell = React.forwardRef(function AppShell2(props, ref) {
-  var t = useStrings();
-  var bp = useBreakpoint();
-  var compact = bp === "base" || bp === "sm" || bp === "md";
-  var st = React.useState(false), open = st[0], setOpen = st[1];
-  React.useEffect(function() {
-    if (!compact) setOpen(false);
-  }, [compact]);
-  var nav = props.nav && React.isValidElement(props.nav) && compact ? React.cloneElement(props.nav, { onChange: function(id) {
-    if (props.nav.props.onChange) props.nav.props.onChange(id);
-    setOpen(false);
-  }, className: cx(props.nav.props.className, "is-in-drawer") }) : props.nav;
-  return h(
-    "div",
-    { ref, className: cx("aura-shell", compact && "is-compact", props.className) },
-    !compact ? h("div", { className: "aura-shell__nav" }, nav) : null,
-    compact ? h(Drawer, { open, onClose: function() {
-      setOpen(false);
-    }, side: "left", size: "nav", "aria-label": props.navLabel || t.navigation, dismissible: true }, nav) : null,
-    h(
-      "div",
-      { className: "aura-shell__main" },
-      props.header || compact ? h(
-        "header",
-        { className: "aura-shell__bar" },
-        compact ? h(IconButton, { icon: "menu", label: props.menuLabel || t.openNav, size: "md", onClick: function() {
-          setOpen(true);
-        }, "aria-expanded": open }) : null,
-        h("div", { className: "aura-shell__bar-content" }, props.header)
-      ) : null,
-      h("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)
-    )
+  const t = useStrings();
+  const bp = useBreakpoint();
+  const compact = bp === "base" || bp === "sm" || bp === "md";
+  const st = React.useState(false), open = st[0], setOpen = st[1];
+  React.useEffect(
+    function() {
+      if (!compact) setOpen(false);
+    },
+    [compact]
   );
+  const navEl = props.nav;
+  const nav = props.nav && React.isValidElement(props.nav) && compact ? React.cloneElement(navEl, {
+    onChange: function(id) {
+      if (navEl.props.onChange) navEl.props.onChange(id);
+      setOpen(false);
+    },
+    className: cx(navEl.props.className, "is-in-drawer")
+  }) : props.nav;
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      open,
+      onClose: function() {
+        setOpen(false);
+      },
+      side: "left",
+      size: "nav",
+      "aria-label": props.navLabel || t.navigation,
+      dismissible: true
+    },
+    nav
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "menu",
+      label: props.menuLabel || t.openNav,
+      size: "md",
+      onClick: function() {
+        setOpen(true);
+      },
+      "aria-expanded": open
+    }
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
 });
 export {
   AppShell,

package/dist/esm/locale.js

@@ -1,10 +1,9 @@
 'use client';
 import * as React from "react";
-const h = React.createElement;
-var n = function(x) {
+const n = function(x) {
   return Number(x).toLocaleString("en");
 };
-var STRINGS = {
+const STRINGS = {
   en: {
     close: "Close",
     dismiss: "Dismiss",
@@ -182,13 +181,20 @@ var STRINGS = {
     }
   }
 };
-var LocaleContext = React.createContext(null);
+const LocaleContext = React.createContext(null);
 function AuraProvider(props) {
-  var value = React.useMemo(function() {
-    var base = STRINGS[props.locale] || STRINGS.en;
-    return { locale: props.locale || "en", calendar: props.calendar, strings: props.strings ? Object.assign({}, base, props.strings) : base };
-  }, [props.locale, props.calendar, props.strings]);
-  return h(LocaleContext.Provider, { value }, props.children);
+  const value = React.useMemo(
+    function() {
+      const base = props.locale && STRINGS[props.locale] || STRINGS.en;
+      return {
+        locale: props.locale || "en",
+        calendar: props.calendar || null,
+        strings: props.strings ? Object.assign({}, base, props.strings) : base
+      };
+    },
+    [props.locale, props.calendar, props.strings]
+  );
+  return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.children);
 }
 function useAuraLocale() {
   return React.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };