@mond-design-system/react 4.10.1 → 4.11.0

package/dist/index.cjs

@@ -150,6 +150,8 @@ function Button({
   children,
   ...rest
 }) {
+  const glyph = iconOnly && children != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children }) : children;
+  const body = loading && iconOnly ? null : glyph;
   const Element = as ?? (href !== void 0 ? "a" : "button");
   const isButton = Element === "button";
   const own = isButton ? { type, disabled: disabled || loading } : { href };
@@ -171,7 +173,7 @@ function Button({
       ...rest,
       children: [
         loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_PX[size], label: "", "aria-hidden": "true" }) }) : iconLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconLeft }) : null,
-        children,
+        body,
         !loading && iconRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconRight }) : null
       ]
     }
@@ -385,10 +387,10 @@ function CountButton({
   );
 }
 function CloseGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
 }
 function ChevronLeftGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M10 3l-5 5 5 5",
@@ -401,7 +403,7 @@ function ChevronLeftGlyph({ className }) {
   ) });
 }
 function ChevronRightGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M6 3l5 5-5 5",
@@ -414,7 +416,7 @@ function ChevronRightGlyph({ className }) {
   ) });
 }
 function Magnifier({ className, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "4.25" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.2 10.2L14 14" }),
     children
@@ -427,35 +429,35 @@ function ZoomOutGlyph({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Magnifier, { className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.75 7h4.5" }) });
 }
 function PlayGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3.2l7.5 4.8L5 12.8z", fill: "currentColor" }) });
 }
 function PauseGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 3h2.25v10H4.5zM9.25 3h2.25v10H9.25z", fill: "currentColor" }) });
 }
 function Speaker() {
   return /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 6.25h2.25L8 3.4v9.2L4.75 9.75H2.5z", fill: "currentColor", stroke: "none" });
 }
 function VolumeGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Speaker, {}),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 5.75a3.25 3.25 0 010 4.5" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 3.9a5.75 5.75 0 010 8.2" })
   ] }) });
 }
 function VolumeOffGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Speaker, {}),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.75 6.25l3.5 3.5M14.25 6.25l-3.5 3.5" })
   ] }) });
 }
 function CaptionsGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1.75", y: "3.25", width: "12.5", height: "9.5", rx: "2" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.25 6.75a2 2 0 100 2.5M11.25 6.75a2 2 0 100 2.5" })
   ] }) });
 }
 function FullscreenGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M6 2.5H2.5V6M10 2.5h3.5V6M6 13.5H2.5V10M10 13.5h3.5V10",
@@ -468,7 +470,7 @@ function FullscreenGlyph({ className }) {
   ) });
 }
 function FullscreenExitGlyph({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", className, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
       d: "M2.5 6H6V2.5M13.5 6H10V2.5M2.5 10H6v3.5M13.5 10H10v3.5",
@@ -1786,13 +1788,14 @@ function ToastProvider({
 var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-group": "mds-Stack__gap-group", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
 
 // src/components/Stack/Stack.tsx
-function Stack({
-  gap = "base",
-  align = "stretch",
-  as = "div",
-  className,
-  ...rest
-}) {
+function Stack(props) {
+  const {
+    gap = "base",
+    align = "stretch",
+    as = "div",
+    className,
+    ...rest
+  } = props;
   return react.createElement(as, {
     className: cx(Stack_module_default.stack, Stack_module_default[`gap-${gap}`], Stack_module_default[`align-${align}`], className),
     ...rest
@@ -1803,15 +1806,16 @@ function Stack({
 var Inline_module_default = { "inline": "mds-Inline__inline", "gap-hairline": "mds-Inline__gap-hairline", "gap-tight": "mds-Inline__gap-tight", "gap-base": "mds-Inline__gap-base", "gap-loose": "mds-Inline__gap-loose", "align-start": "mds-Inline__align-start", "align-center": "mds-Inline__align-center", "align-end": "mds-Inline__align-end", "align-baseline": "mds-Inline__align-baseline", "justify-start": "mds-Inline__justify-start", "justify-center": "mds-Inline__justify-center", "justify-end": "mds-Inline__justify-end", "justify-between": "mds-Inline__justify-between", "wrap": "mds-Inline__wrap" };
 
 // src/components/Inline/Inline.tsx
-function Inline({
-  gap = "base",
-  align = "center",
-  justify = "start",
-  wrap = false,
-  as = "div",
-  className,
-  ...rest
-}) {
+function Inline(props) {
+  const {
+    gap = "base",
+    align = "center",
+    justify = "start",
+    wrap = false,
+    as = "div",
+    className,
+    ...rest
+  } = props;
   return react.createElement(as, {
     className: cx(
       Inline_module_default.inline,
@@ -1829,12 +1833,8 @@ function Inline({
 var Container_module_default = { "container": "mds-Container__container", "width-content": "mds-Container__width-content", "width-wide": "mds-Container__width-wide" };
 
 // src/components/Container/Container.tsx
-function Container({
-  width = "content",
-  as = "div",
-  className,
-  ...rest
-}) {
+function Container(props) {
+  const { width = "content", as = "div", className, ...rest } = props;
   return react.createElement(as, {
     className: cx(Container_module_default.container, Container_module_default[`width-${width}`], className),
     ...rest