@mond-design-system/react 1.1.0 → 3.0.0

package/dist/index.cjs

@@ -103,14 +103,14 @@ function Spinner({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Icon/Icon.module.css?mds-scoped
-var Icon_module_default = { "icon": "mds-Icon__icon", "size-sm": "mds-Icon__size-sm", "size-md": "mds-Icon__size-md", "size-lg": "mds-Icon__size-lg" };
+var Icon_module_default = { "icon": "mds-Icon__icon", "size-slot": "mds-Icon__size-slot", "size-sm": "mds-Icon__size-sm", "size-md": "mds-Icon__size-md", "size-lg": "mds-Icon__size-lg" };
 var IconContext = react.createContext(null);
 function IconProvider({ render, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(IconContext.Provider, { value: render, children });
 }
 var SIZE_PX = { sm: 16, md: 20, lg: 24 };
 var warned = /* @__PURE__ */ new Set();
-function Icon({ name, size = "md", label, className, ...rest }) {
+function Icon({ name, size, label, className, ...rest }) {
   const render = react.useContext(IconContext);
   if (render === null && !warned.has(name)) {
     warned.add(name);
@@ -121,17 +121,17 @@ function Icon({ name, size = "md", label, className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cx(Icon_module_default.icon, Icon_module_default[`size-${size}`], className),
+      className: cx(Icon_module_default.icon, Icon_module_default[`size-${size ?? "slot"}`], className),
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
       ...rest,
-      children: render?.(name, { size: SIZE_PX[size] })
+      children: render?.(name, { size: size === void 0 ? void 0 : SIZE_PX[size] })
     }
   );
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped
-var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only" };
-var SPINNER_PX = { sm: 16, md: 18, lg: 20 };
+var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "slot": "mds-Button__slot", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only" };
+var ICON_PX = { sm: 16, md: 20, lg: 24 };
 function Button({
   variant = "primary",
   size = "md",
@@ -166,9 +166,9 @@ function Button({
       ...own,
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX[size], label: "", "aria-hidden": "true" }) : iconLeft,
+        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,
-        !loading && iconRight
+        !loading && iconRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconRight }) : null
       ]
     }
   );
@@ -279,7 +279,7 @@ function Badge({ tone = "neutral", className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/Chip.module.css?mds-scoped
-var Chip_module_default = { "chip": "mds-Chip__chip", "variant-soft": "mds-Chip__variant-soft", "variant-outline": "mds-Chip__variant-outline", "variant-highlight": "mds-Chip__variant-highlight", "selected": "mds-Chip__selected", "interactive": "mds-Chip__interactive", "disabled": "mds-Chip__disabled" };
+var Chip_module_default = { "chip": "mds-Chip__chip", "icon": "mds-Chip__icon", "variant-soft": "mds-Chip__variant-soft", "variant-outline": "mds-Chip__variant-outline", "variant-highlight": "mds-Chip__variant-highlight", "selected": "mds-Chip__selected", "interactive": "mds-Chip__interactive", "disabled": "mds-Chip__disabled" };
 function Chip({
   children,
   variant = "soft",
@@ -303,7 +303,7 @@ function Chip({
     ...rest
   };
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon,
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Chip_module_default.icon, children: icon }) : null,
     children
   ] });
   return interactive ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -347,7 +347,7 @@ function ChipBar({
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/CountButton/CountButton.module.css?mds-scoped
 var CountButton_module_default = { "button": "mds-CountButton__button", "tone-accent": "mds-CountButton__tone-accent", "tone-danger": "mds-CountButton__tone-danger", "glyph": "mds-CountButton__glyph" };
-var SPINNER_PX2 = 20;
+var SPINNER_PX = 20;
 function CountButton({
   icon,
   label,
@@ -371,7 +371,7 @@ function CountButton({
       className: cx(CountButton_module_default.button, active && CountButton_module_default[`tone-${tone}`], className),
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX2, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_module_default.glyph, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_module_default.glyph, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX, label: "", "aria-hidden": "true" }) : icon }),
         children != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : null
       ]
     }